@react-md/core 1.0.0-next.14 → 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/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/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/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,

package/src/table/TableFooter.tsx

@@ -1,63 +1,27 @@
 "use client";
-import {
-  forwardRef,
-  useCallback,
-  useMemo,
-  useState,
-  type HTMLAttributes,
-} from "react";
-import { useEnsuredRef } from "../useEnsuredRef.js";
-import { useIntersectionObserver } from "../useIntersectionObserver.js";
-import {
-  TableConfigProvider,
-  useTableConfig,
-  type TableCellConfig,
-  type TableConfigContext,
-} from "./TableConfigurationProvider.js";
-import { useTableContainer } from "./TableContainerProvider.js";
+import { forwardRef, type HTMLAttributes } from "react";
+import { TableConfigProvider } from "./TableConfigurationProvider.js";
 import { tableFooter } from "./tableFooterStyles.js";
-import {
-  type IsStickyTableSectionActive,
-  type TableStickySectionProps,
-} from "./types.js";
+import { type TableSectionConfiguration } from "./types.js";
+import { useTableSectionConfig } from "./useTableSectionConfig.js";
 
-/**
- * @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;
-};
-/**
- * @since 6.0.0 Added support for "sticky-active" state.
- */
 export interface TableFooterProps
   extends HTMLAttributes<HTMLTableSectionElement>,
-    Pick<TableCellConfig, "lineWrap">,
-    TableStickySectionProps {
+    TableSectionConfiguration {
   /**
-   * This is a rename of the `disableHover` of the `TableConfig` since table
-   * footers are not hoverable by default. This prop can be enabled to add the
-   * row hover color within table footers, but it is not really recommended.
+   * NOTE: It is recommended to use the `StickyTableSection` component instead
+   * of enabling this prop since it supports dynamically adding styles while the
+   * header covering table rows.
+   *
+   * Set this to `true` to enable the sticky behavior.
    *
    * @defaultValue `false`
    */
-  hoverable?: boolean;
-
-  /** @defaultValue {@link isTableFooterStickyActive} */
-  isStickyActive?: IsStickyTableSectionActive;
+  sticky?: boolean;
 }
 
 /**
  * **Client Component**
- * TODO: Create separate useStickyTableFooter + StickyTableFooter component
  *
  * Creates a `<tfoot>` element with some basic styles. This component will
  * disable the hover effect and line wrapping by default, but the hover effect
@@ -68,81 +32,20 @@ export const TableFooter = forwardRef<
   HTMLTableSectionElement,
   TableFooterProps
 >(function TableFooter(props, propRef) {
-  const {
-    className,
-    hoverable = false,
-    lineWrap: propLineWrap,
-    children,
-    sticky = false,
-    stickyOptions,
-    isStickyActive = isTableFooterStickyActive,
-    disableStickyStyles = false,
-    stickyActiveClassName,
-    ...remaining
-  } = props;
-
-  // update the table configuration with the custom overrides for the `<tfoot>`
-  const { dense, hAlign, vAlign, lineWrap, disableHover, disableBorders } =
-    useTableConfig({
-      lineWrap: propLineWrap,
-      disableHover: !hoverable,
-    });
-
-  const configuration = useMemo<TableConfigContext>(
-    () => ({
-      dense,
-      header: false,
-      hAlign,
-      vAlign,
-      lineWrap,
-      disableBorders,
-      disableHover,
-    }),
-    [dense, hAlign, vAlign, lineWrap, disableBorders, disableHover]
-  );
-
-  const [tfootRef, tfootRefCallback] = useEnsuredRef(propRef);
-  const { exists, containerRef } = useTableContainer();
-  const [stickyActive, setStickyActive] = useState(false);
-  const targetRef = useIntersectionObserver<
-    HTMLTableSectionElement | HTMLElement
-  >({
-    ref: exists ? undefined : tfootRefCallback,
-    root: containerRef,
-    disabled: !sticky || disableStickyStyles,
-    threshold: exists ? 0 : 1,
-    getRootMargin: useCallback(() => {
-      const topOffset =
-        exists && tfootRef.current ? tfootRef.current.offsetHeight - 1 : 1;
+  const { className, hoverable, lineWrap, children, ...remaining } = props;
 
-      return `0px 0px -${topOffset}px 0px`;
-    }, [exists, tfootRef]),
-    onUpdate: useCallback(
-      ([entry]) => {
-        setStickyActive(isStickyActive(entry, exists));
-      },
-      [exists, isStickyActive]
-    ),
-    // allow the user defined sticky options to override the default behavior
-    ...stickyOptions,
+  const config = useTableSectionConfig({
+    type: "footer",
+    lineWrap,
+    hoverable,
   });
 
   return (
-    <TableConfigProvider value={configuration}>
-      {exists && sticky && !disableStickyStyles && (
-        // rendering a `<tbody>` since it is valid to have 0-many in a table
-        // https://html.spec.whatwg.org/multipage/tables.html#the-table-element
-        <tbody aria-hidden ref={targetRef} />
-      )}
+    <TableConfigProvider value={config}>
       <tfoot
         {...remaining}
-        ref={exists ? tfootRefCallback : targetRef}
-        className={tableFooter({
-          className,
-          sticky,
-          stickyActive,
-          stickyActiveClassName,
-        })}
+        ref={propRef}
+        className={tableFooter({ className })}
       >
         {children}
       </tfoot>