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

package/src/snackbar/__tests__/__snapshots__/ToastManagerProvider.tsx.snap

@@ -3,12 +3,13 @@
 exports[`ToastManagerProvider default toast manager should work without needing to setup a toast manager yourself 1`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r0:"
-  role="status"
 >
   <div
     class="rmd-toast rmd-scale-transition--enter rmd-scale-transition--enter-active"
     id="toast-:r1:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -22,12 +23,13 @@ exports[`ToastManagerProvider default toast manager should work without needing
 exports[`ToastManagerProvider default toast manager should work without needing to setup a toast manager yourself 2`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r0:"
-  role="status"
 >
   <div
     class="rmd-toast"
     id="toast-:r1:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -42,6 +44,7 @@ exports[`ToastManagerProvider toast queue should add a toast next in queue if a
 <div
   class="rmd-toast"
   id="toast-:ru:"
+  role="status"
 >
   <div
     class="rmd-toast-content"
@@ -55,6 +58,7 @@ exports[`ToastManagerProvider toast queue should allow a toast to replace the cu
 <div
   class="rmd-toast"
   id="toast-:ri:"
+  role="status"
 >
   <div
     class="rmd-toast-content"
@@ -67,8 +71,8 @@ exports[`ToastManagerProvider toast queue should allow a toast to replace the cu
 exports[`ToastManagerProvider toast queue should not trigger a timeout if the visibleTime is null and set the toast to have an alert role 1`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r1b:"
-  role="status"
 >
   <div
     class="rmd-toast rmd-toast--x rmd-scale-transition--enter rmd-scale-transition--enter-active"
@@ -99,8 +103,8 @@ exports[`ToastManagerProvider toast queue should not trigger a timeout if the vi
 exports[`ToastManagerProvider toast queue should not trigger a timeout if the visibleTime is null and set the toast to have an alert role 2`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r1b:"
-  role="status"
 >
   <div
     class="rmd-toast rmd-toast--x rmd-scale-transition--exit rmd-scale-transition--exit-active"
@@ -131,12 +135,13 @@ exports[`ToastManagerProvider toast queue should not trigger a timeout if the vi
 exports[`ToastManagerProvider toast queue should support rendering multiple toasts as once using the limit prop 1`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r1d:"
-  role="status"
 >
   <div
     class="rmd-toast"
     id="toast-:r1e:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -147,6 +152,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
   <div
     class="rmd-toast rmd-scale-transition--enter rmd-scale-transition--enter-active"
     id="toast-:r1f:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -157,6 +163,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
   <div
     class="rmd-toast rmd-scale-transition--enter rmd-scale-transition--enter-active"
     id="toast-:r1g:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -170,12 +177,13 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
 exports[`ToastManagerProvider toast queue should support rendering multiple toasts as once using the limit prop 2`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r1d:"
-  role="status"
 >
   <div
     class="rmd-toast"
     id="toast-:r1f:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -186,6 +194,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
   <div
     class="rmd-toast"
     id="toast-:r1g:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -196,6 +205,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
   <div
     class="rmd-toast rmd-scale-transition--enter rmd-scale-transition--enter-active"
     id="toast-:r1h:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -209,12 +219,13 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
 exports[`ToastManagerProvider toast queue should support rendering multiple toasts as once using the limit prop 3`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r1d:"
-  role="status"
 >
   <div
     class="rmd-toast rmd-scale-transition--exit rmd-scale-transition--exit-active"
     id="toast-:r1f:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -225,6 +236,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
   <div
     class="rmd-toast rmd-scale-transition--exit rmd-scale-transition--exit-active"
     id="toast-:r1g:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -235,6 +247,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
   <div
     class="rmd-toast"
     id="toast-:r1h:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -248,12 +261,13 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
 exports[`ToastManagerProvider toast queue should support rendering multiple toasts as once using the limit prop 4`] = `
 <div
   class="rmd-snackbar rmd-snackbar--bottom"
+  data-testid="snackbar"
   id="snackbar-:r1d:"
-  role="status"
 >
   <div
     class="rmd-toast rmd-scale-transition--exit rmd-scale-transition--exit-active"
     id="toast-:r1h:"
+    role="status"
   >
     <div
       class="rmd-toast-content"
@@ -264,6 +278,7 @@ exports[`ToastManagerProvider toast queue should support rendering multiple toas
   <div
     class="rmd-toast rmd-scale-transition--enter rmd-scale-transition--enter-active"
     id="toast-:r1i:"
+    role="status"
   >
     <div
       class="rmd-toast-content"

package/src/snackbar/_snackbar.scss

@@ -60,43 +60,35 @@ $background-color: theme.get-default-color(
 ) !default;
 $color: theme.get-default-color($light-theme-color, $dark-theme-color) !default;
 
-$var-lookup: (
-  color: (
-    var: --rmd-toast-color,
-    value: $color,
-  ),
-  background-color: (
-    var: --rmd-toast-background-color,
-    value: $background-color,
-  ),
-  offset: (
-    var: --rmd-snackbar-offset,
-    value: 0,
-  ),
-);
+$variables: (background-color, color, offset);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "alert 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, "snackbar");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "alert var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "snackbar")}: #{$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);
+    @include set-var(offset, 0);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-snackbar {

package/src/suspense/CircularProgressSuspense.tsx

@@ -8,6 +8,10 @@ import {
  * @remarks \@since 6.0.0
  */
 export interface CircularProgressSuspenseProps extends CircularProgressProps {
+  /**
+   * @defaultValue `"Loading"`
+   */
+  "aria-label"?: string;
   children: ReactNode;
 }
 
@@ -40,9 +44,22 @@ export interface CircularProgressSuspenseProps extends CircularProgressProps {
 export function CircularProgressSuspense(
   props: CircularProgressSuspenseProps
 ): ReactElement {
-  const { children, ...progressProps } = props;
+  const {
+    children,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel = ariaLabelledBy ? undefined : "Loading",
+    ...progressProps
+  } = props;
   return (
-    <Suspense fallback={<CircularProgress {...progressProps} />}>
+    <Suspense
+      fallback={
+        <CircularProgress
+          aria-label={ariaLabel as string}
+          aria-labelledby={ariaLabelledBy}
+          {...progressProps}
+        />
+      }
+    >
       {children}
     </Suspense>
   );

package/src/table/Table.tsx

@@ -1,12 +1,11 @@
 "use client";
-import { cnb } from "cnbuilder";
 import { forwardRef, useMemo, type TableHTMLAttributes } from "react";
-import { bem } from "../utils/bem.js";
 import {
   TableConfigProvider,
   type TableConfigContext,
   type TableConfiguration,
 } from "./TableConfigurationProvider.js";
+import { table } from "./tableStyles.js";
 
 declare module "react" {
   interface CSSProperties {
@@ -28,28 +27,6 @@ declare module "react" {
   }
 }
 
-const styles = bem("rmd-table");
-
-/** @remarks \@since 6.0.0 */
-export interface TableClassNameOptions {
-  className?: string;
-
-  /** @defaultValue `false` */
-  dense?: boolean;
-
-  /** @defaultValue `false` */
-  fullWidth?: boolean;
-}
-
-/**
- * @remarks \@since 6.0.0
- */
-export function table(options: TableClassNameOptions = {}): string {
-  const { dense = false, fullWidth = false, className } = options;
-
-  return cnb(styles({ dense, "full-width": fullWidth }), className);
-}
-
 export interface TableProps
   extends TableHTMLAttributes<HTMLTableElement>,
     TableConfiguration {}

package/src/table/TableCell.tsx

@@ -1,5 +1,4 @@
 "use client";
-import { cnb } from "cnbuilder";
 import {
   forwardRef,
   type ButtonHTMLAttributes,
@@ -9,13 +8,16 @@ import {
 } from "react";
 import { getIcon } from "../icon/iconConfig.js";
 import { type PropsWithRef } from "../types.js";
-import { TableCellContent, type SortOrder } from "./TableCellContent.js";
+import {
+  TableCellContent,
+  type SortOrder,
+  type TableCellContentsIconRotatorProps,
+} from "./TableCellContent.js";
 import {
   useTableConfig,
   type TableCellConfig,
-  type TableCellHorizontalAlignment,
-  type TableCellVerticalAlignment,
 } from "./TableConfigurationProvider.js";
+import { tableCell } from "./tableCellStyles.js";
 
 export type TableCellAttributes = Omit<
   | TdHTMLAttributes<HTMLTableCellElement>
@@ -59,7 +61,7 @@ export interface TableCellOptions extends TableCellConfig {
    * @internal
    * @defaultValue `false`
    */
-  checkbox?: boolean;
+  inputToggle?: boolean;
 }
 
 /**
@@ -122,6 +124,14 @@ export interface TableCellProps extends TableCellAttributes, TableCellOptions {
     HTMLButtonElement
   >;
 
+  /**
+   * Any additional props to pass to the `IconRotator` when the `aria-sort` prop
+   * has been provided.
+   *
+   * @remarks \@since 6.0.0
+   */
+  iconRotatorProps?: TableCellContentsIconRotatorProps;
+
   /**
    * Since providing an `aria-sort` prop will wrap the `children` in an
    * `UnstyledButton`, you can use this prop to render another button within the
@@ -190,81 +200,6 @@ export interface TableCellProps extends TableCellAttributes, TableCellOptions {
   afterChildren?: ReactNode;
 }
 
-/** @remarks \@since 6.0.0 */
-export interface TableCellClassNameOptions {
-  className?: string;
-
-  /**
-   * Set this to `true` if the cell is rendered as a `<th>` so that the correct
-   * sticky styles can be applied.
-   */
-  header: boolean;
-
-  /**
-   * Set this to true if the cell is rendered in a `<thead>` so that the correct
-   * sticky styles can be applied.
-   */
-  isInTableHeader: boolean;
-
-  /** @defaultValue `false` */
-  grow?: boolean;
-
-  /** @defaultValue `false` */
-  sticky?: boolean;
-
-  /** @defaultValue `false` */
-  checkbox?: boolean;
-
-  hAlign?: TableCellHorizontalAlignment;
-  vAlign?: TableCellVerticalAlignment;
-
-  /** @defaultValue `true` */
-  lineWrap?: boolean;
-
-  /**
-   * @defaultValue `"horizontal"`
-   */
-  padding?: "horizontal" | "vertical" | "none";
-}
-
-/**
- * @remarks \@since 6.0.0
- */
-export function tableCell(options: TableCellClassNameOptions): string {
-  const {
-    grow,
-    sticky,
-    header,
-    checkbox,
-    hAlign,
-    vAlign,
-    lineWrap = true,
-    padding = "horizontal",
-    isInTableHeader,
-    className,
-  } = options;
-
-  // using `&&` instead of `bem` since the latest version of typescript does not
-  // support setting the same object key (empty string)
-  const p = "rmd-table-cell--";
-  return cnb(
-    "rmd-table-cell",
-    grow && `${p}grow`,
-    header && `${p}header`,
-    sticky && `${p}sticky`,
-    checkbox && `${p}checkbox`,
-    sticky && (!isInTableHeader || checkbox) && `${p}sticky-cell`,
-    sticky && isInTableHeader && `${p}sticky-header`,
-    sticky && isInTableHeader && checkbox && `${p}header-cell`,
-    hAlign && hAlign !== "left" && `${p}${hAlign}`,
-    vAlign && vAlign !== "middle" && `${p}${vAlign}`,
-    !lineWrap && `${p}no-wrap`,
-    padding === "vertical" && `${p}v-padding`,
-    padding === "none" && `${p}no-padding`,
-    className
-  );
-}
-
 /**
  * **Client Component**
  *
@@ -272,9 +207,9 @@ export function tableCell(options: TableCellClassNameOptions): string {
  * a `<th>` element by enabling the `header` prop OR having a `TableCell` as a
  * child of the `TableHeader` component.
  *
- * Note: If you have a checkbox column in the `TableHeader` without any labels,
- * you will need to manually set the `header={false}` prop for that cell since
- * it is invalid to have a `<th>` without any readable content for screen
+ * Note: If you have a checkbox/radio column in the `TableHeader` without any
+ * labels, you will need to manually set the `header={false}` prop for that cell
+ * since it is invalid to have a `<th>` without any readable content for screen
  * readers.
  */
 export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
@@ -288,7 +223,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
       vAlign: propVAlign,
       header: propHeader,
       lineWrap: propDisableLineWrap,
-      checkbox,
+      inputToggle,
       children,
       beforeChildren,
       afterChildren,
@@ -296,6 +231,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
       sortIcon: propSortIcon,
       sortIconAfter = false,
       sortIconRotated,
+      iconRotatorProps,
       padding = "horizontal",
       contentProps,
       ...remaining
@@ -335,7 +271,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
           grow,
           header,
           sticky,
-          checkbox,
+          inputToggle,
           hAlign,
           vAlign,
           lineWrap: !sortOrder && lineWrap,
@@ -349,6 +285,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
           {...contentProps}
           icon={sortIcon}
           iconAfter={sortIconAfter}
+          iconRotatorProps={iconRotatorProps}
           sortOrder={sortOrder}
           hAlign={hAlign}
           rotated={sortIconRotated}

package/src/table/TableCellContent.tsx

@@ -1,12 +1,20 @@
 import { cnb } from "cnbuilder";
 import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
 import { ButtonUnstyled } from "../button/ButtonUnstyled.js";
-import { IconRotator } from "../icon/IconRotator.js";
+import { IconRotator, type IconRotatorProps } from "../icon/IconRotator.js";
 import { bem } from "../utils/bem.js";
 import { type TableCellHorizontalAlignment } from "./TableConfigurationProvider.js";
 
 export type SortOrder = "ascending" | "descending" | "none" | "other";
 
+/**
+ * @remarks \@since 6.0.0
+ */
+export type TableCellContentsIconRotatorProps = Omit<
+  IconRotatorProps,
+  "children" | "rotated"
+>;
+
 /**
  * @remarks \@since 6.0.0 Extends the `ButtonHTMLAttributes` so the extra props
  * can be passed to the `ButtonUnstyled`
@@ -33,6 +41,11 @@ export interface TableCellContentProps
    */
   rotated?: boolean;
 
+  /**
+   * Any additional props to pass to the `IconRotator`.
+   */
+  iconRotatorProps?: TableCellContentsIconRotatorProps;
+
   /**
    * @remarks \@since 4.0.3
    * @see {@link TableCellHorizontalAlignment}
@@ -66,6 +79,7 @@ export const TableCellContent = forwardRef<
     rotated: propRotated,
     hAlign = "left",
     iconAfter,
+    iconRotatorProps,
     ...remaining
   } = props;
   if (!sortOrder || propIcon === null) {
@@ -76,7 +90,11 @@ export const TableCellContent = forwardRef<
   if (sortOrder !== "none") {
     const rotated = propRotated ?? sortOrder === "descending";
 
-    icon = <IconRotator rotated={rotated}>{propIcon}</IconRotator>;
+    icon = (
+      <IconRotator {...iconRotatorProps} rotated={rotated}>
+        {propIcon}
+      </IconRotator>
+    );
   }
 
   return (

package/src/table/TableCheckbox.tsx

@@ -82,7 +82,6 @@ export interface TableCheckboxProps
  * @example
  * Simple Example
  * ```tsx
- * import { useCheckboxGroup } from "@react-md/core";
  * import {
  *   Table,
  *   TableBody,
@@ -91,8 +90,9 @@ export interface TableCheckboxProps
  *   TableContainer,
  *   TableHeader,
  *   TableRow,
+ *   useCheckboxGroup
  * } from "@react-md/core";
- * import type { ReactElement } from "react";
+ * import { type ReactElement } from "react";
  *
  * const rows = [
  *   { name: "Frozen Yogurt", type: "Ice Cream" },
@@ -179,7 +179,7 @@ export const TableCheckbox = forwardRef<
       {...remaining}
       ref={ref}
       header={false}
-      checkbox
+      inputToggle
       onClick={(event) => {
         event.stopPropagation();
         onClick(event);

package/src/table/TableContainer.tsx

@@ -1,18 +1,11 @@
 "use client";
-import { cnb } from "cnbuilder";
 import { forwardRef, useMemo, type HTMLAttributes } from "react";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import {
   TableContainerProvider,
   type TableContainerContext,
 } from "./TableContainerProvider.js";
-
-/**
- * @remarks \@since 6.0.0
- */
-export function tableContainer({ className }: { className?: string }): string {
-  return cnb("rmd-table-container", className);
-}
+import { tableContainer } from "./tableContainerStyles.js";
 
 export type TableContainerProps = HTMLAttributes<HTMLDivElement>;
 

package/src/table/TableFooter.tsx

@@ -1,5 +1,4 @@
 "use client";
-import { cnb } from "cnbuilder";
 import {
   forwardRef,
   useCallback,
@@ -9,7 +8,6 @@ import {
 } from "react";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { useIntersectionObserver } from "../useIntersectionObserver.js";
-import { bem } from "../utils/bem.js";
 import {
   TableConfigProvider,
   useTableConfig,
@@ -17,10 +15,26 @@ import {
   type TableConfigContext,
 } from "./TableConfigurationProvider.js";
 import { useTableContainer } from "./TableContainerProvider.js";
-import { type TableStickySectionProps } from "./types.js";
+import { tableFooter } from "./tableFooterStyles.js";
+import {
+  type IsStickyTableSectionActive,
+  type TableStickySectionProps,
+} from "./types.js";
 
-const styles = bem("rmd-tfoot");
+/**
+ * @remarks \@since 6.0.0
+ */
+export const isTableFooterStickyActive: IsStickyTableSectionActive = (
+  entry,
+  isInTableContainer
+) => {
+  const { intersectionRatio, boundingClientRect, isIntersecting } = entry;
+  if (isInTableContainer) {
+    return !isIntersecting;
+  }
 
+  return intersectionRatio < 1 && boundingClientRect.top >= 0;
+};
 /**
  * @remarks \@since 6.0.0 Added support for "sticky-active" state.
  */
@@ -36,6 +50,9 @@ export interface TableFooterProps
    * @defaultValue `false`
    */
   hoverable?: boolean;
+
+  /** @defaultValue {@link isTableFooterStickyActive} */
+  isStickyActive?: IsStickyTableSectionActive;
 }
 
 /**
@@ -58,8 +75,9 @@ export const TableFooter = forwardRef<
     children,
     sticky = false,
     stickyOptions,
-    isStickyActive,
+    isStickyActive = isTableFooterStickyActive,
     disableStickyStyles = false,
+    stickyActiveClassName,
     ...remaining
   } = props;
 
@@ -101,17 +119,7 @@ export const TableFooter = forwardRef<
     }, [exists, tfootRef]),
     onUpdate: useCallback(
       ([entry]) => {
-        if (typeof isStickyActive === "function") {
-          return isStickyActive(entry);
-        }
-
-        const { intersectionRatio, boundingClientRect, isIntersecting } = entry;
-        if (exists) {
-          setStickyActive(!isIntersecting);
-          return;
-        }
-
-        setStickyActive(intersectionRatio < 1 && boundingClientRect.top >= 0);
+        setStickyActive(isStickyActive(entry, exists));
       },
       [exists, isStickyActive]
     ),
@@ -129,13 +137,12 @@ export const TableFooter = forwardRef<
       <tfoot
         {...remaining}
         ref={exists ? tfootRefCallback : targetRef}
-        className={cnb(
-          styles({
-            sticky,
-            "sticky-active": stickyActive,
-          }),
-          className
-        )}
+        className={tableFooter({
+          className,
+          sticky,
+          stickyActive,
+          stickyActiveClassName,
+        })}
       >
         {children}
       </tfoot>