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

package/src/tabs/_tabs.scss

@@ -13,11 +13,12 @@ $disable-stacked: false !default;
 $disable-reversed: false !default;
 $disable-tablist-padded: false !default;
 $disable-tablist-vertical: false !default;
-$disable-indicator: false !default;
 $disable-tablist-indicator: false !default;
 $disable-tablist-hidden-scrollbar: false !default;
 $disable-tablist-scroll-button: false !default;
 $disable-tablist-active-indicator-transition: false !default;
+$disable-indicator: false !default;
+$disable-indicator-vertical: false !default;
 
 $typography: map.remove(typography.$button-styles, line-height) !default;
 $gap: icon.$spacing !default;
@@ -41,46 +42,29 @@ $tablist-scroller-background-color: theme.theme-get-var(
   background-color,
   inherit
 ) !default;
-
-$var-lookup: (
-  color: (
-    var: --rmd-tab-color,
-    value: $inactive-color,
-  ),
-  active-color: (
-    var: --rmd-tab-active-color,
-    value: $active-color,
-  ),
-  inactive-color: (
-    var: --rmd-tab-inactive-color,
-    value: $inactive-color,
-  ),
-  disabled-color: (
-    var: --rmd-tab-disabled-color,
-    value: $disabled-color,
-  ),
-  indicator-background: (
-    var: --rmd-tab-indicator-background,
-    value: $indicator-background,
-  ),
+$tablist-vertical-indicator-left: 0 !default;
+
+$variables: (
+  color,
+  active-color,
+  inactive-color,
+  disabled-color,
+  indicator-background
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "tabs 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, "tab");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "tabs var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "tab")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -92,21 +76,41 @@ $var-lookup: (
     &::after {
       @include use-var(background, indicator-background);
 
-      bottom: 0;
       content: "";
-      height: $indicator-height;
       pointer-events: none;
       position: absolute;
-      width: 100%;
       z-index: 1;
     }
 
+    &--h::after {
+      bottom: 0;
+      height: $indicator-height;
+      width: 100%;
+    }
+
+    @if not $disable-indicator-vertical {
+      &--v::after {
+        @include utils.auto-rtl(left, $tablist-vertical-indicator-left);
+
+        height: 100%;
+        top: 0;
+        width: $indicator-height;
+      }
+    }
+
     @if not $disable-tablist-indicator {
-      &--tablist::after {
+      &--tablist-h::after {
         left: 0;
-        max-width: var(--rmd-tab-width, $min-width);
+        max-width: var(--rmd-tab-size, $min-width);
         transform: translateX(var(--rmd-tab-offset, 0));
       }
+
+      @if not $disable-tablist-vertical {
+        &--tablist-v::after {
+          max-height: var(--rmd-tab-size, $min-width);
+          transform: translateY(var(--rmd-tab-offset, 0));
+        }
+      }
     }
 
     @if not $disable-tablist-active-indicator-transition {
@@ -146,16 +150,6 @@ $var-lookup: (
     @if not $disable-tablist-vertical {
       &--vertical {
         flex-direction: column;
-
-        @if not $disable-tablist-indicator {
-          &::after {
-            bottom: auto;
-            left: auto;
-            right: 0;
-            top: 0;
-            transform: translateY(var(--rmd-tab-offset, 0));
-          }
-        }
       }
     }
 
@@ -248,6 +242,19 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(color, $inactive-color);
+    @include set-var(active-color, $active-color);
+    @include set-var(inactive-color, $inactive-color);
+    @include set-var(disabled-color, $disabled-color);
+
+    @if not $disable-indicator {
+      @include set-var(indicator-background, $indicator-background);
+    }
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     @include tablist-styles;

package/src/tabs/tabIndicatorStyles.ts

@@ -8,8 +8,9 @@ const styles = bem("rmd-tab-indicator");
  */
 export interface TabIndicatorClassNameOptions {
   className?: string;
-  tablist?: boolean;
   animate?: boolean;
+  tablist?: boolean;
+  vertical?: boolean;
 }
 
 /**
@@ -18,7 +19,16 @@ export interface TabIndicatorClassNameOptions {
 export function tabIndicator(
   options: TabIndicatorClassNameOptions = {}
 ): string {
-  const { className, tablist, animate } = options;
+  const { className, vertical, tablist, animate } = options;
 
-  return cnb(styles({ tablist, animate }), className);
+  return cnb(
+    styles({
+      animate,
+      h: !vertical,
+      v: vertical,
+      "tablist-h": tablist && !vertical,
+      "tablist-v": tablist && vertical,
+    }),
+    className
+  );
 }

package/src/tabs/tabListStyles.ts

@@ -46,7 +46,7 @@ export function tabList(options: TabListClassNameOptions = {}): string {
       "full-width": !inline,
       "no-scrollbar": !scrollbar,
     }),
-    indicator && tabIndicator({ tablist: true, animate }),
+    indicator && tabIndicator({ tablist: true, animate, vertical }),
     className
   );
 }

package/src/tabs/tabStyles.ts

@@ -20,7 +20,9 @@ const styles = bem("rmd-tab");
 export interface TabClassNameOptions {
   className?: string;
   active?: boolean;
+  isLink?: boolean;
   activeIndicator?: boolean;
+  verticalActiveIndicator?: boolean;
   stacked?: boolean;
   reversed?: boolean;
   disabled?: boolean;
@@ -30,8 +32,16 @@ export interface TabClassNameOptions {
  * @remarks \@since 6.0.0
  */
 export function tab(options: TabClassNameOptions = {}): string {
-  const { className, active, activeIndicator, stacked, reversed, disabled } =
-    options;
+  const {
+    className,
+    active,
+    isLink,
+    stacked,
+    reversed,
+    disabled,
+    activeIndicator,
+    verticalActiveIndicator,
+  } = options;
 
   return cnb(
     styles({
@@ -41,8 +51,10 @@ export function tab(options: TabClassNameOptions = {}): string {
       "stacked-reversed": stacked && reversed,
       disabled,
     }),
-    active && activeIndicator && tabIndicator(),
-    cssUtils({ surface: true }),
+    active &&
+      activeIndicator &&
+      tabIndicator({ vertical: verticalActiveIndicator }),
+    cssUtils({ surface: true, textDecoration: isLink ? "none" : undefined }),
     className
   );
 }

package/src/tabs/useTabList.ts

@@ -20,20 +20,20 @@ import { getTabRoleOnly, scrollTabIntoView } from "./utils.js";
 
 declare module "react" {
   interface CSSProperties {
-    "--rmd-tab-width"?: string;
+    "--rmd-tab-size"?: string;
     "--rmd-tab-offset"?: string | number;
     "--rmd-tab-indicator-background"?: string;
   }
 }
 
-const TAB_WIDTH_VAR = "--rmd-tab-width";
+const TAB_SIZE_VAR = "--rmd-tab-size";
 const TAB_OFFSET_VAR = "--rmd-tab-offset";
 
 const noop = (): void => {
   // do nothing
 };
 
-export type TabWidthVar = typeof TAB_WIDTH_VAR;
+export type TabWidthVar = typeof TAB_SIZE_VAR;
 export type TabOffsetVar = typeof TAB_OFFSET_VAR;
 
 export type IndicatorCSSProperties = CSSProperties &
@@ -99,7 +99,7 @@ export function useTabList(
     useState<IndicatorCSSProperties>(() => {
       const tabWidth = `${100 / 3}%`;
       return {
-        [TAB_WIDTH_VAR]: tabWidth,
+        [TAB_SIZE_VAR]: tabWidth,
         [TAB_OFFSET_VAR]: "0px",
       };
     });
@@ -120,15 +120,17 @@ export function useTabList(
           return;
         }
 
+        const size = vertical ? activeTab.offsetHeight : activeTab.offsetWidth;
+        const offset = vertical ? activeTab.offsetTop : activeTab.offsetLeft;
         const cssVars: IndicatorCSSProperties = {
-          [TAB_WIDTH_VAR]: `${activeTab.offsetWidth}px`,
-          [TAB_OFFSET_VAR]: `${activeTab.offsetLeft}px`,
+          [TAB_SIZE_VAR]: `${size}px`,
+          [TAB_OFFSET_VAR]: `${offset}px`,
         };
 
         setIndicatorStyles((prevStyles) => {
           if (
             prevStyles &&
-            prevStyles[TAB_WIDTH_VAR] === cssVars[TAB_WIDTH_VAR] &&
+            prevStyles[TAB_SIZE_VAR] === cssVars[TAB_SIZE_VAR] &&
             prevStyles[TAB_OFFSET_VAR] === cssVars[TAB_OFFSET_VAR]
           ) {
             return prevStyles;
@@ -137,7 +139,7 @@ export function useTabList(
           return cssVars;
         });
       },
-      [activeIndex, isRTL]
+      [activeIndex, isRTL, vertical]
     ),
   });
   const forwardRef = useRef<HTMLDivElement>(null);

package/src/theme/_theme.scss

@@ -129,96 +129,34 @@ $_validated_color_scheme: utils.validate(
   "$color-scheme"
 );
 
-$theme-var-lookup: (
-  background-color: (
-    var: --rmd-background-color,
-    value: $background-color,
-  ),
-  on-background-color: (
-    var: --rmd-on-background-color,
-    value: null,
-  ),
-  surface-color: (
-    var: --rmd-surface-color,
-    value: $surface-color,
-  ),
-  primary-color: (
-    var: --rmd-primary-color,
-    value: $primary-color,
-  ),
-  on-primary-color: (
-    var: --rmd-on-primary-color,
-    value: $on-primary-color,
-  ),
-  secondary-color: (
-    var: --rmd-secondary-color,
-    value: $secondary-color,
-  ),
-  on-secondary-color: (
-    var: --rmd-on-secondary-color,
-    value: $on-secondary-color,
-  ),
-  warning-color: (
-    var: --rmd-warning-color,
-    value: $warning-color,
-  ),
-  on-warning-color: (
-    var: --rmd-on-warning-color,
-    value: $on-warning-color,
-  ),
-  error-color: (
-    var: --rmd-error-color,
-    value: $error-color,
-  ),
-  on-error-color: (
-    var: --rmd-on-error-color,
-    value: $on-error-color,
-  ),
-  success-color: (
-    var: --rmd-success-color,
-    value: $success-color,
-  ),
-  on-success-color: (
-    var: --rmd-on-success-color,
-    value: $on-success-color,
-  ),
-  text-primary-color: (
-    var: --rmd-text-primary-color,
-    value: $text-primary-color,
-  ),
-  text-secondary-color: (
-    var: --rmd-text-secondary-color,
-    value: $text-secondary-color,
-  ),
-  text-hint-color: (
-    var: --rmd-text-hint-color,
-    value: $text-hint-color,
-  ),
-  text-disabled-color: (
-    var: --rmd-text-disabled-color,
-    value: $text-disabled-color,
-  ),
-  outline-width: (
-    var: --rmd-outline-width,
-    value: $outline-width,
-  ),
-  outline-color: (
-    var: --rmd-outline-color,
-    value: $outline-color,
-  ),
-  outline-grey-color: (
-    var: --rmd-outline-grey-color,
-    value: $outline-grey-color,
-  ),
+$theme-variables: (
+  background-color,
+  on-background-color,
+  surface-color,
+  primary-color,
+  on-primary-color,
+  secondary-color,
+  on-secondary-color,
+  warning-color,
+  on-warning-color,
+  success-color,
+  on-success-color,
+  error-color,
+  on-error-color,
+  text-primary-color,
+  text-secondary-color,
+  text-hint-color,
+  text-disabled-color,
+  outline-width,
+  outline-color,
+  outline-grey-color
 );
 
 @function theme-get-var($name, $fallback: null) {
-  $found: utils.validate($theme-var-lookup, $name, "theme var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
+  $var: utils.get-var-name($theme-variables, $name, "theme");
 
-  @if $value {
-    @return var(#{$var}, #{$value});
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
@@ -237,9 +175,9 @@ $theme-var-lookup: (
 }
 
 @mixin theme-set-var($name, $value-or-theme-name) {
-  $var: map.get(utils.validate($theme-var-lookup, $name, "theme var"), var);
+  $var: utils.get-var-name($theme-variables, $name, "theme");
   $value: $value-or-theme-name;
-  @if map.has-key($theme-var-lookup, $value-or-theme-name) {
+  @if list.index($theme-variables, $value-or-theme-name) {
     $name: $value-or-theme-name;
     $value: theme-get-var($name);
   }
@@ -291,7 +229,7 @@ $theme-var-lookup: (
   }
 }
 
-@mixin colors {
+@mixin theme-variables {
   @include theme-set-var(background-color, $background-color);
   @if $disable-dark-elevation {
     @include theme-set-var(surface-color, $surface-color);
@@ -317,6 +255,10 @@ $theme-var-lookup: (
       @include set-dark-elevation-color($z-value, $background-color);
     }
   }
+
+  @include theme-set-var(outline-width, $outline-width);
+  @include theme-set-var(outline-color, $outline-color);
+  @include theme-set-var(outline-grey-color, $outline-grey-color);
 }
 
 @mixin create-surface($z-value, $disable-colors: $disable-dark-elevation) {

package/src/tooltip/_tooltip.scss

@@ -45,45 +45,36 @@ $leave-duration: transition.$linear-duration !default;
 $leave-timing-function: transition.$acceleration-timing-function !default;
 $transition-distance: 0.5rem !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-tooltip-background-color,
-    value: $background-color,
-  ),
-  color: (
-    var: --rmd-tooltip-color,
-    value: $color,
-  ),
-  spacing: (
-    // this is only added so you can safely do:
-    // @include react-md.tooltip-set-var(spacing, $custom-spacing);
-    var: --rmd-tooltip-spacing,
-    value: $spacing,
-  ),
-);
+$variables: (background-color, color, spacing);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "tooltip 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, "tooltip");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "tooltip var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "tooltip")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(background-color, $background-color);
+    @include set-var(color, $color);
+
+    // do not include spacing
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-tooltip {

package/src/tooltip/useTooltip.ts

@@ -96,21 +96,23 @@ export interface TooltipPositioningOptions {
  * \@since 2.8.0
  * \@since 6.0.0 Removed the `TooltipTouchEventHandlers` and
  * `TooltipKeyboardEventHandlers` types, removed the need for the `onKeyDown`
- * event, and infer element typeparam while calling instead of at hook level.
+ * event.
  */
-export interface TooltippedElementEventHandlers {
-  onBlur?<E extends HTMLElement>(event: FocusEvent<E>): void;
-  onFocus?<E extends HTMLElement>(event: FocusEvent<E>): void;
-  onMouseEnter?<E extends HTMLElement>(event: MouseEvent<E>): void;
-  onMouseLeave?<E extends HTMLElement>(event: MouseEvent<E>): void;
-  onTouchStart?<E extends HTMLElement>(event: TouchEvent<E>): void;
-  onTouchEnd?<E extends HTMLElement>(event: TouchEvent<E>): void;
-  onContextMenu?<E extends HTMLElement>(event: MouseEvent<E>): void;
+export interface TooltippedElementEventHandlers<
+  E extends HTMLElement = HTMLButtonElement,
+> {
+  onBlur?(event: FocusEvent<E>): void;
+  onFocus?(event: FocusEvent<E>): void;
+  onMouseEnter?(event: MouseEvent<E>): void;
+  onMouseLeave?(event: MouseEvent<E>): void;
+  onTouchStart?(event: TouchEvent<E>): void;
+  onTouchEnd?(event: TouchEvent<E>): void;
+  onContextMenu?(event: MouseEvent<E>): void;
 }
 
 /** @remarks \@since 2.8.0 */
-export interface ProvidedTooltippedElementProps
-  extends Required<TooltippedElementEventHandlers> {
+export interface ProvidedTooltippedElementProps<E extends HTMLElement>
+  extends Required<TooltippedElementEventHandlers<E>> {
   "aria-describedby": string | undefined;
   id: string;
 }
@@ -123,9 +125,10 @@ export interface ProvidedTooltippedElementProps
  * `TooltipHookOptions` to `TooltipOptions` to match other hook naming
  * conventions.
  */
-export interface TooltipOptions
-  extends FixedPositioningTransitionCallbacks,
-    TooltippedElementEventHandlers,
+export interface TooltipOptions<
+  TooltippedElement extends HTMLElement = HTMLButtonElement,
+> extends FixedPositioningTransitionCallbacks,
+    TooltippedElementEventHandlers<TooltippedElement>,
     TooltipPositioningOptions,
     TooltipPositionHookOptions {
   /**
@@ -255,13 +258,14 @@ export interface ProvidedTooltipProps<E extends HTMLElement = HTMLSpanElement>
  * naming conventions.
  */
 export interface TooltipImplementation<
+  TooltippedElement extends HTMLElement = HTMLButtonElement,
   TooltipElement extends HTMLElement = HTMLSpanElement,
 > extends ControlledHoverModeImplementation {
   visible: boolean;
   setVisible: UseStateSetter<boolean>;
   animatedOnce: boolean;
   initiatedBy: MutableRefObject<UserInteractionMode | null>;
-  elementProps: ProvidedTooltippedElementProps;
+  elementProps: ProvidedTooltippedElementProps<TooltippedElement>;
   tooltipProps: ProvidedTooltipProps<TooltipElement>;
 
   /**
@@ -367,8 +371,11 @@ export interface TooltipImplementation<
  * stay visible
  */
 export function useTooltip<
+  TooltippedElement extends HTMLElement = HTMLButtonElement,
   TooltipElement extends HTMLElement = HTMLSpanElement,
->(options: TooltipOptions = {}): TooltipImplementation<TooltipElement> {
+>(
+  options: TooltipOptions<TooltippedElement> = {}
+): TooltipImplementation<TooltippedElement, TooltipElement> {
   const {
     id: propId,
     style: propStyle,

package/src/transition/SkeletonPlaceholder.tsx

@@ -1,5 +1,10 @@
 "use client";
-import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+import {
+  forwardRef,
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+} from "react";
 import {
   useSkeletonPlaceholder,
   type SkeletonPlaceholderOptions,
@@ -132,9 +137,10 @@ export interface SkeletonPlaceholderProps
  *
  * @remarks \@since 6.0.0
  */
-export function SkeletonPlaceholder(
-  props: SkeletonPlaceholderProps
-): ReactElement {
+export const SkeletonPlaceholder = forwardRef<
+  HTMLDivElement,
+  SkeletonPlaceholderProps
+>(function SkeletonPlaceholder(props, ref): ReactElement {
   const {
     style,
     className,
@@ -142,6 +148,9 @@ export function SkeletonPlaceholder(
     width,
     children,
     disabled = !!children,
+    delay,
+    minDelay,
+    maxDelay,
     minPercentage,
     maxPercentage,
     ...remaining
@@ -152,13 +161,16 @@ export function SkeletonPlaceholder(
     className,
     height,
     width,
+    delay,
+    minDelay,
+    maxDelay,
     minPercentage,
     maxPercentage,
   });
 
   return (
-    <div {...remaining} {...skeleton}>
+    <div {...remaining} ref={ref} {...skeleton}>
       {children}
     </div>
   );
-}
+});