npm - @react-md/core - Versions diffs - 1.0.0-next.2 → 1.0.0-next.3 - Mend

@react-md/core 1.0.0-next.2 → 1.0.0-next.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (752) hide show

package/dist/dialog/_dialog.scss CHANGED Viewed

@@ -20,8 +20,16 @@ $disable-footer-flex-end: false !default;
 $elevation: 16 !default;
 $z-index: utils.$temporary-element-z-index !default;
-$background-color: theme.theme-get-var(surface-color) !default;
-$color: theme.theme-get-var(text-primary-color) !default;
+$background-color: if(
+  theme.$disable-dark-elevation,
+  theme.theme-get-var(surface-color),
+  null
+) !default;
+$color: if(
+  theme.$disable-dark-elevation,
+  theme.theme-get-var(text-primary-color),
+  null
+) !default;
 $min-width: 17.5rem !default;
 $horizontal-margin: 2.5rem !default;
@@ -41,8 +49,6 @@ $content-padding: 1.5rem !default;
 $footer-padding: 0.5rem !default;
 $variables: (
-  background-color,
-  color,
   min-width,
   horizontal-margin,
   vertical-margin,
@@ -55,6 +61,7 @@ $variables: (
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "dialog");
   @if $fallback {
     @return var(#{$var}, #{$fallback});
   }
@@ -74,8 +81,6 @@ $variables: (
 @mixin variables {
   @if not $disable-everything {
-    @include set-var(background-color, $background-color);
-    @include set-var(color, $color);
     @include set-var(min-width, $min-width);
     @include set-var(horizontal-margin, $horizontal-margin);
     @include set-var(vertical-margin, $vertical-margin);
@@ -114,9 +119,9 @@ $variables: (
     .rmd-dialog {
       @include box-shadows.box-shadow($elevation);
-      @include use-var(background-color);
-      @include use-var(color);
+      background-color: $background-color;
+      color: $color;
       display: flex;
       flex-direction: column;
       max-height: 100%;
@@ -140,13 +145,21 @@ $variables: (
       }
       @if not $disable-focus-outline {
-        @include utils.keyboard-only {
-          &--outline:focus {
-            // Note: Do not use the `interaction-outline` mixin +
-            // `interaction.set-var(interaction.$focus-color)` like normal focus
-            // elements since it'll make all focusable children update with the
-            // outline color as well
-            outline: interaction.get-var(focus-color) solid
+        // Note: Do not use the `interaction-outline` mixin +
+        // `interaction.set-var(interaction.$focus-color)` like normal focus
+        // elements since it'll make all focusable children update with the
+        // outline color as well
+        @if utils.$disable-focus-visible {
+          @include utils.keyboard-only {
+            &--outline:focus {
+              outline: interaction.get-var(focus-color) solid
+                interaction.get-var(focus-width);
+            }
+          }
+        } @else {
+          &--outline:focus-visible {
+            outline: interaction.get-var(focus-color)
+              solid
               interaction.get-var(focus-width);
           }
         }

package/dist/divider/_divider.scss CHANGED Viewed

@@ -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;
@@ -22,7 +21,7 @@ $color: theme.get-default-color($light-theme-color, $dark-theme-color) !default;
 $variables: (
   size,
-  vertical-size,
+  border-size,
   color,
   spacing,
   vertical-spacing,
@@ -61,15 +60,17 @@ $variables: (
   }
 }
-@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 variables {
   @if not $disable-everything {
     @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);
@@ -79,7 +80,6 @@ $variables: (
     }
     @if not $disable-vertical {
-      @include set-var(vertical-size, $vertical-size);
       @include set-var(vertical-spacing, $vertical-spacing);
     }
   }
@@ -111,10 +111,9 @@ $variables: (
         &--vertical {
           @include border-style(left);
           @include use-var(height, max-size);
-          @include use-var(width, vertical-size);
+          @include use-var(width, size);
           @include use-var(margin, vertical-spacing);
-          border-bottom: 0;
           display: inline-block;
         }
       }

package/dist/draggable/useDraggable.d.ts CHANGED Viewed

@@ -217,6 +217,17 @@ export interface DraggableImplementation<E extends HTMLElement = HTMLElement> ex
      * Decrement the {@link value} by {@link DraggableOptions.step}.
      */
     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.
      */
@@ -225,29 +236,7 @@ export interface DraggableImplementation<E extends HTMLElement = HTMLElement> ex
      * 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;
     /**

package/dist/draggable/useDraggable.js CHANGED Viewed

@@ -7,10 +7,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 } from "./utils.js";
+import { isMouseDragStartEvent, isTouchDragStartEvent, updateDragPosition } from "./utils.js";
 const noop = ()=>{
 // do nothing
 };
@@ -31,11 +33,12 @@ const noop = ()=>{
     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,
@@ -43,6 +46,11 @@ const noop = ()=>{
         defaultValue: false
     });
     const isRTL = useDir().dir === "rtl";
+    const percentage = dragging && withinOffsetParent ? dragPercentage : getPercentage({
+        min,
+        max,
+        value
+    });
     const maximum = useCallback(()=>{
         setValue(max);
     }, [
@@ -415,6 +423,7 @@ const noop = ()=>{
         decrement,
         draggedOnce,
         draggableRef: ref,
+        percentage,
         dragPercentage,
         touchEventHandlers,
         mouseEventHandlers,

package/dist/draggable/useDraggable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/draggable/useDraggable.ts"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport type { HTMLAttributes, Ref, RefCallback } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport type {\n NonNullRef,\n UseStateInitializer,\n UseStateSetter,\n} from \"../types.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useEnsuredState } from \"../useEnsuredState.js\";\nimport { useHtmlClassName } from \"../useHtmlClassName.js\";\nimport { getRangeSteps } from \"../utils/getRangeSteps.js\";\nimport { nearest } from \"../utils/nearest.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\nimport {\n getDraggableDefaultValue,\n isMouseDragStartEvent,\n isTouchDragStartEvent,\n updateDragPosition,\n} from \"./utils.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/*\n @remarks \\@since 6.0.0\n /\nexport type DraggableTouchEventHandlers<E extends HTMLElement> = Pick<\n HTMLAttributes<E>,\n \"onTouchStart\" \| \"onTouchMove\"\n>;\n\n/\n @remarks \\@since 6.0.0\n /\nexport type DraggableMouseEventHandlers<E extends HTMLElement> = Pick<\n HTMLAttributes<E>,\n \"onMouseDown\" \| \"onMouseUp\" \| \"onMouseMove\"\n>;\n\n/\n @remarks \\@since 6.0.0\n /\nexport type DraggableKeyboardEventHandlers<E extends HTMLElement> = Pick<\n HTMLAttributes<E>,\n \"onKeyDown\"\n>;\n\n/\n @remarks \\@since 6.0.0\n /\nexport type DraggableEventHandlers<E extends HTMLElement> =\n DraggableTouchEventHandlers<E> &\n DraggableMouseEventHandlers<E> &\n DraggableKeyboardEventHandlers<E>;\n\n/\n @remarks \\@since 6.0.0\n /\nexport interface ControllableDraggableStateOptions {\n value?: number;\n setValue?: UseStateSetter<number>;\n defaultValue?: UseStateInitializer<number>;\n dragging?: boolean;\n setDragging?: UseStateSetter<boolean>;\n}\n\n/\n @remarks \\@since 6.0.0\n /\nexport interface BaseDraggableOptions<E extends HTMLElement>\n extends DraggableEventHandlers<E>,\n ControllableDraggableStateOptions {\n /\n An optional ref to merge with the returned\n * {@link DraggableImplementation.draggableRef}.\n /\n ref?: Ref<E>;\n\n /\n The minimum number of pixels allowed for the draggable element. This must\n * be a number greater than or equal to 0.\n \n When {@link withinOffsetParent} is set to `true`, this is the minimum value\n * allowed instead of pixels.\n /\n min: number;\n\n /\n The maximum number of pixels allowed for the draggable element. This must\n * be a number greater than the {@link min} and usually a number less than the\n * viewport size.\n \n When {@link withinOffsetParent} is set to `true`, this is the maximum value\n * allowed instead of pixels.\n /\n max: number;\n\n /\n The amount to increment or decrement the value with arrow keys.\n \n @defaultValue `1`\n /\n step?: number;\n\n /\n This was added to support range sliders where there are two (or more)\n * draggable elements within the same container element and their values\n * cannot pass each other. Without these overrides, the range would keep\n * changing as the other values change, so the drag percentage would be\n * incorrect.\n \n @example\n * Range Slider\n * ```ts\n * const min = 0;\n * const max = 100;\n * const minValue = 3;\n * const maxValue = 80;\n \n const minValueDraggable = useDraggable({\n * min,\n * max,\n * rangeMax: maxValue,\n * });\n * const maxValueDraggable = useDraggable({\n * min,\n * max,\n * rangeMin: minValue,\n * });\n * ```\n \n @defaultValue `min`\n /\n rangeMin?: number;\n\n /\n @see {@link rangeMin} for an explanation of this option.\n * @defaultValue `max`\n /\n rangeMax?: number;\n\n /\n Set this to `true` to enable dragging vertically instead of horizontally.\n \n @defaultValue `false`\n /\n vertical?: boolean;\n\n /\n The default drag behavior is to increase the value when:\n \n - dragging `\"right\"` and the writing direction is `\"ltr\"`\n * - dragging `\"left\"` and the writing direction is `\"rtl\"`\n * - dragging `\"upwards\"`\n \n When this is set to `true`, the value when increase when:\n \n - dragging `\"left\"` and the writing direction is `\"ltr\"`\n * - dragging `\"right\"` and the writing direction is `\"rtl\"`\n * - dragging `\"downwards\"`\n \n @defaultValue `false`\n /\n reversed?: boolean;\n\n /\n Set this to `true` to disable all drag behavior. This will still call any\n * of the provided {@link DraggableEventHandlers}.\n \n @defaultValue `false`\n /\n disabled?: boolean;\n\n /\n Set this to `true` if the dragging calculations should be to the\n * `draggableRef.current.offsetParent` instead of the entire window. The main\n * use case for this is sliders.\n \n @defaultValue `false`\n /\n withinOffsetParent?: boolean;\n\n /\n Set this to `true` to prevent the `document.documentElement` from gaining\n * the `.rmd-dragging` class names while dragging.\n \n This should normally remain as `false` to improve performance and prevent\n * other mouse events from firing while dragging.\n \n @defaultValue `false`\n /\n disableDraggingClassName?: boolean;\n\n /\n Set this to `true` to prevent the vertical or horizontal cursor from\n * appearing while dragging.\n \n @defaultValue `false`\n /\n disableDraggingCursorClassName?: boolean;\n}\n\n/\n @remarks \\@since 6.0.0\n /\nexport interface UncontrolledDraggableOptions {\n value?: never;\n setValue?: never;\n dragging?: never;\n setDragging?: never;\n}\n\n/\n @remarks \\@since 6.0.0\n /\nexport interface ControlledValueDraggableOptions {\n value: number;\n setValue: UseStateSetter<number>;\n defaultValue?: never;\n dragging?: never;\n setDragging?: never;\n}\n\n/\n @remarks \\@since 6.0.0\n /\nexport interface ControlledDraggingDraggableOptions {\n value?: never;\n setValue?: never;\n defaultValue?: never;\n dragging: boolean;\n setDragging: UseStateSetter<boolean>;\n}\n\n/\n @remarks \\@since 6.0.0\n /\nexport interface FullyControlledDraggableOptions {\n value: number;\n setValue: UseStateSetter<number>;\n dragging: boolean;\n setDragging: UseStateSetter<boolean>;\n}\n\n/\n @remarks \\@since 6.0.0\n /\nexport type DraggableStateOptions =\n \| UncontrolledDraggableOptions\n \| ControlledValueDraggableOptions\n \| ControlledDraggingDraggableOptions\n \| FullyControlledDraggableOptions;\n\n/\n @remarks \\@since 6.0.0\n /\nexport type DraggableOptions<E extends HTMLElement = HTMLElement> =\n BaseDraggableOptions<E> & DraggableStateOptions;\n\n/\n @remarks \\@since 6.0.0\n /\nexport interface DraggableImplementation<E extends HTMLElement = HTMLElement>\n extends Required<DraggableEventHandlers<E>> {\n mouseEventHandlers: Required<DraggableMouseEventHandlers<E>>;\n touchEventHandlers: Required<DraggableTouchEventHandlers<E>>;\n keyboardEventHandlers: Required<DraggableKeyboardEventHandlers<E>>;\n\n /\n Set the {@link value} to {@link DraggableOptions.min}.\n /\n minimum(): void;\n\n /\n Set the {@link value} to {@link DraggableOptions.max}.\n /\n maximum(): void;\n\n /\n Increment the {@link value} by {@link DraggableOptions.step}.\n /\n increment(): void;\n\n /\n Decrement the {@link value} by {@link DraggableOptions.step}.\n /\n decrement(): void;\n\n /\n A ref that Must be passed to the element that should be draggable.\n /\n draggableRef: RefCallback<E>;\n\n /\n This value will only update while dragging with a mouse or touch and should\n * be used for the positioning styles while dragging.\n \n @example\n * Inline Styles\n * ```ts\n * import { getPercentage, useDraggable } from \"@react-md/core\";\n \n const min = 120;\n * const max = 256;\n * const { value, dragging, dragPercentage } = useDraggable({\n * min,\n * max,\n * defaultValue: min,\n * });\n \n const percentage = dragging\n * ? dragPercentage\n * : getPercentage({ min, max, value });\n \n const style: CSSProperties = {\n * left: `${percentage * 100}%`<>\n * };\n \n // do stuff\n * ```\n /\n dragPercentage: number;\n\n /\n Flag to determine if the user has dragged at least once. Used internally\n * for manually persisting the value into local storage once the user has\n * stopped dragging.\n /\n draggedOnce: NonNullRef<boolean>;\n\n value: number;\n setValue: UseStateSetter<number>;\n dragging: boolean;\n setDragging: UseStateSetter<boolean>;\n}\n\n/\n This is most likely an internal only hook that provides the functionality for\n * dragging an element through mouse, touch, and keyboard events. The main use\n * cases so far for this hook are:\n * - window splitters\n * - sliders\n \n @remarks \\@since 6.0.0\n */\nexport function useDraggable<E extends HTMLElement>(\n options: DraggableOptions<E>\n): DraggableImplementation<E> {\n const {\n ref: propRef,\n min,\n max,\n rangeMin = min,\n rangeMax = max,\n step = 1,\n reversed = false,\n vertical = false,\n onKeyDown = noop,\n onMouseUp = noop,\n onMouseDown = noop,\n onMouseMove = noop,\n onTouchStart = noop,\n onTouchMove = noop,\n dragging: propDragging,\n setDragging: propSetDragging,\n value: propValue,\n setValue: propSetValue,\n defaultValue,\n withinOffsetParent = false,\n disabled = false,\n disableDraggingClassName = false,\n disableDraggingCursorClassName = disableDraggingClassName,\n } = options;\n\n const [nodeRef, ref] = useEnsuredRef(propRef);\n const isTouch = useUserInteractionMode() === \"touch\";\n const draggingRef = useRef(false);\n const [dragPercentage, setDragPercentage] = useState(min);\n const [value, setValue] = useEnsuredState({\n value: propValue,\n setValue: propSetValue,\n defaultValue: () => getDraggableDefaultValue({ min, max, defaultValue }),\n });\n const [dragging, setDragging] = useEnsuredState({\n value: propDragging,\n setValue: propSetDragging,\n defaultValue: false,\n });\n\n const isRTL = useDir().dir === \"rtl\";\n const maximum = useCallback(() => {\n setValue(max);\n }, [max, setValue]);\n const minimum = useCallback(() => {\n setValue(min);\n }, [min, setValue]);\n const increment = useCallback(() => {\n setValue((prevValue) => withinRange({ min, max, value: prevValue + step }));\n }, [max, min, setValue, step]);\n const decrement = useCallback(() => {\n setValue((prevValue) => withinRange({ min, max, value: prevValue - step }));\n }, [max, min, setValue, step]);\n\n const draggingClassName = dragging && !disableDraggingClassName;\n useHtmlClassName(cnb(draggingClassName && \"rmd-dragging\"));\n useHtmlClassName(\n cnb(\n !disableDraggingCursorClassName &&\n draggingClassName &&\n `rmd-dragging--${vertical ? \"v\" : \"h\"}`\n )\n );\n\n const draggedOnce = useRef(false);\n useEffect(() => {\n if (!dragging) {\n return;\n }\n\n draggedOnce.current = true;\n const updatePosition = (event: MouseEvent \| TouchEvent): void => {\n if (!event.cancelable) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n updateDragPosition({\n event,\n nodeRef,\n min,\n max,\n step,\n rangeMin,\n rangeMax,\n isRTL,\n isDragStart: false,\n reversed,\n vertical,\n setValue,\n setDragging,\n setDragPercentage,\n withinOffsetParent,\n });\n };\n\n const stopDragging = (event: MouseEvent \| TouchEvent): void => {\n updatePosition(event);\n draggingRef.current = false;\n setDragging(false);\n };\n\n const updateKey = isTouch ? \"touchmove\" : \"mousemove\";\n const stopKey = isTouch ? \"touchend\" : \"mouseup\";\n const passive = isTouch ? { passive: false } : undefined;\n\n window.addEventListener(updateKey, updatePosition, passive);\n window.addEventListener(stopKey, stopDragging);\n return () => {\n window.removeEventListener(updateKey, updatePosition);\n window.removeEventListener(stopKey, stopDragging);\n };\n }, [\n dragging,\n isRTL,\n isTouch,\n max,\n min,\n nodeRef,\n rangeMax,\n rangeMin,\n reversed,\n setDragging,\n setValue,\n step,\n vertical,\n withinOffsetParent,\n ]);\n\n const prevRange = useRef({ min, max, step });\n useEffect(() => {\n if (\n prevRange.current.min === min &&\n prevRange.current.max === max &&\n prevRange.current.step === step\n ) {\n return;\n }\n\n // ensure that if the `min`, `max`, or `step` value changes that the value\n // is updated as well. Without this, there will be a runtime error if the\n // value is not within the new range.\n prevRange.current = { min, max, step };\n setValue((prevValue) =>\n nearest({\n min,\n max,\n steps: getRangeSteps({ min, max, step }),\n value: prevValue,\n })\n );\n }, [max, min, setValue, step]);\n\n const mouseEventHandlers: Required<DraggableMouseEventHandlers<E>> = {\n onMouseDown: useCallback(\n (event) => {\n onMouseDown(event);\n if (disabled \|\| isTouch \|\| !isMouseDragStartEvent(event)) {\n return;\n }\n\n // dont' allow text to be selected\n event.preventDefault();\n updateDragPosition({\n isDragStart: true,\n event,\n nodeRef,\n min,\n max,\n step,\n rangeMin,\n rangeMax,\n isRTL,\n reversed,\n vertical,\n setValue,\n setDragging,\n setDragPercentage,\n withinOffsetParent,\n });\n\n // don't set dragging immediately so that click events can still happen\n draggingRef.current = true;\n },\n [\n disabled,\n isRTL,\n isTouch,\n max,\n min,\n nodeRef,\n onMouseDown,\n rangeMax,\n rangeMin,\n reversed,\n setDragging,\n setValue,\n step,\n vertical,\n withinOffsetParent,\n ]\n ),\n onMouseMove: useCallback(\n (event) => {\n onMouseMove(event);\n if (disabled \|\| isTouch \|\| !draggingRef.current \|\| dragging) {\n return;\n }\n\n updateDragPosition({\n isDragStart: true,\n event,\n nodeRef,\n min,\n max,\n step,\n rangeMin,\n rangeMax,\n isRTL,\n reversed,\n vertical,\n setValue,\n setDragging,\n setDragPercentage,\n withinOffsetParent,\n });\n setDragging(true);\n },\n [\n disabled,\n dragging,\n isRTL,\n isTouch,\n max,\n min,\n nodeRef,\n onMouseMove,\n rangeMax,\n rangeMin,\n reversed,\n setDragging,\n setValue,\n step,\n vertical,\n withinOffsetParent,\n ]\n ),\n onMouseUp: useCallback(\n (event) => {\n onMouseUp(event);\n if (disabled \|\| isTouch) {\n return;\n }\n\n draggingRef.current = false;\n },\n [disabled, isTouch, onMouseUp]\n ),\n };\n const keyboardEventHandlers: Required<DraggableKeyboardEventHandlers<E>> = {\n onKeyDown: useCallback(\n (event) => {\n onKeyDown(event);\n if (disabled) {\n return;\n }\n\n const decrementKey = vertical ? \"ArrowUp\" : \"ArrowLeft\";\n const incrementKey = vertical ? \"ArrowDown\" : \"ArrowRight\";\n\n switch (event.key) {\n case decrementKey:\n event.preventDefault();\n decrement();\n break;\n case incrementKey:\n event.preventDefault();\n increment();\n break;\n case \"Home\":\n event.preventDefault();\n minimum();\n break;\n case \"End\":\n event.preventDefault();\n maximum();\n break;\n }\n },\n [decrement, disabled, increment, maximum, minimum, onKeyDown, vertical]\n ),\n };\n\n // touch devices are a bit weird and cause issues since the \"start\" event is\n // also used for scrolling. If the user quickly grabs the draggable element\n // and drags vertically, most of the time it will try to scroll instead of\n // dragging the element. The workaround is to being the drag events\n // immediately on touchstart and disable scroll behavior for the page.\n //\n // There are also some issues with calling `event.preventDefault()` within\n // touch events even while `{ passive: false } is manually set, so need to\n // also attach a touchmove event.\n useScrollLock(isTouch && dragging);\n const touchEventHandlers: Required<DraggableTouchEventHandlers<E>> = {\n onTouchStart: useCallback(\n (event) => {\n onTouchStart(event);\n if (disabled \|\| !isTouchDragStartEvent(event)) {\n return;\n }\n\n draggingRef.current = true;\n updateDragPosition({\n isDragStart: true,\n event,\n nodeRef,\n min,\n max,\n step,\n rangeMin,\n rangeMax,\n isRTL,\n reversed,\n vertical,\n setValue,\n setDragging,\n setDragPercentage,\n withinOffsetParent,\n });\n },\n [\n disabled,\n isRTL,\n max,\n min,\n nodeRef,\n onTouchStart,\n rangeMax,\n rangeMin,\n reversed,\n setDragging,\n setValue,\n step,\n vertical,\n withinOffsetParent,\n ]\n ),\n onTouchMove: useCallback(\n (event) => {\n onTouchMove(event);\n if (disabled \|\| !draggingRef.current \|\| !event.cancelable) {\n return;\n }\n\n // prevent the document's touchmove event from also firing\n event.stopPropagation();\n updateDragPosition({\n isDragStart: true,\n event,\n nodeRef,\n min,\n max,\n step,\n rangeMin,\n rangeMax,\n isRTL,\n reversed,\n vertical,\n setValue,\n setDragging,\n setDragPercentage,\n withinOffsetParent,\n });\n },\n [\n disabled,\n isRTL,\n max,\n min,\n nodeRef,\n onTouchMove,\n rangeMax,\n rangeMin,\n reversed,\n setDragging,\n setValue,\n step,\n vertical,\n withinOffsetParent,\n ]\n ),\n };\n\n return {\n ...touchEventHandlers,\n ...mouseEventHandlers,\n ...keyboardEventHandlers,\n value,\n setValue,\n dragging,\n setDragging,\n maximum,\n minimum,\n increment,\n decrement,\n draggedOnce,\n draggableRef: ref,\n dragPercentage,\n touchEventHandlers,\n mouseEventHandlers,\n keyboardEventHandlers,\n };\n}\n"],"names":["cnb","useCallback","useEffect","useRef","useState","useUserInteractionMode","useScrollLock","useDir","useEnsuredRef","useEnsuredState","useHtmlClassName","getRangeSteps","nearest","withinRange","getDraggableDefaultValue","isMouseDragStartEvent","isTouchDragStartEvent","updateDragPosition","noop","useDraggable","options","ref","propRef","min","max","rangeMin","rangeMax","step","reversed","vertical","onKeyDown","onMouseUp","onMouseDown","onMouseMove","onTouchStart","onTouchMove","dragging","propDragging","setDragging","propSetDragging","value","propValue","setValue","propSetValue","defaultValue","withinOffsetParent","disabled","disableDraggingClassName","disableDraggingCursorClassName","nodeRef","isTouch","draggingRef","dragPercentage","setDragPercentage","isRTL","dir","maximum","minimum","increment","prevValue","decrement","draggingClassName","draggedOnce","current","updatePosition","event","cancelable","preventDefault","stopPropagation","isDragStart","stopDragging","updateKey","stopKey","passive","undefined","window","addEventListener","removeEventListener","prevRange","steps","mouseEventHandlers","keyboardEventHandlers","decrementKey","incrementKey","key","touchEventHandlers","draggableRef"],"mappings":"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ACAJ;gBACAe;gBACAR;YACF;QACF,GACA;YACEC;YACAQ;YACA9B;YACAD;YACA0B;YACAf;YACAR;YACAD;YACAG;YACAU;YACAI;YACAf;YACAE;YACAgB;SACD;QAEHV,aAAalC,YACX,CAACgE;YACC9B,YAAY8B;YACZ,IAAInB,YAAY,CAACK,YAAYY,OAAO,IAAI,CAACE,MAAMC,UAAU,EAAE;gBACzD;YACF;YAEA,0DAA0D;YAC1DD,MAAMG,eAAe;YACrBnD,mBAAmB;gBACjBoD,aAAa;gBACbJ;gBACAhB;gBACA1B;gBACAC;gBACAG;gBACAF;gBACAC;gBACA4B;gBACA1B;gBACAC;gBACAa;gBACAJ;gBACAe;gBACAR;YACF;QACF,GACA;YACEC;YACAQ;YACA9B;YACAD;YACA0B;YACAd;YACAT;YACAD;YACAG;YACAU;YACAI;YACAf;YACAE;YACAgB;SACD;IAEL;IAEA,OAAO;QACL,GAAGwC,kBAAkB;QACrB,GAAGL,kBAAkB;QACrB,GAAGC,qBAAqB;QACxBzC;QACAE;QACAN;QACAE;QACAkB;QACAC;QACAC;QACAE;QACAE;QACAwB,cAAcjE;QACd+B;QACAiC;QACAL;QACAC;IACF;AACF"}
1	+ {"version":3,"sources":["../../src/draggable/useDraggable.ts"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport type { HTMLAttributes, Ref, RefCallback } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport type {\n NonNullRef,\n UseStateInitializer,\n UseStateSetter,\n} from \"../types.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useEnsuredState } from \"../useEnsuredState.js\";\nimport { useHtmlClassName } from \"../useHtmlClassName.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport { getRangeDefaultValue } from \"../utils/getRangeDefaultValue.js\";\nimport { getRangeSteps } from \"../utils/getRangeSteps.js\";\nimport { nearest } from \"../utils/nearest.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\nimport {\n isMouseDragStartEvent,\n isTouchDragStartEvent,\n updateDragPosition,\n} from \"./utils.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/*\n @remarks \\@since 6.0.0\n /\nexport type DraggableTouchEventHandlers<E extends HTMLElement> = Pick<\n HTMLAttributes<E>,\n \"onTouchStart\" \| \"onTouchMove\"\n>;\n\n/\n @remarks \\@since 6.0.0\n /\nexport type DraggableMouseEventHandlers<E extends HTMLElement> = Pick<\n HTMLAttributes<E>,\n \"onMouseDown\" \| \"onMouseUp\" \| \"onMouseMove\"\n>;\n\n/\n @remarks \\@since 6.0.0\n /\nexport type DraggableKeyboardEventHandlers<E extends HTMLElement> = Pick<\n HTMLAttributes<E>,\n \"onKeyDown\"\n>;\n\n/\n @remarks \\@since 6.0.0\n /\nexport type DraggableEventHandlers<E extends HTMLElement> =\n DraggableTouchEventHandlers<E> &\n DraggableMouseEventHandlers<E> &\n DraggableKeyboardEventHandlers<E>;\n\n/\n @remarks \\@since 6.0.0\n /\nexport interface ControllableDraggableStateOptions {\n value?: number;\n setValue?: UseStateSetter<number>;\n defaultValue?: UseStateInitializer<number>;\n dragging?: boolean;\n setDragging?: UseStateSetter<boolean>;\n}\n\n/\n @remarks \\@since 6.0.0\n /\nexport interface BaseDraggableOptions<E extends HTMLElement>\n extends DraggableEventHandlers<E>,\n ControllableDraggableStateOptions {\n /\n An optional ref to merge with the returned\n * {@link DraggableImplementation.draggableRef}.\n /\n ref?: Ref<E>;\n\n /\n The minimum number of pixels allowed for the draggable element. This must\n * be a number greater than or equal to 0.\n \n When {@link withinOffsetParent} is set to `true`, this is the minimum value\n * allowed instead of pixels.\n /\n min: number;\n\n /\n The maximum number of pixels allowed for the draggable element. This must\n * be a number greater than the {@link min} and usually a number less than the\n * viewport size.\n \n When {@link withinOffsetParent} is set to `true`, this is the maximum value\n * allowed instead of pixels.\n /\n max: number;\n\n /\n The amount to increment or decrement the value with arrow keys.\n \n @defaultValue `1`\n /\n step?: number;\n\n /\n This was added to support range sliders where there are two (or more)\n * draggable elements within the same container element and their values\n * cannot pass each other. Without these overrides, the range would keep\n * changing as the other values change, so the drag percentage would be\n * incorrect.\n \n @example\n * Range Slider\n * ```ts\n * const min = 0;\n * const max = 100;\n * const minValue = 3;\n * const maxValue = 80;\n \n const minValueDraggable = useDraggable({\n * min,\n * max,\n * rangeMax: maxValue,\n * });\n * const maxValueDraggable = useDraggable({\n * min,\n * max,\n * rangeMin: minValue,\n * });\n * ```\n \n @defaultValue `min`\n /\n rangeMin?: number;\n\n /\n @see {@link rangeMin} for an explanation of this option.\n * @defaultValue `max`\n /\n rangeMax?: number;\n\n /\n Set this to `true` to enable dragging vertically instead of horizontally.\n \n @defaultValue `false`\n /\n vertical?: boolean;\n\n /\n The default drag behavior is to increase the value when:\n \n - dragging `\"right\"` and the writing direction is `\"ltr\"`\n * - dragging `\"left\"` and the writing direction is `\"rtl\"`\n * - dragging `\"upwards\"`\n \n When this is set to `true`, the value when increase when:\n \n - dragging `\"left\"` and the writing direction is `\"ltr\"`\n * - dragging `\"right\"` and the writing direction is `\"rtl\"`\n * - dragging `\"downwards\"`\n \n @defaultValue `false`\n /\n reversed?: boolean;\n\n /\n Set this to `true` to disable all drag behavior. This will still call any\n * of the provided {@link DraggableEventHandlers}.\n \n @defaultValue `false`\n /\n disabled?: boolean;\n\n /\n Set this to `true` if the dragging calculations should be to the\n * `draggableRef.current.offsetParent` instead of the entire window. The main\n * use case for this is sliders.\n \n @defaultValue `false`\n /\n withinOffsetParent?: boolean;\n\n /\n Set this to `true` to prevent the `document.documentElement` from gaining\n * the `.rmd-dragging` class names while dragging.\n \n This should normally remain as `false` to improve performance and prevent\n * other mouse events from firing while dragging.\n \n @defaultValue `false`\n /\n disableDraggingClassName?: boolean;\n\n /\n Set this to `true` to prevent the vertical or horizontal cursor from\n * appearing while dragging.\n \n @defaultValue `false`\n /\n disableDraggingCursorClassName?: boolean;\n}\n\n/\n @remarks \\@since 6.0.0\n /\nexport interface UncontrolledDraggableOptions {\n value?: never;\n setValue?: never;\n dragging?: never;\n setDragging?: never;\n}\n\n/\n @remarks \\@since 6.0.0\n /\nexport interface ControlledValueDraggableOptions {\n value: number;\n setValue: UseStateSetter<number>;\n defaultValue?: never;\n dragging?: never;\n setDragging?: never;\n}\n\n/\n @remarks \\@since 6.0.0\n /\nexport interface ControlledDraggingDraggableOptions {\n value?: never;\n setValue?: never;\n defaultValue?: never;\n dragging: boolean;\n setDragging: UseStateSetter<boolean>;\n}\n\n/\n @remarks \\@since 6.0.0\n /\nexport interface FullyControlledDraggableOptions {\n value: number;\n setValue: UseStateSetter<number>;\n dragging: boolean;\n setDragging: UseStateSetter<boolean>;\n}\n\n/\n @remarks \\@since 6.0.0\n /\nexport type DraggableStateOptions =\n \| UncontrolledDraggableOptions\n \| ControlledValueDraggableOptions\n \| ControlledDraggingDraggableOptions\n \| FullyControlledDraggableOptions;\n\n/\n @remarks \\@since 6.0.0\n /\nexport type DraggableOptions<E extends HTMLElement = HTMLElement> =\n BaseDraggableOptions<E> & DraggableStateOptions;\n\n/\n @remarks \\@since 6.0.0\n /\nexport interface DraggableImplementation<E extends HTMLElement = HTMLElement>\n extends Required<DraggableEventHandlers<E>> {\n mouseEventHandlers: Required<DraggableMouseEventHandlers<E>>;\n touchEventHandlers: Required<DraggableTouchEventHandlers<E>>;\n keyboardEventHandlers: Required<DraggableKeyboardEventHandlers<E>>;\n\n /\n Set the {@link value} to {@link DraggableOptions.min}.\n /\n minimum(): void;\n\n /\n Set the {@link value} to {@link DraggableOptions.max}.\n /\n maximum(): void;\n\n /\n Increment the {@link value} by {@link DraggableOptions.step}.\n /\n increment(): void;\n\n /\n Decrement the {@link value} by {@link DraggableOptions.step}.\n /\n decrement(): void;\n\n /\n THe current percentage the `value` is within the range.\n \n ```ts\n * const percentage =\n * dragging && withinOffsetParent\n * ? : dragPercentage\n * : getPercentage({ min, max, value });\n * ```\n /\n percentage: number;\n\n /\n A ref that Must be passed to the element that should be draggable.\n /\n draggableRef: RefCallback<E>;\n\n /\n This value will only update while dragging with a mouse or touch and should\n * be used for the positioning styles while dragging.\n \n Note: The {@Link percentage} will use this value while dragging.\n /\n dragPercentage: number;\n\n /\n Flag to determine if the user has dragged at least once. Used internally\n * for manually persisting the value into local storage once the user has\n * stopped dragging.\n /\n draggedOnce: NonNullRef<boolean>;\n\n value: number;\n setValue: UseStateSetter<number>;\n dragging: boolean;\n setDragging: UseStateSetter<boolean>;\n}\n\n/\n This is most likely an internal only hook that provides the functionality for\n * dragging an element through mouse, touch, and keyboard events. The main use\n * cases so far for this hook are:\n * - window splitters\n * - sliders\n \n @remarks \\@since 6.0.0\n */\nexport function useDraggable<E extends HTMLElement>(\n options: DraggableOptions<E>\n): DraggableImplementation<E> {\n const {\n ref: propRef,\n min,\n max,\n rangeMin = min,\n rangeMax = max,\n step = 1,\n reversed = false,\n vertical = false,\n onKeyDown = noop,\n onMouseUp = noop,\n onMouseDown = noop,\n onMouseMove = noop,\n onTouchStart = noop,\n onTouchMove = noop,\n dragging: propDragging,\n setDragging: propSetDragging,\n value: propValue,\n setValue: propSetValue,\n defaultValue,\n withinOffsetParent = false,\n disabled = false,\n disableDraggingClassName = false,\n disableDraggingCursorClassName = disableDraggingClassName,\n } = options;\n\n const [nodeRef, ref] = useEnsuredRef(propRef);\n const isTouch = useUserInteractionMode() === \"touch\";\n const draggingRef = useRef(false);\n const [dragPercentage, setDragPercentage] = useState(min);\n const [value, setValue] = useEnsuredState({\n value: propValue,\n setValue: propSetValue,\n defaultValue: getRangeDefaultValue({\n min,\n max,\n step: 1,\n defaultValue,\n }),\n });\n const [dragging, setDragging] = useEnsuredState({\n value: propDragging,\n setValue: propSetDragging,\n defaultValue: false,\n });\n\n const isRTL = useDir().dir === \"rtl\";\n const percentage =\n dragging && withinOffsetParent\n ? dragPercentage\n : getPercentage({ min, max, value });\n const maximum = useCallback(() => {\n setValue(max);\n }, [max, setValue]);\n const minimum = useCallback(() => {\n setValue(min);\n }, [min, setValue]);\n const increment = useCallback(() => {\n setValue((prevValue) => withinRange({ min, max, value: prevValue + step }));\n }, [max, min, setValue, step]);\n const decrement = useCallback(() => {\n setValue((prevValue) => withinRange({ min, max, value: prevValue - step }));\n }, [max, min, setValue, step]);\n\n const draggingClassName = dragging && !disableDraggingClassName;\n useHtmlClassName(cnb(draggingClassName && \"rmd-dragging\"));\n useHtmlClassName(\n cnb(\n !disableDraggingCursorClassName &&\n draggingClassName &&\n `rmd-dragging--${vertical ? \"v\" : \"h\"}`\n )\n );\n\n const draggedOnce = useRef(false);\n useEffect(() => {\n if (!dragging) {\n return;\n }\n\n draggedOnce.current = true;\n const updatePosition = (event: MouseEvent \| TouchEvent): void => {\n if (!event.cancelable) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n updateDragPosition({\n event,\n nodeRef,\n min,\n max,\n step,\n rangeMin,\n rangeMax,\n isRTL,\n isDragStart: false,\n reversed,\n vertical,\n setValue,\n setDragging,\n setDragPercentage,\n withinOffsetParent,\n });\n };\n\n const stopDragging = (event: MouseEvent \| TouchEvent): void => {\n updatePosition(event);\n draggingRef.current = false;\n setDragging(false);\n };\n\n const updateKey = isTouch ? \"touchmove\" : \"mousemove\";\n const stopKey = isTouch ? \"touchend\" : \"mouseup\";\n const passive = isTouch ? { passive: false } : undefined;\n\n window.addEventListener(updateKey, updatePosition, passive);\n window.addEventListener(stopKey, stopDragging);\n return () => {\n window.removeEventListener(updateKey, updatePosition);\n window.removeEventListener(stopKey, stopDragging);\n };\n }, [\n dragging,\n isRTL,\n isTouch,\n max,\n min,\n nodeRef,\n rangeMax,\n rangeMin,\n reversed,\n setDragging,\n setValue,\n step,\n vertical,\n withinOffsetParent,\n ]);\n\n const prevRange = useRef({ min, max, step });\n useEffect(() => {\n if (\n prevRange.current.min === min &&\n prevRange.current.max === max &&\n prevRange.current.step === step\n ) {\n return;\n }\n\n // ensure that if the `min`, `max`, or `step` value changes that the value\n // is updated as well. Without this, there will be a runtime error if the\n // value is not within the new range.\n prevRange.current = { min, max, step };\n setValue((prevValue) =>\n nearest({\n min,\n max,\n steps: getRangeSteps({ min, max, step }),\n value: prevValue,\n })\n );\n }, [max, min, setValue, step]);\n\n const mouseEventHandlers: Required<DraggableMouseEventHandlers<E>> = {\n onMouseDown: useCallback(\n (event) => {\n onMouseDown(event);\n if (disabled \|\| isTouch \|\| !isMouseDragStartEvent(event)) {\n return;\n }\n\n // dont' allow text to be selected\n event.preventDefault();\n updateDragPosition({\n isDragStart: true,\n event,\n nodeRef,\n min,\n max,\n step,\n rangeMin,\n rangeMax,\n isRTL,\n reversed,\n vertical,\n setValue,\n setDragging,\n setDragPercentage,\n withinOffsetParent,\n });\n\n // don't set dragging immediately so that click events can still happen\n draggingRef.current = true;\n },\n [\n disabled,\n isRTL,\n isTouch,\n max,\n min,\n nodeRef,\n onMouseDown,\n rangeMax,\n rangeMin,\n reversed,\n setDragging,\n setValue,\n step,\n vertical,\n withinOffsetParent,\n ]\n ),\n onMouseMove: useCallback(\n (event) => {\n onMouseMove(event);\n if (disabled \|\| isTouch \|\| !draggingRef.current \|\| dragging) {\n return;\n }\n\n updateDragPosition({\n isDragStart: true,\n event,\n nodeRef,\n min,\n max,\n step,\n rangeMin,\n rangeMax,\n isRTL,\n reversed,\n vertical,\n setValue,\n setDragging,\n setDragPercentage,\n withinOffsetParent,\n });\n setDragging(true);\n },\n [\n disabled,\n dragging,\n isRTL,\n isTouch,\n max,\n min,\n nodeRef,\n onMouseMove,\n rangeMax,\n rangeMin,\n reversed,\n setDragging,\n setValue,\n step,\n vertical,\n withinOffsetParent,\n ]\n ),\n onMouseUp: useCallback(\n (event) => {\n onMouseUp(event);\n if (disabled \|\| isTouch) {\n return;\n }\n\n draggingRef.current = false;\n },\n [disabled, isTouch, onMouseUp]\n ),\n };\n const keyboardEventHandlers: Required<DraggableKeyboardEventHandlers<E>> = {\n onKeyDown: useCallback(\n (event) => {\n onKeyDown(event);\n if (disabled) {\n return;\n }\n\n const decrementKey = vertical ? \"ArrowUp\" : \"ArrowLeft\";\n const incrementKey = vertical ? \"ArrowDown\" : \"ArrowRight\";\n\n switch (event.key) {\n case decrementKey:\n event.preventDefault();\n decrement();\n break;\n case incrementKey:\n event.preventDefault();\n increment();\n break;\n case \"Home\":\n event.preventDefault();\n minimum();\n break;\n case \"End\":\n event.preventDefault();\n maximum();\n break;\n }\n },\n [decrement, disabled, increment, maximum, minimum, onKeyDown, vertical]\n ),\n };\n\n // touch devices are a bit weird and cause issues since the \"start\" event is\n // also used for scrolling. If the user quickly grabs the draggable element\n // and drags vertically, most of the time it will try to scroll instead of\n // dragging the element. The workaround is to being the drag events\n // immediately on touchstart and disable scroll behavior for the page.\n //\n // There are also some issues with calling `event.preventDefault()` within\n // touch events even while `{ passive: false } is manually set, so need to\n // also attach a touchmove event.\n useScrollLock(isTouch && dragging);\n const touchEventHandlers: Required<DraggableTouchEventHandlers<E>> = {\n onTouchStart: useCallback(\n (event) => {\n onTouchStart(event);\n if (disabled \|\| !isTouchDragStartEvent(event)) {\n return;\n }\n\n draggingRef.current = true;\n updateDragPosition({\n isDragStart: true,\n event,\n nodeRef,\n min,\n max,\n step,\n rangeMin,\n rangeMax,\n isRTL,\n reversed,\n vertical,\n setValue,\n setDragging,\n setDragPercentage,\n withinOffsetParent,\n });\n },\n [\n disabled,\n isRTL,\n max,\n min,\n nodeRef,\n onTouchStart,\n rangeMax,\n rangeMin,\n reversed,\n setDragging,\n setValue,\n step,\n vertical,\n withinOffsetParent,\n ]\n ),\n onTouchMove: useCallback(\n (event) => {\n onTouchMove(event);\n if (disabled \|\| !draggingRef.current \|\| !event.cancelable) {\n return;\n }\n\n // prevent the document's touchmove event from also firing\n event.stopPropagation();\n updateDragPosition({\n isDragStart: true,\n event,\n nodeRef,\n min,\n max,\n step,\n rangeMin,\n rangeMax,\n isRTL,\n reversed,\n vertical,\n setValue,\n setDragging,\n setDragPercentage,\n withinOffsetParent,\n });\n },\n [\n disabled,\n isRTL,\n max,\n min,\n nodeRef,\n onTouchMove,\n rangeMax,\n rangeMin,\n reversed,\n setDragging,\n setValue,\n step,\n vertical,\n withinOffsetParent,\n ]\n ),\n };\n\n return {\n ...touchEventHandlers,\n ...mouseEventHandlers,\n ...keyboardEventHandlers,\n value,\n setValue,\n dragging,\n setDragging,\n maximum,\n minimum,\n increment,\n decrement,\n draggedOnce,\n draggableRef: ref,\n percentage,\n dragPercentage,\n touchEventHandlers,\n mouseEventHandlers,\n keyboardEventHandlers,\n };\n}\n"],"names":["cnb","useCallback","useEffect","useRef","useState","useUserInteractionMode","useScrollLock","useDir","useEnsuredRef","useEnsuredState","useHtmlClassName","getPercentage","getRangeDefaultValue","getRangeSteps","nearest","withinRange","isMouseDragStartEvent","isTouchDragStartEvent","updateDragPosition","noop","useDraggable","options","ref","propRef","min","max","rangeMin","rangeMax","step","reversed","vertical","onKeyDown","onMouseUp","onMouseDown","onMouseMove","onTouchStart","onTouchMove","dragging","propDragging","setDragging","propSetDragging","value","propValue","setValue","propSetValue","defaultValue","withinOffsetParent","disabled","disableDraggingClassName","disableDraggingCursorClassName","nodeRef","isTouch","draggingRef","dragPercentage","setDragPercentage","isRTL","dir","percentage","maximum","minimum","increment","prevValue","decrement","draggingClassName","draggedOnce","current","updatePosition","event","cancelable","preventDefault","stopPropagation","isDragStart","stopDragging","updateKey","stopKey","passive","undefined","window","addEventListener","removeEventListener","prevRange","steps","mouseEventHandlers","keyboardEventHandlers","decrementKey","incrementKey","key","touchEventHandlers","draggableRef"],"mappings":"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AAO,GAAG;YACtB/C,mBAAmB;gBACjBqD,aAAa;gBACbJ;gBACAjB;gBACA1B;gBACAC;gBACAG;gBACAF;gBACAC;gBACA4B;gBACA1B;gBACAC;gBACAa;gBACAJ;gBACAe;gBACAR;YACF;QACF,GACA;YACEC;YACAQ;YACA9B;YACAD;YACA0B;YACAf;YACAR;YACAD;YACAG;YACAU;YACAI;YACAf;YACAE;YACAgB;SACD;QAEHV,aAAanC,YACX,CAACkE;YACC/B,YAAY+B;YACZ,IAAIpB,YAAY,CAACK,YAAYa,OAAO,IAAI,CAACE,MAAMC,UAAU,EAAE;gBACzD;YACF;YAEA,0DAA0D;YAC1DD,MAAMG,eAAe;YACrBpD,mBAAmB;gBACjBqD,aAAa;gBACbJ;gBACAjB;gBACA1B;gBACAC;gBACAG;gBACAF;gBACAC;gBACA4B;gBACA1B;gBACAC;gBACAa;gBACAJ;gBACAe;gBACAR;YACF;QACF,GACA;YACEC;YACAQ;YACA9B;YACAD;YACA0B;YACAd;YACAT;YACAD;YACAG;YACAU;YACAI;YACAf;YACAE;YACAgB;SACD;IAEL;IAEA,OAAO;QACL,GAAGyC,kBAAkB;QACrB,GAAGL,kBAAkB;QACrB,GAAGC,qBAAqB;QACxB1C;QACAE;QACAN;QACAE;QACAmB;QACAC;QACAC;QACAE;QACAE;QACAwB,cAAclE;QACdmC;QACAJ;QACAkC;QACAL;QACAC;IACF;AACF"}

package/dist/draggable/utils.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
-import type { MouseEvent, RefObject, TouchEvent } from "react";
-import type { UseStateInitializer } from "../types.js";
-import type { ClientPositionEvent, ClientPositionOptions } from "../utils/getClientPosition.js";
+import { type MouseEvent, type RefObject, type TouchEvent } from "react";
+import { type ClientPositionEvent, type ClientPositionOptions } from "../utils/getClientPosition.js";
 /**
  * @internal
  */
@@ -28,6 +27,8 @@ interface RelativeDragPositionOptions extends DragPositionOptions {
     min: number;
     max: number;
     step: number;
+    rangeMin: number;
+    rangeMax: number;
 }
 /**
  * @internal
@@ -47,8 +48,6 @@ interface UpdateDragPositionOptions extends Omit<RelativeDragPositionOptions, "c
     event: ClientPositionEvent;
     nodeRef: RefObject<HTMLElement>;
     focus?: boolean;
-    rangeMin: number;
-    rangeMax: number;
     isDragStart: boolean;
     setValue(value: number): void;
     setDragging(dragging: boolean): void;
@@ -59,18 +58,6 @@ interface UpdateDragPositionOptions extends Omit<RelativeDragPositionOptions, "c
  * @internal
  */
 export declare const updateDragPosition: (options: UpdateDragPositionOptions) => void;
-/**
- * @internal
- */
-export interface DraggableDefaultValueOptions {
-    min: number;
-    max: number;
-    defaultValue: UseStateInitializer<number> | undefined;
-}
-/**
- * @internal
- */
-export declare function getDraggableDefaultValue(options: DraggableDefaultValueOptions): number;
 /**
  * @internal
  * @remarks \@since 6.0.0

package/dist/draggable/utils.js CHANGED Viewed

@@ -30,7 +30,7 @@ import { withinRange } from "../utils/withinRange.js";
 /**
  * @internal
  */ export const getRelativeDragPosition = (options)=>{
-    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;
     const containerPosition = vertical ? top + height : left;
@@ -41,13 +41,13 @@ import { withinRange } from "../utils/withinRange.js";
     if (isRTL && !vertical) {
         dragPercentage = 1 - dragPercentage;
     }
-    const range = max - min;
+    const range = rangeMax - rangeMin;
     const steps = getRangeSteps({
-        min,
-        max,
+        min: rangeMin,
+        max: rangeMax,
         step
     });
-    const value = dragPercentage * range + min;
+    const value = dragPercentage * range + rangeMin;
     const nextValue = nearest({
         min,
         max,
@@ -101,8 +101,10 @@ import { withinRange } from "../utils/withinRange.js";
         return;
     }
     const { value, dragPercentage } = getRelativeDragPosition({
-        min: rangeMin,
-        max: rangeMax,
+        min,
+        max,
+        rangeMin,
+        rangeMax,
         step,
         event,
         isRTL,
@@ -113,24 +115,6 @@ import { withinRange } from "../utils/withinRange.js";
     setValue(value);
     setDragPercentage(dragPercentage);
 };
-/**
- * @internal
- */ export function getDraggableDefaultValue(options) {
-    const { min, max, defaultValue } = options;
-    let value;
-    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/dist/draggable/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/draggable/utils.ts"],"sourcesContent":["import type { MouseEvent, RefObject, TouchEvent } from \"react\";\nimport type { UseStateInitializer } from \"../types.js\";\nimport type {\n ClientPositionEvent,\n ClientPositionOptions,\n} from \"../utils/getClientPosition.js\";\nimport { getClientPosition } from \"../utils/getClientPosition.js\";\nimport { getRangeSteps } from \"../utils/getRangeSteps.js\";\nimport { nearest } from \"../utils/nearest.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\n\n/*\n @internal\n /\nexport const isMouseDragStartEvent = (event: MouseEvent): boolean =>\n event.button === 0 &&\n !event.altKey &&\n !event.metaKey &&\n !event.ctrlKey &&\n !event.shiftKey;\n\n/\n @internal\n /\nexport const isTouchDragStartEvent = (event: TouchEvent): boolean =>\n event.changedTouches.length === 1;\n\n/\n @internal\n /\ninterface DragPositionOptions extends ClientPositionOptions {\n isRTL: boolean;\n reversed: boolean;\n container: Element;\n}\n\n/\n @internal\n /\nexport const getDragPosition = (options: DragPositionOptions): number => {\n const { isRTL, reversed, vertical, container } = options;\n\n const clientPosition = getClientPosition(options);\n const { left, right, top } = container.getBoundingClientRect();\n if (vertical) {\n if (reversed) {\n return window.innerHeight - clientPosition;\n }\n\n // added `Math.max` since the `top` will be a negative number if rendered\n // within a portal element like a dialog/sheet\n return clientPosition - Math.max(0, top);\n }\n\n if (reversed ? !isRTL : isRTL) {\n return right - clientPosition;\n }\n\n return clientPosition - left;\n};\n\n/\n @internal\n /\ninterface RelativeDragPositionOptions extends DragPositionOptions {\n min: number;\n max: number;\n step: number;\n}\n\n/\n @internal\n /\ninterface RelativeDragPosition {\n value: number;\n dragPercentage: number;\n}\n\n/\n @internal\n /\nexport const getRelativeDragPosition = (\n options: RelativeDragPositionOptions\n): RelativeDragPosition => {\n const { min, max, step, isRTL, vertical, container } = options;\n\n const { height, width, left, top } = container.getBoundingClientRect();\n const containerSize = vertical ? height : width;\n const containerPosition = vertical ? top + height : left;\n const clientPosition = getClientPosition(options);\n\n const position = vertical\n ? containerPosition - clientPosition\n : clientPosition - containerPosition;\n const distanceDragged = Math.min(Math.max(0, position), containerSize);\n let dragPercentage = distanceDragged / containerSize;\n if (isRTL && !vertical) {\n dragPercentage = 1 - dragPercentage;\n }\n\n const range = max - min;\n const steps = getRangeSteps({ min, max, step });\n const value = dragPercentage range + min;\n const nextValue = nearest({\n min,\n max,\n steps,\n range,\n value,\n });\n\n return {\n value: nextValue,\n dragPercentage,\n };\n};\n\n/*\n @internal\n /\ninterface UpdateDragPositionOptions\n extends Omit<RelativeDragPositionOptions, \"container\"> {\n event: ClientPositionEvent;\n nodeRef: RefObject<HTMLElement>;\n focus?: boolean;\n rangeMin: number;\n rangeMax: number;\n isDragStart: boolean;\n setValue(value: number): void;\n setDragging(dragging: boolean): void;\n setDragPercentage(value: number): void;\n withinOffsetParent: boolean;\n}\n\n/\n @internal\n /\nexport const updateDragPosition = (\n options: UpdateDragPositionOptions\n): void => {\n const {\n event,\n nodeRef,\n min,\n max,\n step,\n rangeMin,\n rangeMax,\n isRTL,\n reversed,\n vertical,\n isDragStart,\n setValue,\n setDragging,\n setDragPercentage,\n withinOffsetParent,\n } = options;\n\n const element = nodeRef.current;\n if (!element) {\n return;\n }\n\n if (isDragStart) {\n // need to focus so that Chromium based browsers allow drag events. this\n // really appeared while trying to create a DnD tree\n element.focus({ preventScroll: true });\n\n if (!withinOffsetParent && !(\"changedTouches\" in event)) {\n return;\n }\n\n // unlike the other flow, start dragging immediately so that you can trigger\n // a mousedown or touchstart event on the container element and drag until\n // the user lets go\n setDragging(true);\n }\n\n // firefox defaults to `document.body` while chrome will return `null`\n const container = element.offsetParent \|\| document.body;\n if (!withinOffsetParent) {\n const dragPosition = getDragPosition({\n event,\n isRTL,\n reversed,\n vertical,\n container,\n });\n const nextValue = withinRange({\n min,\n max,\n value: dragPosition,\n });\n setValue(nextValue);\n\n return;\n }\n\n const { value, dragPercentage } = getRelativeDragPosition({\n min: rangeMin,\n max: rangeMax,\n step,\n event,\n isRTL,\n reversed,\n vertical,\n container,\n });\n\n setValue(value);\n setDragPercentage(dragPercentage);\n};\n\n/\n @internal\n /\nexport interface DraggableDefaultValueOptions {\n min: number;\n max: number;\n defaultValue: UseStateInitializer<number> \| undefined;\n}\n\n/\n @internal\n /\nexport function getDraggableDefaultValue(\n options: DraggableDefaultValueOptions\n): number {\n const { min, max, defaultValue } = options;\n\n let value: number;\n if (typeof defaultValue === \"function\") {\n value = defaultValue();\n } else if (typeof defaultValue === \"undefined\") {\n value = Math.ceil((max - min) / 2);\n } else {\n value = defaultValue;\n }\n\n if (value < min \|\| value > max) {\n // TODO: Determine if this should just be a `Math.min(Math.max(min, value), max)` instead\n throw new Error(\n \"useDraggable default value must be between the min and max values\"\n );\n }\n\n return value;\n}\n\n/\n @internal\n * @remarks \\@since 6.0.0\n /\nexport interface DeserializeDraggableValueOptions {\n min: number;\n max: number;\n item: string;\n}\n\n/\n @internal\n * @remarks \\@since 6.0.0\n */\nexport function deserializeDraggableValue(\n options: DeserializeDraggableValueOptions\n): number {\n const { item, min, max } = options;\n\n const value = parseFloat(item);\n if (Number.isNaN(item)) {\n return min;\n }\n\n return Math.max(min, Math.min(max, value));\n}\n"],"names":["getClientPosition","getRangeSteps","nearest","withinRange","isMouseDragStartEvent","event","button","altKey","metaKey","ctrlKey","shiftKey","isTouchDragStartEvent","changedTouches","length","getDragPosition","options","isRTL","reversed","vertical","container","clientPosition","left","right","top","getBoundingClientRect","window","innerHeight","Math","max","getRelativeDragPosition","min","step","height","width","containerSize","containerPosition","position","distanceDragged","dragPercentage","range","steps","value","nextValue","updateDragPosition","nodeRef","rangeMin","rangeMax","isDragStart","setValue","setDragging","setDragPercentage","withinOffsetParent","element","current","focus","preventScroll","offsetParent","document","body","dragPosition","getDraggableDefaultValue","defaultValue","ceil","Error","deserializeDraggableValue","item","parseFloat","Number","isNaN"],"mappings":"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"}
1	+ {"version":3,"sources":["../../src/draggable/utils.ts"],"sourcesContent":["import { type MouseEvent, type RefObject, type TouchEvent } from \"react\";\nimport {\n getClientPosition,\n type ClientPositionEvent,\n type ClientPositionOptions,\n} from \"../utils/getClientPosition.js\";\nimport { getRangeSteps } from \"../utils/getRangeSteps.js\";\nimport { nearest } from \"../utils/nearest.js\";\nimport { withinRange } from \"../utils/withinRange.js\";\n\n/*\n @internal\n /\nexport const isMouseDragStartEvent = (event: MouseEvent): boolean =>\n event.button === 0 &&\n !event.altKey &&\n !event.metaKey &&\n !event.ctrlKey &&\n !event.shiftKey;\n\n/\n @internal\n /\nexport const isTouchDragStartEvent = (event: TouchEvent): boolean =>\n event.changedTouches.length === 1;\n\n/\n @internal\n /\ninterface DragPositionOptions extends ClientPositionOptions {\n isRTL: boolean;\n reversed: boolean;\n container: Element;\n}\n\n/\n @internal\n /\nexport const getDragPosition = (options: DragPositionOptions): number => {\n const { isRTL, reversed, vertical, container } = options;\n\n const clientPosition = getClientPosition(options);\n const { left, right, top } = container.getBoundingClientRect();\n if (vertical) {\n if (reversed) {\n return window.innerHeight - clientPosition;\n }\n\n // added `Math.max` since the `top` will be a negative number if rendered\n // within a portal element like a dialog/sheet\n return clientPosition - Math.max(0, top);\n }\n\n if (reversed ? !isRTL : isRTL) {\n return right - clientPosition;\n }\n\n return clientPosition - left;\n};\n\n/\n @internal\n /\ninterface RelativeDragPositionOptions extends DragPositionOptions {\n min: number;\n max: number;\n step: number;\n rangeMin: number;\n rangeMax: number;\n}\n\n/\n @internal\n /\ninterface RelativeDragPosition {\n value: number;\n dragPercentage: number;\n}\n\n/\n @internal\n /\nexport const getRelativeDragPosition = (\n options: RelativeDragPositionOptions\n): RelativeDragPosition => {\n const { min, max, rangeMin, rangeMax, step, isRTL, vertical, container } =\n options;\n\n const { height, width, left, top } = container.getBoundingClientRect();\n const containerSize = vertical ? height : width;\n const containerPosition = vertical ? top + height : left;\n const clientPosition = getClientPosition(options);\n\n const position = vertical\n ? containerPosition - clientPosition\n : clientPosition - containerPosition;\n const distanceDragged = Math.min(Math.max(0, position), containerSize);\n let dragPercentage = distanceDragged / containerSize;\n if (isRTL && !vertical) {\n dragPercentage = 1 - dragPercentage;\n }\n\n const range = rangeMax - rangeMin;\n const steps = getRangeSteps({ min: rangeMin, max: rangeMax, step });\n const value = dragPercentage range + rangeMin;\n const nextValue = nearest({\n min,\n max,\n steps,\n range,\n value,\n });\n\n return {\n value: nextValue,\n dragPercentage,\n };\n};\n\n/*\n @internal\n /\ninterface UpdateDragPositionOptions\n extends Omit<RelativeDragPositionOptions, \"container\"> {\n event: ClientPositionEvent;\n nodeRef: RefObject<HTMLElement>;\n focus?: boolean;\n isDragStart: boolean;\n setValue(value: number): void;\n setDragging(dragging: boolean): void;\n setDragPercentage(value: number): void;\n withinOffsetParent: boolean;\n}\n\n/\n @internal\n /\nexport const updateDragPosition = (\n options: UpdateDragPositionOptions\n): void => {\n const {\n event,\n nodeRef,\n min,\n max,\n step,\n rangeMin,\n rangeMax,\n isRTL,\n reversed,\n vertical,\n isDragStart,\n setValue,\n setDragging,\n setDragPercentage,\n withinOffsetParent,\n } = options;\n\n const element = nodeRef.current;\n if (!element) {\n return;\n }\n\n if (isDragStart) {\n // need to focus so that Chromium based browsers allow drag events. this\n // really appeared while trying to create a DnD tree\n element.focus({ preventScroll: true });\n\n if (!withinOffsetParent && !(\"changedTouches\" in event)) {\n return;\n }\n\n // unlike the other flow, start dragging immediately so that you can trigger\n // a mousedown or touchstart event on the container element and drag until\n // the user lets go\n setDragging(true);\n }\n\n // firefox defaults to `document.body` while chrome will return `null`\n const container = element.offsetParent \|\| document.body;\n if (!withinOffsetParent) {\n const dragPosition = getDragPosition({\n event,\n isRTL,\n reversed,\n vertical,\n container,\n });\n const nextValue = withinRange({\n min,\n max,\n value: dragPosition,\n });\n setValue(nextValue);\n\n return;\n }\n\n const { value, dragPercentage } = getRelativeDragPosition({\n min,\n max,\n rangeMin,\n rangeMax,\n step,\n event,\n isRTL,\n reversed,\n vertical,\n container,\n });\n\n setValue(value);\n setDragPercentage(dragPercentage);\n};\n\n/\n @internal\n * @remarks \\@since 6.0.0\n /\nexport interface DeserializeDraggableValueOptions {\n min: number;\n max: number;\n item: string;\n}\n\n/\n @internal\n * @remarks \\@since 6.0.0\n */\nexport function deserializeDraggableValue(\n options: DeserializeDraggableValueOptions\n): number {\n const { item, min, max } = options;\n\n const value = parseFloat(item);\n if (Number.isNaN(item)) {\n return min;\n }\n\n return Math.max(min, Math.min(max, value));\n}\n"],"names":["getClientPosition","getRangeSteps","nearest","withinRange","isMouseDragStartEvent","event","button","altKey","metaKey","ctrlKey","shiftKey","isTouchDragStartEvent","changedTouches","length","getDragPosition","options","isRTL","reversed","vertical","container","clientPosition","left","right","top","getBoundingClientRect","window","innerHeight","Math","max","getRelativeDragPosition","min","rangeMin","rangeMax","step","height","width","containerSize","containerPosition","position","distanceDragged","dragPercentage","range","steps","value","nextValue","updateDragPosition","nodeRef","isDragStart","setValue","setDragging","setDragPercentage","withinOffsetParent","element","current","focus","preventScroll","offsetParent","document","body","dragPosition","deserializeDraggableValue","item","parseFloat","Number","isNaN"],"mappings":"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"}

package/dist/expansion-panel/_expansion-panel.scss CHANGED Viewed

@@ -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,6 +13,9 @@ $button-spacing: icon.$spacing !default;
 $rotate-from: icon.$rotate-from !default;
 $rotate-to: icon.$rotate-to !default;
+$box-shadow-overlay-height: 10px !default;
+$box-shadow-overlay-bottom: -6px !default;
 @mixin styles {
   @if not $disable-everything {
     // does not require custom styles
@@ -28,23 +32,28 @@ $rotate-to: icon.$rotate-to !default;
         }
       }
-      // 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 {

package/dist/expansion-panel/useExpansionPanels.d.ts CHANGED Viewed

@@ -20,7 +20,7 @@ export interface ExpansionPanelHookOptions {
      *
      * @defaultValue `false`
      */
-    preventAllClosed?: boolean;
+    preventAllCollapsed?: boolean;
     /**
      * This is a convenience option to disable the expansion transition for all
      * panels.
@@ -29,7 +29,7 @@ export interface ExpansionPanelHookOptions {
      */
     disableTransition?: boolean;
     /**
-     * @defaultValue `preventAllClosed ? ["expansion-panel-" + useId() + "-1"] : []`
+     * @defaultValue `preventAllCollapsed ? ["expansion-panel-" + useId() + "-1"] : []`
      */
     defaultExpandedIds?: UseStateInitializer<string[]>;
     /**
@@ -58,7 +58,9 @@ export interface ExpansionPanelHookOptions {
     disableContentPadding?: boolean;
 }
 /** @remarks \@since 6.0.0 */
-export type ProvidedExpansionPanelProps = Pick<Required<ExpansionPanelProps>, "id" | "disabled" | "expanded" | "onExpandClick" | "disableTransition" | "disableContentPadding">;
+export type ProvidedExpansionPanelProps = Pick<Required<ExpansionPanelProps>, "disabled" | "expanded" | "onExpandClick" | "disableTransition" | "disableContentPadding"> & {
+    id?: string;
+};
 /**
  * @param indexOrPanelId - This should either be a DOM id to use for the panel
  * or the panel's index.