@react-md/core 1.0.0-next.14 → 1.0.0-next.16

package/src/tabs/useTabs.ts

@@ -1,11 +1,22 @@
 "use client";
-import type { Dispatch, Ref, RefObject } from "react";
-import { useEffect, useRef, useState } from "react";
-import type { SlideDirection } from "../transition/SlideContainer.js";
-import type { UseStateInitializer, UseStateSetter } from "../types.js";
+import {
+  type Dispatch,
+  type Ref,
+  type RefObject,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { type SlideDirection } from "../transition/SlideContainer.js";
+import { type UseStateInitializer, type UseStateSetter } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { useEnsuredState } from "../useEnsuredState.js";
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { type TabProps } from "./Tab.js";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { type TabListProps } from "./TabList.js";
+
 const EMPTY_LIST = [] as const;
 const PANEL_PREFIX = "panel-";
 
@@ -21,15 +32,6 @@ export interface TabsHookOptions<TabValue extends string | number = number> {
    */
   baseId?: string;
 
-  /**
-   * Set this to `true` if changing active tabs should no longer attempt to
-   * scroll to the top of the tab panels container when using the
-   * {@link TabsImplementation.getTabPanelsProps}.
-   *
-   * @defaultValue `false`
-   */
-  disableScrollFix?: boolean;
-
   /**
    * Set this to an **ordered** list of tab values when:
    * - using a `string` tab value
@@ -55,6 +57,30 @@ export interface TabsHookOptions<TabValue extends string | number = number> {
    * @defaultValue `0`
    */
   defaultActiveTab?: UseStateInitializer<TabValue>;
+
+  /** Convenience pass-through prop to {@link TabProps.stacked} */
+  stacked?: boolean;
+  /** Convenience pass-through prop to {@link TabProps.iconAfter} */
+  iconAfter?: boolean;
+
+  /** Convenience pass-through props to {@link TabListProps.vertical} */
+  vertical?: boolean;
+
+  /**
+   * Set this to `true` if changing active tabs should no longer attempt to
+   * scroll to the top of the tab panels container when using the
+   * {@link TabsImplementation.getTabPanelsProps}.
+   *
+   * @defaultValue `false`
+   */
+  disableScrollFix?: boolean;
+
+  /**
+   * Convenience prop to disable all transitions for the
+   * {@link TabsImplementation.getTabProps} and
+   * {@link TabsImplementation.getTabListProps}.
+   */
+  disableTransition?: boolean;
 }
 
 /**
@@ -64,6 +90,15 @@ export interface ProvidedTabProps {
   "aria-controls": string;
   id: string;
   active: boolean;
+
+  /** Convenience pass-through prop from {@link TabsHookOptions.stacked} */
+  stacked?: boolean;
+  /** Convenience pass-through prop from {@link TabsHookOptions.iconAfter} */
+  iconAfter?: boolean;
+  /** Convenience pass-through prop from {@link TabsHookOptions.disableTransition} */
+  activeIndicator?: boolean;
+  /** Convenience pass-through prop from {@link TabsHookOptions.vertical} and {@link TabsHookOptions.disableTransition} */
+  verticalActiveIndicator?: boolean;
 }
 
 /**
@@ -72,6 +107,8 @@ export interface ProvidedTabProps {
 export interface ProvidedTabListProps {
   activeIndex: number;
   setActiveIndex: Dispatch<number>;
+  vertical?: boolean;
+  disableTransition?: boolean;
 }
 
 /**
@@ -412,11 +449,15 @@ export function useTabs<TabValue extends string | number>(
 ): TabsImplementation<TabValue> {
   const {
     baseId: propBaseId,
-    disableScrollFix,
     tabs = EMPTY_LIST,
+    stacked,
+    vertical,
+    iconAfter,
     activeTab: propActiveTab,
     setActiveTab: propSetActiveTab,
     defaultActiveTab,
+    disableScrollFix,
+    disableTransition,
   } = options;
 
   const baseId = useEnsuredId(propBaseId, "tab");
@@ -456,6 +497,10 @@ export function useTabs<TabValue extends string | number>(
         "aria-controls": getTabId(tabValue, PANEL_PREFIX),
         id: getTabId(tabValue),
         active: tabValue === activeTab,
+        stacked,
+        iconAfter,
+        activeIndicator: disableTransition,
+        verticalActiveIndicator: vertical && disableTransition,
       };
     },
     getTabListProps() {
@@ -469,6 +514,8 @@ export function useTabs<TabValue extends string | number>(
             setActiveTab(nextActiveIndex as TabValue);
           }
         },
+        vertical,
+        disableTransition,
       };
     },
     getTabPanelProps(tabValue) {

package/src/test-utils/IntersectionObserver.ts

@@ -14,7 +14,7 @@ export class IntersectionObserverMock implements IntersectionObserver {
     this.thresholds =
       typeof options.threshold === "number"
         ? [options.threshold]
-        : options.threshold ?? [];
+        : (options.threshold ?? []);
 
     this.elements = new Set();
   }

package/src/tooltip/Tooltip.tsx

@@ -4,8 +4,11 @@ import { type TextOverflow } from "../cssUtils.js";
 import { Portal } from "../portal/Portal.js";
 import { type SimplePosition } from "../positioning/types.js";
 import {
+  type CSSTransitionClassNames,
   type CSSTransitionComponentProps,
+  type SSRTransitionOptions,
   type TransitionActions,
+  type TransitionTimeout,
 } from "../transition/types.js";
 import { useCSSTransition } from "../transition/useCSSTransition.js";
 import { useEnsuredId } from "../useEnsuredId.js";
@@ -21,22 +24,28 @@ import { tooltip } from "./tooltipStyles.js";
  * creating custom tooltip implementations.
  *
  * @since 2.8.0 Supports the `RenderConditionalPortalProps`
- * @since 6.0.0 No longer supports the `RenderConditionalPortalProps`.
+ * @since 6.0.0 The `id` prop is optional.
+ * @since 6.0.0 Removed `lineWrap` for `textOverflow`
+ * @since 6.0.0 No longer supports the `RenderConditionalPortalProps` other than
+ * `portal` with the `disablePortal` prop.
  */
 export interface TooltipProps
   extends HTMLAttributes<HTMLSpanElement>,
     CSSTransitionComponentProps,
+    SSRTransitionOptions,
     TransitionActions {
   visible: boolean;
 
   /**
+   * Set this to `true` to use a smaller font size and padding on the tooltip
+   * and a smaller gap between the tooltip and tooltipped element.
+   *
    * @defaultValue `false`
    */
   dense?: boolean;
 
   /**
-   * @defaultValue `DEFAULT_TOOLTIP_POSITION`
-   * @see {@link DEFAULT_TOOLTIP_POSITION}
+   * @defaultValue `"below"`
    */
   position?: SimplePosition;
 
@@ -46,11 +55,6 @@ export interface TooltipProps
    */
   temporary?: boolean;
 
-  /**
-   * @defaultValue `false`
-   */
-  disablePortal?: boolean;
-
   /**
    * Set this to `"nowrap"` for tooltips that are positioned near the edge of
    * the viewport that have a position of `"above"` or `"below"` so that the
@@ -62,6 +66,18 @@ export interface TooltipProps
    * @defaultValue `"allow"`
    */
   textOverflow?: TextOverflow;
+
+  /**
+   * @see {@link CSSTransitionComponentProps.timeout}
+   * @defaultValue `DEFAULT_TOOLTIP_TIMEOUT`
+   */
+  timeout?: TransitionTimeout;
+
+  /**
+   * @see {@link CSSTransitionComponentProps.classNames}
+   * @defaultValue `DEFAULT_TOOLTIP_CLASSNAMES`
+   */
+  classNames?: CSSTransitionClassNames;
 }
 
 /**

package/src/tooltip/useTooltip.ts

@@ -1,25 +1,34 @@
 "use client";
 import { cnb } from "cnbuilder";
-import type {
-  CSSProperties,
-  FocusEvent,
-  MouseEvent,
-  MutableRefObject,
-  Ref,
-  RefObject,
-  TouchEvent,
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  type CSSProperties,
+  type FocusEvent,
+  type MouseEvent,
+  type MutableRefObject,
+  type Ref,
+  type RefObject,
+  type TouchEvent,
 } from "react";
-import { useCallback, useEffect, useId, useRef } from "react";
 import {
   useHoverMode,
   type ControlledHoverModeImplementation,
 } from "../hoverMode/useHoverMode.js";
-import type { UserInteractionMode } from "../interaction/UserInteractionModeProvider.js";
-import { useUserInteractionMode } from "../interaction/UserInteractionModeProvider.js";
-import type { SimplePosition } from "../positioning/types.js";
-import type { FixedPositioningTransitionCallbacks } from "../positioning/useFixedPositioning.js";
-import { useFixedPositioning } from "../positioning/useFixedPositioning.js";
-import type { UseStateSetter } from "../types.js";
+import {
+  useUserInteractionMode,
+  type UserInteractionMode,
+} from "../interaction/UserInteractionModeProvider.js";
+import { type SimplePosition } from "../positioning/types.js";
+import {
+  useFixedPositioning,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  type FixedPositioningOptions,
+  type FixedPositioningTransitionCallbacks,
+} from "../positioning/useFixedPositioning.js";
+import { type UseStateSetter } from "../types.js";
 import { usePageInactive } from "../usePageInactive.js";
 import { parseCssLengthUnit } from "../utils/parseCssLengthUnit.js";
 import { useTooltipHoverMode } from "./TooltipHoverModeProvider.js";
@@ -31,8 +40,10 @@ import {
   DEFAULT_TOOLTIP_THRESHOLD,
   TOOLTIP_SPACING_VAR,
 } from "./constants.js";
-import type { TooltipPositionHookOptions } from "./useTooltipPosition.js";
-import { useTooltipPosition } from "./useTooltipPosition.js";
+import {
+  useTooltipPosition,
+  type TooltipPositionHookOptions,
+} from "./useTooltipPosition.js";
 import { getAnchor } from "./utils.js";
 
 declare module "react" {
@@ -52,35 +63,46 @@ export interface TooltipPositioningOptions {
   style?: CSSProperties;
 
   /**
-   * @defaultValue `DEFAULT_TOOLTIP_MARGIN`
-   * @see {@link DEFAULT_TOOLTIP_MARGIN}
+   * @see {@link FixedPositioningOptions.vwMargin}
+   * @defaultValue `16`
    */
   vwMargin?: number;
 
   /**
-   * @defaultValue `DEFAULT_TOOLTIP_MARGIN`
-   * @see {@link DEFAULT_TOOLTIP_MARGIN}
+   * @see {@link FixedPositioningOptions.vhMargin}
+   * @defaultValue `16`
    */
   vhMargin?: number;
 
   /**
+   * Set this to `true` to reduce the font size and padding on the tooltip and
+   * the amount of spacing between the tooltipped element and the tooltip.
+   *
    * @defaultValue `false`
    */
   dense?: boolean;
 
   /**
-   * @defaultValue `DEFAULT_TOOLTIP_SPACING`
-   * @see {@link DEFAULT_TOOLTIP_SPACING}
+   * The amount of spacing to use between the tooltipped element and the tooltip
+   * when {@link disableAutoSpacing} is `false`.
+   *
+   * @defaultValue `"1.5rem`
    */
   spacing?: number | string;
 
   /**
-   * @defaultValue `DEFAULT_TOOLTIP_DENSE_SPACING`
-   * @see {@link DEFAULT_TOOLTIP_DENSE_SPACING}
+   * The amount of spacing to use between the tooltipped element and the tooltip
+   * when {@link disableAutoSpacing} is `false` and {@link dense} is `true`.
+   *
+   * @defaultValue `"0.875rem`
    */
   denseSpacing?: number | string;
 
   /**
+   * Set this to `true` to prevent the {@link defaultPosition} to swap to the
+   * other side of the tooltipped element when it is too close to the viewport
+   * edge. This will always be `true` if a {@link position} is provided.
+   *
    * @defaultValue `false`
    */
   disableSwapping?: boolean;
@@ -109,7 +131,10 @@ export interface TooltippedElementEventHandlers<
   onContextMenu?(event: MouseEvent<E>): void;
 }
 
-/** @since 2.8.0 */
+/**
+ * @since 2.8.0
+ * @since 6.0.0 Renamed from `TooltipHookProvidedElementProps`
+ */
 export interface ProvidedTooltippedElementProps<E extends HTMLElement>
   extends Required<TooltippedElementEventHandlers<E>> {
   "aria-describedby": string | undefined;
@@ -206,7 +231,7 @@ export interface TooltipOptions<
    * The default value is really the current hover timeout from the
    * `TooltipHoverModeProvider`.
    *
-   * @defaultValue `DEFAULT_TOOLTIP_DELAY`
+   * @defaultValue `1000`
    */
   hoverTimeout?: number;
 

package/src/tooltip/useTooltipPosition.ts

@@ -30,8 +30,7 @@ export interface TooltipPositionHookOptions {
    * Vertical - `"below"` or `"above"`
    * Horizontal - `"left"` or `"right"`
    *
-   * @defaultValue `DEFAULT_TOOLTIP_POSITION`
-   * @see {@link DEFAULT_TOOLTIP_POSITION}
+   * @defaultValue `"below"`
    */
   defaultPosition?: SimplePosition;
 
@@ -42,8 +41,7 @@ export interface TooltipPositionHookOptions {
    *
    * You _probably_ won't ever really need to update this value.
    *
-   * @defaultValue `DEFAULT_TOOLTIP_THRESHOLD`
-   * @see {@link DEFAULT_TOOLTIP_THRESHOLD}
+   * @defaultValue `0.75`
    */
   threshold?: number;
 }

package/src/transition/SlideContainer.tsx

@@ -73,8 +73,8 @@ export interface SlideContainerProps
     SlideContainerClassNameOptions {}
 
 /**
- * **Server Component**
- * This is a server component, but generally relies on state so probably a client component.
+ * The `SlideContainer` is used to enable a slide transition when child `Slide`
+ * components change.
  *
  * @example Simple Example
  * ```tsx
@@ -119,52 +119,6 @@ export interface SlideContainerProps
  * }
  * ```
  *
- * @example Persistent Slides
- * ```tsx
- * import type { SlideDirection } from "@react-md/core";
- * import { SlideContainer, Slide } from "@react-md/core";
- * import type { ReactElement, ReactNode } from "react";
- * import { useState } from "react";
- *
- * interface State {
- *   direction: SlideDirection;
- *   activeIndex: number;
- * }
- *
- * function Example(): ReactElement {
- *   const [state, setState] = useState<State>({
- *     direction: "left",
- *     activeIndex: 0,
- *   });
- *   const { direction, activeIndex } = state;
- *
- *   // when changing a slide, `direction` should be set to "left" if the
- *   // previous `activeIndex` is less than the next index
- *   //
- *   // i.e.
- *   // setState((prevState) => ({
- *   //   direction: prevState.activeIndex < index ? "left" : "right",
- *   //   activeIndex: index,
- *   // }))
- *
- *   // enabling `persistent` makes it so that the `<Slide>` never unmounts so
- *   // that state can be maintained while it is not active.
- *   return (
- *     <SlideContainer direction={direction}>
- *       <Slide active={activeIndex === 0} persistent>
- *         Slide 1
- *       </Slide>
- *       <Slide active={activeIndex === 1} persistent>
- *         Slide 2
- *       </Slide>
- *       <Slide active={activeIndex === 2} persistent>
- *         Slide 3
- *       </Slide>
- *     </SlideContainer>
- *   );
- * }
- * ```
- *
  * @since 6.0.0
  */
 export const SlideContainer = forwardRef<HTMLDivElement, SlideContainerProps>(

package/src/transition/types.ts

@@ -370,13 +370,31 @@ export interface PreconfiguredCSSTransitionOptions<E extends HTMLElement>
   transitionIn: boolean;
 }
 
+/**
+ * @since 6.0.0
+ */
+export interface SSRTransitionOptions {
+  /**
+   * This is mostly used internally to make it so that you can render portalled
+   * elements inline with content if SSR is enabled in your app. To enable this
+   * feature, the {@link CoreProvidersProps.ssr} must be set to `true`.
+   *
+   * This value will be `true` if a portalled element was rendered by default
+   * from the server and remain true until it unmounts from the DOM.
+   *
+   * @defaultValue `false`
+   */
+  disablePortal?: boolean;
+}
+
 /**
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
  * @since 4.0.0
  */
 export interface TransitionHookOptions<E extends HTMLElement>
-  extends TransitionOptions<E> {
+  extends TransitionOptions<E>,
+    SSRTransitionOptions {
   /**
    * Boolean if the DOM should forcefully be reflow each time a transition
    * change occurs. This is generally required for any CSS transition and is
@@ -385,12 +403,6 @@ export interface TransitionHookOptions<E extends HTMLElement>
    * @defaultValue `false`
    */
   reflow?: boolean;
-
-  /**
-   * @since 6.0.0
-   * @defaultValue `false`
-   */
-  disablePortal?: boolean;
 }
 
 /**
@@ -422,7 +434,8 @@ export interface TransitionState {
  * @since 4.0.0
  */
 export interface TransitionHookReturnValue<E extends HTMLElement>
-  extends TransitionState {
+  extends TransitionState,
+    Required<SSRTransitionOptions> {
   /**
    * A ref that is required for the transition to occur and should be passed to
    * the element affected by the transition.
@@ -466,19 +479,6 @@ export interface TransitionHookReturnValue<E extends HTMLElement>
    * @param stage - The {@link TransitionStage} to set to
    */
   transitionTo(stage: TransitionStage): void;
-
-  /**
-   * This is mostly used internally to make it so that you can render portalled
-   * elements inline with content if SSR is enabled in your app. To enable this
-   * feature, the {@link CoreProvidersProps.ssr} must be set to `true`.
-   *
-   * This value will be `true` if a portalled element was rendered by default
-   * from the server and remain true until it unmounts from the DOM.
-   *
-   * @defaultValue `false`
-   * @since 6.0.0
-   */
-  disablePortal: boolean;
 }
 
 /**
@@ -487,16 +487,12 @@ export interface TransitionHookReturnValue<E extends HTMLElement>
  * @since 4.0.0
  */
 export interface CSSTransitionHookOptions<E extends HTMLElement>
-  extends PreconfiguredCSSTransitionOptions<E> {
+  extends PreconfiguredCSSTransitionOptions<E>,
+    SSRTransitionOptions {
   /** {@inheritDoc TransitionTimeout} */
   timeout: TransitionTimeout;
   /** {@inheritDoc CSSTransitionClassNames} */
   classNames: CSSTransitionClassNames;
-
-  /**
-   * @since 6.0.0
-   */
-  disablePortal?: boolean;
 }
 
 /**

package/src/transition/useTransition.ts

@@ -30,6 +30,7 @@ const noop = (): void => {
  * @typeParam E - The HTMLElement type used or the ref required for the
  * transition.
  * @since 4.0.0
+ * @since 6.0.0 Added the `disablePortal` flag to the return value for SSR.
  */
 export function useTransition<E extends HTMLElement>(
   options: TransitionHookOptions<E>

package/src/tree/DefaultTreeItemRenderer.tsx

@@ -1,10 +1,9 @@
 import { type ReactElement } from "react";
-import { type RenderRecursiveItemsProps } from "../utils/RenderRecursively.js";
 import { TreeItem } from "./TreeItem.js";
 import {
   type DefaultTreeItemNode,
-  type TreeData,
   type TreeItemNode,
+  type TreeItemRendererProps,
 } from "./types.js";
 
 /**
@@ -21,8 +20,8 @@ import {
  */
 export function DefaultTreeItemRenderer<
   T extends TreeItemNode = DefaultTreeItemNode,
->(props: RenderRecursiveItemsProps<T, TreeData<T>>): ReactElement {
-  const { item: _item, parents, children: childItems } = props;
+>(props: TreeItemRendererProps<T>): ReactElement {
+  const { parents, children: childItems } = props;
   const item = props.item as DefaultTreeItemNode;
 
   const {

package/src/tree/Tree.tsx

@@ -11,10 +11,7 @@ import { List } from "../list/List.js";
 import { KeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
 import { type LabelRequiredForA11y } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
-import {
-  RenderRecursively,
-  type RenderRecursiveItemsProps,
-} from "../utils/RenderRecursively.js";
+import { RenderRecursively } from "../utils/RenderRecursively.js";
 import { identity } from "../utils/identity.js";
 import { DefaultTreeItemRenderer } from "./DefaultTreeItemRenderer.js";
 import { TreeProvider, type TreeExpansionMode } from "./TreeProvider.js";
@@ -22,6 +19,7 @@ import { tree } from "./styles.js";
 import {
   type TreeData,
   type TreeItemNode,
+  type TreeItemRendererProps,
   type TreeItemSorter,
 } from "./types.js";
 import { type TreeExpansion } from "./useTreeExpansion.js";
@@ -124,7 +122,7 @@ export interface TreeProps<T extends TreeItemNode>
    *   TreeItem,
    *   useKeyboardMovementContext,
    *   useTreeContext,
-   *   type RenderRecursiveItemsProps,
+   *   type TreeItemRendererProps,
    * } from "@react-md/core";
    * import FolderIcon from "@react-md/material-icons/FolderIcon";
    * import FolderOpenIcon from "@react-md/material-icons/FolderOpenIcon";
@@ -164,7 +162,7 @@ export interface TreeProps<T extends TreeItemNode>
    * @see {@link DefaultTreeItemRenderer}
    * @defaultValue `DefaultTreeItemRenderer`
    */
-  renderer?: ComponentType<RenderRecursiveItemsProps<T, TreeData<T>>>;
+  renderer?: ComponentType<TreeItemRendererProps<T>>;
 
   /**
    * The link component to use for any tree item nodes that have a `to` or

package/src/tree/TreeItem.tsx

@@ -19,7 +19,11 @@ import { treeItem, treeItemContent, treeItemMedia } from "./styles.js";
 import { type DefaultTreeItemNode } from "./types.js";
 
 /**
- * @since 6.0.0  Added the `groupProps` prop.
+ * @since 6.0.0 Added `liProps` and `groupProps`.
+ * @since 6.0.0 The `liRef`, `liStyle`, and `liClassName` props were removed in
+ * favor of `liProps={{ ref, style, className }}`.
+ * @since 6.0.0 The `itemIndex`, `listSize`, `renderChildItems`, `isLink`,
+ * `contentComponent`, and `readOnly` props were removed.
  */
 export interface TreeItemProps
   extends Omit<DefaultTreeItemNode, "parentId">,
@@ -80,8 +84,11 @@ export interface TreeItemProps
  * **Client Component**
  *
  * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/treeview/}
- * @since 6.0.0 The wrapping `<li>` element will always be `role="none"` and
- * the `<span>` or `<a>` will gain the `role="treeitem"` instead. This makes it
+ * @since 6.0.0 No longer forwards refs. The ref must be provided using
+ * `contentRef` instead.
+ * @since 6.0.0 The `liRef` was removed in favor of `liProps={{ ref }}`.
+ * @since 6.0.0 The wrapping `<li>` element will always be `role="none"` and the
+ * `<span>` or `<a>` will gain the `role="treeitem"` instead. This makes it
  * easier to pass event handlers because of the nested behavior of tree items.
  * @since 6.0.0 No longer provides the `aria-level`, `aria-setsize` and
  * `aria-posinset` attributes and allows the browser to compute them instead.
@@ -206,7 +213,7 @@ export function TreeItem(props: TreeItemProps): ReactElement {
   // cheating a bit so there are type errors around the event handlers
   const ContentComponent = (isLink ? Link : "span") as "span";
   const leftAddonType =
-    propLeftAddonType ?? (expanderLeft && leftAddon) ? "media" : undefined;
+    (propLeftAddonType ?? (expanderLeft && leftAddon)) ? "media" : undefined;
   const isMediaLeftAddon =
     typeof propLeftAddonType === "undefined" && leftAddonType === "media";
   const disableLeftAddonCenteredMedia =

package/src/tree/types.ts

@@ -1,6 +1,7 @@
-import type { ReactNode } from "react";
-import type { ListItemChildrenProps } from "../list/types.js";
-import type { UseStateInitializer } from "../types.js";
+import { type ReactNode } from "react";
+import { type ListItemChildrenProps } from "../list/types.js";
+import { type UseStateInitializer } from "../types.js";
+import { type RenderRecursiveItemsProps } from "../utils/RenderRecursively.js";
 
 /**
  * @since 6.0.0 This was renamed from `TreeItemIds`
@@ -103,15 +104,17 @@ export type TreeData<T extends TreeItemNode = DefaultTreeItemNode> = Record<
 >;
 
 /**
- * @since 6.0.0 This used to be `TreeItemIds` but was converted to a
- * Set to increase performance for large trees.
+ * @since 6.0.0 This used to be `ExpandedIds`/`SelectedIds` but was converted to
+ * a `Set` to increase performance for large trees.
  */
 export type TreeItemIdSet = ReadonlySet<string>;
 
 /**
  * @since 6.0.0
  */
-export type TreeItemDefaultIds = UseStateInitializer<readonly string[]>;
+export type TreeDefaultIds = UseStateInitializer<
+  readonly string[] | ReadonlySet<string>
+>;
 
 /**
  * A function to call that will sort the items within the tree for each unique
@@ -144,3 +147,10 @@ export type TreeItemDefaultIds = UseStateInitializer<readonly string[]>;
 export type TreeItemSorter<T extends TreeItemNode = DefaultTreeItemNode> = (
   items: readonly T[]
 ) => readonly T[];
+
+/**
+ * @since 6.0.0
+ */
+export type TreeItemRendererProps<
+  T extends TreeItemNode = DefaultTreeItemNode,
+> = RenderRecursiveItemsProps<T, TreeData<T>>;