@synerise/ds-typography 0.12.8 → 0.12.10

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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
+
+
+
+
+
 ## [0.12.8](https://github.com/synerise/synerise-design/compare/@synerise/ds-typography@0.12.7...@synerise/ds-typography@0.12.8) (2023-06-28)
 
 

package/dist/CommonElements.d.ts

@@ -1,6 +1,7 @@
 export declare const Description: import("styled-components").StyledComponent<"div", any, {
     disabled?: boolean | undefined;
 }, never>;
+export declare const EllipsisText: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ErrorText: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Label: import("styled-components").StyledComponent<"label", any, {}, never>;
 export declare const MediumText: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/CommonElements.js

@@ -8,57 +8,61 @@ export var Description = styled.div.withConfig({
 }, function (props) {
   return props.disabled ? "opacity: 0.4;" : '';
 });
+export var EllipsisText = styled.div.withConfig({
+  displayName: "CommonElements__EllipsisText",
+  componentId: "sc-102d2aw-1"
+})(["display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"]);
 export var ErrorText = styled.div.withConfig({
   displayName: "CommonElements__ErrorText",
-  componentId: "sc-102d2aw-1"
+  componentId: "sc-102d2aw-2"
 })(["color:", ";margin-bottom:4px;"], function (props) {
   return props.theme.palette['red-600'];
 });
 export var Label = styled.label.withConfig({
   displayName: "CommonElements__Label",
-  componentId: "sc-102d2aw-2"
+  componentId: "sc-102d2aw-3"
 })(["color:", ";font-weight:500;display:block;cursor:pointer;"], function (props) {
   return props.theme.palette['grey-800'];
 });
 export var MediumText = styled.span.withConfig({
   displayName: "CommonElements__MediumText",
-  componentId: "sc-102d2aw-3"
+  componentId: "sc-102d2aw-4"
 })(["", ""], function () {
   return css(["", ";"], medium);
 });
 export var SmallText = styled.span.withConfig({
   displayName: "CommonElements__SmallText",
-  componentId: "sc-102d2aw-4"
+  componentId: "sc-102d2aw-5"
 })(["", ""], function () {
   return css(["", ";"], small);
 });
 export var XSmallText = styled.span.withConfig({
   displayName: "CommonElements__XSmallText",
-  componentId: "sc-102d2aw-5"
+  componentId: "sc-102d2aw-6"
 })(["", ""], function () {
   return css(["", ";"], xsmall);
 });
 export var MediumParagraph = styled.span.withConfig({
   displayName: "CommonElements__MediumParagraph",
-  componentId: "sc-102d2aw-6"
+  componentId: "sc-102d2aw-7"
 })(["", ""], function () {
   return css(["", ";"], medium);
 });
 export var SmallParagraph = styled.span.withConfig({
   displayName: "CommonElements__SmallParagraph",
-  componentId: "sc-102d2aw-7"
+  componentId: "sc-102d2aw-8"
 })(["", ""], function () {
   return css(["", ";"], small);
 });
 export var XSmallParagraph = styled.span.withConfig({
   displayName: "CommonElements__XSmallParagraph",
-  componentId: "sc-102d2aw-8"
+  componentId: "sc-102d2aw-9"
 })(["", ""], function () {
   return css(["", ";"], xsmall);
 });
 export var H1 = styled.h1.withConfig({
   displayName: "CommonElements__H1",
-  componentId: "sc-102d2aw-9"
+  componentId: "sc-102d2aw-10"
 })(["", " ", ""], function () {
   return css(["", ";"], h700);
 }, function (props) {
@@ -66,7 +70,7 @@ export var H1 = styled.h1.withConfig({
 });
 export var H2 = styled.h2.withConfig({
   displayName: "CommonElements__H2",
-  componentId: "sc-102d2aw-10"
+  componentId: "sc-102d2aw-11"
 })(["", " ", ""], function () {
   return css(["", ";"], h600);
 }, function (props) {
@@ -74,7 +78,7 @@ export var H2 = styled.h2.withConfig({
 });
 export var H3 = styled.h3.withConfig({
   displayName: "CommonElements__H3",
-  componentId: "sc-102d2aw-11"
+  componentId: "sc-102d2aw-12"
 })(["", " ", ""], function () {
   return css(["", ";"], h500);
 }, function (props) {
@@ -82,7 +86,7 @@ export var H3 = styled.h3.withConfig({
 });
 export var H4 = styled.h4.withConfig({
   displayName: "CommonElements__H4",
-  componentId: "sc-102d2aw-12"
+  componentId: "sc-102d2aw-13"
 })(["", " ", ""], function () {
   return css(["", ";"], h400);
 }, function (props) {
@@ -90,7 +94,7 @@ export var H4 = styled.h4.withConfig({
 });
 export var H5 = styled.h5.withConfig({
   displayName: "CommonElements__H5",
-  componentId: "sc-102d2aw-13"
+  componentId: "sc-102d2aw-14"
 })(["", " ", ""], function () {
   return css(["", ";"], h300);
 }, function (props) {
@@ -98,7 +102,7 @@ export var H5 = styled.h5.withConfig({
 });
 export var H6 = styled.h6.withConfig({
   displayName: "CommonElements__H6",
-  componentId: "sc-102d2aw-14"
+  componentId: "sc-102d2aw-15"
 })(["", " ", ""], function () {
   return css(["", ";"], h200);
 }, function (props) {
@@ -106,7 +110,7 @@ export var H6 = styled.h6.withConfig({
 });
 export var H7 = styled.h6.withConfig({
   displayName: "CommonElements__H7",
-  componentId: "sc-102d2aw-15"
+  componentId: "sc-102d2aw-16"
 })(["", " ", ""], function () {
   return css(["", ";"], h100);
 }, function (props) {

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-typography",
-  "version": "0.12.8",
+  "version": "0.12.10",
   "description": "Typography UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -31,10 +31,18 @@
     "*.less"
   ],
   "types": "dist/index.d.ts",
+  "dependencies": {
+    "@synerise/ds-tooltip": "0.14.2",
+    "classnames": "2.2.6"
+  },
   "peerDependencies": {
     "@synerise/ds-core": "*",
-    "antd": "^4",
-    "react": ">=16.9.0 < 17.0.0"
+    "antd": "4.7.0",
+    "react": ">=16.9.0 < 17.0.0",
+    "styled-components": "5.0.1"
+  },
+  "devDependencies": {
+    "enzyme": "3.11.0"
   },
-  "gitHead": "948b33abd56086fc73880204892f90bd6ddc0a72"
+  "gitHead": "955a885f58b3fca4caa4f879deb147fe5b9dc6d8"
 }