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

package/src/utils/__tests__/getRangeDefaultValue.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from "@jest/globals";
+import { getRangeDefaultValue } from "../getRangeDefaultValue.js";
+
+describe("getRangeDefaultValue", () => {
+  it("should return the default value if it is defined", async () => {
+    expect(
+      getRangeDefaultValue({ min: 0, max: 100, step: 1, defaultValue: 10 })
+    ).toBe(10);
+    expect(
+      getRangeDefaultValue({ min: 0, max: 100, step: 1, defaultValue: 50 })
+    ).toBe(50);
+
+    const defaultValueSetter = (): number => 30;
+    expect(
+      getRangeDefaultValue({
+        min: 10,
+        max: 30,
+        step: 1,
+        defaultValue: defaultValueSetter,
+      })
+    ).toBe(defaultValueSetter);
+  });
+
+  it("should return a function that returns the middle of the range when the defaultValue is undefined", () => {
+    const initializer1 = getRangeDefaultValue({
+      min: 0,
+      max: 100,
+      step: 1,
+    });
+    const initializer2 = getRangeDefaultValue({
+      min: 0,
+      max: 100,
+      step: 1,
+      defaultValue: undefined,
+    });
+
+    if (typeof initializer1 !== "function") {
+      throw new Error("initializer1 is not a function");
+    }
+    if (typeof initializer2 !== "function") {
+      throw new Error("initializer2 is not a function");
+    }
+
+    expect(initializer1()).toBe(50);
+    expect(initializer2()).toBe(50);
+  });
+});

package/src/utils/getMiddleOfRange.ts

@@ -0,0 +1,26 @@
+import { getRangeSteps } from "./getRangeSteps.js";
+import { nearest } from "./nearest.js";
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface GetMiddleOfRangeOptions {
+  min: number;
+  max: number;
+  step: number;
+}
+
+/**
+ * @internal
+ * @remarks \@since 6.0.0
+ */
+export function getMiddleOfRange(options: GetMiddleOfRangeOptions): number {
+  const { min, max, step } = options;
+
+  return nearest({
+    min,
+    max,
+    steps: getRangeSteps({ min, max, step }),
+    value: (max - min) / 2 + min,
+  });
+}

package/src/utils/getRangeDefaultValue.ts

@@ -1,15 +1,14 @@
-import type { UseStateInitializer } from "../types.js";
-import { getRangeSteps } from "./getRangeSteps.js";
-import { nearest } from "./nearest.js";
+import { type UseStateInitializer } from "../types.js";
+import {
+  getMiddleOfRange,
+  type GetMiddleOfRangeOptions,
+} from "./getMiddleOfRange.js";
 
 /**
  * @internal
  * @remarks \@since 6.0.0
  */
-export interface RangeDefaultValueOptions {
-  min: number;
-  max: number;
-  step: number;
+export interface RangeDefaultValueOptions extends GetMiddleOfRangeOptions {
   defaultValue?: UseStateInitializer<number>;
 }
 
@@ -20,16 +19,10 @@ export interface RangeDefaultValueOptions {
 export function getRangeDefaultValue(
   options: RangeDefaultValueOptions
 ): UseStateInitializer<number> {
-  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);
 }

package/src/utils/getRangeSteps.ts

@@ -17,8 +17,8 @@ export interface RangeStepsOptions {
  * \@since 6.0.0 Converted to using an object instead of multiple arguments and
  * renamed from `getSteps` to `getRangeSteps`.
  */
-export const getRangeSteps = (options: RangeStepsOptions): number => {
+export function getRangeSteps(options: RangeStepsOptions): number {
   const { min, max, step } = options;
 
   return Math.abs(max - min) / step;
-};
+}

package/src/utils/nearest.ts

@@ -36,7 +36,7 @@ export function nearest(options: NearestOptions): number {
   const step = range / steps;
   const decimals = Number.isInteger(step)
     ? range % steps
-    : step.toString().split(".")[1].length;
+    : `${step}`.split(".")[1].length;
 
   return Math.min(
     max,

package/src/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,9 +28,9 @@ $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) {
@@ -67,6 +41,17 @@ $var-lookup: (
   @if not $disable-everything {
     .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);
+        }
+      }
 
       background-color: transparent;
       border: 0;
@@ -74,31 +59,15 @@ $var-lookup: (
       padding: 0;
       position: fixed;
       transition: opacity transition.$linear-duration;
-      z-index: $window-splitter-z-index;
+      z-index: $z-index;
 
       &::after {
-        background-color: $window-splitter-background-color;
+        background-color: $background-color;
         content: "";
         inset: 0;
         position: absolute;
       }
 
-      &:hover {
-        @include set-var(opacity, 1);
-      }
-
-      @include utils.keyboard-only {
-        &:focus {
-          @include set-var(opacity, 1);
-        }
-      }
-
-      @include utils.touch-only {
-        &:hover {
-          @include set-var(opacity, 0);
-        }
-      }
-
       @if not $disable-horizontal {
         &--h {
           @include utils.auto-rtl(left, get-var(position));
@@ -106,10 +75,10 @@ $var-lookup: (
           @include use-var(top);
 
           cursor: col-resize;
-          width: $window-splitter-size;
+          width: $size;
 
           &::after {
-            width: $window-splitter-background-size;
+            width: $background-size;
           }
         }
 
@@ -133,11 +102,11 @@ $var-lookup: (
           @include use-var(top, position);
 
           cursor: row-resize;
-          height: $window-splitter-size;
+          height: $size;
           width: 100%;
 
           &::after {
-            height: $window-splitter-background-size;
+            height: $background-size;
           }
         }
 
@@ -148,7 +117,7 @@ $var-lookup: (
             top: auto;
 
             &::after {
-              top: calc(100% - $window-splitter-background-size);
+              top: calc(100% - $background-size);
             }
           }
         }

package/src/window-splitter/useWindowSplitter.ts

@@ -1,16 +1,15 @@
 "use client";
-import type { Ref, RefCallback } from "react";
-import type {
-  BaseDraggableOptions,
-  DraggableImplementation,
-  DraggableKeyboardEventHandlers,
-  DraggableMouseEventHandlers,
-  DraggableStateOptions,
-  DraggableTouchEventHandlers,
+import { type Ref, type RefCallback } from "react";
+import {
+  useDraggable,
+  type BaseDraggableOptions,
+  type DraggableImplementation,
+  type DraggableKeyboardEventHandlers,
+  type DraggableMouseEventHandlers,
+  type DraggableStateOptions,
+  type DraggableTouchEventHandlers,
 } from "../draggable/useDraggable.js";
-import { useDraggable } from "../draggable/useDraggable.js";
 import { useEnsuredId } from "../useEnsuredId.js";
-import { getPercentage } from "../utils/getPercentage.js";
 
 declare module "react" {
   interface CSSProperties {
@@ -76,9 +75,7 @@ export interface WindowSplitterImplementation<
 }
 
 /**
- * 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
@@ -113,31 +110,18 @@ export interface WindowSplitterImplementation<
 export function useWindowSplitter<E extends HTMLElement = HTMLButtonElement>(
   options: WindowSplitterOptions<E>
 ): WindowSplitterImplementation<E> {
-  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,
+    percentage,
     draggableRef,
-    dragPercentage,
     mouseEventHandlers,
     keyboardEventHandlers,
   } = draggableImplementation;
 
-  const percentage =
-    dragging && withinOffsetParent
-      ? dragPercentage
-      : getPercentage({ min, max, value });
-
   return {
     ...draggableImplementation,
     splitterProps: {

package/dist/divider/VerticalDivider.d.ts

@@ -1,32 +0,0 @@
-import { type HTMLAttributes } from "react";
-import { type VerticalDividerHookOptions } from "./useVerticalDividerHeight.js";
-export interface VerticalDividerProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * @see {@link VerticalDividerHookOptions.maxHeight}
-     * @defaultValue `1`
-     */
-    maxHeight?: VerticalDividerHookOptions<HTMLDivElement>["maxHeight"];
-}
-/**
- * **Client Component**
- *
- * This component is used to create a vertical divider based on a parent
- * element's height. This is really only needed when the parent element **has no
- * defined height**.  If there is a defined height, this component is not worth
- * much as the height can be computed in css as normal. This really just fixes
- * the issue that the height would be set to `auto` (which computes to 0 most of
- * the time) when it is not set on a parent element.
- *
- * @example
- * Server Component Implementation
- * ```tsx
- * import type { ReactElement } from "react";
- * import { Divider } from "@react-md/core";
- *
- * function Example(): ReactElement {
- *   // or use a custom className
- *   return <Divider vertical style={{ height: "80%" }} />;
- * }
- * ```
- */
-export declare const VerticalDivider: import("react").ForwardRefExoticComponent<VerticalDividerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/divider/useVerticalDividerHeight.d.ts

@@ -1,37 +0,0 @@
-import type { CSSProperties, Ref, RefCallback } from "react";
-/** @remarks \@since 5.0.0 */
-export interface VerticalDividerHookOptions<E extends HTMLElement> {
-    /**
-     * An optional ref to merge with the returned ref.
-     */
-    ref?: Ref<E>;
-    /**
-     * An optional style object to merge with the divider's height style.
-     */
-    style?: CSSProperties;
-    /**
-     * The max height for the vertical divider. When this is `<= 0`, the hook will
-     * be disabled.
-     *
-     * When the value is between 0 and 1, it will be used as a multiplier with the
-     * parent element's height. When the value is greater than 1, it will be used
-     * in `Math.min(parentElementHeight, maxHeight)`.
-     */
-    maxHeight: number;
-}
-/** @remarks \@since 5.0.0 */
-export interface VerticalDividerHeight<E extends HTMLElement> {
-    ref: RefCallback<E>;
-    style: CSSProperties | undefined;
-}
-/**
- * This is a small hook that is used to automatically create a vertical divider
- * based on the computed height of its parent element.
- *
- * @internal
- * @remarks \@since 5.0.0 The hook accepts an object instead of using multiple
- * params and uses a generic for the HTMLElement type.
- * @remarks \@since 6.0.0 Updated to be internal only since it doesn't make much
- * sense to be a public API.
- */
-export declare function useVerticalDividerHeight<E extends HTMLElement>(options: VerticalDividerHookOptions<E>): VerticalDividerHeight<E>;

package/dist/icon/MaterialIconsProvider.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import type { MaterialIconFamily } from "./material.js";
-/**
- * **Client Component**
- *
- * @remarks \@since 6.0.0
- */
-export declare const MaterialIconsProvider: import("react").Provider<MaterialIconFamily>;
-/**
- * @remarks \@since 6.0.0
- */
-export declare function useMaterialIconsFamily(override?: MaterialIconFamily): MaterialIconFamily;

package/dist/icon/MaterialIconsProvider.js

@@ -1,17 +0,0 @@
-"use client";
-import { createContext, useContext } from "react";
-const context = createContext("filled");
-context.displayName = "MaterialIcons";
-/**
- * **Client Component**
- *
- * @remarks \@since 6.0.0
- */ export const { Provider: MaterialIconsProvider } = context;
-/**
- * @remarks \@since 6.0.0
- */ export function useMaterialIconsFamily(override) {
-    const value = useContext(context);
-    return override || value;
-}
-
-//# sourceMappingURL=MaterialIconsProvider.js.map

package/dist/icon/MaterialIconsProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/icon/MaterialIconsProvider.ts"],"sourcesContent":["\"use client\";\nimport { createContext, useContext } from \"react\";\nimport type { MaterialIconFamily } from \"./material.js\";\n\nconst context = createContext<MaterialIconFamily>(\"filled\");\ncontext.displayName = \"MaterialIcons\";\n\n/**\n * **Client Component**\n *\n * @remarks \\@since 6.0.0\n */\nexport const { Provider: MaterialIconsProvider } = context;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function useMaterialIconsFamily(\n  override?: MaterialIconFamily\n): MaterialIconFamily {\n  const value = useContext(context);\n  return override || value;\n}\n"],"names":["createContext","useContext","context","displayName","Provider","MaterialIconsProvider","useMaterialIconsFamily","override","value"],"mappings":"AAAA;AACA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAGlD,MAAMC,UAAUF,cAAkC;AAClDE,QAAQC,WAAW,GAAG;AAEtB;;;;CAIC,GACD,OAAO,MAAM,EAAEC,UAAUC,qBAAqB,EAAE,GAAGH,QAAQ;AAE3D;;CAEC,GACD,OAAO,SAASI,uBACdC,QAA6B;IAE7B,MAAMC,QAAQP,WAAWC;IACzB,OAAOK,YAAYC;AACrB"}

package/dist/icon/MaterialSymbolsProvider.d.ts

@@ -1,145 +0,0 @@
-import { type CSSProperties, type ReactElement, type ReactNode } from "react";
-import { type MaterialSymbolFamily } from "./material.js";
-/**
- * Fill gives you the ability to modify the default icon style. A single icon
- * can render both unfilled and filled states.
- *
- * To convey a state transition, use the fill axis for animation or
- * interaction. The values are 0 for default or 1 for completely filled. Along
- * with the weight axis, the fill also impacts the look of the icon.
- *
- * @remarks \@since 6.0.0
- */
-export type MaterialSymbolFill = 0 | 1;
-/**
- * Weight defines the symbol’s stroke weight, with a range of weights between
- * thin (100) and bold (700). Weight can also affect the overall size of the
- * symbol.
- *
- * @remarks \@since 6.0.0
- */
-export type MaterialSymbolWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700;
-/**
- * Weight and grade affect a symbol’s thickness. Adjustments to grade are more
- * granular than adjustments to weight and have a small impact on the size of
- * the symbol.
- *
- * Grade is also available in some text fonts. You can match grade levels
- * between text and symbols for a harmonious visual effect. For example, if
- * the text font has a -25 grade value, the symbols can match it with a
- * suitable value, say -25.
- *
- * You can use grade for different needs:
- *
- * - Low emphasis (e.g. -25 grade): To reduce glare for a light symbol on a
- *   dark background, use a low grade.
- * - High emphasis (e.g. 200 grade): To highlight a symbol, increase the
- *   positive grade.
- *
- * @remarks \@since 6.0.0
- */
-export type MaterialSymbolGrade = -25 | 0 | 200;
-/**
- * Optical Sizes range from 20dp to 48dp.
- *
- * For the image to look the same at different sizes, the stroke weight
- * (thickness) changes as the icon size scales. Optical Size offers a way to
- * automatically adjust the stroke weight when you increase or decrease the
- * symbol size.
- *
- * @remarks \@since 6.0.0
- */
-export type MaterialSymbolOpticalSize = 20 | 24 | 40 | 48;
-/**
- * The comments for each customizable part was copied from
- * https://fonts.google.com/icons?icon.set=Material+Symbols and clicking the
- * info icon next to each property.
- *
- * @see https://fonts.google.com/icons?icon.set=Material+Symbols
- * @remarks \@since 6.0.0
- */
-export interface MaterialSymbolCustomization {
-    /**
-     * Fill gives you the ability to modify the default icon style. A single icon
-     * can render both unfilled and filled states.
-     *
-     * To convey a state transition, use the fill axis for animation or
-     * interaction. The values are 0 for default or 1 for completely filled. Along
-     * with the weight axis, the fill also impacts the look of the icon.
-     *
-     * @defaultValue `0`
-     */
-    fill?: MaterialSymbolFill;
-    /**
-     * Weight defines the symbol’s stroke weight, with a range of weights between
-     * thin (100) and bold (700). Weight can also affect the overall size of the
-     * symbol.
-     *
-     * @defaultValue `400`
-     */
-    weight?: MaterialSymbolWeight;
-    /**
-     * Weight and grade affect a symbol’s thickness. Adjustments to grade are more
-     * granular than adjustments to weight and have a small impact on the size of
-     * the symbol.
-     *
-     * Grade is also available in some text fonts. You can match grade levels
-     * between text and symbols for a harmonious visual effect. For example, if
-     * the text font has a -25 grade value, the symbols can match it with a
-     * suitable value, say -25.
-     *
-     * You can use grade for different needs:
-     *
-     * - Low emphasis (e.g. -25 grade): To reduce glare for a light symbol on a
-     *   dark background, use a low grade.
-     * - High emphasis (e.g. 200 grade): To highlight a symbol, increase the
-     *   positive grade.
-     *
-     * @defaultValue `0`
-     */
-    grade?: MaterialSymbolGrade;
-    /**
-     * Optical Sizes range from 20dp to 48dp.
-     *
-     * For the image to look the same at different sizes, the stroke weight
-     * (thickness) changes as the icon size scales. Optical Size offers a way to
-     * automatically adjust the stroke weight when you increase or decrease the
-     * symbol size.
-     *
-     * @defaultValue `48`
-     */
-    opticalSize?: MaterialSymbolOpticalSize;
-    /**
-     * @defaultValue `"outlined"`
-     */
-    family?: MaterialSymbolFamily;
-}
-/**
- * @remarks \@since 6.0.0
- */
-export type MaterialSymbolConfiguration = Required<MaterialSymbolCustomization>;
-/**
- * @remarks \@since 6.0.0
- */
-export declare function useMaterialSymbolConfiguration(): MaterialSymbolConfiguration;
-/**
- * @remarks \@since 6.0.0
- */
-export declare function useFontVariationSettings(options: MaterialSymbolCustomization & {
-    style?: CSSProperties;
-}): {
-    style?: CSSProperties;
-    family: MaterialSymbolFamily;
-};
-/**
- * @remarks \@since 6.0.0
- */
-export interface MaterialSymbolsProviderProps extends MaterialSymbolCustomization {
-    children: ReactNode;
-}
-/**
- * **Client Component**
- *
- * @remarks \@since 6.0.0
- */
-export declare function MaterialSymbolsProvider(props: MaterialSymbolsProviderProps): ReactElement;

package/dist/icon/MaterialSymbolsProvider.js

@@ -1,60 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo } from "react";
-const context = /*#__PURE__*/ createContext({
-    fill: 0,
-    weight: 400,
-    grade: 0,
-    opticalSize: 24,
-    family: "outlined"
-});
-context.displayName = "MaterialSymbol";
-const { Provider } = context;
-/**
- * @remarks \@since 6.0.0
- */ export function useMaterialSymbolConfiguration() {
-    return useContext(context);
-}
-/**
- * @remarks \@since 6.0.0
- */ export function useFontVariationSettings(options) {
-    const configuration = useMaterialSymbolConfiguration();
-    let { style } = options;
-    const { fill = configuration.fill, grade = configuration.grade, opticalSize = configuration.opticalSize, weight = configuration.weight, family = configuration.family } = options;
-    if (!style?.fontVariationSettings && (fill !== configuration.fill || grade !== configuration.grade || opticalSize !== configuration.opticalSize || weight !== configuration.weight)) {
-        style = {
-            ...style,
-            fontVariationSettings: `"FILL" ${fill}, "wght" ${weight}, "GRAD" ${grade}, "opsz" ${opticalSize}`
-        };
-    }
-    return {
-        family,
-        style
-    };
-}
-/**
- * **Client Component**
- *
- * @remarks \@since 6.0.0
- */ export function MaterialSymbolsProvider(props) {
-    const { fill = 0, weight = 400, grade = 0, family: type = "outlined", opticalSize = 48, children } = props;
-    const value = useMemo(()=>({
-            fill,
-            weight,
-            grade,
-            family: type,
-            opticalSize
-        }), [
-        fill,
-        grade,
-        opticalSize,
-        type,
-        weight
-    ]);
-    return /*#__PURE__*/ _jsx(Provider, {
-        value: value,
-        children: children
-    });
-}
-
-//# sourceMappingURL=MaterialSymbolsProvider.js.map