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

package/src/card/__tests__/__snapshots__/CardHeader.tsx.snap

@@ -18,7 +18,7 @@ exports[`CardHeader should allow addons before and after the children 1`] = `
       Elizabeth Park
     </h5>
     <h6
-      class="rmd-typography rmd-typography--subtitle-2 rmd-no-margin rmd-card__subtitle"
+      class="rmd-typography rmd-typography--subtitle-2 rmd-no-margin rmd-card__subtitle rmd-text-secondary-color"
     >
       Work contact
     </h6>

package/src/card/__tests__/__snapshots__/CardSubtitle.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`CardSubtitle should apply the correct styling, HTML attributes, and allow a ref 1`] = `
 <h6
-  class="rmd-typography rmd-typography--subtitle-2 rmd-no-margin rmd-card__subtitle"
+  class="rmd-typography rmd-typography--subtitle-2 rmd-no-margin rmd-card__subtitle rmd-text-secondary-color"
 >
   Subtitle
 </h6>
@@ -10,7 +10,7 @@ exports[`CardSubtitle should apply the correct styling, HTML attributes, and all
 
 exports[`CardSubtitle should apply the correct styling, HTML attributes, and allow a ref 2`] = `
 <h6
-  class="rmd-typography rmd-typography--subtitle-2 rmd-no-margin rmd-card__subtitle custom-class-name"
+  class="rmd-typography rmd-typography--subtitle-2 rmd-no-margin rmd-card__subtitle rmd-text-secondary-color custom-class-name"
   style="color: white;"
 >
   Subtitle

package/src/card/__tests__/__snapshots__/ClickableCard.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ClickableCard should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
+<div
+  class="rmd-card rmd-card--shadowed rmd-card--clickable"
+  data-testid="card"
+  role="button"
+  tabindex="0"
+/>
+`;
+
+exports[`ClickableCard should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
+<div
+  class="rmd-card rmd-card--shadowed rmd-card--clickable custom-class-name"
+  data-testid="card"
+  role="button"
+  style="color: white;"
+  tabindex="0"
+/>
+`;

package/src/card/__tests__/__snapshots__/styles.ts.snap

@@ -8,6 +8,6 @@ exports[`cardHeader should be callable without any arguments 1`] = `"rmd-card__h
 
 exports[`cardHeaderContent should be callable without any arguments 1`] = `"rmd-card__header-content"`;
 
-exports[`cardSubtitle should be callable without any arguments 1`] = `"rmd-card__subtitle"`;
+exports[`cardSubtitle should be callable without any arguments 1`] = `"rmd-card__subtitle rmd-text-secondary-color"`;
 
 exports[`cardTitle should be callable without any arguments 1`] = `"rmd-card__title"`;

package/src/card/_card.scss

@@ -4,12 +4,14 @@
 @use "../box-shadows";
 @use "../typography/typography";
 @use "../divider/divider";
+@use "../interaction/interaction";
 
 $disable-everything: false !default;
 $disable-bordered: false !default;
 $disable-shadowed: false !default;
 $disable-raisable: false !default;
 $disable-full-width: false !default;
+$disable-clickable: false !default;
 $disable-content-secondary-color: false !default;
 $disable-content-last-child-padding: false !default;
 
@@ -99,14 +101,12 @@ $variables: (background-color, color, secondary-color);
       max-width: 100%;
 
       @if not $disable-raisable {
-        @include utils.mouse-only {
-          &--raisable {
-            @include box-shadows.elevation-transition(
-              $raisable-start-elevation,
-              $raisable-end-elevation,
-              "&:hover"
-            );
-          }
+        &--raisable {
+          @include box-shadows.elevation-transition(
+            $raisable-start-elevation,
+            $raisable-end-elevation,
+            "&:hover"
+          );
         }
       }
 
@@ -129,6 +129,12 @@ $variables: (background-color, color, secondary-color);
         }
       }
 
+      @if not $disable-clickable {
+        &--clickable {
+          @include interaction.surface;
+        }
+      }
+
       &__header {
         align-items: center;
         column-gap: $header-spacing;
@@ -140,7 +146,7 @@ $variables: (background-color, color, secondary-color);
         @include typography.text-overflow;
 
         flex: 1 1 auto;
-        min-width: 1;
+        min-width: 0;
       }
 
       // does not require custom styles

package/src/card/styles.ts

@@ -31,24 +31,29 @@ export interface CardClassNameOptions {
    * @defaultValue `false`
    */
   fullWidth?: boolean;
+
+  /**
+   * Set this to `true` if the card should gain the pointer cursor while
+   * hovering and other interaction styles and not using the `ClickableCard`
+   * component.
+   *
+   * @defaultValue `false`
+   */
+  interactable?: boolean;
 }
 
 /**
  * @remarks \@since 6.0.0
  */
 export function card(options: CardClassNameOptions = {}): string {
-  const {
-    className,
-    bordered = false,
-    raisable = false,
-    fullWidth = false,
-  } = options;
+  const { className, bordered, raisable, fullWidth, interactable } = options;
 
   return cnb(
     cardStyles({
       bordered,
       shadowed: !bordered,
       raisable: !bordered && raisable,
+      interactable,
       "full-width": fullWidth,
     }),
     className
@@ -125,7 +130,11 @@ export function cardSubtitle(
 ): string {
   const { className } = options;
 
-  return cnb(cardStyles("subtitle"), className);
+  return cnb(
+    cardStyles("subtitle"),
+    cssUtils({ textColor: "text-secondary" }),
+    className
+  );
 }
 
 /** @remarks \@since 6.0.0 */
@@ -162,9 +171,9 @@ export interface CardContentClassNameOptions {
 export function cardContent(options: CardContentClassNameOptions = {}): string {
   const {
     className,
-    disablePadding = false,
-    disableSecondaryColor = false,
-    disableLastChildPadding = false,
+    disablePadding,
+    disableSecondaryColor,
+    disableLastChildPadding,
   } = options;
 
   return cnb(

package/src/dialog/_dialog.scss

@@ -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/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;
@@ -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/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 {