@react-md/core 1.0.0-next.0 → 1.0.0-next.1

package/src/tree/__tests__/TreeGroup.tsx

@@ -29,6 +29,7 @@ describe("TreeGroup", () => {
         <TreeProvider
           temporaryChildItems={false}
           data={{}}
+          linkComponent="a"
           disableTransition={false}
           expandedIds={new Set()}
           expanderIcon={null}

package/src/tree/__tests__/TreeItemExpander.tsx

@@ -28,6 +28,7 @@ describe("TreeItemExpander", () => {
       <TreeProvider
         temporaryChildItems={false}
         data={{}}
+        linkComponent="a"
         disableTransition={false}
         expandedIds={new Set()}
         expanderIcon="icon"

package/src/typography/__tests__/TextContainer.tsx

@@ -1,19 +1,19 @@
 import { describe, expect, it } from "@jest/globals";
 import { createRef } from "react";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
 import { textContainer, TextContainer } from "../TextContainer.js";
 import { Typography } from "../Typography.js";
 
 describe("TextContainer", () => {
   it("should render correctly and apply the correct class names", () => {
-    const { getByTestId, rerender } = render(
+    const { rerender } = render(
       <TextContainer data-testid="container">
         <Typography>Content</Typography>
       </TextContainer>
     );
 
-    const container = getByTestId("container");
+    const container = screen.getByTestId("container");
     expect(container).toHaveClass("rmd-text-container");
     expect(container).toMatchSnapshot();
 

package/src/typography/__tests__/Typography.tsx

@@ -1,13 +1,13 @@
 import { describe, expect, it } from "@jest/globals";
 import { type HTMLAttributes, type ReactElement } from "react";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
 import { typography, Typography, type TypographyType } from "../Typography.js";
 
 describe("Typography", () => {
   it("should default to rendering as a paragraph and body-1 styles", () => {
-    const { getByTestId } = render(<Typography data-testid="text" />);
-    const text = getByTestId("text");
+    render(<Typography data-testid="text" />);
+    const text = screen.getByTestId("text");
     expect(text.tagName).toBe("P");
     expect(text).toHaveClass("rmd-typography");
     expect(text).toHaveClass("rmd-typography--body-1");
@@ -29,10 +29,10 @@ describe("Typography", () => {
       { type: "overline", expected: "span" },
     ];
 
-    const { getByTestId, rerender } = render(<Typography data-testid="text" />);
+    const { rerender } = render(<Typography data-testid="text" />);
     tests.forEach(({ type, expected }) => {
       rerender(<Typography data-testid="text" type={type} />);
-      const text = getByTestId("text");
+      const text = screen.getByTestId("text");
       expect(text.tagName.toLowerCase()).toBe(expected);
       expect(text).toHaveClass("rmd-typography");
       expect(text).toHaveClass(`rmd-typography--${type}`);
@@ -44,7 +44,7 @@ describe("Typography", () => {
         <Typography type="caption" data-testid="text" />
       </table>
     );
-    const text = getByTestId("text");
+    const text = screen.getByTestId("text");
     expect(text.tagName).toBe("CAPTION");
     expect(text).toHaveClass("rmd-typography");
     expect(text).toHaveClass("rmd-typography--caption");
@@ -56,14 +56,12 @@ describe("Typography", () => {
       return <div {...props}>Custom!</div>;
     }
 
-    const { getByTestId } = render(
-      <Typography data-testid="text" as={Custom} />
-    );
-    expect(getByTestId("text")).toMatchSnapshot();
+    render(<Typography data-testid="text" as={Custom} />);
+    expect(screen.getByTestId("text")).toMatchSnapshot();
   });
 
   it("should be able to apply additional styles", () => {
-    const { getByTestId } = render(
+    render(
       <Typography
         data-testid="text"
         textAlign="center"
@@ -76,7 +74,7 @@ describe("Typography", () => {
       />
     );
 
-    expect(getByTestId("text")).toMatchSnapshot();
+    expect(screen.getByTestId("text")).toMatchSnapshot();
   });
 
   describe("styling utility class", () => {

package/src/typography/__tests__/WritingDirectionProvider.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "@jest/globals";
 import { type FC } from "react";
-import { fireEvent, render } from "../../test-utils/index.js";
+import { fireEvent, render, screen } from "../../test-utils/index.js";
 
 import {
   useDir,
@@ -54,7 +54,7 @@ describe("WritingDirectionProvider", () => {
   });
 
   it("should clone the dir into a child element", () => {
-    const { getByTestId } = render(
+    render(
       <WritingDirectionProvider defaultDir="ltr">
         <WritingDirectionProvider defaultDir="rtl">
           <span data-testid="span" />
@@ -62,18 +62,18 @@ describe("WritingDirectionProvider", () => {
       </WritingDirectionProvider>
     );
 
-    const span = getByTestId("span");
+    const span = screen.getByTestId("span");
     expect(span).toHaveAttribute("dir", "rtl");
   });
 
   it("should allow a child component to access and toggle the direction", () => {
-    const { getByRole } = render(
+    render(
       <WritingDirectionProvider>
         <Child />
       </WritingDirectionProvider>
     );
 
-    const button = getByRole("button");
+    const button = screen.getByRole("button");
     expect(document.documentElement).toHaveAttribute("dir", "ltr");
     expect(button).toHaveTextContent("ltr");
     fireEvent.click(button);
@@ -82,7 +82,7 @@ describe("WritingDirectionProvider", () => {
   });
 
   it("should toggle the correct parent with multiple Dir components", () => {
-    const { getByRole } = render(
+    render(
       <WritingDirectionProvider>
         <WritingDirectionProvider defaultDir="rtl">
           <Child />
@@ -90,7 +90,7 @@ describe("WritingDirectionProvider", () => {
       </WritingDirectionProvider>
     );
 
-    const button = getByRole("button");
+    const button = screen.getByRole("button");
     expect(document.documentElement).toHaveAttribute("dir", "ltr");
     expect(button).toHaveTextContent("rtl");
     fireEvent.click(button);

package/dist/divider/VerticalDivider.js

@@ -1,40 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { Divider } from "./Divider.js";
-import { useVerticalDividerHeight } from "./useVerticalDividerHeight.js";
-/**
- * **Client Component**
- *
- * This component is used to create a vertical divider based on a parent
- * element's height. This is really only needed when the parent element **has no
- * defined height**.  If there is a defined height, this component is not worth
- * much as the height can be computed in css as normal. This really just fixes
- * the issue that the height would be set to `auto` (which computes to 0 most of
- * the time) when it is not set on a parent element.
- *
- * @example
- * Server Component Implementation
- * ```tsx
- * import type { ReactElement } from "react";
- * import { Divider } from "@react-md/core";
- *
- * function Example(): ReactElement {
- *   // or use a custom className
- *   return <Divider vertical style={{ height: "80%" }} />;
- * }
- * ```
- */ export const VerticalDivider = /*#__PURE__*/ forwardRef(function VerticalDivider(props, ref) {
-    const { style, maxHeight = 1, ...remaining } = props;
-    const heightProps = useVerticalDividerHeight({
-        ref,
-        style,
-        maxHeight
-    });
-    return /*#__PURE__*/ _jsx(Divider, {
-        ...remaining,
-        ...heightProps,
-        vertical: true
-    });
-});
-
-//# sourceMappingURL=VerticalDivider.js.map

package/dist/divider/VerticalDivider.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/divider/VerticalDivider.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { Divider } from \"./Divider.js\";\nimport {\n  useVerticalDividerHeight,\n  type VerticalDividerHookOptions,\n} from \"./useVerticalDividerHeight.js\";\n\nexport interface VerticalDividerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * @see {@link VerticalDividerHookOptions.maxHeight}\n   * @defaultValue `1`\n   */\n  maxHeight?: VerticalDividerHookOptions<HTMLDivElement>[\"maxHeight\"];\n}\n\n/**\n * **Client Component**\n *\n * This component is used to create a vertical divider based on a parent\n * element's height. This is really only needed when the parent element **has no\n * defined height**.  If there is a defined height, this component is not worth\n * much as the height can be computed in css as normal. This really just fixes\n * the issue that the height would be set to `auto` (which computes to 0 most of\n * the time) when it is not set on a parent element.\n *\n * @example\n * Server Component Implementation\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Divider } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   // or use a custom className\n *   return <Divider vertical style={{ height: \"80%\" }} />;\n * }\n * ```\n */\nexport const VerticalDivider = forwardRef<HTMLDivElement, VerticalDividerProps>(\n  function VerticalDivider(props, ref) {\n    const { style, maxHeight = 1, ...remaining } = props;\n\n    const heightProps = useVerticalDividerHeight({\n      ref,\n      style,\n      maxHeight,\n    });\n\n    return <Divider {...remaining} {...heightProps} vertical />;\n  }\n);\n"],"names":["forwardRef","Divider","useVerticalDividerHeight","VerticalDivider","props","ref","style","maxHeight","remaining","heightProps","vertical"],"mappings":";AAAA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,OAAO,QAAQ,eAAe;AACvC,SACEC,wBAAwB,QAEnB,gCAAgC;AAUvC;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,MAAMC,gCAAkBH,WAC7B,SAASG,gBAAgBC,KAAK,EAAEC,GAAG;IACjC,MAAM,EAAEC,KAAK,EAAEC,YAAY,CAAC,EAAE,GAAGC,WAAW,GAAGJ;IAE/C,MAAMK,cAAcP,yBAAyB;QAC3CG;QACAC;QACAC;IACF;IAEA,qBAAO,KAACN;QAAS,GAAGO,SAAS;QAAG,GAAGC,WAAW;QAAEC,QAAQ;;AAC1D,GACA"}

package/dist/divider/useVerticalDividerHeight.js

@@ -1,40 +0,0 @@
-"use client";
-import { useCallback, useState } from "react";
-import { applyRef } from "../utils/applyRef.js";
-/**
- * This is a small hook that is used to automatically create a vertical divider
- * based on the computed height of its parent element.
- *
- * @internal
- * @remarks \@since 5.0.0 The hook accepts an object instead of using multiple
- * params and uses a generic for the HTMLElement type.
- * @remarks \@since 6.0.0 Updated to be internal only since it doesn't make much
- * sense to be a public API.
- */ export function useVerticalDividerHeight(options) {
-    const { ref, style, maxHeight } = options;
-    const [height, setHeight] = useState(undefined);
-    const refCallback = useCallback((instance)=>{
-        applyRef(instance, ref);
-        if (!instance || !instance.parentElement || maxHeight === 0) {
-            return;
-        }
-        const height = instance.parentElement.offsetHeight;
-        if (maxHeight <= 1) {
-            setHeight(height * maxHeight);
-        } else {
-            setHeight(Math.min(height, maxHeight));
-        }
-    }, [
-        maxHeight,
-        ref
-    ]);
-    return {
-        ref: refCallback,
-        style: maxHeight <= 0 ? style : {
-            ...style,
-            height
-        }
-    };
-}
-
-//# sourceMappingURL=useVerticalDividerHeight.js.map

package/dist/divider/useVerticalDividerHeight.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/divider/useVerticalDividerHeight.ts"],"sourcesContent":["\"use client\";\nimport type { CSSProperties, Ref, RefCallback } from \"react\";\nimport { useCallback, useState } from \"react\";\nimport { applyRef } from \"../utils/applyRef.js\";\n\n/** @remarks \\@since 5.0.0 */\nexport interface VerticalDividerHookOptions<E extends HTMLElement> {\n  /**\n   * An optional ref to merge with the returned ref.\n   */\n  ref?: Ref<E>;\n\n  /**\n   * An optional style object to merge with the divider's height style.\n   */\n  style?: CSSProperties;\n\n  /**\n   * The max height for the vertical divider. When this is `<= 0`, the hook will\n   * be disabled.\n   *\n   * When the value is between 0 and 1, it will be used as a multiplier with the\n   * parent element's height. When the value is greater than 1, it will be used\n   * in `Math.min(parentElementHeight, maxHeight)`.\n   */\n  maxHeight: number;\n}\n\n/** @remarks \\@since 5.0.0 */\nexport interface VerticalDividerHeight<E extends HTMLElement> {\n  ref: RefCallback<E>;\n  style: CSSProperties | undefined;\n}\n\n/**\n * This is a small hook that is used to automatically create a vertical divider\n * based on the computed height of its parent element.\n *\n * @internal\n * @remarks \\@since 5.0.0 The hook accepts an object instead of using multiple\n * params and uses a generic for the HTMLElement type.\n * @remarks \\@since 6.0.0 Updated to be internal only since it doesn't make much\n * sense to be a public API.\n */\nexport function useVerticalDividerHeight<E extends HTMLElement>(\n  options: VerticalDividerHookOptions<E>\n): VerticalDividerHeight<E> {\n  const { ref, style, maxHeight } = options;\n\n  const [height, setHeight] = useState<number | undefined>(undefined);\n  const refCallback = useCallback(\n    (instance: E | null) => {\n      applyRef(instance, ref);\n      if (!instance || !instance.parentElement || maxHeight === 0) {\n        return;\n      }\n\n      const height = instance.parentElement.offsetHeight;\n      if (maxHeight <= 1) {\n        setHeight(height * maxHeight);\n      } else {\n        setHeight(Math.min(height, maxHeight));\n      }\n    },\n    [maxHeight, ref]\n  );\n\n  return {\n    ref: refCallback,\n    style: maxHeight <= 0 ? style : { ...style, height },\n  };\n}\n"],"names":["useCallback","useState","applyRef","useVerticalDividerHeight","options","ref","style","maxHeight","height","setHeight","undefined","refCallback","instance","parentElement","offsetHeight","Math","min"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAC9C,SAASC,QAAQ,QAAQ,uBAAuB;AA+BhD;;;;;;;;;CASC,GACD,OAAO,SAASC,yBACdC,OAAsC;IAEtC,MAAM,EAAEC,GAAG,EAAEC,KAAK,EAAEC,SAAS,EAAE,GAAGH;IAElC,MAAM,CAACI,QAAQC,UAAU,GAAGR,SAA6BS;IACzD,MAAMC,cAAcX,YAClB,CAACY;QACCV,SAASU,UAAUP;QACnB,IAAI,CAACO,YAAY,CAACA,SAASC,aAAa,IAAIN,cAAc,GAAG;YAC3D;QACF;QAEA,MAAMC,SAASI,SAASC,aAAa,CAACC,YAAY;QAClD,IAAIP,aAAa,GAAG;YAClBE,UAAUD,SAASD;QACrB,OAAO;YACLE,UAAUM,KAAKC,GAAG,CAACR,QAAQD;QAC7B;IACF,GACA;QAACA;QAAWF;KAAI;IAGlB,OAAO;QACLA,KAAKM;QACLL,OAAOC,aAAa,IAAID,QAAQ;YAAE,GAAGA,KAAK;YAAEE;QAAO;IACrD;AACF"}

package/dist/link/LinkProvider.js

@@ -1,26 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
-import { Link } from "./Link.js";
-const context = /*#__PURE__*/ createContext(Link);
-const { Provider } = context;
-context.displayName = "Link";
-/**
- * @remarks \@since 6.0.0
- */ export function useLink() {
-    return useContext(context);
-}
-/**
- * **Client Component**
- *
- * @remarks \@since 6.0.0
- */ export function LinkProvider(props) {
-    const { value, children } = props;
-    const inherited = useLink();
-    return /*#__PURE__*/ _jsx(Provider, {
-        value: value ?? inherited,
-        children: children
-    });
-}
-
-//# sourceMappingURL=LinkProvider.js.map

package/dist/link/LinkProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/link/LinkProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n  createContext,\n  useContext,\n  type ForwardRefExoticComponent,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { Link } from \"./Link.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type CustomLinkComponent =\n  | ForwardRefExoticComponent<{ href: string }>\n  | ForwardRefExoticComponent<{ to: string }>\n  | \"a\";\n\nconst context = createContext<CustomLinkComponent>(Link);\nconst { Provider } = context;\ncontext.displayName = \"Link\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function useLink(): CustomLinkComponent {\n  return useContext(context);\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface LinkProviderProps {\n  /**\n   * @defaultValue `useLink() ?? Link`\n   */\n  value?: CustomLinkComponent;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @remarks \\@since 6.0.0\n */\nexport function LinkProvider(props: LinkProviderProps): ReactElement {\n  const { value, children } = props;\n  const inherited = useLink();\n\n  return <Provider value={value ?? inherited}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","Link","context","Provider","displayName","useLink","LinkProvider","props","value","children","inherited"],"mappings":"AAAA;;AACA,SACEA,aAAa,EACbC,UAAU,QAIL,QAAQ;AACf,SAASC,IAAI,QAAQ,YAAY;AAUjC,MAAMC,wBAAUH,cAAmCE;AACnD,MAAM,EAAEE,QAAQ,EAAE,GAAGD;AACrBA,QAAQE,WAAW,GAAG;AAEtB;;CAEC,GACD,OAAO,SAASC;IACd,OAAOL,WAAWE;AACpB;AAaA;;;;CAIC,GACD,OAAO,SAASI,aAAaC,KAAwB;IACnD,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGF;IAC5B,MAAMG,YAAYL;IAElB,qBAAO,KAACF;QAASK,OAAOA,SAASE;kBAAYD;;AAC/C"}

package/dist/tooltip/useOverflowTooltip.js

@@ -1,71 +0,0 @@
-"use client";
-import { useCallback, useState } from "react";
-import { useResizeObserver } from "../useResizeObserver.js";
-import { useTooltip } from "./useTooltip.js";
-/**
- * This hook will ensure that a tooltip will only appear when text has
- * overflown by checking the size with the {@link useResizeObserver}.
- *
- * @example
- * ```tsx
- * import {
- *   cssUtils,
- *   Link,
- *   Tooltip,
- *   useOverflowTooltip,
- *   type LinkProps,
- * } from "@react-md/core";
- * import { type ReactElement } from "react";
- *
- * function NavigationLink(props: LinkProps): ReactElement {
- *   const { children, ...remaining } = props;
- *   const { nodeRef, elementProps, tooltipProps } = useOverflowTooltip(remaining);
- *
- *   return (
- *     <Link {...remaining} {...elementProps} style={{ width: "100%" }}>
- *       <span ref={nodeRef} className={cssUtils({ textOverflow: "ellipsis" })}>
- *         {children}
- *       </span>
- *       <Tooltip {...tooltipProps}>
- *         {children}
- *       </Tooltip>
- *     </Link>
- *   );
- * }
- *
- * function Example(): ReactElement {
- *   return (
- *     <div style={{ width: "10rem", overflow: "auto" }}>
- *       <NavigationLink href="/">Home</NavigationLink>
- *       <NavigationLink href="/some-path">
- *         Super long text that will be truncated with ellipsis and
- *         have a tooltip appear
- *       </NavigationLink>
- *     </div>
- *   );
- * }
- * ```
- *
- * @remarks \@since 6.0.0
- */ export function useOverflowTooltip(options = {}) {
-    const { disabled, elementRef, ...tooltipOptions } = options;
-    const [overflown, setOverflown] = useState(false);
-    const nodeRef = useResizeObserver({
-        ref: elementRef,
-        disableHeight: true,
-        onUpdate: useCallback((entry)=>{
-            const target = entry.target;
-            setOverflown(target.offsetWidth < target.scrollWidth);
-        }, [])
-    });
-    const implementation = useTooltip({
-        ...tooltipOptions,
-        disabled: !overflown || disabled
-    });
-    return {
-        nodeRef,
-        ...implementation
-    };
-}
-
-//# sourceMappingURL=useOverflowTooltip.js.map

package/dist/tooltip/useOverflowTooltip.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/tooltip/useOverflowTooltip.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useState, type Ref, type RefCallback } from \"react\";\nimport { useResizeObserver } from \"../useResizeObserver.js\";\nimport {\n  useTooltip,\n  type TooltipImplementation,\n  type TooltipOptions,\n} from \"./useTooltip.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface OverflowTooltipOptions extends TooltipOptions {\n  elementRef?: Ref<HTMLElement>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface OverflowTooltipImplementation extends TooltipImplementation {\n  nodeRef: RefCallback<HTMLElement>;\n}\n\n/**\n * This hook will ensure that a tooltip will only appear when text has\n * overflown by checking the size with the {@link useResizeObserver}.\n *\n * @example\n * ```tsx\n * import {\n *   cssUtils,\n *   Link,\n *   Tooltip,\n *   useOverflowTooltip,\n *   type LinkProps,\n * } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * function NavigationLink(props: LinkProps): ReactElement {\n *   const { children, ...remaining } = props;\n *   const { nodeRef, elementProps, tooltipProps } = useOverflowTooltip(remaining);\n *\n *   return (\n *     <Link {...remaining} {...elementProps} style={{ width: \"100%\" }}>\n *       <span ref={nodeRef} className={cssUtils({ textOverflow: \"ellipsis\" })}>\n *         {children}\n *       </span>\n *       <Tooltip {...tooltipProps}>\n *         {children}\n *       </Tooltip>\n *     </Link>\n *   );\n * }\n *\n * function Example(): ReactElement {\n *   return (\n *     <div style={{ width: \"10rem\", overflow: \"auto\" }}>\n *       <NavigationLink href=\"/\">Home</NavigationLink>\n *       <NavigationLink href=\"/some-path\">\n *         Super long text that will be truncated with ellipsis and\n *         have a tooltip appear\n *       </NavigationLink>\n *     </div>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useOverflowTooltip(\n  options: OverflowTooltipOptions = {}\n): OverflowTooltipImplementation {\n  const { disabled, elementRef, ...tooltipOptions } = options;\n  const [overflown, setOverflown] = useState(false);\n  const nodeRef = useResizeObserver({\n    ref: elementRef,\n    disableHeight: true,\n    onUpdate: useCallback((entry) => {\n      const target = entry.target as HTMLElement;\n      setOverflown(target.offsetWidth < target.scrollWidth);\n    }, []),\n  });\n\n  const implementation = useTooltip({\n    ...tooltipOptions,\n    disabled: !overflown || disabled,\n  });\n\n  return {\n    nodeRef,\n    ...implementation,\n  };\n}\n"],"names":["useCallback","useState","useResizeObserver","useTooltip","useOverflowTooltip","options","disabled","elementRef","tooltipOptions","overflown","setOverflown","nodeRef","ref","disableHeight","onUpdate","entry","target","offsetWidth","scrollWidth","implementation"],"mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,QAAQ,QAAoC,QAAQ;AAC1E,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SACEC,UAAU,QAGL,kBAAkB;AAgBzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CC,GACD,OAAO,SAASC,mBACdC,UAAkC,CAAC,CAAC;IAEpC,MAAM,EAAEC,QAAQ,EAAEC,UAAU,EAAE,GAAGC,gBAAgB,GAAGH;IACpD,MAAM,CAACI,WAAWC,aAAa,GAAGT,SAAS;IAC3C,MAAMU,UAAUT,kBAAkB;QAChCU,KAAKL;QACLM,eAAe;QACfC,UAAUd,YAAY,CAACe;YACrB,MAAMC,SAASD,MAAMC,MAAM;YAC3BN,aAAaM,OAAOC,WAAW,GAAGD,OAAOE,WAAW;QACtD,GAAG,EAAE;IACP;IAEA,MAAMC,iBAAiBhB,WAAW;QAChC,GAAGK,cAAc;QACjBF,UAAU,CAACG,aAAaH;IAC1B;IAEA,OAAO;QACLK;QACA,GAAGQ,cAAc;IACnB;AACF"}

package/src/divider/VerticalDivider.tsx

@@ -1,50 +0,0 @@
-import { forwardRef, type HTMLAttributes } from "react";
-import { Divider } from "./Divider.js";
-import {
-  useVerticalDividerHeight,
-  type VerticalDividerHookOptions,
-} from "./useVerticalDividerHeight.js";
-
-export interface VerticalDividerProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * @see {@link VerticalDividerHookOptions.maxHeight}
-   * @defaultValue `1`
-   */
-  maxHeight?: VerticalDividerHookOptions<HTMLDivElement>["maxHeight"];
-}
-
-/**
- * **Client Component**
- *
- * This component is used to create a vertical divider based on a parent
- * element's height. This is really only needed when the parent element **has no
- * defined height**.  If there is a defined height, this component is not worth
- * much as the height can be computed in css as normal. This really just fixes
- * the issue that the height would be set to `auto` (which computes to 0 most of
- * the time) when it is not set on a parent element.
- *
- * @example
- * Server Component Implementation
- * ```tsx
- * import type { ReactElement } from "react";
- * import { Divider } from "@react-md/core";
- *
- * function Example(): ReactElement {
- *   // or use a custom className
- *   return <Divider vertical style={{ height: "80%" }} />;
- * }
- * ```
- */
-export const VerticalDivider = forwardRef<HTMLDivElement, VerticalDividerProps>(
-  function VerticalDivider(props, ref) {
-    const { style, maxHeight = 1, ...remaining } = props;
-
-    const heightProps = useVerticalDividerHeight({
-      ref,
-      style,
-      maxHeight,
-    });
-
-    return <Divider {...remaining} {...heightProps} vertical />;
-  }
-);

package/src/divider/__tests__/VerticalDivider.tsx

@@ -1,35 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { render } from "../../test-utils/index.js";
-
-import { VerticalDivider } from "../VerticalDivider.js";
-
-describe("VerticalDivider", () => {
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLDivElement>();
-
-    const { getByRole, rerender } = render(<VerticalDivider ref={ref} />);
-    const divider = getByRole("separator");
-    expect(ref.current).toBeInstanceOf(HTMLDivElement);
-    expect(ref.current).toBe(divider);
-    expect(divider).toMatchSnapshot();
-
-    rerender(
-      <VerticalDivider
-        ref={ref}
-        style={{ color: "blue" }}
-        className="custom-class-name"
-      />
-    );
-    expect(divider).toMatchSnapshot();
-
-    rerender(<VerticalDivider ref={ref} maxHeight={0.8} />);
-    expect(divider).toMatchSnapshot();
-
-    rerender(<VerticalDivider ref={ref} maxHeight={300} />);
-    expect(divider).toMatchSnapshot();
-
-    rerender(<VerticalDivider ref={ref} maxHeight={-10} />);
-    expect(divider).toMatchSnapshot();
-  });
-});

package/src/divider/__tests__/__snapshots__/VerticalDivider.tsx.snap

@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VerticalDivider should apply the correct styling, HTML attributes, and allow a ref 1`] = `
-<div
-  class="rmd-divider rmd-divider--vertical"
-  role="separator"
-  style="height: 0px;"
-/>
-`;
-
-exports[`VerticalDivider should apply the correct styling, HTML attributes, and allow a ref 2`] = `
-<div
-  class="rmd-divider rmd-divider--vertical custom-class-name"
-  role="separator"
-  style="height: 0px; color: blue;"
-/>
-`;
-
-exports[`VerticalDivider should apply the correct styling, HTML attributes, and allow a ref 3`] = `
-<div
-  class="rmd-divider rmd-divider--vertical"
-  role="separator"
-  style="height: 0px;"
-/>
-`;
-
-exports[`VerticalDivider should apply the correct styling, HTML attributes, and allow a ref 4`] = `
-<div
-  class="rmd-divider rmd-divider--vertical"
-  role="separator"
-  style="height: 0px;"
-/>
-`;
-
-exports[`VerticalDivider should apply the correct styling, HTML attributes, and allow a ref 5`] = `
-<div
-  class="rmd-divider rmd-divider--vertical"
-  role="separator"
-  style=""
-/>
-`;

package/src/divider/useVerticalDividerHeight.ts

@@ -1,72 +0,0 @@
-"use client";
-import type { CSSProperties, Ref, RefCallback } from "react";
-import { useCallback, useState } from "react";
-import { applyRef } from "../utils/applyRef.js";
-
-/** @remarks \@since 5.0.0 */
-export interface VerticalDividerHookOptions<E extends HTMLElement> {
-  /**
-   * An optional ref to merge with the returned ref.
-   */
-  ref?: Ref<E>;
-
-  /**
-   * An optional style object to merge with the divider's height style.
-   */
-  style?: CSSProperties;
-
-  /**
-   * The max height for the vertical divider. When this is `<= 0`, the hook will
-   * be disabled.
-   *
-   * When the value is between 0 and 1, it will be used as a multiplier with the
-   * parent element's height. When the value is greater than 1, it will be used
-   * in `Math.min(parentElementHeight, maxHeight)`.
-   */
-  maxHeight: number;
-}
-
-/** @remarks \@since 5.0.0 */
-export interface VerticalDividerHeight<E extends HTMLElement> {
-  ref: RefCallback<E>;
-  style: CSSProperties | undefined;
-}
-
-/**
- * This is a small hook that is used to automatically create a vertical divider
- * based on the computed height of its parent element.
- *
- * @internal
- * @remarks \@since 5.0.0 The hook accepts an object instead of using multiple
- * params and uses a generic for the HTMLElement type.
- * @remarks \@since 6.0.0 Updated to be internal only since it doesn't make much
- * sense to be a public API.
- */
-export function useVerticalDividerHeight<E extends HTMLElement>(
-  options: VerticalDividerHookOptions<E>
-): VerticalDividerHeight<E> {
-  const { ref, style, maxHeight } = options;
-
-  const [height, setHeight] = useState<number | undefined>(undefined);
-  const refCallback = useCallback(
-    (instance: E | null) => {
-      applyRef(instance, ref);
-      if (!instance || !instance.parentElement || maxHeight === 0) {
-        return;
-      }
-
-      const height = instance.parentElement.offsetHeight;
-      if (maxHeight <= 1) {
-        setHeight(height * maxHeight);
-      } else {
-        setHeight(Math.min(height, maxHeight));
-      }
-    },
-    [maxHeight, ref]
-  );
-
-  return {
-    ref: refCallback,
-    style: maxHeight <= 0 ? style : { ...style, height },
-  };
-}

package/src/icon/MaterialIconsProvider.ts

@@ -1,23 +0,0 @@
-"use client";
-import { createContext, useContext } from "react";
-import type { MaterialIconFamily } from "./material.js";
-
-const context = createContext<MaterialIconFamily>("filled");
-context.displayName = "MaterialIcons";
-
-/**
- * **Client Component**
- *
- * @remarks \@since 6.0.0
- */
-export const { Provider: MaterialIconsProvider } = context;
-
-/**
- * @remarks \@since 6.0.0
- */
-export function useMaterialIconsFamily(
-  override?: MaterialIconFamily
-): MaterialIconFamily {
-  const value = useContext(context);
-  return override || value;
-}

package/src/link/LinkProvider.tsx

@@ -1,51 +0,0 @@
-"use client";
-import {
-  createContext,
-  useContext,
-  type ForwardRefExoticComponent,
-  type ReactElement,
-  type ReactNode,
-} from "react";
-import { Link } from "./Link.js";
-
-/**
- * @remarks \@since 6.0.0
- */
-export type CustomLinkComponent =
-  | ForwardRefExoticComponent<{ href: string }>
-  | ForwardRefExoticComponent<{ to: string }>
-  | "a";
-
-const context = createContext<CustomLinkComponent>(Link);
-const { Provider } = context;
-context.displayName = "Link";
-
-/**
- * @remarks \@since 6.0.0
- */
-export function useLink(): CustomLinkComponent {
-  return useContext(context);
-}
-
-/**
- * @remarks \@since 6.0.0
- */
-export interface LinkProviderProps {
-  /**
-   * @defaultValue `useLink() ?? Link`
-   */
-  value?: CustomLinkComponent;
-  children: ReactNode;
-}
-
-/**
- * **Client Component**
- *
- * @remarks \@since 6.0.0
- */
-export function LinkProvider(props: LinkProviderProps): ReactElement {
-  const { value, children } = props;
-  const inherited = useLink();
-
-  return <Provider value={value ?? inherited}>{children}</Provider>;
-}