@react-md/core 6.3.4 → 6.4.0

package/src/transition/types.ts

@@ -172,8 +172,8 @@ export interface TransitionCallbacks {
  */
 export interface PreconfiguredTransitionInDefaultedOptions<
   E extends HTMLElement,
-> extends TransitionActions,
-    TransitionCallbacks {
+>
+  extends TransitionActions, TransitionCallbacks {
   /**
    * An optional ref that will be merged with the
    * {@link TransitionHookReturnValue.ref}
@@ -205,8 +205,9 @@ export interface PreconfiguredTransitionInDefaultedOptions<
  * transition.
  * @since 4.0.0
  */
-export interface PreconfiguredTransitionOptions<E extends HTMLElement>
-  extends PreconfiguredTransitionInDefaultedOptions<E> {
+export interface PreconfiguredTransitionOptions<
+  E extends HTMLElement,
+> extends PreconfiguredTransitionInDefaultedOptions<E> {
   /** {@inheritDoc PreconfiguredTransitionInDefaultedOptions.transitionIn} */
   transitionIn: boolean;
 }
@@ -216,8 +217,9 @@ export interface PreconfiguredTransitionOptions<E extends HTMLElement>
  * transition.
  * @since 4.0.0
  */
-export interface TransitionOptions<E extends HTMLElement>
-  extends PreconfiguredTransitionOptions<E> {
+export interface TransitionOptions<
+  E extends HTMLElement,
+> extends PreconfiguredTransitionOptions<E> {
   /** {@inheritDoc TransitionTimeout} */
   timeout: TransitionTimeout;
 }
@@ -383,8 +385,9 @@ export interface PreconfiguredCSSTransitionInDefaultedOptions<
  * transition.
  * @since 4.0.0
  */
-export interface PreconfiguredCSSTransitionOptions<E extends HTMLElement>
-  extends PreconfiguredCSSTransitionInDefaultedOptions<E> {
+export interface PreconfiguredCSSTransitionOptions<
+  E extends HTMLElement,
+> extends PreconfiguredCSSTransitionInDefaultedOptions<E> {
   /** {@inheritDoc PreconfiguredTransitionInDefaultedOptions.transitionIn} */
   transitionIn: boolean;
 }
@@ -412,8 +415,7 @@ export interface SSRTransitionOptions {
  * @since 4.0.0
  */
 export interface TransitionHookOptions<E extends HTMLElement>
-  extends TransitionOptions<E>,
-    SSRTransitionOptions {
+  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
@@ -453,8 +455,7 @@ export interface TransitionState {
  * @since 4.0.0
  */
 export interface TransitionHookReturnValue<E extends HTMLElement>
-  extends TransitionState,
-    Required<SSRTransitionOptions> {
+  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.
@@ -506,8 +507,7 @@ export interface TransitionHookReturnValue<E extends HTMLElement>
  * @since 4.0.0
  */
 export interface CSSTransitionHookOptions<E extends HTMLElement>
-  extends PreconfiguredCSSTransitionOptions<E>,
-    SSRTransitionOptions {
+  extends PreconfiguredCSSTransitionOptions<E>, SSRTransitionOptions {
   /** {@inheritDoc TransitionTimeout} */
   timeout: TransitionTimeout;
   /** {@inheritDoc CSSTransitionClassNames} */
@@ -535,8 +535,7 @@ export interface CSSTransitionElementProps<E extends HTMLElement> {
  * @since 4.0.0
  */
 export interface CSSTransitionHookReturnValue<E extends HTMLElement>
-  extends TransitionHookReturnValue<E>,
-    CSSTransitionElementProps<E> {
+  extends TransitionHookReturnValue<E>, CSSTransitionElementProps<E> {
   /**
    * This can be used so that you don't need to destructure multiple props from
    * the hook return value to pass to the transitioning component.

package/src/transition/useCollapseTransition.ts

@@ -93,8 +93,9 @@ export interface CollapseStyle extends CollapseConfigurationStyle {
  * transition.
  * @since 4.0.0
  */
-export interface CollapseElementProps<E extends HTMLElement>
-  extends CSSTransitionElementProps<E> {
+export interface CollapseElementProps<
+  E extends HTMLElement,
+> extends CSSTransitionElementProps<E> {
   /**
    * A merged styled object required for the collapse transition to work.
    *
@@ -110,7 +111,8 @@ export interface CollapseElementProps<E extends HTMLElement>
  * @since 4.0.0
  */
 export interface CollapseTransitionHookOptions<E extends HTMLElement>
-  extends Omit<PreconfiguredCSSTransitionOptions<E>, "exitedHidden">,
+  extends
+    Omit<PreconfiguredCSSTransitionOptions<E>, "exitedHidden">,
     CollapseConfigurationStyle {
   /**
    * An optional style to merge with the required collapse transition styles.
@@ -140,8 +142,7 @@ export interface CollapseTransitionHookOptions<E extends HTMLElement>
  * @since 4.0.0
  */
 export interface CollapseTransitionHookReturnValue<E extends HTMLElement>
-  extends CSSTransitionHookReturnValue<E>,
-    CollapseElementProps<E> {
+  extends CSSTransitionHookReturnValue<E>, CollapseElementProps<E> {
   /**
    * This is just a convenience object so that you don't need to destructure as
    * many variables to pass to an element.

package/src/transition/useCrossFadeTransition.ts

@@ -40,8 +40,9 @@ export const DEFAULT_CROSS_FADE_CLASSNAMES = {
  * transition.
  * @since 4.0.0
  */
-export interface CrossFadeTransitionHookOptions<E extends HTMLElement>
-  extends PreconfiguredCSSTransitionInDefaultedOptions<E> {
+export interface CrossFadeTransitionHookOptions<
+  E extends HTMLElement,
+> extends PreconfiguredCSSTransitionInDefaultedOptions<E> {
   /**
    * @see {@link TransitionTimeout}
    * @see {@link DEFAULT_CROSS_FADE_TIMEOUT}

package/src/transition/useMaxWidthTransition.ts

@@ -24,8 +24,7 @@ export interface BaseMaxWidthTransitionOptions {
  * @since 6.0.0
  * @since 6.3.1 Extends BaseMaxWidthTransitionOptions
  */
-export interface MaxWidthTransitionOptions
-  extends BaseMaxWidthTransitionOptions {
+export interface MaxWidthTransitionOptions extends BaseMaxWidthTransitionOptions {
   element: ReactNode;
   transitionIn: boolean;
 

package/src/transition/useScaleTransition.ts

@@ -66,8 +66,9 @@ export const DEFAULT_SCALE_Y_CLASSNAMES = {
  * transition.
  * @since 4.0.0
  */
-export interface ScaleTransitionHookOptions<E extends HTMLElement>
-  extends PreconfiguredCSSTransitionOptions<E> {
+export interface ScaleTransitionHookOptions<
+  E extends HTMLElement,
+> extends PreconfiguredCSSTransitionOptions<E> {
   /**
    * Boolean if the scale transition should be vertical instead of horizontal.
    * This really only changes the default value for the {@link classNames}.

package/src/transition/useSkeletonPlaceholder.ts

@@ -11,8 +11,7 @@ import {
 } from "./skeletonPlaceholderUtils.js";
 
 /** @since 6.0.0 */
-export interface SkeletonPlaceholderOptions
-  extends SkeletonPlaceholderRandomOptions {
+export interface SkeletonPlaceholderOptions extends SkeletonPlaceholderRandomOptions {
   style?: CSSProperties;
   className?: string;
 

package/src/tree/Tree.tsx

@@ -51,7 +51,8 @@ export type TreeHTMLAttributes = Omit<
  * augmentation.
  */
 export interface TreeProps<T extends TreeItemNode>
-  extends TreeHTMLAttributes,
+  extends
+    TreeHTMLAttributes,
     TreeClassNameOptions,
     TreeExpansion,
     TreeSelection {

package/src/tree/TreeItem.tsx

@@ -29,7 +29,8 @@ import { type DefaultTreeItemNode } from "./types.js";
  * `contentComponent`, and `readOnly` props were removed.
  */
 export interface TreeItemProps
-  extends Omit<DefaultTreeItemNode, "parentId">,
+  extends
+    Omit<DefaultTreeItemNode, "parentId">,
     HTMLAttributes<HTMLLIElement>,
     ComponentWithRippleProps {
   /**

package/src/tree/TreeProvider.tsx

@@ -78,8 +78,7 @@ export interface TreeItemMetadataLookup {
  * @since 6.0.0
  */
 export interface TreeContext<T extends TreeItemNode = DefaultTreeItemNode>
-  extends TreeExpansion,
-    TreeSelection {
+  extends TreeExpansion, TreeSelection {
   data: TreeData<T>;
   rootId: string | null;
   disableTransition: boolean;
@@ -124,8 +123,9 @@ export function useTreeContext<
  * @internal
  * @since 6.0.0
  */
-export interface TreeProviderProps<T extends TreeItemNode = DefaultTreeItemNode>
-  extends TreeContext<T> {
+export interface TreeProviderProps<
+  T extends TreeItemNode = DefaultTreeItemNode,
+> extends TreeContext<T> {
   children: ReactNode;
 }
 

package/src/tree/styles.ts

@@ -67,8 +67,7 @@ export function treeItem(options: TreeItemClassNameOptions = {}): string {
 }
 
 /** @since 6.0.0 */
-export interface TreeItemContentClassNameOptions
-  extends InternalListItemClassNameOptions {
+export interface TreeItemContentClassNameOptions extends InternalListItemClassNameOptions {
   /**
    * Set this
    *

package/src/tree/types.ts

@@ -19,8 +19,7 @@ export interface TreeItemNode {
  * @since 6.0.0
  */
 export interface DefaultTreeItemNode
-  extends TreeItemNode,
-    ListItemChildrenProps {
+  extends TreeItemNode, ListItemChildrenProps {
   /**
    * If this is defined, the `TreeItem` will render the content within a `Link`
    * instead of a `<span>`.

package/src/tree/useTreeMovement.ts

@@ -73,8 +73,7 @@ interface TreeMovementOptions<T extends TreeItemNode> extends TreeExpansion {
  * @since 6.0.0
  * @internal
  */
-interface TreeMovement
-  extends KeyboardMovementProviderImplementation<HTMLUListElement> {
+interface TreeMovement extends KeyboardMovementProviderImplementation<HTMLUListElement> {
   /**
    * This will be mutated by the `TreeItem` component and used to handle
    * keyboard movement.

package/src/typography/HighlightTextMark.tsx

@@ -7,8 +7,7 @@ import { Mark, type MarkProps } from "./Mark.js";
  * @since 6.0.0
  */
 export interface HighlightTextMarkProps
-  extends HighlightTextComponentProps,
-    Omit<MarkProps, "children"> {}
+  extends HighlightTextComponentProps, Omit<MarkProps, "children"> {}
 
 /**
  * This is the default implementation for the `HighlightText` component that

package/src/typography/Mark.tsx

@@ -8,8 +8,7 @@ import { type MarkClassNameOptions, mark } from "./markStyles.js";
  * augmentation.
  */
 export interface MarkProps
-  extends HTMLAttributes<HTMLElement>,
-    MarkClassNameOptions {
+  extends HTMLAttributes<HTMLElement>, MarkClassNameOptions {
   children: ReactNode;
 }
 

package/src/typography/TextContainer.tsx

@@ -12,8 +12,7 @@ import {
  * behavior. Use the `textContainer` class name utility instead.
  */
 export interface TextContainerProps
-  extends HTMLAttributes<HTMLDivElement>,
-    TextContainerClassNameOptions {}
+  extends HTMLAttributes<HTMLDivElement>, TextContainerClassNameOptions {}
 
 /**
  * This component should be used to render text based content with an

package/src/typography/Typography.tsx

@@ -72,8 +72,7 @@ function getComponent(
  * `typography` class name utility instead.
  */
 export interface TypographyProps
-  extends HTMLAttributes<TypographyHTMLElement>,
-    TypographyClassNameOptions {
+  extends HTMLAttributes<TypographyHTMLElement>, TypographyClassNameOptions {
   /**
    * The component to render as when the children are not a render function. If
    * this prop is omitted, the component will be determined by the `type` prop

package/src/useElementSize.ts

@@ -11,8 +11,10 @@ import {
 /**
  * @since 6.0.0
  */
-export interface ElementSizeOptions<E extends HTMLElement>
-  extends Omit<ResizeObserverHookOptions<E>, "onUpdate"> {
+export interface ElementSizeOptions<E extends HTMLElement> extends Omit<
+  ResizeObserverHookOptions<E>,
+  "onUpdate"
+> {
   /** @defaultValue `{ height: 0, width: 0 }` */
   defaultValue?: UseStateInitializer<ElementSize>;
 }
@@ -20,8 +22,9 @@ export interface ElementSizeOptions<E extends HTMLElement>
 /**
  * @since 6.0.0
  */
-export interface ElementSizeImplementation<E extends HTMLElement>
-  extends ElementSize {
+export interface ElementSizeImplementation<
+  E extends HTMLElement,
+> extends ElementSize {
   elementRef: RefCallback<E>;
 
   /**

package/src/useIntersectionObserver.ts

@@ -130,8 +130,9 @@ export interface BaseIntersectionObserverHookOptions {
  * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#intersection_observer_options}
  * @since 6.0.0
  */
-export interface IntersectionObserverHookOptions<E extends HTMLElement>
-  extends BaseIntersectionObserverHookOptions {
+export interface IntersectionObserverHookOptions<
+  E extends HTMLElement,
+> extends BaseIntersectionObserverHookOptions {
   /**
    * An optional ref to merge with the ref returned by this hook.
    */

package/src/useMutationObserver.ts

@@ -5,8 +5,9 @@ import { useEnsuredRef } from "./useEnsuredRef.js";
 /**
  * @since 6.0.0
  */
-export interface MutationObserverHookOptions<E extends HTMLElement>
-  extends MutationObserverInit {
+export interface MutationObserverHookOptions<
+  E extends HTMLElement,
+> extends MutationObserverInit {
   ref?: Ref<E>;
 
   /**

package/src/useWindowSize.ts

@@ -12,8 +12,10 @@ import {
 /**
  * @since 6.0.0
  */
-export interface WindowSizeOptions
-  extends Omit<ResizeListenerOptions, "disabled" | "onUpdate"> {
+export interface WindowSizeOptions extends Omit<
+  ResizeListenerOptions,
+  "disabled" | "onUpdate"
+> {
   /**
    * The default value to use in SSR environments for the window's height.
    *

package/src/utils/getNumberOfDigits.ts

@@ -0,0 +1,18 @@
+/**
+ * @since 6.4.0
+ * @see {@link https://stackoverflow.com/a/28203456}
+ */
+export function getNumberOfDigits(value: number): number;
+export function getNumberOfDigits(value: undefined): undefined;
+export function getNumberOfDigits(
+  value: number | undefined
+): number | undefined;
+export function getNumberOfDigits(
+  value: number | undefined
+): number | undefined {
+  if (typeof value !== "number") {
+    return;
+  }
+
+  return (Math.log10((value ^ (value >> 31)) - (value >> 31)) | 0) + 1;
+}

package/src/utils/nearest.ts

@@ -1,4 +1,5 @@
 import { type MinMaxRange } from "../types.js";
+import { getNumberOfDigits } from "./getNumberOfDigits.js";
 
 /**
  * @internal
@@ -35,7 +36,7 @@ export function nearest(options: NearestOptions): number {
   const step = range / steps;
   const decimals = Number.isInteger(step)
     ? range % steps
-    : `${step}`.split(".")[1].length;
+    : getNumberOfDigits(parseInt(`${step}`.split(".")[1]));
 
   return Math.min(
     max,

package/src/utils/useDevEffect.ts

@@ -0,0 +1,9 @@
+import { useEffect } from "react";
+
+/**
+ * This will be a no-op when `process.env.NODE_ENV === "production"`.
+ * Otherwise, it will be a normal `useEffect` call
+ * @since 6.4.0
+ */
+export const useDevEffect =
+  process.env.NODE_ENV === "production" ? () => {} : useEffect;

package/src/window-splitter/WindowSplitter.tsx

@@ -15,7 +15,8 @@ import { type useWindowSplitter } from "./useWindowSplitter.js";
  * module augmentation.
  */
 export interface BaseWindowSplitterProps
-  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children">,
+  extends
+    Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children">,
     BaseWindowSplitterClassNameOptions {
   /**
    * This will be provided by the {@link useWindowSplitter} hook.
@@ -91,7 +92,8 @@ export const WindowSplitter = forwardRef<
     className,
     dragging,
     reversed,
-    disableFixed = false,
+    disableFixed,
+    inactiveBackground,
     ...remaining
   } = props;
   const vertical = props["aria-orientation"] === "vertical";
@@ -108,6 +110,7 @@ export const WindowSplitter = forwardRef<
         dragging,
         vertical,
         disableFixed,
+        inactiveBackground,
       })}
     />
   );

package/src/window-splitter/styles.ts

@@ -13,6 +13,7 @@ declare module "react" {
     "--rmd-window-splitter-z"?: string | number;
     "--rmd-window-splitter-position"?: string | number;
     "--rmd-window-splitter-backgrond-color"?: string;
+    "--rmd-window-splitter-inactive-backgrond-color"?: string;
     "--rmd-window-splitter-opacity"?: string | number;
   }
 }
@@ -30,14 +31,22 @@ export interface BaseWindowSplitterClassNameOptions {
    * @defaultValue `false`
    */
   disableFixed?: boolean;
+
+  /**
+   * Set to `true` to enable a background-color to the `WindowSplitter` even
+   * while not being interacted with by the user.
+   *
+   * @since 6.4.0
+   * @defaultValue `false`
+   */
+  inactiveBackground?: boolean;
 }
 
 /**
  * @since 6.0.0
  * @since 6.3.1 Extends BaseWindowSplitterClassNameOptions
  */
-export interface WindowSplitterClassNameOptions
-  extends BaseWindowSplitterClassNameOptions {
+export interface WindowSplitterClassNameOptions extends BaseWindowSplitterClassNameOptions {
   dragging?: boolean;
   reversed?: boolean;
   vertical?: boolean;
@@ -54,6 +63,7 @@ export function windowSplitter(
     dragging,
     reversed,
     disableFixed,
+    inactiveBackground,
     className,
   } = options;
 
@@ -65,6 +75,7 @@ export function windowSplitter(
       vr: vertical && reversed,
       a: disableFixed,
       dragging,
+      "no-inactive-bg": !inactiveBackground,
     }),
     className
   );

package/src/window-splitter/useWindowSplitter.ts

@@ -44,7 +44,9 @@ export type WindowSplitterOptions<E extends HTMLElement = HTMLButtonElement> =
  */
 export interface WindowSplitterWidgetProps<
   E extends HTMLElement = HTMLButtonElement,
-> extends Required<DraggableMouseEventHandlers<E>>,
+>
+  extends
+    Required<DraggableMouseEventHandlers<E>>,
     Required<DraggableKeyboardEventHandlers<E>> {
   "aria-orientation": "vertical" | undefined;
   "aria-valuenow": number;