@redis-ui/components 41.3.7 → 41.11.0

package/dist/Typography/components/Code/Code.style.d.ts

@@ -3,7 +3,6 @@ import { TypographyCodeProps } from './Code.types';
 export interface MapProps extends HTMLAttributes<HTMLElement> {
     $size?: TypographyCodeProps['size'];
     $variant?: TypographyCodeProps['variant'];
-    $ellipsis?: boolean;
     $color?: TypographyCodeProps['color'];
 }
-export declare const Code: import("styled-components").StyledComponent<"code", any, MapProps, never>;
+export declare const TypographyCode: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../..").TypographyBaseProps & import("react").RefAttributes<HTMLElement>>, any, MapProps, never>;

package/dist/Typography/components/Code/Code.style.js

@@ -1,9 +1,9 @@
 import _styled, { css } from "styled-components";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
+import TypographyBase from "../Base/Base.js";
 const useCodeStyles = ({
-  $size = "M",
+  $size = "L",
   $variant = "regular",
-  $ellipsis,
   $color
 } = {}) => {
   const theme = useTheme();
@@ -13,17 +13,12 @@ const useCodeStyles = ({
     font-size: ${codeTheme.fontSizes[$size]};
     font-weight: ${codeTheme.fontWeight[$variant]};
     color: ${$color && theme.components.typography.colors[$color] || "unset"};
-    ${$ellipsis && css`
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    `}
   `;
 };
-const Code = _styled.code.withConfig({
-  displayName: "Codestyle__Code",
+const TypographyCode = _styled(TypographyBase).withConfig({
+  displayName: "Codestyle__TypographyCode",
   componentId: "RedisUI__sc-1babmep-0"
 })(["", ""], useCodeStyles);
 export {
-  Code
+  TypographyCode
 };

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

@@ -1,12 +1,9 @@
-import React from 'react';
-import { EllipsisTooltipParams } from '../../hooks/useEllipsisTooltip';
 import { TypographyColor } from '../../Typography.types';
+import { TypographyBaseProps } from '../Base/Base.types';
 export type TypographyCodeSize = 'S' | 'M' | 'L';
 export type TypographyCodeVariant = 'regular' | 'semiBold';
-export interface TypographyCodeProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'color'>, Pick<EllipsisTooltipParams, 'tooltipOnEllipsis'> {
-    children: React.ReactNode;
+export interface TypographyCodeProps extends Omit<TypographyBaseProps, 'component'> {
     size?: TypographyCodeSize;
     variant?: TypographyCodeVariant;
-    ellipsis?: boolean;
     color?: TypographyColor;
 }

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

@@ -1,33 +1,24 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
-const useEllipsisTooltip = require("../../hooks/useEllipsisTooltip.cjs");
+const React = require("react");
+const Heading_utils = require("./Heading.utils.cjs");
 const Heading_style = require("./Heading.style.cjs");
-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];
-const Heading = ({
+const TypographyHeading = React.forwardRef(({
   size = "XL",
-  ellipsis = false,
   color,
   variant,
   component = "div",
   ...restProps
-}) => jsxRuntime.jsxRuntimeExports.jsx(Heading_style.Heading, {
-  as: component,
-  "$ellipsis": ellipsis,
+}, ref) => jsxRuntime.jsxRuntimeExports.jsx(Heading_style.TypographyHeading, {
+  ref,
+  component,
   "$size": size,
   "$color": color,
   "$variant": variant,
   "data-role": "heading",
-  "data-heading-level": getHeadingLevel(size, component),
-  ...restProps,
-  ...useEllipsisTooltip.useEllipsisTooltip(restProps)
-});
-exports.default = Heading;
+  "data-heading-level": Heading_utils.getHeadingLevel(size, component),
+  ...restProps
+}));
+TypographyHeading.displayName = "TypographyHeading";
+exports.default = TypographyHeading;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TypographyHeadingProps } from './Heading.types';
-declare const Heading: ({ size, ellipsis, color, variant, component, ...restProps }: TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element;
-export default Heading;
+declare const TypographyHeading: import("react").ForwardRefExoticComponent<TypographyHeadingProps & import("react").RefAttributes<HTMLElement>>;
+export default TypographyHeading;

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

@@ -1,33 +1,24 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
-import { useEllipsisTooltip } from "../../hooks/useEllipsisTooltip.js";
-import { Heading as Heading$1 } from "./Heading.style.js";
-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];
-const Heading = ({
+import { forwardRef } from "react";
+import { getHeadingLevel } from "./Heading.utils.js";
+import { TypographyHeading as TypographyHeading$1 } from "./Heading.style.js";
+const TypographyHeading = forwardRef(({
   size = "XL",
-  ellipsis = false,
   color,
   variant,
   component = "div",
   ...restProps
-}) => jsxRuntimeExports.jsx(Heading$1, {
-  as: component,
-  "$ellipsis": ellipsis,
+}, ref) => jsxRuntimeExports.jsx(TypographyHeading$1, {
+  ref,
+  component,
   "$size": size,
   "$color": color,
   "$variant": variant,
   "data-role": "heading",
   "data-heading-level": getHeadingLevel(size, component),
-  ...restProps,
-  ...useEllipsisTooltip(restProps)
-});
+  ...restProps
+}));
+TypographyHeading.displayName = "TypographyHeading";
 export {
-  Heading as default
+  TypographyHeading as default
 };

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

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const Base = require("../Base/Base.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const Heading = _styled__default.default.span.withConfig({
-  displayName: "Headingstyle__Heading",
+const TypographyHeading = _styled__default.default(Base.default).withConfig({
+  displayName: "Headingstyle__TypographyHeading",
   componentId: "RedisUI__sc-14rmj7o-0"
 })(["line-height:1.2;margin-block:0;", ""], ({
   $size,
-  $ellipsis,
   $color,
   $variant
 }) => {
@@ -22,12 +22,6 @@ const Heading = _styled__default.default.span.withConfig({
       font-family: ${headingTheme.fontFamily};
       margin: ${sizeTheme.margin || 0};
       color: ${$color && theme.components.typography.colors[$color] || "unset"};
-
-      ${$ellipsis && _styled.css`
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      `}
     `;
 });
-exports.Heading = Heading;
+exports.TypographyHeading = TypographyHeading;

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

@@ -1,8 +1,8 @@
+/// <reference types="react" />
 import { TypographyHeadingSize, TypographyHeadingVariant } from './Heading.types';
 import { TypographyColor } from '../../Typography.types';
-export declare const Heading: import("styled-components").StyledComponent<"span", any, {
+export declare const TypographyHeading: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../..").TypographyBaseProps & import("react").RefAttributes<HTMLElement>>, any, {
     $size: TypographyHeadingSize;
-    $ellipsis: boolean;
     $color?: TypographyColor | undefined;
     $variant?: TypographyHeadingVariant | undefined;
 }, never>;

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

@@ -1,11 +1,11 @@
 import _styled, { css } from "styled-components";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
-const Heading = _styled.span.withConfig({
-  displayName: "Headingstyle__Heading",
+import TypographyBase from "../Base/Base.js";
+const TypographyHeading = _styled(TypographyBase).withConfig({
+  displayName: "Headingstyle__TypographyHeading",
   componentId: "RedisUI__sc-14rmj7o-0"
 })(["line-height:1.2;margin-block:0;", ""], ({
   $size,
-  $ellipsis,
   $color,
   $variant
 }) => {
@@ -18,14 +18,8 @@ const Heading = _styled.span.withConfig({
       font-family: ${headingTheme.fontFamily};
       margin: ${sizeTheme.margin || 0};
       color: ${$color && theme.components.typography.colors[$color] || "unset"};
-
-      ${$ellipsis && css`
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      `}
     `;
 });
 export {
-  Heading
+  TypographyHeading
 };

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';