@synerise/ds-typography 0.12.9 → 0.13.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.13.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-typography@0.12.10...@synerise/ds-typography@0.13.0) (2023-09-26)
+
+
+### Features
+
+* **typography:** ellipsis with conditional tooltip ([4448c30](https://github.com/synerise/synerise-design/commit/4448c304837bf8a04d5009ffcb47f67421003738))
+
+
+
+
+
+## [0.12.10](https://github.com/synerise/synerise-design/compare/@synerise/ds-typography@0.12.9...@synerise/ds-typography@0.12.10) (2023-09-08)
+
+
+### Bug Fixes
+
+* **table:** virtual table wrapping issue fixed ([4fcac9d](https://github.com/synerise/synerise-design/commit/4fcac9da76b0543e26e9e27a92ffc994d297108b))
+
+
+
+
+
 ## [0.12.9](https://github.com/synerise/synerise-design/compare/@synerise/ds-typography@0.12.8...@synerise/ds-typography@0.12.9) (2023-09-05)
 
 **Note:** Version bump only for package @synerise/ds-typography

package/dist/CommonElements.d.ts

@@ -30,3 +30,4 @@ export declare const H6: import("styled-components").StyledComponent<"h6", any,
 export declare const H7: import("styled-components").StyledComponent<"h6", any, {
     withoutMargin: boolean;
 }, never>;
+export declare const EllipsisText: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/CommonElements.js

@@ -111,4 +111,8 @@ export var H7 = styled.h6.withConfig({
   return css(["", ";"], h100);
 }, function (props) {
   return props.withoutMargin && css(["margin-bottom:0;"]);
-});
+});
+export var EllipsisText = styled.div.withConfig({
+  displayName: "CommonElements__EllipsisText",
+  componentId: "sc-102d2aw-16"
+})(["display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;", ",", ",", ",", ",", ",", ",", "{display:inline;}"], H1, H2, H3, H4, H5, H6, H7);

package/dist/Ellipsis.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export declare type EllipsisProps = {
+    tooltip?: ReactNode;
+    children?: ReactNode;
+};
+export declare const Ellipsis: ({ tooltip, children }: EllipsisProps) => JSX.Element;

package/dist/Ellipsis.js

@@ -0,0 +1,23 @@
+import React, { useRef, useEffect, useState } from 'react';
+import Tooltip from '@synerise/ds-tooltip';
+import { EllipsisText } from './CommonElements';
+export var Ellipsis = function Ellipsis(_ref) {
+  var tooltip = _ref.tooltip,
+      children = _ref.children;
+  var textComponentRef = useRef(null);
+
+  var _useState = useState(false),
+      truncated = _useState[0],
+      setTruncated = _useState[1];
+
+  useEffect(function () {
+    if (textComponentRef != null && textComponentRef.current) {
+      setTruncated((textComponentRef == null ? void 0 : textComponentRef.current.offsetWidth) < (textComponentRef == null ? void 0 : textComponentRef.current.scrollWidth));
+    }
+  }, [children]);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: truncated ? tooltip : undefined
+  }, /*#__PURE__*/React.createElement(EllipsisText, {
+    ref: textComponentRef
+  }, children));
+};

package/dist/Text.d.ts

@@ -1,7 +1,10 @@
-import * as React from 'react';
+import { ReactNode } from 'react';
+import { EllipsisProps } from './Ellipsis';
 export declare type TextSize = 'medium' | 'small' | 'xsmall';
 declare type TextProps = {
     size?: TextSize;
+    ellipsis?: EllipsisProps;
+    children?: ReactNode;
 };
-export declare const Text: React.FC<TextProps>;
+export declare const Text: ({ size, children, ellipsis }: TextProps) => JSX.Element;
 export {};

package/dist/Text.js

@@ -1,5 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 import { MediumText, SmallText, XSmallText } from './CommonElements';
+import { Ellipsis } from './Ellipsis';
 var MapSizeToComponent = {
   medium: MediumText,
   small: SmallText,
@@ -9,9 +10,16 @@ var MapSizeToComponent = {
 export var Text = function Text(_ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'medium' : _ref$size,
-      children = _ref.children;
+      children = _ref.children,
+      ellipsis = _ref.ellipsis;
   var Component = MapSizeToComponent[size];
-  return /*#__PURE__*/React.createElement(Component, {
+  var content = /*#__PURE__*/React.createElement(Component, {
     className: "ds-text"
   }, children);
+
+  if (ellipsis === undefined) {
+    return content;
+  }
+
+  return /*#__PURE__*/React.createElement(Ellipsis, ellipsis, content);
 };

package/dist/Title.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { Props } from './Title.types';
-declare const Title: React.FC<Props>;
+declare const Title: ({ level, withoutMargin, children, className, ellipsis }: Props) => JSX.Element;
 export default Title;

package/dist/Title.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { H1, H2, H3, H4, H5, H6, H7 } from './CommonElements';
+import { Ellipsis } from './Ellipsis';
 var StyledElements = {
   1: H1,
   2: H2,
@@ -16,15 +17,20 @@ var Title = function Title(_ref) {
       level = _ref$level === void 0 ? 1 : _ref$level,
       withoutMargin = _ref.withoutMargin,
       children = _ref.children,
-      className = _ref.className;
-  var TitleElement = React.useMemo(function () {
-    return StyledElements[level];
-  }, [level]);
+      className = _ref.className,
+      ellipsis = _ref.ellipsis;
+  var TitleElement = StyledElements[level];
   var elementClassName = classNames('ds-title', className);
-  return /*#__PURE__*/React.createElement(TitleElement, {
+  var content = /*#__PURE__*/React.createElement(TitleElement, {
     className: elementClassName,
     withoutMargin: Boolean(withoutMargin)
   }, children);
+
+  if (ellipsis === undefined) {
+    return content;
+  }
+
+  return /*#__PURE__*/React.createElement(Ellipsis, ellipsis, content);
 };
 
 export default Title;

package/dist/Title.types.d.ts

@@ -1,5 +1,7 @@
 import { TitleProps } from 'antd/es/typography/Title';
-export interface Props extends Omit<TitleProps, 'level'> {
+import type { EllipsisProps } from './Ellipsis';
+export interface Props extends Omit<TitleProps, 'level' | 'ellipsis'> {
     level: 1 | 2 | 3 | 4 | 5 | 6 | 7;
     withoutMargin?: boolean;
+    ellipsis?: EllipsisProps;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-typography",
-  "version": "0.12.9",
+  "version": "0.13.0",
   "description": "Typography UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -32,6 +32,7 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
+    "@synerise/ds-tooltip": "0.14.2",
     "classnames": "2.2.6"
   },
   "peerDependencies": {
@@ -43,5 +44,5 @@
   "devDependencies": {
     "enzyme": "3.11.0"
   },
-  "gitHead": "a2b1a3a78d87edfdbe97ae2f66573f4736f30e8b"
+  "gitHead": "f1f520c4c5ef9f90bacb5d5e0b2e778ceb8fdf79"
 }