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

package/src/tree/useTree.ts

@@ -1,5 +1,5 @@
 "use client";
-import { type TreeItemDefaultIds } from "./types.js";
+import { type TreeDefaultIds } from "./types.js";
 import { useTreeExpansion, type TreeExpansion } from "./useTreeExpansion.js";
 import { useTreeSelection, type TreeSelection } from "./useTreeSelection.js";
 
@@ -15,12 +15,12 @@ export interface TreeHookOptions {
   /**
    * @defaultValue `[]`
    */
-  defaultExpandedIds?: TreeItemDefaultIds;
+  defaultExpandedIds?: TreeDefaultIds;
 
   /**
    * @defaultValue `[]`
    */
-  defaultSelectedIds?: TreeItemDefaultIds;
+  defaultSelectedIds?: TreeDefaultIds;
 }
 
 /**

package/src/tree/useTreeExpansion.ts

@@ -1,7 +1,7 @@
 "use client";
 import { useCallback, useState } from "react";
-import type { UseStateSetter } from "../types.js";
-import type { TreeItemDefaultIds, TreeItemIdSet } from "./types.js";
+import { type UseStateSetter } from "../types.js";
+import { type TreeDefaultIds, type TreeItemIdSet } from "./types.js";
 
 /**
  * @since 6.0.0 Renamed from `TreeItemExpansion` and uses a Set
@@ -20,7 +20,7 @@ export interface TreeExpansion {
  * instead of a list to increase performance.
  */
 export function useTreeExpansion(
-  defaultExpandedIds?: TreeItemDefaultIds
+  defaultExpandedIds?: TreeDefaultIds
 ): TreeExpansion {
   const [expandedIds, setExpandedIds] = useState<TreeItemIdSet>(() => {
     const defaultIds =

package/src/tree/useTreeSelection.ts

@@ -1,7 +1,7 @@
 "use client";
 import { useCallback, useState } from "react";
-import type { UseStateSetter } from "../types.js";
-import type { TreeItemDefaultIds, TreeItemIdSet } from "./types.js";
+import { type UseStateSetter } from "../types.js";
+import { type TreeDefaultIds, type TreeItemIdSet } from "./types.js";
 
 /**
  * @since 6.0.0 Renamed from `TreeItemSelection` and uses a Set
@@ -22,7 +22,7 @@ export interface TreeSelection {
  * instead of a list to increase performance.
  */
 export function useTreeSelection(
-  defaultSelectedIds?: TreeItemDefaultIds,
+  defaultSelectedIds?: TreeDefaultIds,
   multiSelect = false
 ): Required<TreeSelection> {
   const [selectedIds, setSelectedIds] = useState<TreeItemIdSet>(() => {

package/src/typography/SrOnly.tsx

@@ -27,7 +27,8 @@ export interface SrOnlyProps extends HTMLAttributes<TypographyHTMLElement> {
 }
 
 /**
- * **Server Component**
+ * The `SrOnly` component is used to render content that is only visible to
+ * screen readers.
  *
  * @example Simple Example
  * ```tsx

package/src/typography/TextContainer.tsx

@@ -15,8 +15,6 @@ export interface TextContainerProps
     TextContainerClassNameOptions {}
 
 /**
- * **Server Component**
- *
  * This component should be used to render text based content with an
  * appropriate max line length to optimize legibility.
  *

package/src/typography/Typography.tsx

@@ -97,8 +97,6 @@ export interface TypographyProps
 }
 
 /**
- * **Server Component**
- *
  * Render text with one of the material design typography styles applied and
  * optional styles like font-weight, font-style, text color, etc.
  *

package/src/typography/WritingDirectionProvider.tsx

@@ -109,7 +109,7 @@ export interface WritingDirectionProviderProps {
  *
  * In node environments, this will default to `"ltr"`.
  *
- * @since 6.0.0
+ * @since 6.0.0 Renamed from `DEFAULT_DIR`
  */
 export const DEFAULT_WRITING_DIRECTION = (): Dir => {
   let dir: Dir = "ltr";
@@ -194,7 +194,7 @@ export const DEFAULT_WRITING_DIRECTION = (): Dir => {
  * );
  * ```
  *
- * @since 6.0.0
+ * @since 6.0.0 Renamed from `Dir`
  */
 export function WritingDirectionProvider(
   props: WritingDirectionProviderProps

package/src/useResizeListener.ts

@@ -5,7 +5,12 @@ import { delegateEvent } from "./delegateEvent.js";
 import { type useResizeObserver } from "./useResizeObserver.js";
 
 /**
- * @since 6.0.0  Updated the API
+ * @since 6.0.0 Removed the `immediate` option to force the resize handler to be
+ * called immediately.
+ * @since 6.0.0 Renamed to a new API so that there is no longer an `options`
+ * property and instead the `AddEventListenerOptions` are part of the hook
+ * options.
+ * @since 6.0.0 Renamed `onResize` to `onUpdate` and `enabled` to `disabled`.
  */
 export interface ResizeListenerOptions extends AddEventListenerOptions {
   /**
@@ -13,6 +18,7 @@ export interface ResizeListenerOptions extends AddEventListenerOptions {
    * `window.requestAnimationFrame`.
    *
    * @defaultValue `true`
+   * @since 6.0.0
    */
   throttle?: boolean;
 

package/src/useResizeObserver.ts

@@ -23,9 +23,9 @@ interface TargetSize {
 
 /** @internal */
 interface TargetSubscription {
-  readonly onUpdate: ResizeObserverEntryCallback;
-  readonly disableHeight: boolean;
-  readonly disableWidth: boolean;
+  onUpdate: ResizeObserverEntryCallback;
+  disableHeight: boolean;
+  disableWidth: boolean;
 
   size?: TargetSize;
 }

package/src/useToggle.ts

@@ -1,11 +1,11 @@
 "use client";
 import { useCallback, useState } from "react";
-import type { UseStateInitializer, UseStateSetter } from "./types.js";
+import { type UseStateInitializer, type UseStateSetter } from "./types.js";
 
 /**
  * @since 6.0.0
  */
-export interface ToggleHookReturnValue {
+export interface ToggleImplementation {
   toggled: boolean;
   setToggled: UseStateSetter<boolean>;
   toggle(): void;
@@ -25,7 +25,7 @@ export interface ToggleHookReturnValue {
  *
  *   return (
  *     <>
- *       <Button onClick=[toggle]>Toggle</Button>
+ *       <Button onClick={toggle}>Toggle</Button>
  *       {`Toggled: ${toggled}`}
  *     </>
  *   );
@@ -36,7 +36,7 @@ export interface ToggleHookReturnValue {
  */
 export function useToggle(
   defaultValue: UseStateInitializer<boolean> = false
-): Readonly<ToggleHookReturnValue> {
+): ToggleImplementation {
   const [toggled, setToggled] = useState(defaultValue);
 
   return {

package/src/window-splitter/WindowSplitter.tsx

@@ -82,8 +82,8 @@ export interface BaseWindowSplitterProps
 export type WindowSplitterProps = LabelRequiredForA11y<BaseWindowSplitterProps>;
 
 /**
- * **Server Component**
- * Most likely a client component since it relies on `useWindowSplitter`
+ * The `WindowSplitter` should be used with the `useWindowSplitter` hook to
+ * resize parts of a layout.
  *
  * @see {@link useWindowSplitter} for an example usage
  * @since 6.0.0

package/.eslintrc.cjs

@@ -1,34 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["@mlaursen/eslint-config"],
-  parserOptions: {
-    project: "./tsconfig.json",
-    tsconfigRootDir: __dirname,
-    ecmaVersion: 2018,
-    sourceType: "module",
-  },
-  rules: {
-    "react-hooks/exhaustive-deps": [
-      "error",
-      {
-        additionalHooks: "(useIsomorphicLayoutEffect)",
-      },
-    ],
-  },
-  overrides: [
-    {
-      files: ["src/**/index.ts"],
-      rules: {
-        // I don't know how to get @module to work but it's supported by typedoc
-        "tsdoc/syntax": 0,
-      },
-    },
-    {
-      files: ["**/__tests__/**"],
-      rules: {
-        "jsx-a11y/anchor-has-content": 0,
-        "jsx-a11y/click-events-have-key-events": 0,
-      },
-    },
-  ],
-};

package/.stylelintrc.json

@@ -1,14 +0,0 @@
-{
-  "extends": ["stylelint-config-recommended-scss"],
-  "plugins": ["stylelint-order", "stylelint-scss"],
-  "rules": {
-    "no-descending-specificity": null,
-    "selector-pseudo-class-no-unknown": [
-      true,
-      { "ignorePseudoClasses": ["global", "local"] }
-    ],
-    "order/properties-alphabetical-order": true,
-    "scss/operator-no-newline-before": null,
-    "scss/operator-no-newline-after": null
-  }
-}

package/.swcrc

@@ -1,17 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/swcrc.json",
-  "exclude": ["__tests__", "src/test-utils/drag.ts"],
-  "jsc": {
-    "parser": {
-      "syntax": "typescript",
-      "tsx": true
-    },
-    "transform": {
-      "react": {
-        "runtime": "automatic"
-      }
-    },
-    "target": "es2021"
-  },
-  "sourceMaps": true
-}

package/.turbo/turbo-build.log

@@ -1,22 +0,0 @@
-
-> @react-md/core@1.0.0-next.14 build /home/mlaursen/code/react-md/packages/core
-> npm-run-all build-esm build-scss build-types
-
-
-> @react-md/core@1.0.0-next.14 build-esm /home/mlaursen/code/react-md/packages/core
-> swc -d ./dist --strip-leading-paths src
-
-Successfully compiled: 409 files with swc (317.88ms)
-
-> @react-md/core@1.0.0-next.14 build-scss /home/mlaursen/code/react-md/packages/core
-> pnpm run run-script scripts/copySassFiles.ts
-
-
-> @react-md/core@1.0.0-next.14 run-script /home/mlaursen/code/react-md/packages/core
-> tsx --tsconfig scripts/tsconfig.json "scripts/copySassFiles.ts"
-
-Copied 40 scss files
-
-> @react-md/core@1.0.0-next.14 build-types /home/mlaursen/code/react-md/packages/core
-> tsc -P tsconfig.types.json
-

package/.turbo/turbo-lint.log

@@ -1,12 +0,0 @@
-
-> @react-md/core@1.0.0-next.14 lint /home/mlaursen/code/react-md/packages/core
-> npm-run-all lint-scripts lint-styles
-
-
-> @react-md/core@1.0.0-next.14 lint-scripts /home/mlaursen/code/react-md/packages/core
-> eslint "src/**/*.{ts,tsx,js,jsx,cjs,mjs}"
-
-
-> @react-md/core@1.0.0-next.14 lint-styles /home/mlaursen/code/react-md/packages/core
-> stylelint "src/**/*.{css,scss}"
-