@react-md/core 1.0.0-next.13 → 1.0.0-next.15

package/src/link/Link.tsx

@@ -27,8 +27,7 @@ export type CustomLinkComponent =
  * @since 6.0.0 Removed the `component` prop since all you need for link
  * behavior is `className="rmd-link"`.
  * @since 6.0.0 The `href` prop is required.
- * @since 6.0.0 Removed the `flexCentered` prop since it is now the default
- * styles.
+ * @since 6.0.0 Renamed `flexCentered` to `flex`.
  */
 export interface LinkProps
   extends AnchorHTMLAttributes<HTMLAnchorElement>,
@@ -72,8 +71,7 @@ export interface LinkProps
  * @since 6.0.0 Removed the `component` prop since all you need for link
  * behavior is `className="rmd-link"`.
  * @since 6.0.0 The `href` prop is required.
- * @since 6.0.0 Removed the `flexCentered` prop since it is now the default
- * styles.
+ * @since 6.0.0 Renamed `flexCentered` to `flex`.
  */
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
   function Link(props, ref) {

package/src/link/SkipToMainContent.tsx

@@ -3,7 +3,7 @@ import { forwardRef, useEffect, useRef, type ReactNode } from "react";
 import { Link, type LinkProps } from "./Link.js";
 import {
   skipToMainContent,
-  type SKipToMainContentClassNameOptions,
+  type SkipToMainContentClassNameOptions,
 } from "./styles.js";
 
 const noop = (): void => {
@@ -16,11 +16,15 @@ const getMainElement = (mainId: string): HTMLElement | null =>
     : document.querySelector<HTMLElement>('main,[role="main"]');
 
 /**
- * @since 6.0.0 The {@link mainId} is optional
+ * @since 6.0.0 The `mainId` is optional
  */
 export interface SkipToMainContentProps
   extends Omit<LinkProps, "href">,
-    SKipToMainContentClassNameOptions {
+    SkipToMainContentClassNameOptions {
+  /**
+   * @since 6.0.0 Changed default value from `"skip-to-main-content"`
+   * @defaultValue `"skip-to-main"`
+   */
   id?: string;
 
   /**
@@ -42,6 +46,9 @@ export interface SkipToMainContentProps
 /**
  * **Client Component**
  *
+ * @since 6.0.0 Changed the default `id` from `"skip-to-main-content"` to
+ * `"skip-to-main"`.
+ * @since 6.0.0 The `mainId` prop is optional
  * @since 6.0.0 Throws an error after rendering if no main element can be found
  * with the provided `mainId` in development mode. The previous behavior would
  * only log an error after being clicked.
@@ -56,7 +63,7 @@ export const SkipToMainContent = forwardRef<
     children = "Skip to main content",
     mainId = "",
     onClick = noop,
-    unstyled = false,
+    unstyled,
     ...remaining
   } = props;
 

package/src/link/styles.ts

@@ -24,7 +24,7 @@ export function link(options: LinkClassNameOptions = {}): string {
 }
 
 /** @since 6.0.0 */
-export interface SKipToMainContentClassNameOptions {
+export interface SkipToMainContentClassNameOptions {
   className?: string;
 
   /**
@@ -37,7 +37,7 @@ export interface SKipToMainContentClassNameOptions {
  * @since 6.0.0
  */
 export function skipToMainContent(
-  options: SKipToMainContentClassNameOptions = {}
+  options: SkipToMainContentClassNameOptions = {}
 ): string {
   const { unstyled = false, className } = options;
 

package/src/menu/MenuItemCircularProgress.tsx

@@ -39,11 +39,11 @@ export interface MenuItemCircularProgressProps extends CircularProgressProps {
  *   DropdownMenu,
  *   MenuItem,
  *   MenuItemCircularProgress,
- *   useAsyncAction,
+ *   useAsyncFunction,
  * } from "@react-md/core";
  *
  * function Example() {
- *   const { handleAsync, pending } = useAsyncAction();
+ *   const { handleAsync, pending } = useAsyncFunction();
  *   const [visible, setVisible] = useState(false);
  *
  *   return (

package/src/overlay/Overlay.tsx

@@ -16,6 +16,7 @@ import {
 
 /**
  * @since 6.0.0 Added `align` and `justify` props.
+ * @since 6.0.0 Renamed `hidden` to `noOpacity`.
  */
 export interface OverlayProps
   extends HTMLAttributes<HTMLSpanElement>,

package/src/portal/Portal.tsx

@@ -4,8 +4,13 @@ import { createPortal } from "react-dom";
 
 import { usePortalContainer } from "./PortalContainerProvider.js";
 
+/**
+ * @since 6.0.0 Removed the `into` and `intoId` props. Use the
+ * `PortalContainerProvider` instead.
+ */
 export interface PortalProps {
   children: ReactNode;
+
   /**
    * Setting this to `true` will disable the portal behavior and just render
    * the `children` in the normal DOM tree.

package/src/portal/PortalContainerProvider.tsx

@@ -13,16 +13,24 @@ import {
  * @internal
  * @since 6.0.0
  */
-export type PortalContainer = Element | DocumentFragment | null;
+export type PortalContainerNode = Element | DocumentFragment | null;
+
+/**
+ * @internal
+ * @since 6.0.0
+ */
+export type PortalContainer =
+  | PortalContainerNode
+  | RefObject<PortalContainerNode>;
 
 export const PORTAL_CONTAINER_ID = "rmd-portal-container";
 
-let portalContainer: PortalContainer = null;
+let portalContainer: PortalContainerNode = null;
 
-const getPortalContainer = (): PortalContainer =>
+const getPortalContainer = (): PortalContainerNode =>
   typeof window === "undefined" ? null : document.body;
 
-const context = createContext<PortalContainer>(getPortalContainer());
+const context = createContext<PortalContainerNode>(getPortalContainer());
 context.displayName = "PortalContainer";
 const { Provider } = context;
 
@@ -30,7 +38,7 @@ const { Provider } = context;
  * @internal
  * @since 6.0.0
  */
-export function usePortalContainer(): PortalContainer {
+export function usePortalContainer(): PortalContainerNode {
   return useContext(context);
 }
 
@@ -41,7 +49,7 @@ export interface PortalContainerProviderProps {
    * `<div id="rmd-portal-container"></div>` will be added as the last child to
    * the `document.body` and be used as the container element.
    */
-  container?: PortalContainer | RefObject<PortalContainer>;
+  container?: PortalContainer;
   children: ReactNode;
 }
 
@@ -60,7 +68,7 @@ export function PortalContainerProvider(
   props: PortalContainerProviderProps
 ): ReactElement {
   const { container, children } = props;
-  const [value, setValue] = useState<PortalContainer>(portalContainer);
+  const [value, setValue] = useState<PortalContainerNode>(portalContainer);
   useEffect(() => {
     if (container && "current" in container) {
       setValue(container.current);
@@ -68,6 +76,7 @@ export function PortalContainerProvider(
     }
 
     if (typeof container !== "undefined") {
+      setValue(container);
       return;
     }
 

package/src/positioning/__tests__/createHorizontalPosition.ts

@@ -1,8 +1,4 @@
 import { describe, expect, it } from "@jest/globals";
-import type {
-  EqualWidthOptions,
-  FixConfig,
-} from "../createHorizontalPosition.js";
 import {
   createAnchoredCenter,
   createAnchoredInnerLeft,
@@ -11,6 +7,8 @@ import {
   createAnchoredRight,
   createEqualWidth,
   createHorizontalPosition,
+  type EqualWidthOptions,
+  type FixConfig,
 } from "../createHorizontalPosition.js";
 
 import {

package/src/positioning/constants.ts

@@ -1,4 +1,4 @@
-import type { PositionAnchor } from "./types.js";
+import { type PositionAnchor } from "./types.js";
 
 export const ABOVE_LEFT_ANCHOR: PositionAnchor = {
   x: "left",

package/src/positioning/createHorizontalPosition.ts

@@ -1,12 +1,12 @@
-import type { XCoordConfig } from "./utils.js";
+import { type FixedPositionOptions, type HorizontalPosition } from "./types.js";
 import {
   getCenterXCoord,
   getInnerLeftCoord,
   getInnerRightCoord,
   getLeftCoord,
   getRightCoord,
+  type XCoordConfig,
 } from "./utils.js";
-import type { FixedPositionOptions, HorizontalPosition } from "./types.js";
 
 /**
  * @internal

package/src/positioning/createVerticalPosition.ts

@@ -1,19 +1,19 @@
-import type { YCoordConfig } from "./utils.js";
+import { type FixedPositionOptions, type VerticalPosition } from "./types.js";
 import {
   getAboveCoord,
   getBelowCoord,
   getBottomCoord,
   getCenterYCoord,
   getTopCoord,
+  type YCoordConfig,
 } from "./utils.js";
-import type { FixedPositionOptions, VerticalPosition } from "./types.js";
 
 /** @internal */
 interface YPosition {
   top: number;
   bottom?: number;
   actualY: VerticalPosition;
-  /** @since 6.0.0 */
+  /** @since 5.1.6 */
   transformOriginY?: number;
 }
 

package/src/positioning/getFixedPosition.ts

@@ -2,7 +2,7 @@ import { getScrollbarWidth } from "../scroll/getScrollbarWidth.js";
 import { BELOW_CENTER_ANCHOR } from "./constants.js";
 import { createHorizontalPosition } from "./createHorizontalPosition.js";
 import { createVerticalPosition } from "./createVerticalPosition.js";
-import type { FixedPosition, FixedPositionOptions } from "./types.js";
+import { type FixedPosition, type FixedPositionOptions } from "./types.js";
 import {
   findSizingContainer,
   getElementRect,

package/src/positioning/types.ts

@@ -160,7 +160,7 @@ export interface CalculateFixedPositionOptions extends InitialCoords {
    * @defaultValue `false`
    * @since 5.0.0 This will always be `true` if the
    * {@link FixedPositionOptions.container} is `null`.
-   * @since 6.0.0 Allow this to be `false` while the `container` is
+   * @since 5.1.6 Allow this to be `false` while the `container` is
    * null. I can't figure out why I prevented that.
    */
   disableSwapping?: boolean;

package/src/positioning/useFixedPositioning.ts

@@ -1,13 +1,21 @@
 "use client";
-import type { CSSProperties, Ref, RefCallback, RefObject } from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type Ref,
+  type RefCallback,
+  type RefObject,
+} from "react";
 import { delegateEvent } from "../delegateEvent.js";
-import type { TransitionCallbacks } from "../transition/types.js";
+import { type TransitionCallbacks } from "../transition/types.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect.js";
 import { BELOW_CENTER_ANCHOR } from "./constants.js";
 import { getFixedPosition } from "./getFixedPosition.js";
-import type { CalculateFixedPositionOptions } from "./types.js";
+import { type CalculateFixedPositionOptions } from "./types.js";
 import { isWithinViewport } from "./utils.js";
 
 const noop = (): undefined => undefined;

package/src/positioning/utils.ts

@@ -1,4 +1,4 @@
-import type { PositionAnchor } from "./types.js";
+import { type PositionAnchor } from "./types.js";
 
 /** @internal */
 export interface XCoordConfig {

package/src/progress/CircularProgress.tsx

@@ -13,11 +13,11 @@ import { getPercentage } from "../utils/getPercentage.js";
 import { type ProgressProps } from "./types.js";
 
 /**
- * @since 6.0.0
- * Removed the `determinateRotateDegrees` prop since the determinate state no
+ * @since 6.0.0 Added the `disableShrink` prop.
+ * @since 6.0.0 Renamed `small` to `dense`.
+ * @since 6.0.0 Renamed `centered` to `disableCentered`.
+ * @since 6.0.0 Removed the `maxRotation` prop since the determinate state no
  * longer rotates while increasing value.
- * Added the `disableShrink` prop.
- * Renamed the `small` prop to `dense` to match other components.
  */
 export interface CircularProgressProps
   extends Omit<HTMLAttributes<HTMLSpanElement>, "id">,
@@ -88,6 +88,7 @@ export interface CircularProgressProps
    * margins.
    *
    * @defaultValue `false`
+   * @since 6.0.0 Renamed from `centered`
    */
   disableCentered?: boolean;
 

package/src/responsive-item/_responsive-item.scss

@@ -126,7 +126,10 @@ $disable-aspect-ratios: not list.length(map.keys($aspect-ratios)) !default;
 
           @each $suffix, $ratio-list in $aspect-ratios {
             &--#{$suffix} {
-              @include aspect-ratio(nth($ratio-list, 1), nth($ratio-list, 2));
+              @include aspect-ratio(
+                list.nth($ratio-list, 1),
+                list.nth($ratio-list, 2)
+              );
             }
           }
         }

package/src/suspense/__tests__/CircularProgressSuspense.tsx

@@ -1,16 +1,16 @@
-import { describe, it, expect } from "@jest/globals";
-import { act } from "react-dom/test-utils";
+import { describe, expect, it } from "@jest/globals";
+import { lazy, type FC, type ReactElement } from "react";
 import {
+  act,
   render,
   screen,
   waitForElementToBeRemoved,
 } from "../../test-utils/index.js";
+import { Typography } from "../../typography/Typography.js";
 import {
   CircularProgressSuspense,
   type CircularProgressSuspenseProps,
 } from "../CircularProgressSuspense.js";
-import { type FC, lazy, type ReactElement } from "react";
-import { Typography } from "../../typography/Typography.js";
 
 const setup = (props?: Omit<CircularProgressSuspenseProps, "children">) => {
   function Content(): ReactElement {

package/src/table/StickyTableSection.tsx

@@ -0,0 +1,91 @@
+"use client";
+import { forwardRef, type HTMLAttributes } from "react";
+import { TableConfigProvider } from "./TableConfigurationProvider.js";
+import { tableFooter } from "./tableFooterStyles.js";
+import { tableHeader } from "./tableHeaderStyles.js";
+import {
+  type TableSectionConfiguration,
+  type TableStickySectionConfiguration,
+} from "./types.js";
+import { useStickyTableSection } from "./useStickyTableSection.js";
+import { useTableSectionConfig } from "./useTableSectionConfig.js";
+
+/** @since 6.0.0 */
+export interface StickyTableSectionProps
+  extends HTMLAttributes<HTMLTableSectionElement>,
+    TableStickySectionConfiguration,
+    TableSectionConfiguration {
+  type: "header" | "footer";
+
+  /**
+   * An optional className to use when the sticky section is covering other rows
+   * (`active`). When this is defined, the default
+   * `rmd-thead--sticky-active`/`rmd-tfoot--sticky-active` will no longer be
+   * applied.
+   */
+  stickyActiveClassName?: string;
+}
+
+/**
+ * **Client Component**
+ *
+ * This component is used to render a sticky `<thead>`/`<tfoot>` that
+ * dynamically applies styles whenever the `<thead>`/`<tfoot>` are covering
+ * content in the table.
+ *
+ * @since 6.0.0
+ */
+export const StickyTableSection = forwardRef<
+  HTMLTableSectionElement,
+  StickyTableSectionProps
+>(function StickyTableSection(props, ref) {
+  const {
+    type,
+    className,
+    hoverable,
+    lineWrap,
+    children,
+    stickyOptions,
+    isStickyActive,
+    disableStickyStyles = false,
+    stickyActiveClassName,
+    ...remaining
+  } = props;
+
+  const isHeader = type === "header";
+  const Section = isHeader ? "thead" : "tfoot";
+  const styles = isHeader ? tableHeader : tableFooter;
+  const { tbody, sectionRef, stickyActive } = useStickyTableSection({
+    ref,
+    type,
+    stickyOptions,
+    isStickyActive,
+    disableStickyStyles,
+    stickyActiveClassName,
+  });
+  const config = useTableSectionConfig({
+    type,
+    lineWrap,
+    hoverable,
+  });
+
+  return (
+    <TableConfigProvider value={config}>
+      {!isHeader && tbody}
+      <Section
+        {...remaining}
+        ref={sectionRef}
+        className={styles({
+          className,
+          dense: config.dense,
+          sticky: true,
+          stickyActive,
+          stickyActiveClassName,
+        })}
+      >
+        {children}
+      </Section>
+      {isHeader && tbody}
+    </TableConfigProvider>
+  );
+});

package/src/table/Table.tsx

@@ -1,11 +1,8 @@
 "use client";
 import { forwardRef, useMemo, type TableHTMLAttributes } from "react";
-import {
-  TableConfigProvider,
-  type TableConfigContext,
-  type TableConfiguration,
-} from "./TableConfigurationProvider.js";
+import { TableConfigProvider } from "./TableConfigurationProvider.js";
 import { table } from "./tableStyles.js";
+import { type TableConfigContext, type TableConfiguration } from "./types.js";
 
 declare module "react" {
   interface CSSProperties {

package/src/table/TableBody.tsx

@@ -4,9 +4,8 @@ import { forwardRef, useMemo, type HTMLAttributes } from "react";
 import {
   TableConfigProvider,
   useTableConfig,
-  type TableConfig,
-  type TableConfigContext,
 } from "./TableConfigurationProvider.js";
+import { type TableConfig, type TableConfigContext } from "./types.js";
 
 export interface TableBodyProps
   extends HTMLAttributes<HTMLTableSectionElement>,

package/src/table/TableCell.tsx

@@ -10,14 +10,11 @@ import { getIcon } from "../icon/iconConfig.js";
 import { type PropsWithRef } from "../types.js";
 import {
   TableCellContent,
-  type SortOrder,
   type TableCellContentsIconRotatorProps,
 } from "./TableCellContent.js";
-import {
-  useTableConfig,
-  type TableCellConfig,
-} from "./TableConfigurationProvider.js";
+import { useTableConfig } from "./TableConfigurationProvider.js";
 import { tableCell } from "./tableCellStyles.js";
+import { type SortOrder, type TableCellConfig } from "./types.js";
 
 export type TableCellAttributes = Omit<
   | TdHTMLAttributes<HTMLTableCellElement>
@@ -67,6 +64,7 @@ export interface TableCellOptions extends TableCellConfig {
 /**
  * @since 6.0.0 Removed the `colSpan="100%"` support since `colSpan`
  * really only supports numbers.
+ * @since 6.0.0 Removed `disablePadding` in favor of `padding`.
  */
 export interface TableCellProps extends TableCellAttributes, TableCellOptions {
   /**

package/src/table/TableCellContent.tsx

@@ -3,9 +3,7 @@ import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
 import { ButtonUnstyled } from "../button/ButtonUnstyled.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";
+import { type SortOrder, type TableCellHorizontalAlignment } from "./types.js";
 
 /**
  * @since 6.0.0

package/src/table/TableConfigurationProvider.tsx

@@ -1,91 +1,6 @@
 "use client";
 import { createContext, useContext } from "react";
-
-// interfaces that are "public" should be the full word `Configuration` while
-// the private/internal should just be `Config`. "Great" naming convention!
-
-export interface TableRowConfiguration {
-  /**
-   * Set to `true` if rows should no longer change background color while
-   * hovered.
-   *
-   * @defaultValue `false`
-   */
-  disableHover?: boolean;
-
-  /**
-   * Set to `true` if the rows in the `TableBody` should no longer have borders
-   * applied.
-   *
-   * @defaultValue `false`
-   */
-  disableBorders?: boolean;
-}
-
-/**
- * The horizontal alignment for the content within a cell.
- *
- * Note: Table default behavior is to align to the left.
- */
-export type TableCellHorizontalAlignment = "left" | "center" | "right";
-
-/**
- * The vertical alignment for the content within a cell.
- *
- * Note: When this is set to `"top"` or `"bottom"`, `padding-top` or
- * `padding-bottom` will also be applied due to how styling tables work.
- */
-export type TableCellVerticalAlignment = "top" | "middle" | "bottom";
-
-export interface TableCellConfiguration {
-  hAlign?: TableCellHorizontalAlignment;
-  vAlign?: TableCellVerticalAlignment;
-
-  /**
-   * Set this to `true` to allow `TableCell` content to line wrap.
-   *
-   * @defaultValue `false`
-   */
-  lineWrap?: boolean;
-}
-
-/**
- * @internal
- */
-export interface TableCellConfig extends TableCellConfiguration {
-  /**
-   * Boolean if all the `TableCell` components should be rendered as a `<th>`
-   * instead of a `<td>`. This is really just a convenience prop for the
-   * `TableHeader` component so the user of `react-md` doesn't need to keep
-   * setting the `type="th"` fot the `TableCell` if using the low-level
-   * components.
-   *
-   * @internal
-   */
-  header?: boolean;
-}
-
-export interface TableConfig extends TableRowConfiguration, TableCellConfig {
-  /**
-   * Set this to `true` to decrease the height of all cells within the table.
-   *
-   * @defaultValue `false`
-   */
-  dense?: boolean;
-}
-
-export interface TableConfiguration extends TableConfig {
-  /**
-   * Set this to `true` to allow the table to span the full width of the
-   * container element instead of having the width be determined by the content
-   * within the table.
-   *
-   * @defaultValue `false`
-   */
-  fullWidth?: boolean;
-}
-
-export type TableConfigContext = Required<TableConfig>;
+import { type TableConfig, type TableConfigContext } from "./types.js";
 
 const context = createContext<TableConfigContext>({
   dense: false,