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

package/src/divider/_divider.scss

@@ -7,9 +7,8 @@ $disable-everything: false !default;
 $disable-vertical: false !default;
 $disable-inset: false !default;
 
-$size: 0.0625rem !default;
-// this is doubled since the `hr` element applies the size for border top and bottom
-$vertical-size: $size * 2 !default;
+$size: 0.0625em !default;
+$border-size: $size * 2 !default;
 $max-size: 100% !default;
 $inset: 4rem !default;
 $spacing: 0.25rem auto !default;
@@ -20,57 +19,29 @@ $dark-theme-color: rgba(colors.$white, 0.12) !default;
 
 $color: theme.get-default-color($light-theme-color, $dark-theme-color) !default;
 
-$var-lookup: (
-  size: (
-    var: --rmd-divider-size,
-    value: $size,
-  ),
-  vertical-size: (
-    var: --rmd-divider-vertical-size,
-    value: $vertical-size,
-  ),
-  color: (
-    var: --rmd-divider-color,
-    value: $color,
-  ),
-  spacing: (
-    var: --rmd-divider-spacing,
-    value: $spacing,
-  ),
-  vertical-spacing: (
-    var: --rmd-divider-vertical-spacing,
-    value: $vertical-spacing,
-  ),
-  inset: (
-    var: --rmd-divider-inset,
-    value: $inset,
-  ),
-  width: (
-    var: --rmd-divider-width,
-    value: $max-size,
-  ),
-  max-size: (
-    var: --rmd-divider-max-size,
-    value: $max-size,
-  ),
+$variables: (
+  size,
+  border-size,
+  color,
+  spacing,
+  vertical-spacing,
+  inset,
+  max-size
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "divider var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "divider");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "divider var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "divider")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -89,10 +60,29 @@ $var-lookup: (
   }
 }
 
-@mixin border-style($position) {
-  $property: "border-#{$position}";
+@mixin border-style($position: null) {
+  $property: if(not $position, border, "border-#{$position}");
+  $var-name: if(not $position, size, border-size);
+
+  #{$property}: get-var($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);
+
+    @if not $disable-inset {
+      @include set-var(inset, $inset);
+    }
 
-  #{$property}: get-var(size) solid get-var(color);
+    @if not $disable-vertical {
+      @include set-var(vertical-spacing, $vertical-spacing);
+    }
+  }
 }
 
 @mixin styles {
@@ -103,7 +93,7 @@ $var-lookup: (
 
     .rmd-divider {
       @include use-var(margin, spacing);
-      @include use-var(width);
+      @include use-var(width, max-size);
 
       border: get-var(size) solid get-var(color);
       display: block;
@@ -121,10 +111,9 @@ $var-lookup: (
         &--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/src/draggable/useDraggable.ts

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

package/src/draggable/utils.ts

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

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

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

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

@@ -2,6 +2,7 @@
 @use "../transition/transition";
 @use "../icon/icon";
 @use "../button/button";
+@use "../theme/theme";
 
 $disable-everything: false !default;
 $disable-margin-top-transition: false !default;
@@ -12,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/src/expansion-panel/useExpansionPanels.ts

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

package/src/form/Label.tsx

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

package/src/form/MenuItemInputToggle.tsx

@@ -96,7 +96,7 @@ export interface BaseMenuItemInputToggleProps
   height?: ListItemHeight;
 
   /** @defaultValue `false` */
-  threeLines?: boolean;
+  multiline?: boolean;
 
   /** @defaultValue `false` */
   disableTextChildren?: boolean;

package/src/form/Select.tsx

@@ -411,7 +411,7 @@ export function Select<Value extends string>(
   const { onEntering, onEntered, onExiting, onExited, disableTransition } =
     menuProps;
   const handleMounting =
-    (callback: TransitionEnterHandler | undefined = noop, skipped = false) =>
+    (callback: TransitionEnterHandler | undefined = noop, skipped: boolean) =>
     (appearing: boolean) => {
       callback(appearing);
 
@@ -509,6 +509,14 @@ export function Select<Value extends string>(
           onEntered={handleMounting(onEntered, !disableTransition)}
           onExiting={handleUnmounting(onExiting, false)}
           onExited={handleUnmounting(onExited, !disableTransition)}
+          sheetProps={{
+            ...menuProps.sheetProps,
+            onEntering: handleMounting(menuProps.sheetProps?.onEntering, false),
+            onEntered: handleMounting(
+              menuProps.sheetProps?.onEntered,
+              !disableTransition
+            ),
+          }}
         >
           {children}
         </Menu>

package/src/form/TextArea.tsx

@@ -244,7 +244,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
           ref={containerRef}
           style={{
             ...style,
-            "--rmd-form-textarea-height": height,
+            "--rmd-textarea-height": height,
           }}
           className={textAreaContainer({
             animate: !disableTransition && resize == "auto",

package/src/form/TextFieldContainerStyles.ts

@@ -5,13 +5,13 @@ import { type FormComponentStates, type FormThemeOptions } from "./types.js";
 
 declare module "react" {
   interface CSSProperties {
-    "--rmd-form-text-height"?: string | number;
-    "--rmd-form-text-padding-left"?: string | number;
-    "--rmd-form-text-padding-right"?: string | number;
-    "--rmd-form-text-padding-top"?: string | number;
-    "--rmd-form-text-border-color"?: string;
-    "--rmd-form-text-hover-border-color"?: string;
-    "--rmd-form-text-filled-color"?: string;
+    "--rmd-text-field-height"?: string | number;
+    "--rmd-text-field-padding-left"?: string | number;
+    "--rmd-text-field-padding-right"?: string | number;
+    "--rmd-text-field-padding-top"?: string | number;
+    "--rmd-text-field-border-color"?: string;
+    "--rmd-text-field-hover-border-color"?: string;
+    "--rmd-text-field-filled-color"?: string;
     "--rmd-form-addon-top"?: string | number;
     "--rmd-form-addon-margin-top"?: string | number;
   }