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

package/src/table/useStickyTableSection.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import {
+  type ReactNode,
+  type Ref,
+  type RefCallback,
+  useCallback,
+  useState,
+} from "react";
+
+import { useEnsuredRef } from "../useEnsuredRef.js";
+import { useIntersectionObserver } from "../useIntersectionObserver.js";
+import { useTableContainer } from "./TableContainerProvider.js";
+import {
+  type IsStickyTableSectionActive,
+  type TableStickySectionConfiguration,
+} from "./types.js";
+
+/**
+ * @since 6.0.0
+ */
+export const isTableHeaderStickyActive: IsStickyTableSectionActive = (
+  entry
+) => {
+  return (
+    entry.intersectionRatio < 1 &&
+    entry.boundingClientRect.bottom <= window.innerHeight
+  );
+};
+
+/**
+ * @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 */
+export interface TableStickySectionOptions
+  extends TableStickySectionConfiguration {
+  ref?: Ref<HTMLTableSectionElement>;
+  type: "header" | "footer";
+}
+
+/** @since 6.0.0 */
+export interface TableStickySectionImplementation {
+  tbody: ReactNode;
+  targetRef: RefCallback<HTMLTableSectionElement>;
+  sectionRef: RefCallback<HTMLTableSectionElement>;
+  stickyActive: boolean;
+}
+
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export function useStickyTableSection(
+  options: TableStickySectionOptions
+): TableStickySectionImplementation {
+  const { ref, type, disableStickyStyles, stickyOptions } = options;
+
+  const isHeader = type === "header";
+  const isStickyActive =
+    options.isStickyActive ??
+    (isHeader ? isTableHeaderStickyActive : isTableFooterStickyActive);
+
+  const [sectionRef, sectionRefCallback] = useEnsuredRef(ref);
+  const { exists, containerRef } = useTableContainer();
+  const [stickyActive, setStickyActive] = useState(false);
+  const targetRef = useIntersectionObserver({
+    ref: exists ? undefined : sectionRefCallback,
+    root: containerRef,
+    disabled: disableStickyStyles,
+    threshold: exists ? 0 : 1,
+    getRootMargin: useCallback(() => {
+      const section = sectionRef.current;
+      if (!isHeader) {
+        const topOffset = exists && section ? section.offsetHeight - 1 : 1;
+
+        return `0px 0px -${topOffset}px 0px`;
+      }
+
+      if (!section) {
+        return;
+      }
+
+      let topOffset: number;
+      if (exists) {
+        topOffset = section.offsetHeight - 1;
+      } else {
+        const top = parseFloat(window.getComputedStyle(section).top);
+        topOffset = Number.isNaN(top) ? 1 : top + 1;
+      }
+
+      return `-${topOffset}px 0px 0px`;
+    }, [exists, isHeader, sectionRef]),
+    onUpdate: useCallback(
+      ([entry]) => {
+        setStickyActive(isStickyActive(entry, exists));
+      },
+      [exists, isStickyActive]
+    ),
+    // allow the user defined sticky options to override the default behavior
+    ...stickyOptions,
+  });
+
+  let tbody: ReactNode;
+  if (exists && !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 = <tbody aria-hidden ref={targetRef} />;
+  }
+
+  return {
+    tbody,
+    targetRef,
+    sectionRef: exists ? sectionRefCallback : targetRef,
+    stickyActive,
+  };
+}

package/src/table/useTableSectionConfig.ts

@@ -0,0 +1,47 @@
+"use client";
+
+import { useMemo } from "react";
+
+import { useTableConfig } from "./TableConfigurationProvider.js";
+import {
+  type TableConfigContext,
+  type TableSectionConfiguration,
+} from "./types.js";
+
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export interface TableSectionConfigOptions extends TableSectionConfiguration {
+  type: "header" | "footer";
+}
+
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export function useTableSectionConfig(
+  options: TableSectionConfigOptions
+): Readonly<TableConfigContext> {
+  const { type, lineWrap: propLineWrap, hoverable } = options;
+
+  // update the table configuration with the custom overrides for the `<thead>/<tfoot>`
+  const { dense, hAlign, vAlign, lineWrap, disableHover, disableBorders } =
+    useTableConfig({
+      lineWrap: propLineWrap,
+      disableHover: !hoverable,
+    });
+
+  return useMemo<TableConfigContext>(
+    () => ({
+      dense,
+      header: type === "header",
+      hAlign,
+      vAlign,
+      lineWrap,
+      disableBorders,
+      disableHover,
+    }),
+    [dense, type, hAlign, vAlign, lineWrap, disableBorders, disableHover]
+  );
+}

package/src/tabs/SimpleTabPanel.tsx

@@ -0,0 +1,35 @@
+import { cnb } from "cnbuilder";
+import { type HTMLAttributes, type ReactNode, forwardRef } from "react";
+
+import { DISPLAY_NONE_CLASS } from "../utils/isElementVisible.js";
+import { type ProvidedTabPanelProps } from "./useTabs.js";
+
+/**
+ * @since 6.0.0
+ */
+export interface SimpleTabPanelProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, keyof ProvidedTabPanelProps>,
+    ProvidedTabPanelProps {
+  children: ReactNode;
+}
+
+/**
+ * This component can be a replacement for the `Slide` component when animations
+ * are not required for changing the active tab contents.
+ *
+ * This should generally be used along with the `SimpleTabPanels` component.
+ *
+ * @since 6.0.0
+ */
+export const SimpleTabPanel = forwardRef<HTMLDivElement, SimpleTabPanelProps>(
+  function SimpleTabPanel(props, ref) {
+    const { active, className, ...remaining } = props;
+    return (
+      <div
+        ref={ref}
+        {...remaining}
+        className={cnb(!active && DISPLAY_NONE_CLASS, className)}
+      />
+    );
+  }
+);

package/src/tabs/SimpleTabPanels.tsx

@@ -0,0 +1,28 @@
+import { type HTMLAttributes, type ReactNode, forwardRef } from "react";
+
+import { type ProvidedTabPanelsProps } from "./useTabs.js";
+
+/**
+ * @since 6.0.0
+ */
+export interface SimpleTabPanelsProps
+  extends HTMLAttributes<HTMLDivElement>,
+    Omit<ProvidedTabPanelsProps<HTMLDivElement>, "ref"> {
+  children: ReactNode;
+}
+
+/**
+ * This component can be used as a replacement for the `SlideContainer` when
+ * animations are not required for changing the active tab contents.
+ *
+ * This should be normally be used along with the `SimpleTabPanel` component.
+ *
+ * @since 6.0.0
+ */
+export const SimpleTabPanels = forwardRef<HTMLDivElement, SimpleTabPanelsProps>(
+  function SimpleTabPanels(props, ref) {
+    const { direction: _direction, ...remaining } = props;
+
+    return <div ref={ref} {...remaining} />;
+  }
+);

package/src/tabs/Tab.tsx

@@ -1,20 +1,28 @@
 "use client";
-import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+
+import {
+  type AnchorHTMLAttributes,
+  type ButtonHTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+
+import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
+import { type CustomLinkComponent } from "../link/Link.js";
 import { useKeyboardMovementContext } from "../movement/useKeyboardMovementProvider.js";
 import { useEnsuredId } from "../useEnsuredId.js";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { type TabListProps } from "./TabList.js";
 import { tab } from "./tabStyles.js";
-
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { type useTabs } from "./useTabs.js";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { type TabListProps } from "./TabList.js";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
-export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface BaseTabProps extends ComponentWithRippleProps {
   /**
    * Set this to `true` if the tab is currently active.
    *
@@ -31,6 +39,14 @@ export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    */
   activeIndicator?: boolean;
 
+  /**
+   * Set this to `true` when rendering the tabs vertically and
+   * {@link activeIndicator} has been enabled.
+   *
+   * @defaultValue !false
+   */
+  verticalActiveIndicator?: boolean;
+
   /**
    * An optional icon to render with the with the {@link children}. The default
    * behavior will render this icon before the children.
@@ -56,6 +72,29 @@ export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   stacked?: boolean;
 }
 
+/**
+ * @since 6.0.0
+ */
+export interface TabButtonProps
+  extends BaseTabProps,
+    ButtonHTMLAttributes<HTMLButtonElement> {
+  as?: "button";
+}
+
+/**
+ * @since 6.0.0
+ */
+export interface TabLinkProps
+  extends BaseTabProps,
+    AnchorHTMLAttributes<HTMLAnchorElement> {
+  as: CustomLinkComponent;
+}
+
+/**
+ * @since 6.0.0
+ */
+export type TabProps = TabButtonProps | TabLinkProps;
+
 /**
  * **Client Component**
  *
@@ -64,76 +103,84 @@ export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  *
  * @see {@link useTabs}
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
-export const Tab = forwardRef<HTMLButtonElement, TabProps>(
-  function Tab(props, ref) {
-    const {
-      id: propId,
-      active,
-      activeIndicator,
-      icon,
-      iconAfter,
-      stacked,
-      className,
-      children: propChildren,
-      onBlur,
-      onClick,
-      onKeyDown,
-      onKeyUp,
-      onMouseDown,
-      onMouseUp,
-      onMouseLeave,
-      onDragStart,
-      onTouchStart,
-      onTouchEnd,
-      onTouchMove,
-      ...remaining
-    } = props;
-    const { disabled } = props;
+export function Tab(props: TabProps): ReactElement {
+  const {
+    id: propId,
+    as: Component = "button",
+    active,
+    activeIndicator,
+    verticalActiveIndicator,
+    icon,
+    iconAfter,
+    stacked,
+    className,
+    children: propChildren,
+    onBlur,
+    onClick,
+    onKeyDown,
+    onKeyUp,
+    onMouseDown,
+    onMouseUp,
+    onMouseLeave,
+    onDragStart,
+    onTouchStart,
+    onTouchEnd,
+    onTouchMove,
+    disableRipple,
+    ...remaining
+  } = props as TabButtonProps;
+  const { disabled } = props as TabButtonProps;
 
-    const id = useEnsuredId(propId, "tab");
-    const { activeDescendantId } = useKeyboardMovementContext();
-    const { ripples, handlers } = useElementInteraction({
-      onBlur,
-      onClick,
-      onKeyDown,
-      onKeyUp,
-      onMouseDown,
-      onMouseUp,
-      onMouseLeave,
-      onDragStart,
-      onTouchStart,
-      onTouchEnd,
-      onTouchMove,
-      disabled,
-    });
+  const id = useEnsuredId(propId, "tab");
+  const { activeDescendantId } = useKeyboardMovementContext();
+  const { ripples, handlers } = useElementInteraction({
+    mode: disableRipple ? "none" : undefined,
+    onBlur,
+    onClick,
+    onKeyDown,
+    onKeyUp,
+    onMouseDown,
+    onMouseUp,
+    onMouseLeave,
+    onDragStart,
+    onTouchStart,
+    onTouchEnd,
+    onTouchMove,
+    disabled,
+  });
 
-    const children = useHigherContrastChildren(propChildren);
-
-    return (
-      <button
-        {...remaining}
-        {...handlers}
-        aria-selected={active}
-        id={id}
-        ref={ref}
-        role="tab"
-        type="button"
-        tabIndex={id === activeDescendantId ? 0 : -1}
-        className={tab({
-          className,
-          active,
-          stacked: !!icon && stacked,
-          disabled,
-          reversed: !!icon && iconAfter,
-          activeIndicator,
-        })}
-      >
-        {icon}
-        {children}
-        {ripples}
-      </button>
-    );
+  const isLink = Component !== "button";
+  const children = useHigherContrastChildren(propChildren);
+  let buttonOnlyProps: Record<string, unknown> | undefined;
+  if (!isLink) {
+    buttonOnlyProps = { type: "button" };
   }
-);
+
+  return (
+    <Component
+      {...remaining}
+      {...buttonOnlyProps}
+      {...handlers}
+      aria-selected={active}
+      id={id}
+      role="tab"
+      tabIndex={id === activeDescendantId ? 0 : -1}
+      className={tab({
+        className,
+        active,
+        isLink,
+        stacked: !!icon && stacked,
+        disabled,
+        reversed: !!icon && iconAfter,
+        activeIndicator,
+        verticalActiveIndicator,
+      })}
+    >
+      {icon}
+      {children}
+      {ripples}
+    </Component>
+  );
+}

package/src/tabs/TabList.tsx

@@ -1,50 +1,36 @@
 "use client";
+
 import {
+  type HTMLAttributes,
   forwardRef,
   useEffect,
   useRef,
   useState,
-  type HTMLAttributes,
 } from "react";
-import { useAppSize } from "../media-queries/AppSizeProvider.js";
+
 import { KeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
 import {
-  TabListScrollButton,
   type BaseTabListScrollButtonProps,
+  TabListScrollButton,
 } from "./TabListScrollButton.js";
-import { tabList, type TabsAlignment } from "./tabListStyles.js";
+import { type GetTabListScrollToOptions } from "./getTabListScrollToOptions.js";
+import { type TabListClassNameOptions, tabList } from "./tabListStyles.js";
+import {
+  type TabListActivationMode,
+  type TabListScrollButtonsBehavior,
+} from "./types.js";
 import { useTabList } from "./useTabList.js";
-import { type GetTabListScrollToOptions } from "./utils.js";
-
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { type useTabs } from "./useTabs.js";
 
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
-export interface TabListProps extends HTMLAttributes<HTMLDivElement> {
+export interface TabListProps
+  extends HTMLAttributes<HTMLDivElement>,
+    Omit<TabListClassNameOptions, "animate" | "indicator"> {
   activeIndex: number;
-  setActiveIndex(nextActiveIndex: number): void;
-
-  /**
-   * @defaultValue `"left"`
-   */
-  align?: TabsAlignment;
-
-  /**
-   * @defaultValue `false`
-   */
-  padded?: boolean;
-
-  /**
-   * @defaultValue `false`
-   */
-  vertical?: boolean;
-
-  /**
-   * @defaultValue `false`
-   */
-  inline?: boolean;
+  setActiveIndex: (nextActiveIndex: number) => void;
 
   /**
    * Set this to `true` to show a scrollbar when the number of tabs cause
@@ -72,17 +58,15 @@ export interface TabListProps extends HTMLAttributes<HTMLDivElement> {
 
   /**
    * @defaultValue `"manual"`
+   * @see {@link TabListActivationMode}
    */
-  activationMode?: "manual" | "automatic";
+  activationMode?: TabListActivationMode;
 
   /**
-   * Set this to `true` to render buttons that can scroll forwards or backwards
-   * within the tab list if there is overflow **on desktop**. If you want to
-   * display the scroll buttons on mobile as well, set this to `"allow-phone"` .
-   *
    * @defaultValue `false`
+   * @see {@link TabListScrollButtonsBehavior}
    */
-  scrollButtons?: boolean | "allow-phone";
+  scrollButtons?: TabListScrollButtonsBehavior;
 
   /**
    * A convenience prop for the {@link BaseTabListScrollButtonProps.getScrollToOptions}
@@ -132,7 +116,7 @@ export interface TabListProps extends HTMLAttributes<HTMLDivElement> {
  *
  * @see {@link useTabs} for example usage.
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export const TabList = forwardRef<HTMLDivElement, TabListProps>(
   function TabList(props, ref) {
@@ -152,6 +136,7 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
       vertical = false,
       scrollbar = false,
       scrollButtons = false,
+      fullWidthTabs,
       disableTransition = false,
       transitionDuration = 150,
       getScrollToOptions,
@@ -160,24 +145,25 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
       ...remaining
     } = props;
 
-    const { isPhone } = useAppSize();
-    const showScrollButtons =
-      !!scrollButtons && (scrollButtons === "allow-phone" || !isPhone);
-
-    const { elementProps, movementContext, backwardProps, forwardProps } =
-      useTabList({
-        ref,
-        style,
-        onClick,
-        onFocus,
-        onKeyDown,
-        vertical,
-        activeIndex,
-        setActiveIndex,
-        activationMode,
-        scrollButtons: showScrollButtons,
-        disableTransition,
-      });
+    const {
+      elementProps,
+      movementContext,
+      backwardProps,
+      forwardProps,
+      showScrollButtons,
+    } = useTabList({
+      ref,
+      style,
+      onClick,
+      onFocus,
+      onKeyDown,
+      vertical,
+      activeIndex,
+      setActiveIndex,
+      activationMode,
+      scrollButtons,
+      disableTransition,
+    });
 
     const prevActiveIndex = useRef(activeIndex);
     const [animate, setAnimate] = useState(false);
@@ -212,6 +198,7 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
             vertical,
             scrollbar,
             indicator: !disableTransition,
+            fullWidthTabs,
             className,
           })}
         >