@react-md/core 6.0.2 → 6.2.0

package/dist/tooltip/_tooltip.scss

@@ -4,6 +4,8 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../border-radius";
+@use "../spacing";
 @use "../theme/a11y";
 @use "../theme/colors";
 @use "../transition/transition";
@@ -69,27 +71,27 @@ $dense-typography: (
 
 /// The default `Tooltip` border radius.
 /// @type Number
-$border-radius: 0.25rem !default;
+$border-radius: border-radius.get-var(xs) !default;
 
 /// The default `Tooltip` z-index.
 /// @type Number
 $z-index: utils.$temporary-element-z-index + 20 !default;
 
-/// The default `max-width` for a `Tooltip`>
+/// The default `max-width` for a `Tooltip`.
 /// @type Number
 $max-width: 15rem !default;
 
-/// The default `min-height` for a `Tooltip`>
+/// The default `min-height` for a `Tooltip`.
 /// @type Number
 $min-height: 2rem !default;
 
-/// The default horizontal padding for a `Tooltip`>
+/// The default horizontal padding for a `Tooltip`.
 /// @type Number
-$horizontal-padding: 1rem !default;
+$horizontal-padding: spacing.get-var(md) !default;
 
-/// The default vertical padding for a `Tooltip`>
+/// The default vertical padding for a `Tooltip`
 /// @type Number
-$vertical-padding: 0.5625rem !default;
+$vertical-padding: calc(spacing.get-var(sm) * 1.25) !default;
 
 /// The default spacing between a tooltipped element and the `Tooltip`.
 /// @type Number
@@ -105,11 +107,11 @@ $dense-min-height: 1.375rem !default;
 
 /// The default horizontal padding for a dense `Tooltip`.
 /// @type Number
-$dense-horizontal-padding: 0.5rem !default;
+$dense-horizontal-padding: spacing.get-var(sm) !default;
 
 /// The default vertical padding for a dense `Tooltip`.
 /// @type Number
-$dense-vertical-padding: 0.375rem !default;
+$dense-vertical-padding: calc(spacing.get-var(xs) * 1.25) !default;
 
 /// The default `Tooltip` enter transition duration.
 /// @type Number
@@ -127,9 +129,9 @@ $leave-duration: transition.$linear-duration !default;
 /// @type Number
 $leave-timing-function: transition.$acceleration-timing-function !default;
 
-/// The default `Tooltip` /nter/leave animation distance.
+/// The default `Tooltip` enter/leave animation distance.
 /// @type Number
-$transition-distance: 0.5rem !default;
+$transition-distance: spacing.get-var(sm) !default;
 
 /// The available configurable css variables and mostly used internally for the
 /// `get-var`, `set-var`, and `use-var` utils.
@@ -176,6 +178,22 @@ $variables: (
 /// @param {any} fallback [null] - An optional fallback value if the variable
 /// has not been set
 @mixin use-var($property, $name: $property, $fallback: null) {
+  @if not $fallback {
+    @if name == border-radius {
+      $fallbacK: $border-radius;
+    } @else if name == horizontal-padding {
+      $fallback: $horizontal-padding;
+    } @else if name == vertical-padding {
+      $fallback: $vertical-padding;
+    }
+  } @else if name == dense-horizontal-padding {
+    $fallback: $dense-horizontal-padding;
+  } @else if name == dense-vertical-padding {
+    $fallback: $dense-vertical-padding;
+  } @else if name == transition-distance {
+    $fallback: $transition-distance;
+  }
+
   #{$property}: get-var($name, $fallback);
 }
 
@@ -186,17 +204,11 @@ $variables: (
 
     @include set-var(background-color, $background-color);
     @include set-var(color, $color);
-    @include set-var(border-radius, $border-radius);
-    @include set-var(horizontal-padding, $horizontal-padding);
-    @include set-var(vertical-padding, $vertical-padding);
     @include set-var(max-width, $max-width);
     @include set-var(min-height, $min-height);
-    @include set-var(transition-distance, $transition-distance);
     @include set-var(z-index, $z-index);
 
     @if not $disable-dense {
-      @include set-var(dense-horizontal-padding, $dense-horizontal-padding);
-      @include set-var(dense-vertical-padding, $dense-vertical-padding);
       @include set-var(dense-min-height, $dense-min-height);
     }
   }
@@ -206,8 +218,14 @@ $variables: (
   @if not $disable-everything {
     @include set-var(spacing, $dense-spacing);
     @include set-var(min-height, get-var(dense-min-height));
-    @include set-var(horizontal-padding, get-var(dense-horizontal-padding));
-    @include set-var(vertical-padding, get-var(dense-vertical-padding));
+    @include set-var(
+      horizontal-padding,
+      get-var(dense-horizontal-padding, $dense-horizontal-padding)
+    );
+    @include set-var(
+      vertical-padding,
+      get-var(dense-vertical-padding, $dense-vertical-padding)
+    );
   }
 }
 
@@ -222,7 +240,7 @@ $variables: (
         @include utils.map-to-styles($typography);
         @include use-var(background-color);
         @include use-var(color);
-        @include use-var(border-radius);
+        @include use-var(border-radius, $fallback: $border-radius);
         @include use-var(max-width);
         @include use-var(min-height);
         @include use-var(z-index);
@@ -230,7 +248,8 @@ $variables: (
         opacity: 0;
         overflow: hidden;
         overflow-wrap: anywhere;
-        padding: get-var(vertical-padding) get-var(horizontal-padding);
+        padding: get-var(vertical-padding, $vertical-padding)
+          get-var(horizontal-padding, $horizontal-padding);
         pointer-events: none;
         position: fixed;
         text-transform: none;
@@ -246,28 +265,36 @@ $variables: (
         @if not $disable-above {
           &--above {
             transform: translateY(
-              #{utils.negate-var(get-var(transition-distance))}
+              #{utils.negate-var(
+                  get-var(transition-distance, $transition-distance)
+                )}
             );
           }
         }
 
         @if not $disable-below {
           &--below {
-            transform: translateY(#{get-var(transition-distance)});
+            transform: translateY(
+              #{get-var(transition-distance, $transition-distance)}
+            );
           }
         }
 
         @if not $disable-left {
           &--left {
             transform: translateX(
-              #{utils.negate-var(get-var(transition-distance))}
+              #{utils.negate-var(
+                  get-var(transition-distance, $transition-distance)
+                )}
             );
           }
         }
 
         @if not $disable-right {
           &--right {
-            transform: translateX(#{get-var(transition-distance)});
+            transform: translateX(
+              #{get-var(transition-distance, $transition-distance)}
+            );
           }
         }
 

package/dist/transition/_transition.scss

@@ -5,6 +5,7 @@
 @use "sass:color";
 @use "sass:map";
 @use "../utils";
+@use "../border-radius";
 @use "../theme/colors";
 @use "../theme/theme";
 
@@ -112,7 +113,7 @@ $skeleton-placeholder-width: 43% !default;
 
 /// The default skeleton placeholder border-radius.
 /// @type Number
-$skeleton-placeholder-border-radius: 0.25rem !default;
+$skeleton-placeholder-border-radius: border-radius.get-var(xs) !default;
 
 /// The default light theme skeleton placeholder background color.
 /// @type Color

package/dist/tree/TreeItem.d.ts

@@ -25,11 +25,11 @@ export interface TreeItemProps extends Omit<DefaultTreeItemNode, "parentId">, HT
      * element. The top-level props are passed to the `<span>` or `<a>` element
      * instead.
      */
-    liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;
+    liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>>;
     /**
      * Any additional props to pass to the `TreeGroup` component.
      */
-    groupProps?: PropsWithRef<OverridableTreeGroupProps, HTMLUListElement>;
+    groupProps?: PropsWithRef<OverridableTreeGroupProps>;
     /**
      * This should normally be the text/content to display within the tree item
      * and should **not** include nested trees.

package/dist/tree/TreeItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tree/TreeItem.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useEffect,\n} from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { ListItemChildren } from \"../list/ListItemChildren.js\";\nimport { useKeyboardMovementContext } from \"../movement/useKeyboardMovementProvider.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { type OverridableTreeGroupProps, TreeGroup } from \"./TreeGroup.js\";\nimport { TreeItemExpander } from \"./TreeItemExpander.js\";\nimport { useTreeContext } from \"./TreeProvider.js\";\nimport { treeItem, treeItemContent, treeItemMedia } from \"./styles.js\";\nimport { type DefaultTreeItemNode } from \"./types.js\";\n\n/**\n * @since 6.0.0 Added `liProps` and `groupProps`.\n * @since 6.0.0 The `liRef`, `liStyle`, and `liClassName` props were removed in\n * favor of `liProps={{ ref, style, className }}`.\n * @since 6.0.0 The `itemIndex`, `listSize`, `renderChildItems`, `isLink`,\n * `contentComponent`, and `readOnly` props were removed.\n */\nexport interface TreeItemProps\n  extends Omit<DefaultTreeItemNode, \"parentId\">,\n    HTMLAttributes<HTMLLIElement>,\n    ComponentWithRippleProps {\n  /**\n   * @defaultValue `\"tree-item-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * This is used to set the `--rmd-tree-depth` CSS variable which allows the\n   * padding to increase for each nested tree.\n   */\n  depth: number;\n\n  /**\n   * Any additional props that should be passed to the surrounding `<li>`\n   * element. The top-level props are passed to the `<span>` or `<a>` element\n   * instead.\n   */\n  liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>;\n\n  /**\n   * Any additional props to pass to the `TreeGroup` component.\n   */\n  groupProps?: PropsWithRef<OverridableTreeGroupProps, HTMLUListElement>;\n\n  /**\n   * This should normally be the text/content to display within the tree item\n   * and should **not** include nested trees.\n   */\n  children?: ReactNode;\n\n  /**\n   * The nested tree items to render within a `TreeGroup`.\n   */\n  childItems?: ReactNode;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n\n  /**\n   * This ref is applied to the `<span>` or `<a>` element and can be used to\n   * implement drag and drop behavior.\n   */\n  contentRef?: Ref<HTMLElement>;\n\n  /**\n   * Set this to `true` if the {@link childItems} should not be rendered while\n   * collapsed.\n   *\n   * @defaultValue `false`\n   */\n  temporaryChildItems?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @see {@link https://react-md.dev/components/tree | Tree Demos}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/treeview/}\n * @since 6.0.0 No longer forwards refs. The ref must be provided using\n * `contentRef` instead.\n * @since 6.0.0 The `liRef` was removed in favor of `liProps={{ ref }}`.\n * @since 6.0.0 The wrapping `<li>` element will always be `role=\"none\"` and the\n * `<span>` or `<a>` will gain the `role=\"treeitem\"` instead. This makes it\n * easier to pass event handlers because of the nested behavior of tree items.\n * @since 6.0.0 No longer provides the `aria-level`, `aria-setsize` and\n * `aria-posinset` attributes and allows the browser to compute them instead.\n */\nexport function TreeItem(props: TreeItemProps): ReactElement {\n  const {\n    id: propId,\n    depth,\n    liProps,\n    disabled = false,\n    disabledOpacity = false,\n    groupProps,\n    children: propChildren,\n    className,\n    itemId,\n    leftAddon,\n    leftAddonType: propLeftAddonType,\n    leftAddonPosition,\n    leftAddonClassName,\n    leftAddonForceWrap,\n    rightAddon,\n    rightAddonType,\n    rightAddonPosition,\n    rightAddonClassName,\n    rightAddonForceWrap,\n    disableTextChildren,\n    disableLeftAddonCenteredMedia: propDisableLeftAddonCenteredMedia,\n    disableRightAddonCenteredMedia,\n    textProps,\n    textClassName,\n    primaryText,\n    secondaryText,\n    secondaryTextProps,\n    secondaryTextClassName,\n    multiline,\n    childItems,\n    contentClassName,\n    temporaryChildItems,\n    disableTransition: propDisableTransition,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    contentRef,\n    disableRipple,\n    ...remaining\n  } = props;\n\n  const id = useEnsuredId(propId, \"tree-item\");\n  const children = useHigherContrastChildren(propChildren);\n  if (disabled) {\n    // you can't really disable a link other than removing the href, so\n    // unset these props\n    remaining.to = undefined;\n    remaining.href = undefined;\n  }\n\n  const {\n    expandedIds,\n    selectedIds,\n    expanderLeft,\n    expansionMode,\n    metadataLookup,\n    linkComponent: Link,\n    toggleTreeItemSelection,\n    toggleTreeItemExpansion,\n    disableTransition: contextDisableTransition,\n  } = useTreeContext();\n  const { activeDescendantId } = useKeyboardMovementContext();\n\n  const isLeafNode = !childItems;\n  const focused = activeDescendantId === id;\n  const expanded = expandedIds.has(itemId);\n  const selected = selectedIds.has(itemId);\n  const disableTransition = propDisableTransition ?? contextDisableTransition;\n\n  useEffect(() => {\n    const lookup = metadataLookup.current;\n    lookup.expandable[itemId] = !isLeafNode;\n    lookup.disabledItems[itemId] = disabled;\n    lookup.elementToItem[id] = itemId;\n    lookup.itemToElement[itemId] = id;\n\n    return () => {\n      /* eslint-disable @typescript-eslint/no-dynamic-delete */\n      delete lookup.disabledItems[itemId];\n      delete lookup.expandable[itemId];\n      delete lookup.elementToItem[id];\n      delete lookup.itemToElement[itemId];\n      /* eslint-enable @typescript-eslint/no-dynamic-delete */\n    };\n  }, [id, metadataLookup, itemId, isLeafNode, disabled, depth]);\n\n  const { pressedClassName, ripples, handlers } =\n    useElementInteraction<HTMLLIElement>({\n      mode: disableRipple ? \"none\" : undefined,\n      onBlur,\n      onClick(event) {\n        onClick?.(event);\n        toggleTreeItemSelection(itemId);\n        if (!isLeafNode && expansionMode !== \"manual\") {\n          toggleTreeItemExpansion(itemId);\n        }\n      },\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      disabled,\n    });\n\n  const isLink = !!(remaining.to || remaining.href);\n\n  // cheating a bit so there are type errors around the event handlers\n  const ContentComponent = (isLink ? Link : \"span\") as \"span\";\n  const leftAddonType =\n    (propLeftAddonType ?? (expanderLeft && leftAddon)) ? \"media\" : undefined;\n  const isMediaLeftAddon =\n    typeof propLeftAddonType === \"undefined\" && leftAddonType === \"media\";\n  const disableLeftAddonCenteredMedia =\n    propDisableLeftAddonCenteredMedia ?? isMediaLeftAddon;\n\n  return (\n    <li\n      {...liProps}\n      role=\"none\"\n      className={treeItem({\n        className,\n        expander: !!childItems,\n        expanderLeft,\n      })}\n    >\n      <ContentComponent\n        {...remaining}\n        // nodes with children should always apply the `aria-expanded` to show\n        // that it is expandable while leaf nodes should remain omitted\n        aria-expanded={isLeafNode ? undefined : expanded}\n        aria-selected={selected}\n        aria-disabled={disabled || undefined}\n        id={id}\n        ref={contentRef}\n        role=\"treeitem\"\n        tabIndex={-1}\n        {...handlers}\n        className={treeItemContent({\n          link: isLink,\n          focused,\n          selected,\n          disabled,\n          disabledOpacity,\n          className: contentClassName,\n          pressedClassName,\n        })}\n      >\n        <ListItemChildren\n          multiline={multiline}\n          textClassName={textClassName}\n          secondaryTextClassName={secondaryTextClassName}\n          disableTextChildren={disableTextChildren}\n          primaryText={primaryText}\n          textProps={textProps}\n          secondaryText={secondaryText}\n          secondaryTextProps={secondaryTextProps}\n          leftAddon={\n            <TreeItemExpander\n              isLeft\n              itemId={itemId}\n              addon={leftAddon}\n              expanded={expanded}\n              disabled={disabled}\n              isLeafNode={isLeafNode}\n            />\n          }\n          leftAddonType={leftAddonType}\n          leftAddonPosition={leftAddonPosition}\n          leftAddonClassName={treeItemMedia({\n            isLeafNode,\n            isMediaLeftAddon,\n            className: leftAddonClassName,\n          })}\n          leftAddonForceWrap={leftAddonForceWrap}\n          rightAddon={\n            <TreeItemExpander\n              itemId={itemId}\n              addon={rightAddon}\n              expanded={expanded}\n              disabled={disabled}\n              isLeafNode={isLeafNode}\n            />\n          }\n          rightAddonType={rightAddonType}\n          rightAddonPosition={rightAddonPosition}\n          rightAddonClassName={rightAddonClassName}\n          rightAddonForceWrap={rightAddonForceWrap}\n          disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n          disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n        >\n          {children}\n        </ListItemChildren>\n        {ripples}\n      </ContentComponent>\n      <TreeGroup\n        id={`${id}-group`}\n        temporary={temporaryChildItems}\n        disableTransition={disableTransition}\n        {...groupProps}\n        depth={depth + 1}\n        collapsed={isLeafNode || !expanded}\n      >\n        {childItems}\n      </TreeGroup>\n    </li>\n  );\n}\n"],"names":["useEffect","useElementInteraction","useHigherContrastChildren","ListItemChildren","useKeyboardMovementContext","useEnsuredId","TreeGroup","TreeItemExpander","useTreeContext","treeItem","treeItemContent","treeItemMedia","TreeItem","props","id","propId","depth","liProps","disabled","disabledOpacity","groupProps","children","propChildren","className","itemId","leftAddon","leftAddonType","propLeftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableTextChildren","disableLeftAddonCenteredMedia","propDisableLeftAddonCenteredMedia","disableRightAddonCenteredMedia","textProps","textClassName","primaryText","secondaryText","secondaryTextProps","secondaryTextClassName","multiline","childItems","contentClassName","temporaryChildItems","disableTransition","propDisableTransition","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","contentRef","disableRipple","remaining","to","undefined","href","expandedIds","selectedIds","expanderLeft","expansionMode","metadataLookup","linkComponent","Link","toggleTreeItemSelection","toggleTreeItemExpansion","contextDisableTransition","activeDescendantId","isLeafNode","focused","expanded","has","selected","lookup","current","expandable","disabledItems","elementToItem","itemToElement","pressedClassName","ripples","handlers","mode","event","isLink","ContentComponent","isMediaLeftAddon","li","role","expander","aria-expanded","aria-selected","aria-disabled","ref","tabIndex","link","isLeft","addon","temporary","collapsed"],"mappings":"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"}
+{"version":3,"sources":["../../src/tree/TreeItem.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useEffect,\n} from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { ListItemChildren } from \"../list/ListItemChildren.js\";\nimport { useKeyboardMovementContext } from \"../movement/useKeyboardMovementProvider.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { type OverridableTreeGroupProps, TreeGroup } from \"./TreeGroup.js\";\nimport { TreeItemExpander } from \"./TreeItemExpander.js\";\nimport { useTreeContext } from \"./TreeProvider.js\";\nimport { treeItem, treeItemContent, treeItemMedia } from \"./styles.js\";\nimport { type DefaultTreeItemNode } from \"./types.js\";\n\n/**\n * @since 6.0.0 Added `liProps` and `groupProps`.\n * @since 6.0.0 The `liRef`, `liStyle`, and `liClassName` props were removed in\n * favor of `liProps={{ ref, style, className }}`.\n * @since 6.0.0 The `itemIndex`, `listSize`, `renderChildItems`, `isLink`,\n * `contentComponent`, and `readOnly` props were removed.\n */\nexport interface TreeItemProps\n  extends Omit<DefaultTreeItemNode, \"parentId\">,\n    HTMLAttributes<HTMLLIElement>,\n    ComponentWithRippleProps {\n  /**\n   * @defaultValue `\"tree-item-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * This is used to set the `--rmd-tree-depth` CSS variable which allows the\n   * padding to increase for each nested tree.\n   */\n  depth: number;\n\n  /**\n   * Any additional props that should be passed to the surrounding `<li>`\n   * element. The top-level props are passed to the `<span>` or `<a>` element\n   * instead.\n   */\n  liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>>;\n\n  /**\n   * Any additional props to pass to the `TreeGroup` component.\n   */\n  groupProps?: PropsWithRef<OverridableTreeGroupProps>;\n\n  /**\n   * This should normally be the text/content to display within the tree item\n   * and should **not** include nested trees.\n   */\n  children?: ReactNode;\n\n  /**\n   * The nested tree items to render within a `TreeGroup`.\n   */\n  childItems?: ReactNode;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n\n  /**\n   * This ref is applied to the `<span>` or `<a>` element and can be used to\n   * implement drag and drop behavior.\n   */\n  contentRef?: Ref<HTMLElement>;\n\n  /**\n   * Set this to `true` if the {@link childItems} should not be rendered while\n   * collapsed.\n   *\n   * @defaultValue `false`\n   */\n  temporaryChildItems?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @see {@link https://react-md.dev/components/tree | Tree Demos}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/treeview/}\n * @since 6.0.0 No longer forwards refs. The ref must be provided using\n * `contentRef` instead.\n * @since 6.0.0 The `liRef` was removed in favor of `liProps={{ ref }}`.\n * @since 6.0.0 The wrapping `<li>` element will always be `role=\"none\"` and the\n * `<span>` or `<a>` will gain the `role=\"treeitem\"` instead. This makes it\n * easier to pass event handlers because of the nested behavior of tree items.\n * @since 6.0.0 No longer provides the `aria-level`, `aria-setsize` and\n * `aria-posinset` attributes and allows the browser to compute them instead.\n */\nexport function TreeItem(props: TreeItemProps): ReactElement {\n  const {\n    id: propId,\n    depth,\n    liProps,\n    disabled = false,\n    disabledOpacity = false,\n    groupProps,\n    children: propChildren,\n    className,\n    itemId,\n    leftAddon,\n    leftAddonType: propLeftAddonType,\n    leftAddonPosition,\n    leftAddonClassName,\n    leftAddonForceWrap,\n    rightAddon,\n    rightAddonType,\n    rightAddonPosition,\n    rightAddonClassName,\n    rightAddonForceWrap,\n    disableTextChildren,\n    disableLeftAddonCenteredMedia: propDisableLeftAddonCenteredMedia,\n    disableRightAddonCenteredMedia,\n    textProps,\n    textClassName,\n    primaryText,\n    secondaryText,\n    secondaryTextProps,\n    secondaryTextClassName,\n    multiline,\n    childItems,\n    contentClassName,\n    temporaryChildItems,\n    disableTransition: propDisableTransition,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    contentRef,\n    disableRipple,\n    ...remaining\n  } = props;\n\n  const id = useEnsuredId(propId, \"tree-item\");\n  const children = useHigherContrastChildren(propChildren);\n  if (disabled) {\n    // you can't really disable a link other than removing the href, so\n    // unset these props\n    remaining.to = undefined;\n    remaining.href = undefined;\n  }\n\n  const {\n    expandedIds,\n    selectedIds,\n    expanderLeft,\n    expansionMode,\n    metadataLookup,\n    linkComponent: Link,\n    toggleTreeItemSelection,\n    toggleTreeItemExpansion,\n    disableTransition: contextDisableTransition,\n  } = useTreeContext();\n  const { activeDescendantId } = useKeyboardMovementContext();\n\n  const isLeafNode = !childItems;\n  const focused = activeDescendantId === id;\n  const expanded = expandedIds.has(itemId);\n  const selected = selectedIds.has(itemId);\n  const disableTransition = propDisableTransition ?? contextDisableTransition;\n\n  useEffect(() => {\n    const lookup = metadataLookup.current;\n    lookup.expandable[itemId] = !isLeafNode;\n    lookup.disabledItems[itemId] = disabled;\n    lookup.elementToItem[id] = itemId;\n    lookup.itemToElement[itemId] = id;\n\n    return () => {\n      /* eslint-disable @typescript-eslint/no-dynamic-delete */\n      delete lookup.disabledItems[itemId];\n      delete lookup.expandable[itemId];\n      delete lookup.elementToItem[id];\n      delete lookup.itemToElement[itemId];\n      /* eslint-enable @typescript-eslint/no-dynamic-delete */\n    };\n  }, [id, metadataLookup, itemId, isLeafNode, disabled, depth]);\n\n  const { pressedClassName, ripples, handlers } =\n    useElementInteraction<HTMLLIElement>({\n      mode: disableRipple ? \"none\" : undefined,\n      onBlur,\n      onClick(event) {\n        onClick?.(event);\n        toggleTreeItemSelection(itemId);\n        if (!isLeafNode && expansionMode !== \"manual\") {\n          toggleTreeItemExpansion(itemId);\n        }\n      },\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseUp,\n      onMouseLeave,\n      onDragStart,\n      onTouchStart,\n      onTouchEnd,\n      onTouchMove,\n      disabled,\n    });\n\n  const isLink = !!(remaining.to || remaining.href);\n\n  // cheating a bit so there are type errors around the event handlers\n  const ContentComponent = (isLink ? Link : \"span\") as \"span\";\n  const leftAddonType =\n    (propLeftAddonType ?? (expanderLeft && leftAddon)) ? \"media\" : undefined;\n  const isMediaLeftAddon =\n    typeof propLeftAddonType === \"undefined\" && leftAddonType === \"media\";\n  const disableLeftAddonCenteredMedia =\n    propDisableLeftAddonCenteredMedia ?? isMediaLeftAddon;\n\n  return (\n    <li\n      {...liProps}\n      role=\"none\"\n      className={treeItem({\n        className,\n        expander: !!childItems,\n        expanderLeft,\n      })}\n    >\n      <ContentComponent\n        {...remaining}\n        // nodes with children should always apply the `aria-expanded` to show\n        // that it is expandable while leaf nodes should remain omitted\n        aria-expanded={isLeafNode ? undefined : expanded}\n        aria-selected={selected}\n        aria-disabled={disabled || undefined}\n        id={id}\n        ref={contentRef}\n        role=\"treeitem\"\n        tabIndex={-1}\n        {...handlers}\n        className={treeItemContent({\n          link: isLink,\n          focused,\n          selected,\n          disabled,\n          disabledOpacity,\n          className: contentClassName,\n          pressedClassName,\n        })}\n      >\n        <ListItemChildren\n          multiline={multiline}\n          textClassName={textClassName}\n          secondaryTextClassName={secondaryTextClassName}\n          disableTextChildren={disableTextChildren}\n          primaryText={primaryText}\n          textProps={textProps}\n          secondaryText={secondaryText}\n          secondaryTextProps={secondaryTextProps}\n          leftAddon={\n            <TreeItemExpander\n              isLeft\n              itemId={itemId}\n              addon={leftAddon}\n              expanded={expanded}\n              disabled={disabled}\n              isLeafNode={isLeafNode}\n            />\n          }\n          leftAddonType={leftAddonType}\n          leftAddonPosition={leftAddonPosition}\n          leftAddonClassName={treeItemMedia({\n            isLeafNode,\n            isMediaLeftAddon,\n            className: leftAddonClassName,\n          })}\n          leftAddonForceWrap={leftAddonForceWrap}\n          rightAddon={\n            <TreeItemExpander\n              itemId={itemId}\n              addon={rightAddon}\n              expanded={expanded}\n              disabled={disabled}\n              isLeafNode={isLeafNode}\n            />\n          }\n          rightAddonType={rightAddonType}\n          rightAddonPosition={rightAddonPosition}\n          rightAddonClassName={rightAddonClassName}\n          rightAddonForceWrap={rightAddonForceWrap}\n          disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}\n          disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}\n        >\n          {children}\n        </ListItemChildren>\n        {ripples}\n      </ContentComponent>\n      <TreeGroup\n        id={`${id}-group`}\n        temporary={temporaryChildItems}\n        disableTransition={disableTransition}\n        {...groupProps}\n        depth={depth + 1}\n        collapsed={isLeafNode || !expanded}\n      >\n        {childItems}\n      </TreeGroup>\n    </li>\n  );\n}\n"],"names":["useEffect","useElementInteraction","useHigherContrastChildren","ListItemChildren","useKeyboardMovementContext","useEnsuredId","TreeGroup","TreeItemExpander","useTreeContext","treeItem","treeItemContent","treeItemMedia","TreeItem","props","id","propId","depth","liProps","disabled","disabledOpacity","groupProps","children","propChildren","className","itemId","leftAddon","leftAddonType","propLeftAddonType","leftAddonPosition","leftAddonClassName","leftAddonForceWrap","rightAddon","rightAddonType","rightAddonPosition","rightAddonClassName","rightAddonForceWrap","disableTextChildren","disableLeftAddonCenteredMedia","propDisableLeftAddonCenteredMedia","disableRightAddonCenteredMedia","textProps","textClassName","primaryText","secondaryText","secondaryTextProps","secondaryTextClassName","multiline","childItems","contentClassName","temporaryChildItems","disableTransition","propDisableTransition","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","contentRef","disableRipple","remaining","to","undefined","href","expandedIds","selectedIds","expanderLeft","expansionMode","metadataLookup","linkComponent","Link","toggleTreeItemSelection","toggleTreeItemExpansion","contextDisableTransition","activeDescendantId","isLeafNode","focused","expanded","has","selected","lookup","current","expandable","disabledItems","elementToItem","itemToElement","pressedClassName","ripples","handlers","mode","event","isLink","ContentComponent","isMediaLeftAddon","li","role","expander","aria-expanded","aria-selected","aria-disabled","ref","tabIndex","link","isLeft","addon","temporary","collapsed"],"mappings":"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"}

package/dist/tree/_tree.scss

@@ -43,7 +43,7 @@ $item-padding-base: list.$item-horizontal-padding !default;
 ///
 /// @see $item-padding
 /// @type Number
-$item-padding-incrementor: list.$item-horizontal-padding * 1.5 !default;
+$item-padding-incrementor: calc(list.$item-horizontal-padding * 1.5) !default;
 
 /// The default `TreeItemExpander` rotation starting position when rendered as
 /// a `rightAddon`.

package/dist/types.d.ts

@@ -1,9 +1,12 @@
-import type { Dispatch, ReactElement, Ref, SetStateAction } from "react";
+import { type Dispatch, type HTMLAttributes, type ReactElement, type Ref, type SetStateAction } from "react";
 /**
  * A helper type that allows an optional `ref` to also be applied with a props
  * object even though a `ref` isn't a real prop.
+ *
+ * @since 6.2.0 Automatically infer the `Element` type param from the provided
+ * props.
  */
-export type PropsWithRef<Props extends object, Element extends HTMLElement> = Props & {
+export type PropsWithRef<Props extends object, Element extends HTMLElement = Props extends HTMLAttributes<infer E> ? E extends HTMLElement ? E : never : never> = Props & {
     /**
      * An optional ref that can be applied.
      */
@@ -84,6 +87,18 @@ export type HtmlTagName = keyof JSX.IntrinsicElements;
  * @since 6.0.0
  */
 export type TextExtractor<T> = (item: T) => string;
+/**
+ * - `"some value"` -&gt; `"some value"`
+ * - `{ label: "Hello, world", value: 300 }` -&gt; `"Hello, world!"`
+ * - `{ name: "Hello, world", value: 300 }` -&gt; `"Hello, world!"`
+ *
+ * @since 6.2.0
+ */
+export type AutomaticTextExtraction = string | {
+    label: string;
+} | {
+    name: string;
+};
 /**
  * @since 6.0.0
  * @internal
@@ -167,3 +182,15 @@ export interface ElementSize {
     height: number;
     width: number;
 }
+/**
+ * @since 6.2.0
+ */
+export type OverridableStringUnion<Defaults extends string, Overrides extends Partial<Record<string, boolean>>> = Exclude<Defaults, {
+    [K in keyof Overrides]: K;
+}[keyof Overrides]> | {
+    [K in keyof Overrides]: Overrides[K] extends false ? never : K;
+}[keyof Overrides];
+/**
+ * @since 6.2.0
+ */
+export type IsEmptyObject<T> = keyof T extends never ? true : false;

package/dist/types.js

@@ -1,5 +1,5 @@
 /**
- * @since 6.0.0
+ * @since 6.2.0
  */ export { };
 
 //# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { Dispatch, ReactElement, Ref, SetStateAction } from \"react\";\n\n/**\n * A helper type that allows an optional `ref` to also be applied with a props\n * object even though a `ref` isn't a real prop.\n */\nexport type PropsWithRef<\n  Props extends object,\n  Element extends HTMLElement,\n> = Props & {\n  /**\n   * An optional ref that can be applied.\n   */\n  ref?: Ref<Element>;\n};\n\n/**\n * A simple type that can be used for different components that clone a\n * `className` into a child component.\n */\nexport type ClassNameCloneableChild<T = object> = ReactElement<\n  T & { className?: string }\n>;\n\n/**\n * This type allows you to require at least one of the provided keys. This is\n * super helpful for things like `aria-label` or `aria-labelledby` when it's\n * required for a11y.\n *\n * @see https://stackoverflow.com/questions/40510611/typescript-interface-require-one-of-two-properties-to-exist/49725198#49725198\n */\nexport type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<\n  T,\n  Exclude<keyof T, Keys>\n> &\n  {\n    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;\n  }[Keys];\n\nexport interface LabelA11y {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n}\n\n/**\n * A small accessibility helper to ensure that either `aria-label` or\n * `aria-labelledby` have been provided to a component.\n *\n * @example Simple Example\n * ```ts\n * import type { HTMLAttributes, ReactElement } from \"react\";\n * import type { LabelRequiredForA11y } from \"@react-md/core/types\";\n *\n * type Props = LabelRequiredForA11y<HTMLAttributes<HTMLDivElement>>;\n *\n * function Component(props: Props): ReactElement {\n *   return <div {...props} />;\n * }\n *\n * const test1 = <Component />\n * //            ^ type error\n * const test2 = <Component aria-label=\"Label\" />\n * const test3 = <Component aria-labelledby=\"some-other-id\" />\n * ```\n */\nexport type LabelRequiredForA11y<Props extends LabelA11y> = RequireAtLeastOne<\n  Props,\n  keyof LabelA11y\n>;\n\n/**\n * @since 5.0.0\n * @internal\n */\nexport interface NonNullRef<T> {\n  readonly current: T;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface NonNullMutableRef<T> {\n  current: T;\n}\n\n/** @since 6.0.0 */\nexport type HtmlTagName = keyof JSX.IntrinsicElements;\n\n/**\n * A function to get a string from a generic item.\n *\n * @example Simple Example\n * ```ts\n * interface Item {\n *   name: string;\n * }\n *\n * const items: Item[] = [{ name: 'Hello' }, { name: 'World' }];\n *\n * const extractor: TextExtractor<Item> = (item) => item.name;\n * ```\n * @since 6.0.0\n */\nexport type TextExtractor<T> = (item: T) => string;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type UseStateSetter<T> = Dispatch<SetStateAction<T>>;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type UseStateInitializer<T> = T | (() => T);\n\n/**\n * @example\n * ```ts\n * type Visibility = UseStateObject<\"visible\", boolean>;\n * // type Visibility = {\n * //   visible: boolean;\n * //   setVisible: UseStateSetter<boolean>\n * // }\n *\n * type AnotherOne = UseStateObject<\"renderAsSheet\", RenderMenuAsSheet>;\n * // type AnotherOne = {\n * //   renderAsSheet: RenderMenuAsSheet;\n * //   setRenderAsSheet: UseStateSetter<RenderMenuAsSheet>;\n * // }\n * ```\n * @since 6.0.0\n * @internal\n */\nexport type UseStateObject<Name extends string, Value> = {\n  [key in Name]: Value;\n} & {\n  [key in `set${Capitalize<Name>}`]: UseStateSetter<Value>;\n};\n\n/**\n * @example\n * ```ts\n * interface Example {\n *   value: number;\n *   setValue: UseStateSetter<number>;\n * }\n *\n * type WithPrefix = RenameKeysWithPrefix<Example, \"thumb1\">;\n * // type WithPrefix = {\n * //   thumb1Value: number;\n * //   thumb1SetValue: UseStateSetter<number>;\n * // }\n * ```\n *\n * @since 6.0.0\n * @internal\n */\nexport type RenameKeysWithPrefix<T, Prefix extends string> = {\n  [Key in keyof T & string as `${Prefix}${Capitalize<Key>}`]: T[Key];\n};\n\n/**\n * @since 6.0.0\n */\nexport type CssPosition = \"fixed\" | \"sticky\" | \"static\";\n\n/**\n * @since 6.0.0\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type AnyFunction = (...args: any[]) => any;\n\n/**\n * @since 6.0.0\n */\nexport type CancelableFunction<F extends AnyFunction> = F & {\n  cancel: () => void;\n};\n\n/**\n * @since 6.0.0\n */\nexport type DebouncedFunction<F extends AnyFunction> = CancelableFunction<\n  (...args: Parameters<F>) => void\n>;\n\n/**\n * @since 6.0.0\n */\nexport type ThrottledFunction<F extends AnyFunction> = CancelableFunction<\n  (...args: Parameters<F>) => ReturnType<F>\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface ElementSize {\n  height: number;\n  width: number;\n}\n"],"names":[],"mappings":"AAoMA;;CAEC,GACD,WAGC"}
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import {\n  type Dispatch,\n  type HTMLAttributes,\n  type ReactElement,\n  type Ref,\n  type SetStateAction,\n} from \"react\";\n\n/**\n * A helper type that allows an optional `ref` to also be applied with a props\n * object even though a `ref` isn't a real prop.\n *\n * @since 6.2.0 Automatically infer the `Element` type param from the provided\n * props.\n */\nexport type PropsWithRef<\n  Props extends object,\n  Element extends HTMLElement = Props extends HTMLAttributes<infer E>\n    ? E extends HTMLElement\n      ? E\n      : never\n    : never,\n> = Props & {\n  /**\n   * An optional ref that can be applied.\n   */\n  ref?: Ref<Element>;\n};\n\n/**\n * A simple type that can be used for different components that clone a\n * `className` into a child component.\n */\nexport type ClassNameCloneableChild<T = object> = ReactElement<\n  T & { className?: string }\n>;\n\n/**\n * This type allows you to require at least one of the provided keys. This is\n * super helpful for things like `aria-label` or `aria-labelledby` when it's\n * required for a11y.\n *\n * @see https://stackoverflow.com/questions/40510611/typescript-interface-require-one-of-two-properties-to-exist/49725198#49725198\n */\nexport type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<\n  T,\n  Exclude<keyof T, Keys>\n> &\n  {\n    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;\n  }[Keys];\n\nexport interface LabelA11y {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n}\n\n/**\n * A small accessibility helper to ensure that either `aria-label` or\n * `aria-labelledby` have been provided to a component.\n *\n * @example Simple Example\n * ```ts\n * import type { HTMLAttributes, ReactElement } from \"react\";\n * import type { LabelRequiredForA11y } from \"@react-md/core/types\";\n *\n * type Props = LabelRequiredForA11y<HTMLAttributes<HTMLDivElement>>;\n *\n * function Component(props: Props): ReactElement {\n *   return <div {...props} />;\n * }\n *\n * const test1 = <Component />\n * //            ^ type error\n * const test2 = <Component aria-label=\"Label\" />\n * const test3 = <Component aria-labelledby=\"some-other-id\" />\n * ```\n */\nexport type LabelRequiredForA11y<Props extends LabelA11y> = RequireAtLeastOne<\n  Props,\n  keyof LabelA11y\n>;\n\n/**\n * @since 5.0.0\n * @internal\n */\nexport interface NonNullRef<T> {\n  readonly current: T;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface NonNullMutableRef<T> {\n  current: T;\n}\n\n/** @since 6.0.0 */\nexport type HtmlTagName = keyof JSX.IntrinsicElements;\n\n/**\n * A function to get a string from a generic item.\n *\n * @example Simple Example\n * ```ts\n * interface Item {\n *   name: string;\n * }\n *\n * const items: Item[] = [{ name: 'Hello' }, { name: 'World' }];\n *\n * const extractor: TextExtractor<Item> = (item) => item.name;\n * ```\n * @since 6.0.0\n */\nexport type TextExtractor<T> = (item: T) => string;\n\n/**\n * - `\"some value\"` -&gt; `\"some value\"`\n * - `{ label: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n * - `{ name: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n *\n * @since 6.2.0\n */\nexport type AutomaticTextExtraction =\n  | string\n  | { label: string }\n  | { name: string };\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type UseStateSetter<T> = Dispatch<SetStateAction<T>>;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type UseStateInitializer<T> = T | (() => T);\n\n/**\n * @example\n * ```ts\n * type Visibility = UseStateObject<\"visible\", boolean>;\n * // type Visibility = {\n * //   visible: boolean;\n * //   setVisible: UseStateSetter<boolean>\n * // }\n *\n * type AnotherOne = UseStateObject<\"renderAsSheet\", RenderMenuAsSheet>;\n * // type AnotherOne = {\n * //   renderAsSheet: RenderMenuAsSheet;\n * //   setRenderAsSheet: UseStateSetter<RenderMenuAsSheet>;\n * // }\n * ```\n * @since 6.0.0\n * @internal\n */\nexport type UseStateObject<Name extends string, Value> = {\n  [key in Name]: Value;\n} & {\n  [key in `set${Capitalize<Name>}`]: UseStateSetter<Value>;\n};\n\n/**\n * @example\n * ```ts\n * interface Example {\n *   value: number;\n *   setValue: UseStateSetter<number>;\n * }\n *\n * type WithPrefix = RenameKeysWithPrefix<Example, \"thumb1\">;\n * // type WithPrefix = {\n * //   thumb1Value: number;\n * //   thumb1SetValue: UseStateSetter<number>;\n * // }\n * ```\n *\n * @since 6.0.0\n * @internal\n */\nexport type RenameKeysWithPrefix<T, Prefix extends string> = {\n  [Key in keyof T & string as `${Prefix}${Capitalize<Key>}`]: T[Key];\n};\n\n/**\n * @since 6.0.0\n */\nexport type CssPosition = \"fixed\" | \"sticky\" | \"static\";\n\n/**\n * @since 6.0.0\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type AnyFunction = (...args: any[]) => any;\n\n/**\n * @since 6.0.0\n */\nexport type CancelableFunction<F extends AnyFunction> = F & {\n  cancel: () => void;\n};\n\n/**\n * @since 6.0.0\n */\nexport type DebouncedFunction<F extends AnyFunction> = CancelableFunction<\n  (...args: Parameters<F>) => void\n>;\n\n/**\n * @since 6.0.0\n */\nexport type ThrottledFunction<F extends AnyFunction> = CancelableFunction<\n  (...args: Parameters<F>) => ReturnType<F>\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface ElementSize {\n  height: number;\n  width: number;\n}\n\n/**\n * @since 6.2.0\n */\nexport type OverridableStringUnion<\n  Defaults extends string,\n  Overrides extends Partial<Record<string, boolean>>,\n> =\n  | Exclude<Defaults, { [K in keyof Overrides]: K }[keyof Overrides]>\n  | {\n      [K in keyof Overrides]: Overrides[K] extends false ? never : K;\n    }[keyof Overrides];\n\n/**\n * @since 6.2.0\n */\nexport type IsEmptyObject<T> = keyof T extends never ? true : false;\n"],"names":[],"mappings":"AAiPA;;CAEC,GACD,WAAoE"}

package/dist/utils/alphaNumericSort.d.ts

@@ -1,4 +1,4 @@
-import { type TextExtractor } from "../types.js";
+import { type AutomaticTextExtraction, type TextExtractor } from "../types.js";
 /** @since 6.0.0 */
 export declare const DEFAULT_COLLATOR_OPTIONS: {
     readonly numeric: true;
@@ -19,13 +19,13 @@ export interface AlphaNumericSortOptions<T> {
      * @example Simple Example
      * ```ts
      * interface Item {
-     *   name: string;
+     *   nameField: string;
      * }
      *
-     * const items: Item[] = [{ name: 'Hello' }, { name: 'World' }];
+     * const items: Item[] = [{ nameField: 'Hello' }, { nameField: 'World' }];
      *
      * alphaNumericSort(items, {
-     *   extractor: (item) => item.name,
+     *   extractor: (item) => item.nameField,
      * });
      * ```
      *
@@ -77,20 +77,20 @@ export interface AlphaNumericSortOptions<T> {
  * @param list - The list of strings to sort
  * @returns a new sorted list
  */
-export declare function alphaNumericSort<T extends string>(list: readonly T[], options?: Omit<AlphaNumericSortOptions<T>, "extractor">): readonly T[];
+export declare function alphaNumericSort<T extends AutomaticTextExtraction>(list: readonly T[], options?: AlphaNumericSortOptions<T>): readonly T[];
 /**
  * @example Simple Example
  * ```ts
  * interface Item {
- *   name: string;
+ *   nameField: string;
  * }
  *
- * const items: Item[] = [{ name: "World" }, { name: "Hello" }];
+ * const items: Item[] = [{ nameField: "World" }, { nameField: "Hello" }];
  *
  * const sorted = alphaNumericSort(items, {
- *   extractor: (item) => item.name,
+ *   extractor: (item) => item.nameField,
  * });
- * // sorted == [{ name: "Hello" }, { name: "World" }]
+ * // sorted == [{ nameField: "Hello" }, { nameField: "World" }]
  * ```
  *
  * @param list - The list of items to sort

package/dist/utils/alphaNumericSort.js

@@ -1,4 +1,8 @@
 import { defaultExtractor } from "../searching/utils.js";
+/**
+ * @since 6.2.0
+ * @internal
+ */ const DEFAULT_EXTRACTOR = defaultExtractor("alphaNumericSort");
 /** @since 6.0.0 */ export const DEFAULT_COLLATOR_OPTIONS = {
     numeric: true,
     caseFirst: "upper"
@@ -10,7 +14,7 @@ import { defaultExtractor } from "../searching/utils.js";
  * @since 6.0.0
  */ export const DEFAULT_COLLATOR = new Intl.Collator("en-US", DEFAULT_COLLATOR_OPTIONS);
 export function alphaNumericSort(list, options = {}) {
-    const { compare = DEFAULT_COLLATOR.compare, extractor = defaultExtractor("alphaNumericSort"), descending = false } = options;
+    const { compare = DEFAULT_COLLATOR.compare, extractor = DEFAULT_EXTRACTOR, descending = false } = options;
     const sorted = list.slice();
     sorted.sort((a, b)=>{
         const aValue = extractor(a);

package/dist/utils/alphaNumericSort.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/alphaNumericSort.ts"],"sourcesContent":["import { defaultExtractor } from \"../searching/utils.js\";\nimport { type TextExtractor } from \"../types.js\";\n\n/** @since 6.0.0 */\nexport const DEFAULT_COLLATOR_OPTIONS = {\n  numeric: true,\n  caseFirst: \"upper\",\n} as const satisfies Intl.CollatorOptions;\n\n/**\n * The default `Intl.Collator` that should be used for sorting large lists.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare#performance\n * @since 6.0.0\n */\nexport const DEFAULT_COLLATOR = new Intl.Collator(\n  \"en-US\",\n  DEFAULT_COLLATOR_OPTIONS\n);\n\n/** @since 6.0.0 */\nexport interface AlphaNumericSortOptions<T> {\n  /**\n   * The extractor is only required when the list of items are not strings.\n   *\n   * @example Simple Example\n   * ```ts\n   * interface Item {\n   *   name: string;\n   * }\n   *\n   * const items: Item[] = [{ name: 'Hello' }, { name: 'World' }];\n   *\n   * alphaNumericSort(items, {\n   *   extractor: (item) => item.name,\n   * });\n   * ```\n   *\n   * For javascript developers, this will throw an error in dev mode if an\n   * extractor is not provided for non-string lists.\n   *\n   * @defaultValue `typeof item === \"string\" ? item : \"\"`\n   */\n  extractor?: TextExtractor<T>;\n\n  /**\n   * A custom compare function for sorting the list. This should really only be\n   * provided if the language for your app is not `\"en-US\"` or you'd like to\n   * provide some custom sorting options.\n   *\n   * @example Custom Compare using Intl.Collator\n   * ```ts\n   * const collator = new Intl.Collator(\"en-US\", {\n   *   numeric: false,\n   *   caseFirst: \"lower\",\n   *   usage: \"search\",\n   * });\n   *\n   * alphaNumericSort(items, {\n   *   compare: collator.compare,\n   * })\n   * ```\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator\n   * @defaultValue `new Intl.Collator(\"en-US\", { numeric: true, caseFirst: \"upper\" }).compare`\n   */\n  compare?: (a: string, b: string) => number;\n\n  /**\n   * Setting this to `true` will return the list in descending order instead of\n   * ascending.\n   *\n   * @defaultValue `false`\n   */\n  descending?: boolean;\n}\n\n/**\n * @example Simple Example\n * ```ts\n * const items = [\"World\", \"Hello\"];\n *\n * const sorted = alphaNumericSort(items);\n * // sorted == [\"Hello\", \"World\"]\n * ```\n *\n * @param list - The list of strings to sort\n * @returns a new sorted list\n */\nexport function alphaNumericSort<T extends string>(\n  list: readonly T[],\n  options?: Omit<AlphaNumericSortOptions<T>, \"extractor\">\n): readonly T[];\n/**\n * @example Simple Example\n * ```ts\n * interface Item {\n *   name: string;\n * }\n *\n * const items: Item[] = [{ name: \"World\" }, { name: \"Hello\" }];\n *\n * const sorted = alphaNumericSort(items, {\n *   extractor: (item) => item.name,\n * });\n * // sorted == [{ name: \"Hello\" }, { name: \"World\" }]\n * ```\n *\n * @param list - The list of items to sort\n * @returns a new sorted list\n */\nexport function alphaNumericSort<T>(\n  list: readonly T[],\n  options: AlphaNumericSortOptions<T> & { extractor: TextExtractor<T> }\n): readonly T[];\nexport function alphaNumericSort<T>(\n  list: readonly T[],\n  options: AlphaNumericSortOptions<T> = {}\n): readonly T[] {\n  const {\n    compare = DEFAULT_COLLATOR.compare,\n    extractor = defaultExtractor(\"alphaNumericSort\"),\n    descending = false,\n  } = options;\n\n  const sorted = list.slice();\n  sorted.sort((a, b) => {\n    const aValue = extractor(a);\n    const bValue = extractor(b);\n\n    const value1 = descending ? bValue : aValue;\n    const value2 = descending ? aValue : bValue;\n\n    return compare(value1, value2);\n  });\n\n  return sorted;\n}\n"],"names":["defaultExtractor","DEFAULT_COLLATOR_OPTIONS","numeric","caseFirst","DEFAULT_COLLATOR","Intl","Collator","alphaNumericSort","list","options","compare","extractor","descending","sorted","slice","sort","a","b","aValue","bValue","value1","value2"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,wBAAwB;AAGzD,iBAAiB,GACjB,OAAO,MAAMC,2BAA2B;IACtCC,SAAS;IACTC,WAAW;AACb,EAA0C;AAE1C;;;;;CAKC,GACD,OAAO,MAAMC,mBAAmB,IAAIC,KAAKC,QAAQ,CAC/C,SACAL,0BACA;AAiGF,OAAO,SAASM,iBACdC,IAAkB,EAClBC,UAAsC,CAAC,CAAC;IAExC,MAAM,EACJC,UAAUN,iBAAiBM,OAAO,EAClCC,YAAYX,iBAAiB,mBAAmB,EAChDY,aAAa,KAAK,EACnB,GAAGH;IAEJ,MAAMI,SAASL,KAAKM,KAAK;IACzBD,OAAOE,IAAI,CAAC,CAACC,GAAGC;QACd,MAAMC,SAASP,UAAUK;QACzB,MAAMG,SAASR,UAAUM;QAEzB,MAAMG,SAASR,aAAaO,SAASD;QACrC,MAAMG,SAAST,aAAaM,SAASC;QAErC,OAAOT,QAAQU,QAAQC;IACzB;IAEA,OAAOR;AACT"}
+{"version":3,"sources":["../../src/utils/alphaNumericSort.ts"],"sourcesContent":["import { defaultExtractor } from \"../searching/utils.js\";\nimport { type AutomaticTextExtraction, type TextExtractor } from \"../types.js\";\n\n/**\n * @since 6.2.0\n * @internal\n */\nconst DEFAULT_EXTRACTOR = defaultExtractor(\"alphaNumericSort\");\n\n/** @since 6.0.0 */\nexport const DEFAULT_COLLATOR_OPTIONS = {\n  numeric: true,\n  caseFirst: \"upper\",\n} as const satisfies Intl.CollatorOptions;\n\n/**\n * The default `Intl.Collator` that should be used for sorting large lists.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare#performance\n * @since 6.0.0\n */\nexport const DEFAULT_COLLATOR = new Intl.Collator(\n  \"en-US\",\n  DEFAULT_COLLATOR_OPTIONS\n);\n\n/** @since 6.0.0 */\nexport interface AlphaNumericSortOptions<T> {\n  /**\n   * The extractor is only required when the list of items are not strings.\n   *\n   * @example Simple Example\n   * ```ts\n   * interface Item {\n   *   nameField: string;\n   * }\n   *\n   * const items: Item[] = [{ nameField: 'Hello' }, { nameField: 'World' }];\n   *\n   * alphaNumericSort(items, {\n   *   extractor: (item) => item.nameField,\n   * });\n   * ```\n   *\n   * For javascript developers, this will throw an error in dev mode if an\n   * extractor is not provided for non-string lists.\n   *\n   * @defaultValue `typeof item === \"string\" ? item : \"\"`\n   */\n  extractor?: TextExtractor<T>;\n\n  /**\n   * A custom compare function for sorting the list. This should really only be\n   * provided if the language for your app is not `\"en-US\"` or you'd like to\n   * provide some custom sorting options.\n   *\n   * @example Custom Compare using Intl.Collator\n   * ```ts\n   * const collator = new Intl.Collator(\"en-US\", {\n   *   numeric: false,\n   *   caseFirst: \"lower\",\n   *   usage: \"search\",\n   * });\n   *\n   * alphaNumericSort(items, {\n   *   compare: collator.compare,\n   * })\n   * ```\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator\n   * @defaultValue `new Intl.Collator(\"en-US\", { numeric: true, caseFirst: \"upper\" }).compare`\n   */\n  compare?: (a: string, b: string) => number;\n\n  /**\n   * Setting this to `true` will return the list in descending order instead of\n   * ascending.\n   *\n   * @defaultValue `false`\n   */\n  descending?: boolean;\n}\n\n/**\n * @example Simple Example\n * ```ts\n * const items = [\"World\", \"Hello\"];\n *\n * const sorted = alphaNumericSort(items);\n * // sorted == [\"Hello\", \"World\"]\n * ```\n *\n * @param list - The list of strings to sort\n * @returns a new sorted list\n */\nexport function alphaNumericSort<T extends AutomaticTextExtraction>(\n  list: readonly T[],\n  options?: AlphaNumericSortOptions<T>\n): readonly T[];\n/**\n * @example Simple Example\n * ```ts\n * interface Item {\n *   nameField: string;\n * }\n *\n * const items: Item[] = [{ nameField: \"World\" }, { nameField: \"Hello\" }];\n *\n * const sorted = alphaNumericSort(items, {\n *   extractor: (item) => item.nameField,\n * });\n * // sorted == [{ nameField: \"Hello\" }, { nameField: \"World\" }]\n * ```\n *\n * @param list - The list of items to sort\n * @returns a new sorted list\n */\nexport function alphaNumericSort<T>(\n  list: readonly T[],\n  options: AlphaNumericSortOptions<T> & { extractor: TextExtractor<T> }\n): readonly T[];\nexport function alphaNumericSort<T>(\n  list: readonly T[],\n  options: AlphaNumericSortOptions<T> = {}\n): readonly T[] {\n  const {\n    compare = DEFAULT_COLLATOR.compare,\n    extractor = DEFAULT_EXTRACTOR,\n    descending = false,\n  } = options;\n\n  const sorted = list.slice();\n  sorted.sort((a, b) => {\n    const aValue = extractor(a);\n    const bValue = extractor(b);\n\n    const value1 = descending ? bValue : aValue;\n    const value2 = descending ? aValue : bValue;\n\n    return compare(value1, value2);\n  });\n\n  return sorted;\n}\n"],"names":["defaultExtractor","DEFAULT_EXTRACTOR","DEFAULT_COLLATOR_OPTIONS","numeric","caseFirst","DEFAULT_COLLATOR","Intl","Collator","alphaNumericSort","list","options","compare","extractor","descending","sorted","slice","sort","a","b","aValue","bValue","value1","value2"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,wBAAwB;AAGzD;;;CAGC,GACD,MAAMC,oBAAoBD,iBAAiB;AAE3C,iBAAiB,GACjB,OAAO,MAAME,2BAA2B;IACtCC,SAAS;IACTC,WAAW;AACb,EAA0C;AAE1C;;;;;CAKC,GACD,OAAO,MAAMC,mBAAmB,IAAIC,KAAKC,QAAQ,CAC/C,SACAL,0BACA;AAiGF,OAAO,SAASM,iBACdC,IAAkB,EAClBC,UAAsC,CAAC,CAAC;IAExC,MAAM,EACJC,UAAUN,iBAAiBM,OAAO,EAClCC,YAAYX,iBAAiB,EAC7BY,aAAa,KAAK,EACnB,GAAGH;IAEJ,MAAMI,SAASL,KAAKM,KAAK;IACzBD,OAAOE,IAAI,CAAC,CAACC,GAAGC;QACd,MAAMC,SAASP,UAAUK;QACzB,MAAMG,SAASR,UAAUM;QAEzB,MAAMG,SAASR,aAAaO,SAASD;QACrC,MAAMG,SAAST,aAAaM,SAASC;QAErC,OAAOT,QAAQU,QAAQC;IACzB;IAEA,OAAOR;AACT"}

package/dist/utils/bem.js

@@ -5,7 +5,7 @@ function modify(base, modifier) {
     const hasOwn = Object.prototype.hasOwnProperty;
     return Object.keys(modifier).reduce((s, mod)=>{
         if (hasOwn.call(modifier, mod) && modifier[mod]) {
-            s = `${s} ${base}--${mod}`;
+            return `${s} ${base}--${mod}`;
         }
         return s;
     }, base);

package/dist/utils/bem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/bem.ts"],"sourcesContent":["export type BEMModifier = Record<string, unknown>;\n\nfunction modify(base: string, modifier?: BEMModifier): string {\n  if (!modifier) {\n    return base;\n  }\n\n  const hasOwn = Object.prototype.hasOwnProperty;\n  return Object.keys(modifier).reduce((s, mod) => {\n    if (hasOwn.call(modifier, mod) && modifier[mod]) {\n      s = `${s} ${base}--${mod}`;\n    }\n\n    return s;\n  }, base);\n}\n\n/**\n * Creates the full class name from the base block name. This can be called\n * without any arguments which will just return the base block name (kind of\n * worthless), or you can provide a child element name and modifiers.\n *\n * @since 6.0.0 Converted to an interface that supports the `base` attribute.\n */\nexport interface BEMResult {\n  /**\n   * @example Simple Example\n   * ```ts\n   * const styles = bem(\"root\");\n   *\n   * styles(\"child\"); // \"root__child\"\n   * styles(\"child\", {\n   *   modifier1: true,\n   *   modifier2: false,\n   * }); // \"root__child root__child--modifier-1\"\n   * ```\n   * @param element - The child element to be prefixed before any modifiers.\n   * @param modifier - Any optional modifiers to apply to the block and optional\n   * element.\n   * @returns the full class name\n   */\n  (element: string, modifier?: BEMModifier): string;\n\n  /**\n   * @example Simple Example\n   * ```ts\n   * const styles = bem(\"root\");\n   *\n   * styles() // \"root\"\n   * styles({\n   *   modifier1: true,\n   *   modifier2: false,\n   * }); // \"root--modifier-1\"\n   * ```\n   * @param modifier - Any optional modifiers to apply to the block and optional\n   * element.\n   * @returns the full class name\n   */\n  (modifier?: BEMModifier): string;\n\n  /**\n   * The base class name\n   */\n  base: string;\n}\n\n/**\n * Applies the BEM styled class name to an element.\n *\n * @example Simple Example\n * ```tsx\n * import { bem } from \"@react-md/core/utils/bem\":\n *\n * const styles = bem(\"my-component\"):\n *\n * export function MyComponent(props) {\n *   const className = styles({\n *     always: true,\n *     never: false,\n *     \"some-condition\": props.something,\n *   }):\n *   const childClassName = styles('child', {\n *     always: true,\n *     never: false,\n *     \"some-condition\": props.something,\n *   });\n *\n *   // With a false-like `props.something`\n *   // className === \"my-component__child my-component__child--always\"\n *   // childClassName === \"my-component my-component--always\"\n *   // With a truthy `props.something`\n *   // className === \"my-component my-component--always my-component--some-condition\"\n *   // childClassName === \"my-component__child my-component__child--always my-component__child--some-condition\"\n *\n *   return (\n *     <div className={className}>\n *       <div className={childClassName} />\n *     </div>\n *   ):\n * }\n * ```\n *\n * @see https://en.bem.info/methodology/css/\n * @param base - The base class to use\n * @returns a function to call that generates the full class name\n */\nexport function bem(base: string): BEMResult {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!base) {\n      throw new Error(\n        \"bem requires a base block class but none were provided.\"\n      );\n    }\n  }\n\n  function block(\n    elementOrModifier?: BEMModifier | string,\n    modifier?: BEMModifier\n  ): string {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (typeof elementOrModifier !== \"string\" && modifier) {\n        throw new TypeError(\n          \"bem does not support having two modifier arguments.\"\n        );\n      }\n    }\n\n    if (!elementOrModifier) {\n      return base;\n    }\n\n    if (typeof elementOrModifier !== \"string\") {\n      return modify(base, elementOrModifier);\n    }\n\n    return modify(`${base}__${elementOrModifier}`, modifier);\n  }\n  block.base = base;\n  return block;\n}\n"],"names":["modify","base","modifier","hasOwn","Object","prototype","hasOwnProperty","keys","reduce","s","mod","call","bem","process","env","NODE_ENV","Error","block","elementOrModifier","TypeError"],"mappings":"AAEA,SAASA,OAAOC,IAAY,EAAEC,QAAsB;IAClD,IAAI,CAACA,UAAU;QACb,OAAOD;IACT;IAEA,MAAME,SAASC,OAAOC,SAAS,CAACC,cAAc;IAC9C,OAAOF,OAAOG,IAAI,CAACL,UAAUM,MAAM,CAAC,CAACC,GAAGC;QACtC,IAAIP,OAAOQ,IAAI,CAACT,UAAUQ,QAAQR,QAAQ,CAACQ,IAAI,EAAE;YAC/CD,IAAI,GAAGA,EAAE,CAAC,EAAER,KAAK,EAAE,EAAES,KAAK;QAC5B;QAEA,OAAOD;IACT,GAAGR;AACL;AAmDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCC,GACD,OAAO,SAASW,IAAIX,IAAY;IAC9B,IAAIY,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,CAACd,MAAM;YACT,MAAM,IAAIe,MACR;QAEJ;IACF;IAEA,SAASC,MACPC,iBAAwC,EACxChB,QAAsB;QAEtB,IAAIW,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,IAAI,OAAOG,sBAAsB,YAAYhB,UAAU;gBACrD,MAAM,IAAIiB,UACR;YAEJ;QACF;QAEA,IAAI,CAACD,mBAAmB;YACtB,OAAOjB;QACT;QAEA,IAAI,OAAOiB,sBAAsB,UAAU;YACzC,OAAOlB,OAAOC,MAAMiB;QACtB;QAEA,OAAOlB,OAAO,GAAGC,KAAK,EAAE,EAAEiB,mBAAmB,EAAEhB;IACjD;IACAe,MAAMhB,IAAI,GAAGA;IACb,OAAOgB;AACT"}
+{"version":3,"sources":["../../src/utils/bem.ts"],"sourcesContent":["export type BEMModifier = Record<string, unknown>;\n\nfunction modify(base: string, modifier?: BEMModifier): string {\n  if (!modifier) {\n    return base;\n  }\n\n  const hasOwn = Object.prototype.hasOwnProperty;\n  return Object.keys(modifier).reduce((s, mod) => {\n    if (hasOwn.call(modifier, mod) && modifier[mod]) {\n      return `${s} ${base}--${mod}`;\n    }\n\n    return s;\n  }, base);\n}\n\n/**\n * Creates the full class name from the base block name. This can be called\n * without any arguments which will just return the base block name (kind of\n * worthless), or you can provide a child element name and modifiers.\n *\n * @since 6.0.0 Converted to an interface that supports the `base` attribute.\n */\nexport interface BEMResult {\n  /**\n   * @example Simple Example\n   * ```ts\n   * const styles = bem(\"root\");\n   *\n   * styles(\"child\"); // \"root__child\"\n   * styles(\"child\", {\n   *   modifier1: true,\n   *   modifier2: false,\n   * }); // \"root__child root__child--modifier-1\"\n   * ```\n   * @param element - The child element to be prefixed before any modifiers.\n   * @param modifier - Any optional modifiers to apply to the block and optional\n   * element.\n   * @returns the full class name\n   */\n  (element: string, modifier?: BEMModifier): string;\n\n  /**\n   * @example Simple Example\n   * ```ts\n   * const styles = bem(\"root\");\n   *\n   * styles() // \"root\"\n   * styles({\n   *   modifier1: true,\n   *   modifier2: false,\n   * }); // \"root--modifier-1\"\n   * ```\n   * @param modifier - Any optional modifiers to apply to the block and optional\n   * element.\n   * @returns the full class name\n   */\n  (modifier?: BEMModifier): string;\n\n  /**\n   * The base class name\n   */\n  base: string;\n}\n\n/**\n * Applies the BEM styled class name to an element.\n *\n * @example Simple Example\n * ```tsx\n * import { bem } from \"@react-md/core/utils/bem\":\n *\n * const styles = bem(\"my-component\"):\n *\n * export function MyComponent(props) {\n *   const className = styles({\n *     always: true,\n *     never: false,\n *     \"some-condition\": props.something,\n *   }):\n *   const childClassName = styles('child', {\n *     always: true,\n *     never: false,\n *     \"some-condition\": props.something,\n *   });\n *\n *   // With a false-like `props.something`\n *   // className === \"my-component__child my-component__child--always\"\n *   // childClassName === \"my-component my-component--always\"\n *   // With a truthy `props.something`\n *   // className === \"my-component my-component--always my-component--some-condition\"\n *   // childClassName === \"my-component__child my-component__child--always my-component__child--some-condition\"\n *\n *   return (\n *     <div className={className}>\n *       <div className={childClassName} />\n *     </div>\n *   ):\n * }\n * ```\n *\n * @see https://en.bem.info/methodology/css/\n * @param base - The base class to use\n * @returns a function to call that generates the full class name\n */\nexport function bem(base: string): BEMResult {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!base) {\n      throw new Error(\n        \"bem requires a base block class but none were provided.\"\n      );\n    }\n  }\n\n  function block(\n    elementOrModifier?: BEMModifier | string,\n    modifier?: BEMModifier\n  ): string {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (typeof elementOrModifier !== \"string\" && modifier) {\n        throw new TypeError(\n          \"bem does not support having two modifier arguments.\"\n        );\n      }\n    }\n\n    if (!elementOrModifier) {\n      return base;\n    }\n\n    if (typeof elementOrModifier !== \"string\") {\n      return modify(base, elementOrModifier);\n    }\n\n    return modify(`${base}__${elementOrModifier}`, modifier);\n  }\n  block.base = base;\n  return block;\n}\n"],"names":["modify","base","modifier","hasOwn","Object","prototype","hasOwnProperty","keys","reduce","s","mod","call","bem","process","env","NODE_ENV","Error","block","elementOrModifier","TypeError"],"mappings":"AAEA,SAASA,OAAOC,IAAY,EAAEC,QAAsB;IAClD,IAAI,CAACA,UAAU;QACb,OAAOD;IACT;IAEA,MAAME,SAASC,OAAOC,SAAS,CAACC,cAAc;IAC9C,OAAOF,OAAOG,IAAI,CAACL,UAAUM,MAAM,CAAC,CAACC,GAAGC;QACtC,IAAIP,OAAOQ,IAAI,CAACT,UAAUQ,QAAQR,QAAQ,CAACQ,IAAI,EAAE;YAC/C,OAAO,GAAGD,EAAE,CAAC,EAAER,KAAK,EAAE,EAAES,KAAK;QAC/B;QAEA,OAAOD;IACT,GAAGR;AACL;AAmDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCC,GACD,OAAO,SAASW,IAAIX,IAAY;IAC9B,IAAIY,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,CAACd,MAAM;YACT,MAAM,IAAIe,MACR;QAEJ;IACF;IAEA,SAASC,MACPC,iBAAwC,EACxChB,QAAsB;QAEtB,IAAIW,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,IAAI,OAAOG,sBAAsB,YAAYhB,UAAU;gBACrD,MAAM,IAAIiB,UACR;YAEJ;QACF;QAEA,IAAI,CAACD,mBAAmB;YACtB,OAAOjB;QACT;QAEA,IAAI,OAAOiB,sBAAsB,UAAU;YACzC,OAAOlB,OAAOC,MAAMiB;QACtB;QAEA,OAAOlB,OAAO,GAAGC,KAAK,EAAE,EAAEiB,mBAAmB,EAAEhB;IACjD;IACAe,MAAMhB,IAAI,GAAGA;IACb,OAAOgB;AACT"}

package/dist/utils/parseCssLengthUnit.js

@@ -22,6 +22,9 @@
     if (typeof value === "number") {
         return value;
     }
+    if (value.includes("calc")) {
+        throw new Error(`Unable to parse a unit with \`calc\`: "${value}"`);
+    }
     const parsed = parseFloat(value);
     if (/px$/i.test(value)) {
         return parsed;

package/dist/utils/parseCssLengthUnit.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/parseCssLengthUnit.ts"],"sourcesContent":["/** @internal */\nexport interface ParseCssLengthUnitOptions {\n  /**\n   * The css unit to convert to a numeric value.\n   */\n  value: number | string;\n\n  /**\n   * @defaultValue `16`\n   */\n  fallbackFontSize?: number;\n\n  /**\n   * @defaultValue `document.documentElement`\n   */\n  container?: Element | null;\n}\n\n/**\n * This is used to convert CSS length units into a number. At this time, it really only supports\n * - `px`\n * - `rem`\n * - `em` (if {@link ParseCssLengthUnitOptions.container} is provided)\n *\n * @example Simple Example\n * ```ts\n * parseCssLengthUnit({ value: \"24px\" }) // 24\n * parseCssLengthUnit({ value: \"3.5rem\" }) // 56\n * parseCssLengthUnit({\n *   value: \"3em\",\n *   container: document.querySelector(SOME_QUERY),\n * }); // container's computed fontSize * 3\n * ```\n *\n * @see {@link https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths}\n * @internal\n * @since 6.0.0 This was renamed from `unitToNumber`\n */\nexport function parseCssLengthUnit(options: ParseCssLengthUnitOptions): number {\n  const { value, container, fallbackFontSize = 16 } = options;\n\n  if (typeof value === \"number\") {\n    return value;\n  }\n\n  const parsed = parseFloat(value);\n  if (/px$/i.test(value)) {\n    return parsed;\n  }\n\n  if (typeof window === \"undefined\") {\n    return parsed * fallbackFontSize;\n  }\n\n  const styleContainer =\n    !container || /rem$/i.test(value) ? document.documentElement : container;\n\n  const fontSize = parseFloat(\n    window.getComputedStyle(styleContainer).fontSize || `${fallbackFontSize}px`\n  );\n\n  return parsed * fontSize;\n}\n"],"names":["parseCssLengthUnit","options","value","container","fallbackFontSize","parsed","parseFloat","test","window","styleContainer","document","documentElement","fontSize","getComputedStyle"],"mappings":"AAAA,cAAc,GAkBd;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASA,mBAAmBC,OAAkC;IACnE,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAEC,mBAAmB,EAAE,EAAE,GAAGH;IAEpD,IAAI,OAAOC,UAAU,UAAU;QAC7B,OAAOA;IACT;IAEA,MAAMG,SAASC,WAAWJ;IAC1B,IAAI,OAAOK,IAAI,CAACL,QAAQ;QACtB,OAAOG;IACT;IAEA,IAAI,OAAOG,WAAW,aAAa;QACjC,OAAOH,SAASD;IAClB;IAEA,MAAMK,iBACJ,CAACN,aAAa,QAAQI,IAAI,CAACL,SAASQ,SAASC,eAAe,GAAGR;IAEjE,MAAMS,WAAWN,WACfE,OAAOK,gBAAgB,CAACJ,gBAAgBG,QAAQ,IAAI,GAAGR,iBAAiB,EAAE,CAAC;IAG7E,OAAOC,SAASO;AAClB"}
+{"version":3,"sources":["../../src/utils/parseCssLengthUnit.ts"],"sourcesContent":["/** @internal */\nexport interface ParseCssLengthUnitOptions {\n  /**\n   * The css unit to convert to a numeric value.\n   */\n  value: number | string;\n\n  /**\n   * @defaultValue `16`\n   */\n  fallbackFontSize?: number;\n\n  /**\n   * @defaultValue `document.documentElement`\n   */\n  container?: Element | null;\n}\n\n/**\n * This is used to convert CSS length units into a number. At this time, it really only supports\n * - `px`\n * - `rem`\n * - `em` (if {@link ParseCssLengthUnitOptions.container} is provided)\n *\n * @example Simple Example\n * ```ts\n * parseCssLengthUnit({ value: \"24px\" }) // 24\n * parseCssLengthUnit({ value: \"3.5rem\" }) // 56\n * parseCssLengthUnit({\n *   value: \"3em\",\n *   container: document.querySelector(SOME_QUERY),\n * }); // container's computed fontSize * 3\n * ```\n *\n * @see {@link https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths}\n * @internal\n * @since 6.0.0 This was renamed from `unitToNumber`\n */\nexport function parseCssLengthUnit(options: ParseCssLengthUnitOptions): number {\n  const { value, container, fallbackFontSize = 16 } = options;\n\n  if (typeof value === \"number\") {\n    return value;\n  }\n\n  if (value.includes(\"calc\")) {\n    throw new Error(`Unable to parse a unit with \\`calc\\`: \"${value}\"`);\n  }\n\n  const parsed = parseFloat(value);\n  if (/px$/i.test(value)) {\n    return parsed;\n  }\n\n  if (typeof window === \"undefined\") {\n    return parsed * fallbackFontSize;\n  }\n\n  const styleContainer =\n    !container || /rem$/i.test(value) ? document.documentElement : container;\n\n  const fontSize = parseFloat(\n    window.getComputedStyle(styleContainer).fontSize || `${fallbackFontSize}px`\n  );\n\n  return parsed * fontSize;\n}\n"],"names":["parseCssLengthUnit","options","value","container","fallbackFontSize","includes","Error","parsed","parseFloat","test","window","styleContainer","document","documentElement","fontSize","getComputedStyle"],"mappings":"AAAA,cAAc,GAkBd;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASA,mBAAmBC,OAAkC;IACnE,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAEC,mBAAmB,EAAE,EAAE,GAAGH;IAEpD,IAAI,OAAOC,UAAU,UAAU;QAC7B,OAAOA;IACT;IAEA,IAAIA,MAAMG,QAAQ,CAAC,SAAS;QAC1B,MAAM,IAAIC,MAAM,CAAC,uCAAuC,EAAEJ,MAAM,CAAC,CAAC;IACpE;IAEA,MAAMK,SAASC,WAAWN;IAC1B,IAAI,OAAOO,IAAI,CAACP,QAAQ;QACtB,OAAOK;IACT;IAEA,IAAI,OAAOG,WAAW,aAAa;QACjC,OAAOH,SAASH;IAClB;IAEA,MAAMO,iBACJ,CAACR,aAAa,QAAQM,IAAI,CAACP,SAASU,SAASC,eAAe,GAAGV;IAEjE,MAAMW,WAAWN,WACfE,OAAOK,gBAAgB,CAACJ,gBAAgBG,QAAQ,IAAI,GAAGV,iBAAiB,EAAE,CAAC;IAG7E,OAAOG,SAASO;AAClB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-md/core",
-  "version": "6.0.2",
+  "version": "6.2.0",
   "description": "The core components and functionality for react-md.",
   "type": "module",
   "sass": "./dist/_core.scss",
@@ -82,23 +82,23 @@
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
     "@microsoft/api-extractor": "^7.52.8",
-    "@mlaursen/eslint-config": "^8.0.0",
+    "@mlaursen/eslint-config": "^8.0.1",
     "@swc/cli": "^0.6.0",
-    "@swc/core": "^1.11.22",
+    "@swc/core": "^1.11.29",
     "@swc/jest": "^0.2.38",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
-    "@types/lodash": "^4.17.16",
-    "@types/node": "^22.15.18",
+    "@types/lodash": "^4.17.17",
+    "@types/node": "^22.15.29",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "chokidar": "^4.0.3",
-    "eslint": "^9.26.0",
+    "eslint": "^9.29.0",
     "filesize": "^10.1.6",
-    "glob": "11.0.2",
+    "glob": "11.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-watch-typeahead": "^2.2.2",
@@ -106,16 +106,16 @@
     "lz-string": "^1.5.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.5.3",
-    "stylelint": "^16.19.1",
+    "stylelint": "^16.20.0",
     "stylelint-config-prettier-scss": "^1.0.0",
-    "stylelint-config-recommended-scss": "^15.0.0",
+    "stylelint-config-recommended-scss": "^15.0.1",
     "stylelint-order": "^7.0.0",
-    "stylelint-scss": "^6.12.0",
-    "ts-morph": "^25.0.1",
+    "stylelint-scss": "^6.12.1",
+    "ts-morph": "^26.0.0",
     "ts-node": "^10.9.2",
-    "tsx": "^4.19.4",
+    "tsx": "^4.20.3",
     "typescript": "^5.8.3",
-    "vitest": "^3.1.3"
+    "vitest": "^3.2.3"
   },
   "peerDependencies": {
     "@jest/globals": "^29.7.0",

package/src/RootHtml.tsx

@@ -22,7 +22,7 @@ export interface RootHtmlProps extends HtmlHTMLAttributes<HTMLHtmlElement> {
    * `ref` if that is required for some reason. Using a `ref` would make your
    * root layout a client component though.
    */
-  bodyProps?: PropsWithRef<HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>;
+  bodyProps?: PropsWithRef<HTMLAttributes<HTMLBodyElement>>;
 
   /**
    * Convenience prop to replace `bodyProps={{ className: "custom-class-name" }}`.