@redis-ui/components 41.3.2 → 41.4.1

package/dist/Typography/components/Heading/Heading.types.d.ts

@@ -1,13 +1,10 @@
-import React, { HTMLAttributes } from 'react';
-import { EllipsisTooltipParams } from '../../hooks/useEllipsisTooltip';
 import { TypographyColor } from '../../Typography.types';
+import { TypographyBaseProps } from '../Base/Base.types';
 export type TypographyHeadingSize = 'XXL' | 'XL' | 'L' | 'M' | 'S' | 'XS';
 export type TypographyHeadingVariant = 'bold' | 'semiBold';
 export type TypographyHeadingComponent = 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export interface TypographyHeadingProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'>, Pick<EllipsisTooltipParams, 'tooltipOnEllipsis'> {
+export interface TypographyHeadingProps extends TypographyBaseProps {
     size?: TypographyHeadingSize;
-    ellipsis?: boolean;
-    children: React.ReactNode;
     color?: TypographyColor;
     variant?: TypographyHeadingVariant;
     component?: TypographyHeadingComponent;

package/dist/Typography/components/Heading/Heading.utils.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const level = {
+  XXL: "1",
+  XL: "2",
+  L: "3",
+  M: "4",
+  S: "5",
+  XS: "6"
+};
+const getHeadingLevel = (size, component) => typeof component === "string" && !Number.isNaN(+component[1]) && +component[1] && component[1] || level[size];
+exports.getHeadingLevel = getHeadingLevel;

package/dist/Typography/components/Heading/Heading.utils.d.ts

@@ -0,0 +1,2 @@
+import { TypographyHeadingComponent, TypographyHeadingSize } from './Heading.types';
+export declare const getHeadingLevel: (size: TypographyHeadingSize, component?: TypographyHeadingComponent) => string;

package/dist/Typography/components/Heading/Heading.utils.js

@@ -0,0 +1,12 @@
+const level = {
+  XXL: "1",
+  XL: "2",
+  L: "3",
+  M: "4",
+  S: "5",
+  XS: "6"
+};
+const getHeadingLevel = (size, component) => typeof component === "string" && !Number.isNaN(+component[1]) && +component[1] && component[1] || level[size];
+export {
+  getHeadingLevel
+};

package/dist/Typography/hooks/useEllipsisTooltip.cjs

@@ -1,17 +1,19 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
+const index = require("../../node_modules/@radix-ui/react-compose-refs/dist/index.cjs");
 const useEllipsisTooltip = ({
   tooltipOnEllipsis,
   onMouseEnter,
   onMouseLeave,
   title
-}) => {
+}, ref) => {
   const [tooltip, setTooltip] = React.useState();
-  const ref = React.useRef(null);
+  const innerRef = React.useRef(null);
+  const comboRef = index.useComposedRefs(innerRef, ref);
   const handleMouseEnter = React.useCallback((e) => {
     onMouseEnter == null ? void 0 : onMouseEnter(e);
-    const target = ref.current;
+    const target = innerRef.current;
     if (tooltipOnEllipsis && target && target.offsetWidth < target.scrollWidth) {
       setTooltip(typeof tooltipOnEllipsis === "string" ? tooltipOnEllipsis : target.innerText);
     }
@@ -21,11 +23,12 @@ const useEllipsisTooltip = ({
     onMouseLeave == null ? void 0 : onMouseLeave(e);
   }, [onMouseLeave]);
   return !tooltipOnEllipsis || title ? {
+    ref: comboRef,
     title,
     onMouseEnter,
     onMouseLeave
   } : {
-    ref,
+    ref: comboRef,
     title: tooltip,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave

package/dist/Typography/hooks/useEllipsisTooltip.d.ts

@@ -1,15 +1,10 @@
-import { HTMLAttributes, MouseEventHandler } from 'react';
+import { HTMLAttributes, MouseEventHandler, Ref } from 'react';
 export type EllipsisTooltipParams<T extends HTMLElement = HTMLElement> = {
     tooltipOnEllipsis?: boolean | string | undefined;
 } & Pick<HTMLAttributes<T>, 'onMouseEnter' | 'onMouseLeave' | 'title'>;
-export declare const useEllipsisTooltip: <T extends HTMLElement = HTMLElement>({ tooltipOnEllipsis, onMouseEnter, onMouseLeave, title }: EllipsisTooltipParams<T>) => {
+export declare const useEllipsisTooltip: <T extends HTMLElement = HTMLElement>({ tooltipOnEllipsis, onMouseEnter, onMouseLeave, title }: EllipsisTooltipParams<T>, ref?: Ref<T> | undefined) => {
+    readonly ref: (node: T) => void;
     readonly title: string | undefined;
     readonly onMouseEnter: MouseEventHandler<T> | undefined;
     readonly onMouseLeave: MouseEventHandler<T> | undefined;
-    readonly ref?: undefined;
-} | {
-    readonly ref: import("react").RefObject<T>;
-    readonly title: string | undefined;
-    readonly onMouseEnter: MouseEventHandler<T>;
-    readonly onMouseLeave: MouseEventHandler<T>;
 };

package/dist/Typography/hooks/useEllipsisTooltip.js

@@ -1,15 +1,17 @@
 import { useState, useRef, useCallback } from "react";
+import { useComposedRefs } from "../../node_modules/@radix-ui/react-compose-refs/dist/index.js";
 const useEllipsisTooltip = ({
   tooltipOnEllipsis,
   onMouseEnter,
   onMouseLeave,
   title
-}) => {
+}, ref) => {
   const [tooltip, setTooltip] = useState();
-  const ref = useRef(null);
+  const innerRef = useRef(null);
+  const comboRef = useComposedRefs(innerRef, ref);
   const handleMouseEnter = useCallback((e) => {
     onMouseEnter == null ? void 0 : onMouseEnter(e);
-    const target = ref.current;
+    const target = innerRef.current;
     if (tooltipOnEllipsis && target && target.offsetWidth < target.scrollWidth) {
       setTooltip(typeof tooltipOnEllipsis === "string" ? tooltipOnEllipsis : target.innerText);
     }
@@ -19,11 +21,12 @@ const useEllipsisTooltip = ({
     onMouseLeave == null ? void 0 : onMouseLeave(e);
   }, [onMouseLeave]);
   return !tooltipOnEllipsis || title ? {
+    ref: comboRef,
     title,
     onMouseEnter,
     onMouseLeave
   } : {
-    ref,
+    ref: comboRef,
     title: tooltip,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave

package/dist/Typography/index.d.ts

@@ -3,4 +3,5 @@ export * from './hooks/useEllipsisTooltip';
 export * from './components/Body/Body.types';
 export * from './components/Heading/Heading.types';
 export * from './components/Code/Code.types';
+export * from './components/Base/Base.types';
 export * from './Typography.types';

package/dist/packages/icons/dist/multicolor/LoaderLarge.cjs

@@ -13,7 +13,7 @@ const SvgLoaderLarge = (props) => {
   const {
     name: themeName
   } = redisUiStyles.useTheme();
-  const Comp = icons[themeName] || icons.default;
+  const Comp = icons[themeName.replace(/-?[0-9]/, "")] || icons.default;
   return jsxRuntime.j.jsx(Comp, {
     ...props
   });

package/dist/packages/icons/dist/multicolor/LoaderLarge.js

@@ -11,7 +11,7 @@ const SvgLoaderLarge = (props) => {
   const {
     name: themeName
   } = useTheme();
-  const Comp = icons[themeName] || icons.default;
+  const Comp = icons[themeName.replace(/-?[0-9]/, "")] || icons.default;
   return jsxRuntimeExports.jsx(Comp, {
     ...props
   });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@redis-ui/components",
   "license": "UNLICENSED",
-  "version": "41.3.2",
+  "version": "41.4.1",
   "type": "module",
   "sideEffects": false,
   "publishConfig": {
@@ -27,8 +27,8 @@
     "test": "vitest"
   },
   "peerDependencies": {
-    "@redis-ui/icons": "^6.3.12",
-    "@redis-ui/styles": "^13.1.7",
+    "@redis-ui/icons": "^6.4.0",
+    "@redis-ui/styles": "^13.3.2",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "styled-components": "^5.0.0"