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

package/dist/utils/getRangeDefaultValue.js

@@ -1,23 +1,13 @@
-import { getRangeSteps } from "./getRangeSteps.js";
-import { nearest } from "./nearest.js";
+import { getMiddleOfRange } from "./getMiddleOfRange.js";
 /**
  * @internal
  * @remarks \@since 6.0.0
  */ export function getRangeDefaultValue(options) {
-    const { min, max, step, defaultValue } = options;
+    const { defaultValue } = options;
     if (typeof defaultValue !== "undefined") {
         return defaultValue;
     }
-    return ()=>nearest({
-            min,
-            max,
-            steps: getRangeSteps({
-                min,
-                max,
-                step
-            }),
-            value: (max - min) / 2
-        });
+    return ()=>getMiddleOfRange(options);
 }
 
 //# sourceMappingURL=getRangeDefaultValue.js.map

package/dist/utils/getRangeDefaultValue.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/getRangeDefaultValue.ts"],"sourcesContent":["import type { UseStateInitializer } from \"../types.js\";\nimport { getRangeSteps } from \"./getRangeSteps.js\";\nimport { nearest } from \"./nearest.js\";\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface RangeDefaultValueOptions {\n  min: number;\n  max: number;\n  step: number;\n  defaultValue?: UseStateInitializer<number>;\n}\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function getRangeDefaultValue(\n  options: RangeDefaultValueOptions\n): UseStateInitializer<number> {\n  const { min, max, step, defaultValue } = options;\n  if (typeof defaultValue !== \"undefined\") {\n    return defaultValue;\n  }\n\n  return () =>\n    nearest({\n      min,\n      max,\n      steps: getRangeSteps({ min, max, step }),\n      value: (max - min) / 2,\n    });\n}\n"],"names":["getRangeSteps","nearest","getRangeDefaultValue","options","min","max","step","defaultValue","steps","value"],"mappings":"AACA,SAASA,aAAa,QAAQ,qBAAqB;AACnD,SAASC,OAAO,QAAQ,eAAe;AAavC;;;CAGC,GACD,OAAO,SAASC,qBACdC,OAAiC;IAEjC,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,IAAI,EAAEC,YAAY,EAAE,GAAGJ;IACzC,IAAI,OAAOI,iBAAiB,aAAa;QACvC,OAAOA;IACT;IAEA,OAAO,IACLN,QAAQ;YACNG;YACAC;YACAG,OAAOR,cAAc;gBAAEI;gBAAKC;gBAAKC;YAAK;YACtCG,OAAO,AAACJ,CAAAA,MAAMD,GAAE,IAAK;QACvB;AACJ"}
+{"version":3,"sources":["../../src/utils/getRangeDefaultValue.ts"],"sourcesContent":["import { type UseStateInitializer } from \"../types.js\";\nimport {\n  getMiddleOfRange,\n  type GetMiddleOfRangeOptions,\n} from \"./getMiddleOfRange.js\";\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface RangeDefaultValueOptions extends GetMiddleOfRangeOptions {\n  defaultValue?: UseStateInitializer<number>;\n}\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function getRangeDefaultValue(\n  options: RangeDefaultValueOptions\n): UseStateInitializer<number> {\n  const { defaultValue } = options;\n  if (typeof defaultValue !== \"undefined\") {\n    return defaultValue;\n  }\n\n  return () => getMiddleOfRange(options);\n}\n"],"names":["getMiddleOfRange","getRangeDefaultValue","options","defaultValue"],"mappings":"AACA,SACEA,gBAAgB,QAEX,wBAAwB;AAU/B;;;CAGC,GACD,OAAO,SAASC,qBACdC,OAAiC;IAEjC,MAAM,EAAEC,YAAY,EAAE,GAAGD;IACzB,IAAI,OAAOC,iBAAiB,aAAa;QACvC,OAAOA;IACT;IAEA,OAAO,IAAMH,iBAAiBE;AAChC"}

package/dist/utils/getRangeSteps.d.ts

@@ -16,4 +16,4 @@ export interface RangeStepsOptions {
  * \@since 6.0.0 Converted to using an object instead of multiple arguments and
  * renamed from `getSteps` to `getRangeSteps`.
  */
-export declare const getRangeSteps: (options: RangeStepsOptions) => number;
+export declare function getRangeSteps(options: RangeStepsOptions): number;

package/dist/utils/getRangeSteps.js

@@ -9,9 +9,9 @@
  * \@since 2.5.0
  * \@since 6.0.0 Converted to using an object instead of multiple arguments and
  * renamed from `getSteps` to `getRangeSteps`.
- */ export const getRangeSteps = (options)=>{
+ */ export function getRangeSteps(options) {
     const { min, max, step } = options;
     return Math.abs(max - min) / step;
-};
+}
 
 //# sourceMappingURL=getRangeSteps.js.map

package/dist/utils/getRangeSteps.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/getRangeSteps.ts"],"sourcesContent":["/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface RangeStepsOptions {\n  min: number;\n  max: number;\n  step: number;\n}\n\n/**\n * Gets the number of steps in the allowed range of values.\n *\n * @internal\n * @remarks\n * \\@since 2.5.0\n * \\@since 6.0.0 Converted to using an object instead of multiple arguments and\n * renamed from `getSteps` to `getRangeSteps`.\n */\nexport const getRangeSteps = (options: RangeStepsOptions): number => {\n  const { min, max, step } = options;\n\n  return Math.abs(max - min) / step;\n};\n"],"names":["getRangeSteps","options","min","max","step","Math","abs"],"mappings":"AAAA;;;CAGC,GAOD;;;;;;;;CAQC,GACD,OAAO,MAAMA,gBAAgB,CAACC;IAC5B,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGH;IAE3B,OAAOI,KAAKC,GAAG,CAACH,MAAMD,OAAOE;AAC/B,EAAE"}
+{"version":3,"sources":["../../src/utils/getRangeSteps.ts"],"sourcesContent":["/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface RangeStepsOptions {\n  min: number;\n  max: number;\n  step: number;\n}\n\n/**\n * Gets the number of steps in the allowed range of values.\n *\n * @internal\n * @remarks\n * \\@since 2.5.0\n * \\@since 6.0.0 Converted to using an object instead of multiple arguments and\n * renamed from `getSteps` to `getRangeSteps`.\n */\nexport function getRangeSteps(options: RangeStepsOptions): number {\n  const { min, max, step } = options;\n\n  return Math.abs(max - min) / step;\n}\n"],"names":["getRangeSteps","options","min","max","step","Math","abs"],"mappings":"AAAA;;;CAGC,GAOD;;;;;;;;CAQC,GACD,OAAO,SAASA,cAAcC,OAA0B;IACtD,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGH;IAE3B,OAAOI,KAAKC,GAAG,CAACH,MAAMD,OAAOE;AAC/B"}

package/dist/utils/nearest.js

@@ -20,7 +20,7 @@
     // precision gets weird:
     // 0.28 * 100 === 28.000000000000004
     const step = range / steps;
-    const decimals = Number.isInteger(step) ? range % steps : step.toString().split(".")[1].length;
+    const decimals = Number.isInteger(step) ? range % steps : `${step}`.split(".")[1].length;
     return Math.min(max, Math.max(min, parseFloat((zeroToOne * range + min).toFixed(decimals))));
 }
 

package/dist/utils/nearest.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/nearest.ts"],"sourcesContent":["/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface NearestOptions {\n  min: number;\n  max: number;\n  steps: number;\n  value: number;\n\n  /** @defaultValue `max - min` */\n  range?: number;\n}\n\n/**\n * Rounds a number to the nearest step within a min/max range.\n *\n * @see https://stackoverflow.com/a/13635455\n * @returns the value rounded to the nearest step in the min/max range\n * @remarks\n * \\@since 2.5.0 Added the `range` param\n * \\@since 6.0.0 Converted to using an object instead of multiple arguments.\n */\nexport function nearest(options: NearestOptions): number {\n  const { min, max, steps, value, range = max - min } = options;\n  if (min === max) {\n    return max;\n  }\n\n  const rounded = Math.round(((value - min) * steps) / range) / steps;\n  const zeroToOne = Math.min(Math.max(rounded, 0), 1);\n\n  // have to calculate the number of allowed decimal places since decimal\n  // precision gets weird:\n  // 0.28 * 100 === 28.000000000000004\n  const step = range / steps;\n  const decimals = Number.isInteger(step)\n    ? range % steps\n    : step.toString().split(\".\")[1].length;\n\n  return Math.min(\n    max,\n    Math.max(min, parseFloat((zeroToOne * range + min).toFixed(decimals)))\n  );\n}\n"],"names":["nearest","options","min","max","steps","value","range","rounded","Math","round","zeroToOne","step","decimals","Number","isInteger","toString","split","length","parseFloat","toFixed"],"mappings":"AAAA;;;CAGC,GAWD;;;;;;;;CAQC,GACD,OAAO,SAASA,QAAQC,OAAuB;IAC7C,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,KAAK,EAAEC,KAAK,EAAEC,QAAQH,MAAMD,GAAG,EAAE,GAAGD;IACtD,IAAIC,QAAQC,KAAK;QACf,OAAOA;IACT;IAEA,MAAMI,UAAUC,KAAKC,KAAK,CAAC,AAAEJ,CAAAA,QAAQH,GAAE,IAAKE,QAASE,SAASF;IAC9D,MAAMM,YAAYF,KAAKN,GAAG,CAACM,KAAKL,GAAG,CAACI,SAAS,IAAI;IAEjD,uEAAuE;IACvE,wBAAwB;IACxB,oCAAoC;IACpC,MAAMI,OAAOL,QAAQF;IACrB,MAAMQ,WAAWC,OAAOC,SAAS,CAACH,QAC9BL,QAAQF,QACRO,KAAKI,QAAQ,GAAGC,KAAK,CAAC,IAAI,CAAC,EAAE,CAACC,MAAM;IAExC,OAAOT,KAAKN,GAAG,CACbC,KACAK,KAAKL,GAAG,CAACD,KAAKgB,WAAW,AAACR,CAAAA,YAAYJ,QAAQJ,GAAE,EAAGiB,OAAO,CAACP;AAE/D"}
+{"version":3,"sources":["../../src/utils/nearest.ts"],"sourcesContent":["/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface NearestOptions {\n  min: number;\n  max: number;\n  steps: number;\n  value: number;\n\n  /** @defaultValue `max - min` */\n  range?: number;\n}\n\n/**\n * Rounds a number to the nearest step within a min/max range.\n *\n * @see https://stackoverflow.com/a/13635455\n * @returns the value rounded to the nearest step in the min/max range\n * @remarks\n * \\@since 2.5.0 Added the `range` param\n * \\@since 6.0.0 Converted to using an object instead of multiple arguments.\n */\nexport function nearest(options: NearestOptions): number {\n  const { min, max, steps, value, range = max - min } = options;\n  if (min === max) {\n    return max;\n  }\n\n  const rounded = Math.round(((value - min) * steps) / range) / steps;\n  const zeroToOne = Math.min(Math.max(rounded, 0), 1);\n\n  // have to calculate the number of allowed decimal places since decimal\n  // precision gets weird:\n  // 0.28 * 100 === 28.000000000000004\n  const step = range / steps;\n  const decimals = Number.isInteger(step)\n    ? range % steps\n    : `${step}`.split(\".\")[1].length;\n\n  return Math.min(\n    max,\n    Math.max(min, parseFloat((zeroToOne * range + min).toFixed(decimals)))\n  );\n}\n"],"names":["nearest","options","min","max","steps","value","range","rounded","Math","round","zeroToOne","step","decimals","Number","isInteger","split","length","parseFloat","toFixed"],"mappings":"AAAA;;;CAGC,GAWD;;;;;;;;CAQC,GACD,OAAO,SAASA,QAAQC,OAAuB;IAC7C,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,KAAK,EAAEC,KAAK,EAAEC,QAAQH,MAAMD,GAAG,EAAE,GAAGD;IACtD,IAAIC,QAAQC,KAAK;QACf,OAAOA;IACT;IAEA,MAAMI,UAAUC,KAAKC,KAAK,CAAC,AAAEJ,CAAAA,QAAQH,GAAE,IAAKE,QAASE,SAASF;IAC9D,MAAMM,YAAYF,KAAKN,GAAG,CAACM,KAAKL,GAAG,CAACI,SAAS,IAAI;IAEjD,uEAAuE;IACvE,wBAAwB;IACxB,oCAAoC;IACpC,MAAMI,OAAOL,QAAQF;IACrB,MAAMQ,WAAWC,OAAOC,SAAS,CAACH,QAC9BL,QAAQF,QACR,CAAC,EAAEO,KAAK,CAAC,CAACI,KAAK,CAAC,IAAI,CAAC,EAAE,CAACC,MAAM;IAElC,OAAOR,KAAKN,GAAG,CACbC,KACAK,KAAKL,GAAG,CAACD,KAAKe,WAAW,AAACP,CAAAA,YAAYJ,QAAQJ,GAAE,EAAGgB,OAAO,CAACN;AAE/D"}

package/dist/window-splitter/_window-splitter.scss

@@ -9,43 +9,17 @@ $disable-vertical: false !default;
 $disable-reversed: false !default;
 $disable-absolute-position: false !default;
 
-$window-splitter-size: 1rem !default;
-$window-splitter-background-size: 0.25rem !default;
-$window-splitter-background-color: interaction.get-var(focus-color) !default;
-$window-splitter-z-index: 30 !default;
-
-$var-lookup: (
-  top: (
-    var: --rmd-window-splitter-top,
-    value: 0,
-  ),
-  right: (
-    var: --rmd-window-splitter-right,
-    value: 0,
-  ),
-  bottom: (
-    var: --rmd-window-splitter-bottom,
-    value: 0,
-  ),
-  left: (
-    var: --rmd-window-splitter-left,
-    value: 0,
-  ),
-  opacity: (
-    var: --rmd-window-splitter-opacity,
-    value: 0,
-  ),
-  position: (
-    var: --rmd-window-splitter-position,
-    value: 0,
-  ),
-);
+$size: 1rem !default;
+$background-size: 0.25rem !default;
+$background-color: interaction.get-var(focus-color) !default;
+$z-index: 30 !default;
 
-@function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "window-splitter var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
+$variables: (top, right, bottom, left, opacity, position);
 
+@function get-var($name, $fallback: null) {
+  $var: utils.get-var-name($variables, $name, "window-splitter");
+  // window-splitter variables don't make much sense to set globally
+  $value: if($fallback, $fallback, 0);
   @if $value {
     @return var(#{$var}, #{$value});
   }
@@ -54,118 +28,115 @@ $var-lookup: (
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "window-splitter var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "window-splitter")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    .rmd-window-splitter {
-      @include use-var(opacity);
-
-      background-color: transparent;
-      border: 0;
-      outline-style: none;
-      padding: 0;
-      position: fixed;
-      transition: opacity transition.$linear-duration;
-      z-index: $window-splitter-z-index;
-
-      &::after {
-        background-color: $window-splitter-background-color;
-        content: "";
-        inset: 0;
-        position: absolute;
-      }
-
-      &:hover {
-        @include set-var(opacity, 1);
-      }
-
-      @include utils.keyboard-only {
-        &:focus {
+    @include utils.optional-layer(window-splitter, $disable-layer) {
+      .rmd-window-splitter {
+        @include use-var(opacity);
+        @include utils.mouse-hover {
           @include set-var(opacity, 1);
         }
-      }
+        @include utils.keyboard-only {
+          // Do not use `:focus-visible` here since since it'll still be active
+          // after dragging with a mouse until the user clicks something else. The
+          // `--dragging` state handles that part
+          &:focus {
+            @include set-var(opacity, 1);
+          }
+        }
 
-      @include utils.touch-only {
-        &:hover {
-          @include set-var(opacity, 0);
+        background-color: transparent;
+        border: 0;
+        outline-style: none;
+        padding: 0;
+        position: fixed;
+        transition: opacity transition.$linear-duration;
+        z-index: $z-index;
+
+        &::after {
+          background-color: $background-color;
+          content: "";
+          inset: 0;
+          position: absolute;
         }
-      }
 
-      @if not $disable-horizontal {
-        &--h {
-          @include utils.auto-rtl(left, get-var(position));
-          @include use-var(bottom);
-          @include use-var(top);
+        @if not $disable-horizontal {
+          &--h {
+            @include utils.auto-rtl(left, get-var(position));
+            @include use-var(bottom);
+            @include use-var(top);
 
-          cursor: col-resize;
-          width: $window-splitter-size;
+            cursor: col-resize;
+            width: $size;
 
-          &::after {
-            width: $window-splitter-background-size;
+            &::after {
+              width: $background-size;
+            }
           }
-        }
 
-        @if not $disable-reversed {
-          &--hr {
-            @include utils.auto-rtl(right, get-var(position));
+          @if not $disable-reversed {
+            &--hr {
+              @include utils.auto-rtl(right, get-var(position));
 
-            left: auto;
+              left: auto;
 
-            &::after {
-              @include utils.auto-rtl(margin-left, auto);
+              &::after {
+                @include utils.auto-rtl(margin-left, auto);
+              }
             }
           }
         }
-      }
 
-      @if not $disable-vertical {
-        &--v {
-          @include use-var(left);
-          @include use-var(right);
-          @include use-var(top, position);
+        @if not $disable-vertical {
+          &--v {
+            @include use-var(left);
+            @include use-var(right);
+            @include use-var(top, position);
 
-          cursor: row-resize;
-          height: $window-splitter-size;
-          width: 100%;
+            cursor: row-resize;
+            height: $size;
+            width: 100%;
 
-          &::after {
-            height: $window-splitter-background-size;
+            &::after {
+              height: $background-size;
+            }
           }
-        }
 
-        @if not $disable-reversed {
-          &--vr {
-            @include use-var(bottom, position);
+          @if not $disable-reversed {
+            &--vr {
+              @include use-var(bottom, position);
 
-            top: auto;
+              top: auto;
 
-            &::after {
-              top: calc(100% - $window-splitter-background-size);
+              &::after {
+                top: calc(100% - $background-size);
+              }
             }
           }
         }
-      }
 
-      @if not $disable-absolute-position {
-        &--a {
-          position: absolute;
+        @if not $disable-absolute-position {
+          &--a {
+            position: absolute;
+          }
         }
-      }
 
-      &--dragging {
-        @include set-var(opacity, 1);
+        &--dragging {
+          @include set-var(opacity, 1);
 
-        // set to important so that the `.rmd-dragging` styles do not affect
-        // window splitter
-        pointer-events: auto !important;
+          // set to important so that the `.rmd-dragging` styles do not affect
+          // window splitter
+          pointer-events: auto !important;
+        }
       }
     }
   }

package/dist/window-splitter/useWindowSplitter.d.ts

@@ -1,5 +1,5 @@
-import type { Ref, RefCallback } from "react";
-import type { BaseDraggableOptions, DraggableImplementation, DraggableKeyboardEventHandlers, DraggableMouseEventHandlers, DraggableStateOptions, DraggableTouchEventHandlers } from "../draggable/useDraggable.js";
+import { type Ref, type RefCallback } from "react";
+import { type BaseDraggableOptions, type DraggableImplementation, type DraggableKeyboardEventHandlers, type DraggableMouseEventHandlers, type DraggableStateOptions, type DraggableTouchEventHandlers } from "../draggable/useDraggable.js";
 declare module "react" {
     interface CSSProperties {
         "--rmd-window-splitter-top"?: number | string;
@@ -51,9 +51,7 @@ export interface WindowSplitterImplementation<E extends HTMLElement = HTMLButton
     splitterProps: WindowSplitterWidgetProps<E>;
 }
 /**
- * You are most likely looking for the `useWindowSplitter` or
- * `useLocalStorageWindowSplitter` hooks instead since this is a low-level hook
- * to implement those two versions.
+ * Used to control the state for the `WindowSplitter` component.
  *
  * @example
  * Custom Implementation

package/dist/window-splitter/useWindowSplitter.js

@@ -1,11 +1,8 @@
 "use client";
 import { useDraggable } from "../draggable/useDraggable.js";
 import { useEnsuredId } from "../useEnsuredId.js";
-import { getPercentage } from "../utils/getPercentage.js";
 /**
- * You are most likely looking for the `useWindowSplitter` or
- * `useLocalStorageWindowSplitter` hooks instead since this is a low-level hook
- * to implement those two versions.
+ * Used to control the state for the `WindowSplitter` component.
  *
  * @example
  * Custom Implementation
@@ -37,15 +34,10 @@ import { getPercentage } from "../utils/getPercentage.js";
  *
  * @remarks \@since 6.0.0
  */ export function useWindowSplitter(options) {
-    const { id: propId, min, max, reversed = false, vertical, withinOffsetParent } = options;
+    const { id: propId, reversed = false, vertical } = options;
     const id = useEnsuredId(propId, "splitter");
     const draggableImplementation = useDraggable(options);
-    const { value, dragging, draggableRef, dragPercentage, mouseEventHandlers, keyboardEventHandlers } = draggableImplementation;
-    const percentage = dragging && withinOffsetParent ? dragPercentage : getPercentage({
-        min,
-        max,
-        value
-    });
+    const { dragging, percentage, draggableRef, mouseEventHandlers, keyboardEventHandlers } = draggableImplementation;
     return {
         ...draggableImplementation,
         splitterProps: {

package/dist/window-splitter/useWindowSplitter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/window-splitter/useWindowSplitter.ts"],"sourcesContent":["\"use client\";\nimport type { Ref, RefCallback } from \"react\";\nimport type {\n  BaseDraggableOptions,\n  DraggableImplementation,\n  DraggableKeyboardEventHandlers,\n  DraggableMouseEventHandlers,\n  DraggableStateOptions,\n  DraggableTouchEventHandlers,\n} from \"../draggable/useDraggable.js\";\nimport { useDraggable } from \"../draggable/useDraggable.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-window-splitter-top\"?: number | string;\n    \"--rmd-window-splitter-right\"?: number | string;\n    \"--rmd-window-splitter-bottom\"?: number | string;\n    \"--rmd-window-splitter-left\"?: number | string;\n    \"--rmd-window-splitter-opacity\"?: number | string;\n    \"--rmd-window-splitter-position\"?: number | string;\n  }\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface BaseWindowSplitterOptions<\n  E extends HTMLElement = HTMLButtonElement,\n> extends Omit<BaseDraggableOptions<E>, keyof DraggableTouchEventHandlers<E>> {\n  /**\n   * An optional id to use for the window splitter.\n   *\n   * @defaultValue `\"window-splitter-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * An optional ref for the window splitter element. This will be merged into\n   * the {@link WindowSplitterWidgetProps.ref}.\n   */\n  ref?: Ref<E>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type WindowSplitterOptions<E extends HTMLElement = HTMLButtonElement> =\n  BaseWindowSplitterOptions<E> & DraggableStateOptions;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface WindowSplitterWidgetProps<E extends HTMLElement>\n  extends Required<DraggableMouseEventHandlers<E>>,\n    Required<DraggableKeyboardEventHandlers<E>> {\n  \"aria-orientation\": \"vertical\" | undefined;\n  \"aria-valuenow\": number;\n  \"aria-valuemin\": number;\n  \"aria-valuemax\": number;\n  id: string;\n  ref: RefCallback<E>;\n  role: \"separator\";\n  reversed: boolean;\n  dragging: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface WindowSplitterImplementation<\n  E extends HTMLElement = HTMLButtonElement,\n> extends DraggableImplementation<E> {\n  splitterProps: WindowSplitterWidgetProps<E>;\n}\n\n/**\n * You are most likely looking for the `useWindowSplitter` or\n * `useLocalStorageWindowSplitter` hooks instead since this is a low-level hook\n * to implement those two versions.\n *\n * @example\n * Custom Implementation\n * ```tsx\n * import { useWindowSplitter, WindowSplitterImplementation } from \"@react-md/core\";\n * import { useState } from \"react\";\n *\n * // this is pretty much the `useWindowSplitter` implementation\n * export function useMyCustomWindowSplitter(): WindowSplitterImplementation {\n *   const [dragging, setDragging] = useState(false);\n *   const [value, setValue] = useState(0);\n *   const splitter = useWindowSplitter({\n *     min: 0,\n *     max: 100,\n *     value,\n *     setValue,\n *     dragging,\n *     setDragging,\n *   });\n *\n *   return {\n *     ...splitter,\n *     value,\n *     setValue,\n *     dragging,\n *   }\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useWindowSplitter<E extends HTMLElement = HTMLButtonElement>(\n  options: WindowSplitterOptions<E>\n): WindowSplitterImplementation<E> {\n  const {\n    id: propId,\n    min,\n    max,\n    reversed = false,\n    vertical,\n    withinOffsetParent,\n  } = options;\n\n  const id = useEnsuredId(propId, \"splitter\");\n  const draggableImplementation = useDraggable(options);\n  const {\n    value,\n    dragging,\n    draggableRef,\n    dragPercentage,\n    mouseEventHandlers,\n    keyboardEventHandlers,\n  } = draggableImplementation;\n\n  const percentage =\n    dragging && withinOffsetParent\n      ? dragPercentage\n      : getPercentage({ min, max, value });\n\n  return {\n    ...draggableImplementation,\n    splitterProps: {\n      \"aria-orientation\": vertical ? \"vertical\" : undefined,\n      \"aria-valuenow\": Math.ceil(percentage * 100),\n      \"aria-valuemin\": 0,\n      \"aria-valuemax\": 100,\n      id,\n      ref: draggableRef,\n      role: \"separator\",\n      dragging,\n      reversed,\n      ...mouseEventHandlers,\n      ...keyboardEventHandlers,\n    },\n  };\n}\n"],"names":["useDraggable","useEnsuredId","getPercentage","useWindowSplitter","options","id","propId","min","max","reversed","vertical","withinOffsetParent","draggableImplementation","value","dragging","draggableRef","dragPercentage","mouseEventHandlers","keyboardEventHandlers","percentage","splitterProps","undefined","Math","ceil","ref","role"],"mappings":"AAAA;AAUA,SAASA,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,aAAa,QAAQ,4BAA4B;AAiE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCC,GACD,OAAO,SAASC,kBACdC,OAAiC;IAEjC,MAAM,EACJC,IAAIC,MAAM,EACVC,GAAG,EACHC,GAAG,EACHC,WAAW,KAAK,EAChBC,QAAQ,EACRC,kBAAkB,EACnB,GAAGP;IAEJ,MAAMC,KAAKJ,aAAaK,QAAQ;IAChC,MAAMM,0BAA0BZ,aAAaI;IAC7C,MAAM,EACJS,KAAK,EACLC,QAAQ,EACRC,YAAY,EACZC,cAAc,EACdC,kBAAkB,EAClBC,qBAAqB,EACtB,GAAGN;IAEJ,MAAMO,aACJL,YAAYH,qBACRK,iBACAd,cAAc;QAAEK;QAAKC;QAAKK;IAAM;IAEtC,OAAO;QACL,GAAGD,uBAAuB;QAC1BQ,eAAe;YACb,oBAAoBV,WAAW,aAAaW;YAC5C,iBAAiBC,KAAKC,IAAI,CAACJ,aAAa;YACxC,iBAAiB;YACjB,iBAAiB;YACjBd;YACAmB,KAAKT;YACLU,MAAM;YACNX;YACAL;YACA,GAAGQ,kBAAkB;YACrB,GAAGC,qBAAqB;QAC1B;IACF;AACF"}
+{"version":3,"sources":["../../src/window-splitter/useWindowSplitter.ts"],"sourcesContent":["\"use client\";\nimport { type Ref, type RefCallback } from \"react\";\nimport {\n  useDraggable,\n  type BaseDraggableOptions,\n  type DraggableImplementation,\n  type DraggableKeyboardEventHandlers,\n  type DraggableMouseEventHandlers,\n  type DraggableStateOptions,\n  type DraggableTouchEventHandlers,\n} from \"../draggable/useDraggable.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-window-splitter-top\"?: number | string;\n    \"--rmd-window-splitter-right\"?: number | string;\n    \"--rmd-window-splitter-bottom\"?: number | string;\n    \"--rmd-window-splitter-left\"?: number | string;\n    \"--rmd-window-splitter-opacity\"?: number | string;\n    \"--rmd-window-splitter-position\"?: number | string;\n  }\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface BaseWindowSplitterOptions<\n  E extends HTMLElement = HTMLButtonElement,\n> extends Omit<BaseDraggableOptions<E>, keyof DraggableTouchEventHandlers<E>> {\n  /**\n   * An optional id to use for the window splitter.\n   *\n   * @defaultValue `\"window-splitter-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * An optional ref for the window splitter element. This will be merged into\n   * the {@link WindowSplitterWidgetProps.ref}.\n   */\n  ref?: Ref<E>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type WindowSplitterOptions<E extends HTMLElement = HTMLButtonElement> =\n  BaseWindowSplitterOptions<E> & DraggableStateOptions;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface WindowSplitterWidgetProps<E extends HTMLElement>\n  extends Required<DraggableMouseEventHandlers<E>>,\n    Required<DraggableKeyboardEventHandlers<E>> {\n  \"aria-orientation\": \"vertical\" | undefined;\n  \"aria-valuenow\": number;\n  \"aria-valuemin\": number;\n  \"aria-valuemax\": number;\n  id: string;\n  ref: RefCallback<E>;\n  role: \"separator\";\n  reversed: boolean;\n  dragging: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface WindowSplitterImplementation<\n  E extends HTMLElement = HTMLButtonElement,\n> extends DraggableImplementation<E> {\n  splitterProps: WindowSplitterWidgetProps<E>;\n}\n\n/**\n * Used to control the state for the `WindowSplitter` component.\n *\n * @example\n * Custom Implementation\n * ```tsx\n * import { useWindowSplitter, WindowSplitterImplementation } from \"@react-md/core\";\n * import { useState } from \"react\";\n *\n * // this is pretty much the `useWindowSplitter` implementation\n * export function useMyCustomWindowSplitter(): WindowSplitterImplementation {\n *   const [dragging, setDragging] = useState(false);\n *   const [value, setValue] = useState(0);\n *   const splitter = useWindowSplitter({\n *     min: 0,\n *     max: 100,\n *     value,\n *     setValue,\n *     dragging,\n *     setDragging,\n *   });\n *\n *   return {\n *     ...splitter,\n *     value,\n *     setValue,\n *     dragging,\n *   }\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useWindowSplitter<E extends HTMLElement = HTMLButtonElement>(\n  options: WindowSplitterOptions<E>\n): WindowSplitterImplementation<E> {\n  const { id: propId, reversed = false, vertical } = options;\n\n  const id = useEnsuredId(propId, \"splitter\");\n  const draggableImplementation = useDraggable(options);\n  const {\n    dragging,\n    percentage,\n    draggableRef,\n    mouseEventHandlers,\n    keyboardEventHandlers,\n  } = draggableImplementation;\n\n  return {\n    ...draggableImplementation,\n    splitterProps: {\n      \"aria-orientation\": vertical ? \"vertical\" : undefined,\n      \"aria-valuenow\": Math.ceil(percentage * 100),\n      \"aria-valuemin\": 0,\n      \"aria-valuemax\": 100,\n      id,\n      ref: draggableRef,\n      role: \"separator\",\n      dragging,\n      reversed,\n      ...mouseEventHandlers,\n      ...keyboardEventHandlers,\n    },\n  };\n}\n"],"names":["useDraggable","useEnsuredId","useWindowSplitter","options","id","propId","reversed","vertical","draggableImplementation","dragging","percentage","draggableRef","mouseEventHandlers","keyboardEventHandlers","splitterProps","undefined","Math","ceil","ref","role"],"mappings":"AAAA;AAEA,SACEA,YAAY,QAOP,+BAA+B;AACtC,SAASC,YAAY,QAAQ,qBAAqB;AAiElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCC,GACD,OAAO,SAASC,kBACdC,OAAiC;IAEjC,MAAM,EAAEC,IAAIC,MAAM,EAAEC,WAAW,KAAK,EAAEC,QAAQ,EAAE,GAAGJ;IAEnD,MAAMC,KAAKH,aAAaI,QAAQ;IAChC,MAAMG,0BAA0BR,aAAaG;IAC7C,MAAM,EACJM,QAAQ,EACRC,UAAU,EACVC,YAAY,EACZC,kBAAkB,EAClBC,qBAAqB,EACtB,GAAGL;IAEJ,OAAO;QACL,GAAGA,uBAAuB;QAC1BM,eAAe;YACb,oBAAoBP,WAAW,aAAaQ;YAC5C,iBAAiBC,KAAKC,IAAI,CAACP,aAAa;YACxC,iBAAiB;YACjB,iBAAiB;YACjBN;YACAc,KAAKP;YACLQ,MAAM;YACNV;YACAH;YACA,GAAGM,kBAAkB;YACrB,GAAGC,qBAAqB;QAC1B;IACF;AACF"}

package/jest.config.ts

@@ -56,6 +56,10 @@ const config: Config = {
     // able to remove this one I start testing the documentation site
     "!<rootDir>/src/**/index.ts",
     "!<rootDir>/src/**/types.ts",
+    // it's hard to verify these since they probably only occur when trying to
+    // use react-dom/server in jsdom?
+    "!<rootDir>/src/test-utils/polyfills/TextEncoder.ts",
+    "!<rootDir>/src/test-utils/polyfills/TextDecoder.ts",
   ],
 
   extensionsToTreatAsEsm: [".ts", ".tsx"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-md/core",
-  "version": "1.0.0-next.1",
+  "version": "1.0.0-next.10",
   "description": "The core components and functionality for react-md.",
   "type": "module",
   "sass": "./dist/_core.scss",
@@ -15,25 +15,17 @@
       "require": "./dist/test-utils/polyfills",
       "default": "./dist/test-utils/polyfills/index.js"
     },
-    "./test-utils/polyfills/*": {
-      "require": "./dist/test-utils/polyfills/*",
-      "default": "./dist/test-utils/polyfills/*.js"
-    },
-    "./test-utils/jest-setup": "./dist/test-utils/jest-setup.js",
-    "./test-utils/data-testid": "./dist/test-utils/data-testid.js",
     "./test-utils": "./dist/test-utils/index.js",
-    "./test-utils/*": {
-      "require": "./dist/test-utils/*",
-      "default": "./dist/test-utils/*.js"
-    },
     "./colors": {
       "sass": "./dist/_colors.scss"
     },
+    "./*": "./dist/*.js",
+    "./*/*": "./dist/*/*.js",
     "./package.json": "./package.json"
   },
   "sideEffects": [
     "dist/**/*.scss",
-    "dist/test-utils/polyfills"
+    "dist/test-utils/polyfills/**/*"
   ],
   "repository": {
     "type": "git",
@@ -55,24 +47,24 @@
   "license": "MIT",
   "dependencies": {
     "cnbuilder": "^3.1.0",
-    "nanoid": "^5.0.3"
+    "nanoid": "^5.0.6"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
-    "@swc/cli": "^0.1.62",
-    "@swc/core": "1.3.96",
-    "@swc/jest": "^0.2.29",
-    "@testing-library/dom": "^9.3.3",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.1.0",
-    "@testing-library/user-event": "^14.5.1",
-    "@types/lodash": "^4.14.201",
-    "@types/node": "^20.9.0",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
-    "chokidar": "^3.5.3",
-    "filesize": "^10.1.0",
+    "@swc/cli": "^0.3.10",
+    "@swc/core": "1.4.8",
+    "@swc/jest": "^0.2.36",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/lodash": "^4.17.0",
+    "@types/node": "^20.11.30",
+    "@types/react": "^18.2.69",
+    "@types/react-dom": "^18.2.22",
+    "chokidar": "^3.6.0",
+    "filesize": "^10.1.1",
     "glob": "10.3.10",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -80,22 +72,24 @@
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.38",
     "postcss-scss": "^4.0.9",
-    "stylelint": "^15.11.0",
+    "stylelint": "^16.3.0",
     "stylelint-config-prettier-scss": "^1.0.0",
-    "stylelint-config-recommended-scss": "^13.1.0",
-    "stylelint-order": "^6.0.3",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.2.2"
+    "stylelint-config-recommended-scss": "^14.0.0",
+    "stylelint-order": "^6.0.4",
+    "stylelint-scss": "^6.2.1",
+    "ts-node": "^10.9.2",
+    "tsx": "^4.7.1",
+    "typescript": "^5.4.3"
   },
   "peerDependencies": {
-    "@jest/globals": "^29.6.1",
-    "@jest/types": "^29.6.1",
-    "@testing-library/dom": "^9.3.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@jest/globals": "^29.7.0",
+    "@jest/types": "^29.6.3",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.3.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
     "react": ">= 18",
     "react-dom": ">= 18"
   },
@@ -129,14 +123,15 @@
     "access": "public"
   },
   "scripts": {
+    "run-script": "tsx --tsconfig scripts/tsconfig.json",
     "dev": "npm-run-all --parallel build-esm-watch build-scss-watch build-types-watch",
     "prepare-release": "npm-run-all clean-dist build",
     "build": "npm-run-all build-esm build-scss build-types",
-    "build-esm": "swc src -d ./dist",
+    "build-esm": "swc -d ./dist --strip-leading-paths src",
     "build-esm-watch": "pnpm run build-esm --watch",
     "build-types": "tsc -P tsconfig.types.json",
     "build-types-watch": "pnpm run build-types --watch",
-    "build-scss": "node scripts/copySassFiles.js",
+    "build-scss": "pnpm run run-script scripts/copySassFiles.ts",
     "build-scss-watch": "pnpm run build-scss --watch",
     "clean-dist": "rm -rf dist",
     "clean": "rm -rf .turbo dist node_modules",

package/scripts/{copySassFiles.js → copySassFiles.ts}

@@ -1,23 +1,23 @@
 /* eslint-disable no-console */
 // this is a temp file before I write the "combine everything" stuffs
-import { glob } from "glob";
 import chokidar from "chokidar";
-import { copyFile, mkdir, rm } from "node:fs/promises";
+import { glob } from "glob";
 import { existsSync } from "node:fs";
+import { copyFile, mkdir, rm } from "node:fs/promises";
 import { dirname } from "node:path";
 
 let log = false;
 const pattern = "src/**/*.scss";
 
-const replaceDist = (path) => path.replace("src", "dist");
-const ensureParentDirectories = async (filePath) => {
+const replaceDist = (path: string): string => path.replace("src", "dist");
+const ensureParentDirectories = async (filePath: string): Promise<void> => {
   const folder = dirname(filePath);
   if (!existsSync(folder)) {
     await mkdir(folder, { recursive: true });
   }
 };
 
-const cp = async (path, dest = replaceDist(path)) => {
+const cp = async (path: string, dest = replaceDist(path)): Promise<void> => {
   const isColors = path.endsWith("_colors.scss");
   await ensureParentDirectories(dest);
   await copyFile(path, dest);

package/scripts/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "downlevelIteration": true,
+    "resolveJsonModule": true,
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "forceConsistentCasingInFileNames": true,
+    "lib": ["esnext"]
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules"]
+}