@react-md/core 6.5.2 → 7.0.0

package/src/table/TableRadio.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type TdHTMLAttributes, forwardRef } from "react";
+import { type ReactElement, type Ref, type TdHTMLAttributes } from "react";
 
 import { type RadioProps } from "../form/InputToggle.js";
 import { Radio } from "../form/Radio.js";
@@ -44,6 +44,8 @@ export type TableRadioSupportedRadioProps = Pick<
  */
 export interface TableRadioProps
   extends TableRadioTdHTMLAttributes, TableRadioSupportedRadioProps {
+  ref?: Ref<HTMLTableCellElement>;
+
   /**
    * @defaultValue `!props["aria-labelledby"] ? "Select Row" : undefined`
    */
@@ -136,61 +138,60 @@ export interface TableRadioProps
  * @see {@link https://react-md.dev/components/table | Table Demos}
  * @since 6.0.0
  */
-export const TableRadio = forwardRef<HTMLTableCellElement, TableRadioProps>(
-  function TableRadio(props, ref) {
-    const {
-      "aria-labelledby": ariaLabelledBy,
-      "aria-label": ariaLabel = !ariaLabelledBy ? "Select Row" : undefined,
-      "aria-controls": ariaControls,
-      name,
-      icon,
-      iconProps,
-      iconStyle,
-      iconClassName,
-      checkedIcon,
-      value,
-      checked,
-      onChange,
-      defaultChecked,
-      radioProps,
-      onClick = noop,
-      error,
-      required,
-      onInvalid,
-      ...remaining
-    } = props;
+export function TableRadio(props: TableRadioProps): ReactElement {
+  const {
+    ref,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel = !ariaLabelledBy ? "Select Row" : undefined,
+    "aria-controls": ariaControls,
+    name,
+    icon,
+    iconProps,
+    iconStyle,
+    iconClassName,
+    checkedIcon,
+    value,
+    checked,
+    onChange,
+    defaultChecked,
+    radioProps,
+    onClick = noop,
+    error,
+    required,
+    onInvalid,
+    ...remaining
+  } = props;
 
-    return (
-      <TableCell
-        {...remaining}
-        ref={ref}
-        header={false}
-        inputToggle
-        onClick={(event) => {
-          event.stopPropagation();
-          onClick(event);
-        }}
-      >
-        <Radio
-          aria-label={ariaLabel}
-          aria-labelledby={ariaLabelledBy}
-          aria-controls={ariaControls}
-          name={name}
-          icon={icon}
-          iconProps={iconProps}
-          iconStyle={iconStyle}
-          iconClassName={iconClassName}
-          checkedIcon={checkedIcon}
-          value={value}
-          checked={checked}
-          defaultChecked={defaultChecked}
-          error={error}
-          required={required}
-          onChange={onChange}
-          onInvalid={onInvalid}
-          {...radioProps}
-        />
-      </TableCell>
-    );
-  }
-);
+  return (
+    <TableCell
+      {...remaining}
+      ref={ref}
+      header={false}
+      inputToggle
+      onClick={(event) => {
+        event.stopPropagation();
+        onClick(event);
+      }}
+    >
+      <Radio
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        aria-controls={ariaControls}
+        name={name}
+        icon={icon}
+        iconProps={iconProps}
+        iconStyle={iconStyle}
+        iconClassName={iconClassName}
+        checkedIcon={checkedIcon}
+        value={value}
+        checked={checked}
+        defaultChecked={defaultChecked}
+        error={error}
+        required={required}
+        onChange={onChange}
+        onInvalid={onInvalid}
+        {...radioProps}
+      />
+    </TableCell>
+  );
+}

package/src/table/TableRow.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type HTMLAttributes, forwardRef } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 
 import { useTableConfig } from "./TableConfigurationProvider.js";
 import { tableRow } from "./tableRowStyles.js";
@@ -8,6 +8,8 @@ import { type TableRowConfiguration } from "./types.js";
 
 export interface TableRowProps
   extends HTMLAttributes<HTMLTableRowElement>, TableRowConfiguration {
+  ref?: Ref<HTMLTableRowElement>;
+
   /**
    * Boolean if the current row has been selected and should apply the selected
    * background-color.
@@ -33,37 +35,36 @@ export interface TableRowProps
  *
  * @see {@link https://react-md.dev/components/table | Table Demos}
  */
-export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
-  function TableRow(props, ref) {
-    const {
-      className,
-      disableHover: propDisableHover,
-      disableBorders: propDisableBorders,
-      children,
-      selected = false,
-      clickable = false,
-      ...remaining
-    } = props;
+export function TableRow(props: TableRowProps): ReactElement {
+  const {
+    ref,
+    className,
+    disableHover: propDisableHover,
+    disableBorders: propDisableBorders,
+    children,
+    selected = false,
+    clickable = false,
+    ...remaining
+  } = props;
 
-    const { disableHover, disableBorders } = useTableConfig({
-      disableHover: propDisableHover,
-      disableBorders: propDisableBorders,
-    });
+  const { disableHover, disableBorders } = useTableConfig({
+    disableHover: propDisableHover,
+    disableBorders: propDisableBorders,
+  });
 
-    return (
-      <tr
-        {...remaining}
-        ref={ref}
-        className={tableRow({
-          selected,
-          clickable,
-          disableHover,
-          disableBorders,
-          className,
-        })}
-      >
-        {children}
-      </tr>
-    );
-  }
-);
+  return (
+    <tr
+      {...remaining}
+      ref={ref}
+      className={tableRow({
+        selected,
+        clickable,
+        disableHover,
+        disableBorders,
+        className,
+      })}
+    >
+      {children}
+    </tr>
+  );
+}

package/src/tabs/SimpleTabPanel.tsx

@@ -1,5 +1,10 @@
 import { cnb } from "cnbuilder";
-import { type HTMLAttributes, type ReactNode, forwardRef } from "react";
+import {
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from "react";
 
 import { DISPLAY_NONE_CLASS } from "../utils/isElementVisible.js";
 import { type ProvidedTabPanelProps } from "./useTabs.js";
@@ -11,6 +16,7 @@ export interface SimpleTabPanelProps
   extends
     Omit<HTMLAttributes<HTMLDivElement>, keyof ProvidedTabPanelProps>,
     ProvidedTabPanelProps {
+  ref?: Ref<HTMLDivElement>;
   children: ReactNode;
 }
 
@@ -24,15 +30,14 @@ export interface SimpleTabPanelProps
  * @see {@link https://react-md.dev/components/tabs#disable-tab-panel-transition|Disable Tab Panel Transition Demo}
  * @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)}
-      />
-    );
-  }
-);
+export function SimpleTabPanel(props: SimpleTabPanelProps): ReactElement {
+  const { ref, active, className, ...remaining } = props;
+
+  return (
+    <div
+      ref={ref}
+      {...remaining}
+      className={cnb(!active && DISPLAY_NONE_CLASS, className)}
+    />
+  );
+}

package/src/tabs/SimpleTabPanels.tsx

@@ -1,4 +1,9 @@
-import { type HTMLAttributes, type ReactNode, forwardRef } from "react";
+import {
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from "react";
 
 import { type ProvidedTabPanelsProps } from "./useTabs.js";
 
@@ -9,6 +14,7 @@ export interface SimpleTabPanelsProps
   extends
     HTMLAttributes<HTMLDivElement>,
     Omit<ProvidedTabPanelsProps<HTMLDivElement>, "ref"> {
+  ref?: Ref<HTMLDivElement>;
   children: ReactNode;
 }
 
@@ -22,10 +28,8 @@ export interface SimpleTabPanelsProps
  * @see {@link https://react-md.dev/components/tabs#disable-tab-panel-transition|Disable Tab Panel Transition Demo}
  * @since 6.0.0
  */
-export const SimpleTabPanels = forwardRef<HTMLDivElement, SimpleTabPanelsProps>(
-  function SimpleTabPanels(props, ref) {
-    const { direction: _direction, ...remaining } = props;
+export function SimpleTabPanels(props: SimpleTabPanelsProps): ReactElement {
+  const { ref, direction: _direction, ...remaining } = props;
 
-    return <div ref={ref} {...remaining} />;
-  }
-);
+  return <div ref={ref} {...remaining} />;
+}

package/src/tabs/TabList.tsx

@@ -2,7 +2,8 @@
 
 import {
   type HTMLAttributes,
-  forwardRef,
+  type ReactElement,
+  type Ref,
   useEffect,
   useRef,
   useState,
@@ -30,6 +31,7 @@ export interface TabListProps
   extends
     HTMLAttributes<HTMLDivElement>,
     Omit<TabListClassNameOptions, "animate" | "indicator"> {
+  ref?: Ref<HTMLDivElement>;
   activeIndex: number;
   setActiveIndex: (nextActiveIndex: number) => void;
 
@@ -119,107 +121,106 @@ export interface TabListProps
  * @see {@link useTabs} for example usage.
  * @since 6.0.0
  */
-export const TabList = forwardRef<HTMLDivElement, TabListProps>(
-  function TabList(props, ref) {
-    const {
-      style,
-      onClick,
-      onFocus,
-      onKeyDown,
-      className,
-      children,
-      activeIndex,
-      setActiveIndex,
-      activationMode = "manual",
-      align = "left",
-      padded = false,
-      inline = false,
-      vertical = false,
-      scrollbar = false,
-      scrollButtons = false,
-      fullWidthTabs,
-      disableTransition = false,
-      transitionDuration = 150,
-      getScrollToOptions,
-      forwardScrollButtonProps,
-      backwardScrollButtonProps,
-      ...remaining
-    } = props;
-
-    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);
-    useEffect(() => {
-      const isSameIndex = activeIndex === prevActiveIndex.current;
-      prevActiveIndex.current = activeIndex;
-      if (disableTransition || isSameIndex) {
-        return;
-      }
-
-      setAnimate(true);
-      const timeout = globalThis.setTimeout(() => {
-        setAnimate(false);
-      }, transitionDuration);
-
-      return () => {
-        globalThis.clearTimeout(timeout);
-      };
-    }, [activeIndex, disableTransition, transitionDuration]);
-
-    return (
-      <KeyboardMovementProvider value={movementContext}>
-        <div
-          {...remaining}
-          {...elementProps}
-          role="tablist"
-          className={tabList({
-            align,
-            padded,
-            inline,
-            animate: !disableTransition && animate,
-            vertical,
-            scrollbar,
-            indicator: !disableTransition,
-            fullWidthTabs,
-            className,
-          })}
-        >
-          {showScrollButtons && (
-            <TabListScrollButton
-              getScrollToOptions={getScrollToOptions}
-              {...backwardScrollButtonProps}
-              {...backwardProps}
-            />
-          )}
-          {children}
-          {showScrollButtons && (
-            <TabListScrollButton
-              getScrollToOptions={getScrollToOptions}
-              {...forwardScrollButtonProps}
-              {...forwardProps}
-            />
-          )}
-        </div>
-      </KeyboardMovementProvider>
-    );
-  }
-);
+export function TabList(props: TabListProps): ReactElement {
+  const {
+    ref,
+    style,
+    onClick,
+    onFocus,
+    onKeyDown,
+    className,
+    children,
+    activeIndex,
+    setActiveIndex,
+    activationMode = "manual",
+    align = "left",
+    padded = false,
+    inline = false,
+    vertical = false,
+    scrollbar = false,
+    scrollButtons = false,
+    fullWidthTabs,
+    disableTransition = false,
+    transitionDuration = 150,
+    getScrollToOptions,
+    forwardScrollButtonProps,
+    backwardScrollButtonProps,
+    ...remaining
+  } = props;
+
+  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);
+  useEffect(() => {
+    const isSameIndex = activeIndex === prevActiveIndex.current;
+    prevActiveIndex.current = activeIndex;
+    if (disableTransition || isSameIndex) {
+      return;
+    }
+
+    setAnimate(true);
+    const timeout = globalThis.setTimeout(() => {
+      setAnimate(false);
+    }, transitionDuration);
+
+    return () => {
+      globalThis.clearTimeout(timeout);
+    };
+  }, [activeIndex, disableTransition, transitionDuration]);
+
+  return (
+    <KeyboardMovementProvider value={movementContext}>
+      <div
+        {...remaining}
+        {...elementProps}
+        role="tablist"
+        className={tabList({
+          align,
+          padded,
+          inline,
+          animate: !disableTransition && animate,
+          vertical,
+          scrollbar,
+          indicator: !disableTransition,
+          fullWidthTabs,
+          className,
+        })}
+      >
+        {showScrollButtons && (
+          <TabListScrollButton
+            getScrollToOptions={getScrollToOptions}
+            {...backwardScrollButtonProps}
+            {...backwardProps}
+          />
+        )}
+        {children}
+        {showScrollButtons && (
+          <TabListScrollButton
+            getScrollToOptions={getScrollToOptions}
+            {...forwardScrollButtonProps}
+            {...forwardProps}
+          />
+        )}
+      </div>
+    </KeyboardMovementProvider>
+  );
+}

package/src/tabs/TabListScrollButton.tsx

@@ -2,7 +2,8 @@
 
 import {
   type HTMLAttributes,
-  forwardRef,
+  type ReactElement,
+  type Ref,
   useCallback,
   useRef,
   useState,
@@ -44,6 +45,8 @@ export interface BaseTabListScrollButtonProps
  * @since 6.0.0
  */
 export interface TabListScrollButtonProps extends BaseTabListScrollButtonProps {
+  ref?: Ref<HTMLDivElement>;
+
   type: "back" | "forward";
   /** @defaultValue `false` */
   vertical?: boolean;
@@ -55,11 +58,11 @@ export interface TabListScrollButtonProps extends BaseTabListScrollButtonProps {
  * @internal
  * @since 6.0.0
  */
-export const TabListScrollButton = forwardRef<
-  HTMLDivElement,
-  TabListScrollButtonProps
->(function TabListScrollButton(props, ref) {
+export function TabListScrollButton(
+  props: TabListScrollButtonProps
+): ReactElement {
   const {
+    ref,
     "aria-label": ariaLabel,
     className,
     buttonProps,
@@ -141,4 +144,4 @@ export const TabListScrollButton = forwardRef<
       {forward && <span ref={nodeRef} />}
     </>
   );
-});
+}

package/src/tabs/useTabList.ts

@@ -61,13 +61,13 @@ export interface TabListHookReturnValue {
   };
   movementContext: KeyboardMovementContext;
   backwardProps: {
-    ref: RefObject<HTMLDivElement>;
+    ref: RefObject<HTMLDivElement | null>;
     type: "back";
     vertical: boolean;
     disableTransition?: boolean;
   };
   forwardProps: {
-    ref: RefObject<HTMLDivElement>;
+    ref: RefObject<HTMLDivElement | null>;
     type: "forward";
     vertical: boolean;
     disableTransition?: boolean;

package/src/theme/useCSSVariables.ts

@@ -36,7 +36,7 @@ import { type CSSVariableName, type ReadonlyCSSVariableList } from "./types.js";
  */
 export function useCSSVariables<Name extends CSSVariableName>(
   variables: ReadonlyCSSVariableList<Name>,
-  rootNode?: RefObject<HTMLElement> | HTMLElement
+  rootNode?: RefObject<HTMLElement | null> | HTMLElement
 ): void {
   useEffect(() => {
     if (variables.length === 0) {