@synerise/ds-typography 0.13.2 → 0.14.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.14.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-typography@0.13.3...@synerise/ds-typography@0.14.0) (2023-12-06)
+
+
+### Features
+
+* **table:** ported avatar label solution from UL ([46dfcfe](https://github.com/synerise/synerise-design/commit/46dfcfe7a557aa45aa9b2d35a406da696428f61a))
+
+
+
+
+
+## [0.13.3](https://github.com/synerise/synerise-design/compare/@synerise/ds-typography@0.13.2...@synerise/ds-typography@0.13.3) (2023-11-09)
+
+
+### Bug Fixes
+
+* **table:** avatarlabel cell renderer ([d93ca75](https://github.com/synerise/synerise-design/commit/d93ca7586633a698b6a26923d8618c104276845b))
+
+
+
+
+
 ## [0.13.2](https://github.com/synerise/synerise-design/compare/@synerise/ds-typography@0.13.1...@synerise/ds-typography@0.13.2) (2023-10-11)
 
 **Note:** Version bump only for package @synerise/ds-typography

package/dist/CommonElements.js

@@ -115,4 +115,4 @@ export var H7 = styled.h6.withConfig({
 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);
+})(["display:block;white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden;", ",", ",", ",", ",", ",", ",", "{display:inline;}", ",", ",", "{font-size:inherit;color:inherit;line-height:inherit;font-weight:inherit;}"], H1, H2, H3, H4, H5, H6, H7, MediumText, SmallText, XSmallText);

package/dist/Ellipsis.d.ts

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

package/dist/Ellipsis.js

@@ -1,23 +1,41 @@
 import React, { useRef, useEffect, useState } from 'react';
+import { debounce } from 'lodash';
 import Tooltip from '@synerise/ds-tooltip';
 import { EllipsisText } from './CommonElements';
 export var Ellipsis = function Ellipsis(_ref) {
   var tooltip = _ref.tooltip,
-      children = _ref.children;
+      children = _ref.children,
+      className = _ref.className;
   var textComponentRef = useRef(null);
 
   var _useState = useState(false),
       truncated = _useState[0],
       setTruncated = _useState[1];
 
+  var debouncedResize = useRef(debounce(function () {
+    if (textComponentRef && textComponentRef.current) {
+      setTruncated(textComponentRef.current.offsetWidth < textComponentRef.current.scrollWidth);
+    }
+  }, 100, {
+    leading: true,
+    trailing: true
+  })).current;
+  var resizeObserver = useRef(new window.ResizeObserver(debouncedResize)).current;
   useEffect(function () {
-    if (textComponentRef != null && textComponentRef.current) {
-      setTruncated((textComponentRef == null ? void 0 : textComponentRef.current.offsetWidth) < (textComponentRef == null ? void 0 : textComponentRef.current.scrollWidth));
+    if (textComponentRef.current) {
+      resizeObserver.observe(textComponentRef.current);
+      resizeObserver.observe(document.body);
     }
-  }, [children]);
+
+    return function () {
+      resizeObserver.disconnect();
+      debouncedResize.cancel();
+    };
+  }, [resizeObserver, debouncedResize]);
   return /*#__PURE__*/React.createElement(Tooltip, {
     title: truncated ? tooltip : undefined
   }, /*#__PURE__*/React.createElement(EllipsisText, {
+    className: className,
     ref: textComponentRef
   }, children));
 };

package/dist/Text.d.ts

@@ -5,6 +5,7 @@ type TextProps = {
     size?: TextSize;
     ellipsis?: EllipsisProps;
     children?: ReactNode;
+    className?: string;
 };
-export declare const Text: ({ size, children, ellipsis }: TextProps) => JSX.Element;
-export {};
+export declare const Text: ({ size, className, children, ellipsis }: TextProps) => JSX.Element;
+export default Text;

package/dist/Text.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import { MediumText, SmallText, XSmallText } from './CommonElements';
 import { Ellipsis } from './Ellipsis';
@@ -5,21 +7,25 @@ var MapSizeToComponent = {
   medium: MediumText,
   small: SmallText,
   xsmall: XSmallText
-}; // eslint-disable-next-line import/prefer-default-export
-
+};
 export var Text = function Text(_ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'medium' : _ref$size,
+      className = _ref.className,
       children = _ref.children,
       ellipsis = _ref.ellipsis;
   var Component = MapSizeToComponent[size];
+  var textClassNames = "ds-text " + (!ellipsis && className);
   var content = /*#__PURE__*/React.createElement(Component, {
-    className: "ds-text"
+    className: textClassNames
   }, children);
 
   if (ellipsis === undefined) {
     return content;
   }
 
-  return /*#__PURE__*/React.createElement(Ellipsis, ellipsis, content);
-};
+  return /*#__PURE__*/React.createElement(Ellipsis, _extends({
+    className: className
+  }, ellipsis), content);
+};
+export default Text;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-typography",
-  "version": "0.13.2",
+  "version": "0.14.0",
   "description": "Typography UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -34,7 +34,8 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@synerise/ds-tooltip": "0.14.2",
-    "classnames": "2.3.2"
+    "classnames": "2.3.2",
+    "lodash": "^4.17.20"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -45,5 +46,5 @@
   "devDependencies": {
     "enzyme": "3.11.0"
   },
-  "gitHead": "8eb4a3e304406a8dbb9258803c48952461fc5a55"
+  "gitHead": "b5c243a1f88351e9bc0185d35fc35ea3673dab89"
 }