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

package/src/tree/_tree.scss

@@ -6,13 +6,14 @@
 @use "../typography/typography";
 @use "../interaction/interaction";
 
+$disable-everything: false !default;
 $disable-expander-left: false !default;
 $disable-expander-left-as-media: false !default;
 $disable-expander-left-as-media-offset: false !default;
 $disable-selected-background-color: false !default;
 
-$padding-incrementor: list.$item-horizontal-padding * 1.5 !default;
-$padding-base: list.get-var(item-keyline) !default;
+$item-padding-base: list.$item-horizontal-padding !default;
+$item-padding-incrementor: list.$item-horizontal-padding * 1.5 !default;
 $expander-right-from: icon.$rotate-from !default;
 $expander-right-to: 90deg !default;
 $expander-left-from: 0deg !default;
@@ -22,153 +23,154 @@ $selected-styles: (
   font-weight: typography.$font-weight-bold,
 ) !default;
 
-$var-lookup: (
-  depth: (
-    var: --rmd-tree-depth,
-    value: -1,
-  ),
-  item-padding: (
-    var: --rmd-tree-item-padding,
-    value: 0,
-  ),
-  padding-base: (
-    var: --rmd-tree-item-padding-base,
-    value: $padding-base,
-  ),
-  padding-incrementor: (
-    var: --rmd-tree-item-padding-incrementor,
-    value: $padding-incrementor,
-  ),
-);
+$variables: (depth, item-padding, item-padding-base, item-padding-incrementor);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "tree 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, "tree");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "tree var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "tree")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
-@mixin styles {
-  .rmd-tree {
-    display: block;
-    height: 100%;
-    outline-style: none;
-    overflow: auto;
-    // this is mostly for firefox. moving the mouse even 1px while clicking will
-    // select the current item and all items to the tree root
-    user-select: none;
-    width: 100%;
+// must be defined after the `get-var` function
+$item-padding: calc(
+  get-var(depth) * get-var(item-padding-incrementor) +
+    get-var(item-padding-base)
+) !default;
+
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(depth, 0);
+    @include set-var(item-padding, 0);
+    @include set-var(item-padding-base, $item-padding-base);
+    @include set-var(item-padding-incrementor, $item-padding-incrementor);
   }
+}
 
-  .rmd-tree-item {
-    @include icon.set-var(rotate-from, $expander-right-from);
-    @include icon.set-var(rotate-to, $expander-right-to);
-    @include set-var(
-      item-padding,
-      calc(
-        get-var(depth) * get-var(padding-incrementor) + get-var(padding-base)
-      )
-    );
-
-    list-style: none;
-
-    @if not $disable-expander-left {
-      &--expander-left {
-        @include icon.set-var(rotate-from, $expander-left-from);
-        @include icon.set-var(rotate-to, $expander-left-to);
+@mixin styles($disable-layer: false) {
+  @if not $disable-everything {
+    @include utils.optional-layer(tree, $disable-layer) {
+      .rmd-tree {
+        display: block;
+        height: 100%;
+        outline-style: none;
+        overflow: auto;
+        // this is mostly for firefox. moving the mouse even 1px while clicking will
+        // select the current item and all items to the tree root
+        user-select: none;
+        width: 100%;
       }
-    }
 
-    &__content {
-      &--disabled {
-        cursor: auto;
+      .rmd-tree-item {
+        @include icon.set-var(rotate-from, $expander-right-from);
+        @include icon.set-var(rotate-to, $expander-right-to);
+        @include set-var(item-padding, $item-padding);
 
-        &:hover::before {
-          @include interaction.set-var(background-color, transparent);
+        list-style: none;
+
+        @if not $disable-expander-left {
+          &--expander-left {
+            @include icon.set-var(rotate-from, $expander-left-from);
+            @include icon.set-var(rotate-to, $expander-left-to);
+          }
         }
-      }
 
-      &--link {
-        color: inherit;
-        text-decoration: none;
-      }
+        &__content {
+          @include utils.auto-rtl(
+            padding-left,
+            get-var(item-padding),
+            list.get-var(item-horizontal-padding)
+          );
 
-      &--padded {
-        @include utils.auto-rtl(
-          padding-left,
-          get-var(item-padding),
-          list.get-var(item-horizontal-padding)
-        );
-      }
+          &--disabled {
+            cursor: auto;
 
-      &--focused::before {
-        .rmd-tree:focus-within & {
-          @include utils.keyboard-only {
-            @include interaction.focus-styles;
+            &:hover::before {
+              @include interaction.set-var(background-color, transparent);
+            }
           }
-        }
-      }
 
-      @if $selected-styles {
-        &--selected {
-          @if not $disable-selected-background-color {
-            @include interaction.set-var(
-              background-color,
-              interaction.get-var(selected-background-color)
-            );
+          &--link {
+            color: inherit;
+            text-decoration: none;
+          }
 
-            @include utils.touch-only {
-              &:hover::before {
+          &--focused::before {
+            // Note: Clicking an item and then using the keyboard to move focus
+            // will **not** show the focus outline so might not be ideal. the tree
+            // must be re-focused after a `Tab` keypress for it to appear again
+            @if utils.$disable-focus-visible {
+              .rmd-tree:focus-within & {
+                @include utils.keyboard-only {
+                  @include interaction.focus-styles;
+                }
+              }
+            } @else {
+              .rmd-tree:focus-visible & {
+                @include interaction.focus-styles;
+              }
+            }
+          }
+
+          @if $selected-styles {
+            &--selected {
+              @if not $disable-selected-background-color {
                 @include interaction.set-var(
                   background-color,
                   interaction.get-var(selected-background-color)
                 );
+
+                @include utils.touch-only {
+                  &:hover::before {
+                    @include interaction.set-var(
+                      background-color,
+                      interaction.get-var(selected-background-color)
+                    );
+                  }
+                }
               }
+              @include utils.map-to-styles($selected-styles);
             }
           }
-          @include utils.map-to-styles($selected-styles);
         }
-      }
-    }
 
-    @if not $disable-expander-left-as-media {
-      &__media {
-        align-items: center;
-        display: flex;
-        justify-content: space-between;
+        @if not $disable-expander-left-as-media {
+          &__media {
+            align-items: center;
+            display: flex;
+            justify-content: space-between;
 
-        @if not $disable-expander-left-as-media-offset {
-          &--single {
-            justify-content: flex-end;
+            @if not $disable-expander-left-as-media-offset {
+              &--single {
+                justify-content: flex-end;
+              }
+            }
           }
         }
       }
-    }
-  }
 
-  .rmd-tree-group {
-    background-color: inherit;
-    color: inherit;
-    font-size: inherit;
-    line-height: inherit;
+      .rmd-tree-group {
+        background-color: inherit;
+        color: inherit;
+        font-size: inherit;
+        line-height: inherit;
 
-    // remove the list padding to make it more condensed
-    padding-bottom: 0;
-    padding-top: 0;
+        // remove the list padding to make it more condensed
+        padding-bottom: 0;
+        padding-top: 0;
+      }
+    }
   }
 }

package/src/tree/styles.ts

@@ -66,13 +66,6 @@ export interface TreeItemContentClassNameOptions
    */
   link?: boolean;
 
-  /**
-   *
-   *
-   * @defaultValue `false`
-   */
-  padded?: boolean;
-
   /**
    * Set this to `true` when the tree item is the current keyboard focus with
    * `aria-activedescendant`. This will apply the focus styles only while the
@@ -101,7 +94,6 @@ export function treeItemContent(
   const {
     className,
     link = false,
-    padded = false,
     focused,
     selected,
     disabled = false,
@@ -111,7 +103,6 @@ export function treeItemContent(
   return cnb(
     treeItemStyles("content", {
       link,
-      padded,
       focused,
       selected,
       disabled,

package/src/tree/useTreeMovement.ts

@@ -119,7 +119,7 @@ export function useTreeMovement<T extends TreeItemNode>(
       if (!item) {
         return;
       }
-      /* c8 ignore end */
+      /* c8 ignore stop */
 
       const disabled = disabledItems[itemId];
       const expanded = expandedIds.has(itemId);

package/src/types.ts

@@ -174,3 +174,16 @@ export type CssPosition = "fixed" | "sticky" | "static";
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type AnyFunction = (...args: any[]) => any | void;
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export type CancelableFunction<F extends AnyFunction> = F & { cancel(): void };
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ElementSize {
+  height: number;
+  width: number;
+}

package/src/typography/SrOnly.tsx

@@ -1,13 +1,11 @@
-import { forwardRef } from "react";
+import { forwardRef, type ElementType, type HTMLAttributes } from "react";
+import { cssUtils } from "../cssUtils.js";
 import {
-  Typography,
   type CustomTypographyComponent,
   type TypographyHTMLElement,
-  type TypographyProps,
 } from "./Typography.js";
-import { cssUtils } from "../cssUtils.js";
 
-export interface SrOnlyProps extends TypographyProps {
+export interface SrOnlyProps extends HTMLAttributes<TypographyHTMLElement> {
   /** @defaultValue `"span"` */
   as?: CustomTypographyComponent;
 
@@ -54,7 +52,7 @@ export interface SrOnlyProps extends TypographyProps {
 export const SrOnly = forwardRef<TypographyHTMLElement, SrOnlyProps>(
   function SrOnly(props, ref) {
     const {
-      as = "span",
+      as: AsComponent = "span",
       className,
       phoneOnly,
       focusable,
@@ -63,10 +61,12 @@ export const SrOnly = forwardRef<TypographyHTMLElement, SrOnlyProps>(
       ...remaining
     } = props;
 
+    // do some type-casting so ref works
+    const Component = AsComponent as ElementType;
+
     return (
-      <Typography
+      <Component
         {...remaining}
-        as={as}
         ref={ref}
         tabIndex={tabIndex ?? (focusable ? 0 : undefined)}
         className={cssUtils({
@@ -75,7 +75,7 @@ export const SrOnly = forwardRef<TypographyHTMLElement, SrOnlyProps>(
         })}
       >
         {children}
-      </Typography>
+      </Component>
     );
   }
 );

package/src/typography/Typography.tsx

@@ -62,24 +62,24 @@ export type NullableTypographyClassNameOptions = Omit<
  * @example
  * Simple Example
  * ```ts
- * import { getTypographyClassName } from "@react-md/core";
+ * import { typography } from "@react-md/core";
  *
  * function Example() {
  *   return (
  *     <>
- *       <h1 className={getTypographyClassName({ type: "headline-1" })} />
- *       <h2 className={getTypographyClassName({ type: "headline-2" })} />
- *       <h3 className={getTypographyClassName({ type: "headline-3" })} />
- *       <h4 className={getTypographyClassName({ type: "headline-4" })} />
- *       <h5 className={getTypographyClassName({ type: "headline-5" })} />
- *       <h6 className={getTypographyClassName({ type: "headline-6" })} />
- *       <h5 className={getTypographyClassName({ type: "subtitle-1" })} />
- *       <h6 className={getTypographyClassName({ type: "subtitle-2" })} />
- *       <p className={getTypographyClassName()} />
- *       <p className={getTypographyClassName({ type "body-1" })} />
- *       <p className={getTypographyClassName({ type "body-1" })} />
- *       <caption className={getTypographyClassName({ type: "caption" })} />
- *       <span className={getTypographyClassName({ type: "overline" })} />
+ *       <h1 className={typography({ type: "headline-1" })} />
+ *       <h2 className={typography({ type: "headline-2" })} />
+ *       <h3 className={typography({ type: "headline-3" })} />
+ *       <h4 className={typography({ type: "headline-4" })} />
+ *       <h5 className={typography({ type: "headline-5" })} />
+ *       <h6 className={typography({ type: "headline-6" })} />
+ *       <h5 className={typography({ type: "subtitle-1" })} />
+ *       <h6 className={typography({ type: "subtitle-2" })} />
+ *       <p className={typography()} />
+ *       <p className={typography({ type "body-1" })} />
+ *       <p className={typography({ type "body-1" })} />
+ *       <caption className={typography({ type: "caption" })} />
+ *       <span className={typography({ type: "overline" })} />
  *     </>
  *   );
  * }
@@ -88,14 +88,14 @@ export type NullableTypographyClassNameOptions = Omit<
  * @example
  * Applying Additional Styles
  * ```ts
- * import { getTypography } from "@react-md/core";
+ * import { typography } from "@react-md/core";
  *
  * function Example() {
  *   return (
  *     <>
  *       <h1
  *         // only maintain the default margin-bottom
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-1",
  *           margin: "bottom",
  *         })}
@@ -103,7 +103,7 @@ export type NullableTypographyClassNameOptions = Omit<
  *
  *       <h2
  *         // remove all default margin
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-2",
  *           margin: "none",
  *         })}
@@ -111,7 +111,7 @@ export type NullableTypographyClassNameOptions = Omit<
  *
  *       <h3
  *         // only maintain the default margin-top
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-3",
  *           margin: "top",
  *         })}
@@ -119,7 +119,7 @@ export type NullableTypographyClassNameOptions = Omit<
  *
  *       <p
  *         // center the text, set to bold, and only maintain default margin-bottom
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type "subtitle-1",
  *           align: "center",
  *           margin: "bottom",

package/src/typography/WritingDirectionProvider.tsx

@@ -3,12 +3,14 @@ import {
   Children,
   cloneElement,
   createContext,
+  isValidElement,
   useCallback,
   useContext,
   useEffect,
   useMemo,
   useState,
   type ReactElement,
+  type ReactNode,
 } from "react";
 import { type UseStateInitializer } from "../types.js";
 
@@ -89,7 +91,7 @@ export interface WritingDirectionProviderProps {
    * `WritingDirection`, the child will have the `dir` prop cloned into this
    * element.
    */
-  children: ReactElement<{ dir?: Dir }>;
+  children: ReactElement<{ dir?: Dir }> | ReactNode;
 
   /**
    * The default writing direction for your app or a subtree. To change the
@@ -224,7 +226,7 @@ export function WritingDirectionProvider(
     [dir, toggleDir]
   );
   let child = Children.only(children);
-  if (!root) {
+  if (!root && isValidElement<{ dir: Dir }>(child)) {
     child = cloneElement(child, { dir });
   }
 

package/src/typography/__tests__/__snapshots__/SrOnly.tsx.snap

@@ -3,7 +3,7 @@
 exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 1`] = `
 <div>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Some content
   </span>
@@ -13,7 +13,7 @@ exports[`SrOnly should apply the correct styling, HTML attributes, and allow a r
 exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 2`] = `
 <div>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only custom-class-name"
+    class="rmd-sr-only custom-class-name"
     style="opacity: 0.3;"
   >
     Some content
@@ -24,7 +24,7 @@ exports[`SrOnly should apply the correct styling, HTML attributes, and allow a r
 exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 3`] = `
 <div>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only rmd-sr-only--focusable"
+    class="rmd-sr-only rmd-sr-only--focusable"
     style=""
     tabindex="0"
   >
@@ -36,7 +36,7 @@ exports[`SrOnly should apply the correct styling, HTML attributes, and allow a r
 exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 4`] = `
 <div>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only rmd-sr-only--focusable"
+    class="rmd-sr-only rmd-sr-only--focusable"
     style=""
     tabindex="-1"
   >
@@ -48,7 +48,7 @@ exports[`SrOnly should apply the correct styling, HTML attributes, and allow a r
 exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 5`] = `
 <div>
   <h4
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Some content
   </h4>