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

package/src/form/useListboxProvider.ts

@@ -1,45 +0,0 @@
-"use client";
-import { createContext, useContext, type RefObject } from "react";
-import { type ChangeableHTMLElement } from "./utils.js";
-
-/**
- * @internal
- * @since 6.0.0
- */
-export interface ListboxContext {
-  /**
-   * This ref is used to trigger the change event when an option is clicked.
-   */
-  inputRef: RefObject<ChangeableHTMLElement>;
-
-  /**
-   * This is used within the `Option` component to determine if it is currently
-   * selected or not.
-   */
-  currentValue: string | number | null;
-
-  selectedIconAfter: boolean;
-  disableSelectedIcon: boolean;
-}
-
-const context = createContext<ListboxContext | null>(null);
-
-/**
- * **Client Component**
- *
- * @internal
- * @since 6.0.0
- */
-export const { Provider: ListboxProvider } = context;
-
-/**
- * @internal
- * @since 6.0.0
- */
-export function useListboxContext(): ListboxContext {
-  const value = useContext(context);
-  if (!value) {
-    throw new Error("The `ListboxProvider` must be a parent component");
-  }
-  return value;
-}

package/src/navigation/getHrefFromParents.ts

@@ -1,15 +0,0 @@
-import { type NavigationItem } from "./types.js";
-
-/**
- * @since 6.0.0
- */
-export function getHrefFromParents(parents: readonly NavigationItem[]): string {
-  return parents.reduce<string>((result, parent) => {
-    if ("href" in parent && parent.href) {
-      const { href } = parent;
-      return result + href;
-    }
-
-    return result;
-  }, "");
-}

package/src/responsive-item/ResponsiveItemContainer.tsx

@@ -1,174 +0,0 @@
-import { cnb } from "cnbuilder";
-import { forwardRef, type HTMLAttributes } from "react";
-import { bem } from "../utils/bem.js";
-
-const styles = bem("rmd-responsive-item-container");
-
-/** @since 6.0.0 */
-export interface ResponsiveItemContainerClassNameOptions {
-  className?: string;
-
-  /**
-   * Set this to `true` if the container should gain the following styles:
-   *
-   * ```scss
-   * display: block;
-   * width: 100%;
-   * ```
-   *
-   * @defaultValue `false`
-   */
-  fullWidth?: boolean;
-
-  /**
-   * Set this to a custom aspect ratio to use.
-   *
-   * @example Valid Aspect Ratios
-   * ```tsx
-   * aspectRatio="16-9"
-   * aspectRatio="9-16"
-   * aspectRatio="3-4"
-   * aspectRatio="4-3"
-   * aspectRatio="1-1"
-   * ```
-   *
-   * These values are based on the `core.$responsive-item-aspect-ratios` map.
-   *
-   * @defaultValue `""`
-   */
-  aspectRatio?: `${number}-${number}`;
-
-  /**
-   * Set this to `"manual"` if you want to manually specify which elements are
-   * responsive items using custom class names. You probably don't really want
-   * to use this.
-   *
-   * Set this to `"auto"` to automatically update all visual media that appear
-   * as a child in this component to a responsive item.
-   *
-   * Set this to `"container"` to automatically update all visual media that
-   * appear as a child in this component to be a responsive item that scales to
-   * the container's dimensions.
-   *
-   * Note: The `"auto"` and `"container"` values use the
-   * `core.$responsive-item-selectors` value for their behavior.
-   *
-   * @defaultValue `"auto"`
-   */
-  responsive?: "auto" | "manual" | "container";
-}
-
-/** @since 6.0.0 */
-export function responsiveItemContainer(
-  options: ResponsiveItemContainerClassNameOptions = {}
-): string {
-  const {
-    className,
-    fullWidth = false,
-    aspectRatio = "",
-    responsive = "auto",
-  } = options;
-
-  return cnb(
-    styles({
-      auto: responsive !== "manual",
-      "auto-scale": responsive === "container",
-      "aspect-ratio": aspectRatio,
-      [aspectRatio]: aspectRatio,
-      "full-width": fullWidth,
-    }),
-    className
-  );
-}
-
-/**
- * @since 6.0.0 Renamed from `MediaContainerProps` to
- * `ResponsiveItemContainerProps`
- * @since 6.0.0 The `height` and `width` props were removed in favor of the
- * `aspectRatio` props since the latest typescript string interpolation supports
- * enforcing the correct format.
- * @since 6.0.0 The `auto` prop was removed in favor of the new
- * {@link ResponsiveItemContainerProps.responsive} prop.
- */
-export interface ResponsiveItemContainerProps
-  extends HTMLAttributes<HTMLSpanElement>,
-    ResponsiveItemContainerClassNameOptions {}
-
-/**
- * @example Image Example
- * ```tsx
- * import { ResponsiveItemContainer } from "@react-md/core";
- * import type { ReactElement } from "react";
- *
- * function Example(): ReactElement {
- *   return (
- *     <ResponsiveItemContainer>
- *       <img alt="" src="/some-image.png" />
- *     </ResponsiveItemContainer>
- *   );
- * }
- * ```
- *
- * @example Iframe Example
- * ```tsx
- * import { ResponsiveItemContainer } from "@react-md/core";
- * import type { ReactElement } from "react";
- *
- * function Example(): ReactElement {
- *   return (
- *     <ResponsiveItemContainer>
- *       <iframe
- *         src="https://youtube.com/some-video-url"
- *         title="Some YouTube video"
- *         allowFullScreen
- *       />
- *     </ResponsiveItemContainer>
- *   );
- * }
- * ```
- *
- * @example Forced Aspect Ratio
- * ```tsx
- * import { ResponsiveItemContainer } from "@react-md/core";
- * import type { ReactElement } from "react";
- *
- * function Example(): ReactElement {
- *   return (
- *     <ResponsiveItemContainer aspectRatio="16-9">
- *       <img alt="" src="/some-image.png" />
- *     </ResponsiveItemContainer>
- *   );
- * }
- * ```
- *
- * @since 6.0.0 Renamed from `MediaContainer` to
- * `ResponsiveItemContainer` and renders a `<span>` instead of a `<div>`.
- */
-export const ResponsiveItemContainer = forwardRef<
-  HTMLSpanElement,
-  ResponsiveItemContainerProps
->(function ResponsiveItemContainer(props, ref) {
-  const {
-    className,
-    fullWidth = false,
-    aspectRatio,
-    responsive = "auto",
-    children,
-    ...remaining
-  } = props;
-
-  return (
-    <span
-      {...remaining}
-      ref={ref}
-      className={responsiveItemContainer({
-        className,
-        fullWidth,
-        aspectRatio,
-        responsive,
-      })}
-    >
-      {children}
-    </span>
-  );
-});

package/src/responsive-item/styles.ts

@@ -1,58 +0,0 @@
-import { cnb } from "cnbuilder";
-import { bem } from "../utils/bem.js";
-
-const styles = bem("rmd-responsive-item");
-
-/** @since 6.0.0 */
-export interface ResponsiveItemClassNameOptions {
-  className?: string;
-
-  /**
-   * Set this to `true` to apply the following styles:
-   * ```scss
-   * max-height: 100%;
-   * max-width: 100%;
-   * object-fit: contain;
-   * ```
-   *
-   * This is useful for displaying images in a full page dialog so that scroll
-   * bars do not appear while maintaining the correct aspect ratio for the item.
-   *
-   * @defaultValue `false`
-   */
-  scaleToContainer?: boolean;
-
-  /**
-   * Set this to `true` to force a specific aspect ratio.
-   *
-   * Note: This will only work if the parent element has applied the correct
-   * {@link ResponsiveItemContainerStyles} as well.
-   *
-   * @defaultValue `false`
-   */
-  forcedAspectRatio?: boolean;
-}
-
-/**
- * Applies the visual media responsive styles manually if you cannot use the
- * `ResponsiveItemContainer` component.
- *
- * @since 6.0.0
- */
-export function responsiveItem(
-  options: ResponsiveItemClassNameOptions = {}
-): string {
-  const {
-    className,
-    scaleToContainer = false,
-    forcedAspectRatio = false,
-  } = options;
-
-  return cnb(
-    styles({
-      scale: scaleToContainer,
-      "aspect-ratio": forcedAspectRatio,
-    }),
-    className
-  );
-}