@orfium/ictinus 4.6.1 → 4.7.0

package/dist/components/Table/Table.d.ts

@@ -3,6 +3,8 @@ import { ExtendedColumn, Sort, SortingOrder } from './types';
 export declare type ContentComponent<T> = (data: Cell<T>) => React.Component | JSX.Element;
 export declare type Cell<T> = {
     content: number | string | ContentComponent<T>;
+    tooltipContent?: string;
+    hasTruncatedTooltip?: boolean;
     colSpan?: number;
     type?: 'financial' | 'normal';
     align?: 'left' | 'right';

package/dist/components/Table/components/RenderRowOrNestedRow/RenderRowOrNestedRow.js

@@ -86,16 +86,20 @@ var RenderRowWithCells = /*#__PURE__*/React.memo(function (_ref) {
     onClick: tChange
   }))), (_row$cells2 = row.cells) == null ? void 0 : _row$cells2.map(function (_ref2, index) {
     var content = _ref2.content,
+        tooltipContent = _ref2.tooltipContent,
+        _ref2$hasTruncatedToo = _ref2.hasTruncatedTooltip,
+        hasTruncatedTooltip = _ref2$hasTruncatedToo === void 0 ? true : _ref2$hasTruncatedToo,
         colSpan = _ref2.colSpan,
         cellType = _ref2.type,
         align = _ref2.align;
     return (0, _react2.jsx)(_ContentCell["default"], {
       key: row.id + "-" + index,
       cellCounter: index,
+      columnWidth: columnsWithWidth[index],
       columns: columns,
+      tooltipContent: hasTruncatedTooltip ? (0, _helpers.isComponentFunctionType)(content) ? tooltipContent : tooltipContent != null ? tooltipContent : content.toString() : undefined,
       padded: padded,
       colSpan: colSpan,
-      columnWidth: columnsWithWidth[index],
       content: content,
       cellType: cellType,
       rowType: type,

package/dist/components/Table/components/RenderRowOrNestedRow/components/ContentCell/ContentCell.d.ts

@@ -3,6 +3,7 @@ import { ContentComponent, TableType } from '../../../../Table';
 declare type Props = {
     columns: string[];
     padded: boolean;
+    tooltipContent?: string;
     columnWidth?: number;
     content: number | string | ContentComponent<any>;
     colSpan?: number;

package/dist/components/Table/components/RenderRowOrNestedRow/components/ContentCell/ContentCell.js

@@ -7,6 +7,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _helpers = require("../../../../../../utils/helpers");
 
+var _TruncatedContent = _interopRequireDefault(require("../../../../../TruncatedContent"));
+
 var _TableCell = _interopRequireDefault(require("../../../TableCell"));
 
 var _ContentCell = require("./ContentCell.style");
@@ -19,6 +21,7 @@ var ContentCell = function ContentCell(_ref) {
   var columns = _ref.columns,
       padded = _ref.padded,
       columnWidth = _ref.columnWidth,
+      tooltipContent = _ref.tooltipContent,
       content = _ref.content,
       colSpan = _ref.colSpan,
       rowType = _ref.rowType,
@@ -40,12 +43,16 @@ var ContentCell = function ContentCell(_ref) {
     index: index
   }, rowType === 'nested-header' && (0, _react2.jsx)("div", {
     css: (0, _ContentCell.nestedHeaderStyle)()
-  }, columns[cellCounter]), (0, _helpers.isComponentFunctionType)(content) ? content({
+  }, columns[cellCounter]), (0, _react2.jsx)(_TruncatedContent["default"], {
+    placement: 'bottom',
+    shouldAlwaysShow: (0, _helpers.isComponentFunctionType)(content) && !!tooltipContent,
+    tooltipContent: tooltipContent
+  }, (0, _helpers.isComponentFunctionType)(content) ? content({
     content: content,
     colSpan: colSpan
   }) : (0, _react2.jsx)("span", {
     "data-column": columns[cellCounter]
-  }, content));
+  }, content)));
 };
 
 var _default = /*#__PURE__*/_react["default"].memo(ContentCell);

package/dist/components/TruncatedContent/TruncatedContent.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare type Props = {
+    /** The content of the tooltip */
+    tooltipContent: string | undefined;
+    /** Flag for overriding other settings to always show the tooltip */
+    shouldAlwaysShow?: boolean;
+    /** The placement of the tooltip */
+    placement?: 'top' | 'bottom' | 'right' | 'left';
+};
+declare const TruncatedContent: React.FC<Props>;
+export default TruncatedContent;

package/dist/components/TruncatedContent/TruncatedContent.js

@@ -0,0 +1,69 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _TruncatedContent = require("./TruncatedContent.style");
+
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+
+var _react2 = require("@emotion/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var TruncatedContent = function TruncatedContent(_ref) {
+  var children = _ref.children,
+      _ref$shouldAlwaysShow = _ref.shouldAlwaysShow,
+      shouldAlwaysShow = _ref$shouldAlwaysShow === void 0 ? false : _ref$shouldAlwaysShow,
+      tooltipContent = _ref.tooltipContent,
+      _ref$placement = _ref.placement,
+      placement = _ref$placement === void 0 ? 'bottom' : _ref$placement;
+
+  var _useState = (0, _react.useState)(false),
+      isHovered = _useState[0],
+      setIsHovered = _useState[1];
+
+  var targetRef = (0, _react.useRef)(null);
+  var target = targetRef.current;
+  var handleMouseEnter = (0, _react.useCallback)(function () {
+    setIsHovered(true);
+  }, []);
+  var handleMouseLeave = (0, _react.useCallback)(function () {
+    setIsHovered(false);
+  }, []);
+  var isTruncated = (0, _react.useMemo)(function () {
+    return !!target && target.scrollWidth > target.offsetWidth;
+  }, [target]);
+  var showTooltip = (0, _react.useCallback)(function (tooltipContent, isHovered, isTruncated, shouldAlwaysShow) {
+    if (tooltipContent === undefined) {
+      return false;
+    }
+
+    if (shouldAlwaysShow) {
+      return true;
+    }
+
+    return isHovered && isTruncated;
+  }, []);
+  return showTooltip(tooltipContent, isHovered, isTruncated, shouldAlwaysShow) ? (0, _react2.jsx)(_Tooltip["default"], {
+    placement: placement,
+    content: tooltipContent
+  }, (0, _react2.jsx)(_TruncatedContent.TruncationDiv, {
+    ref: targetRef,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, children)) : (0, _react2.jsx)(_TruncatedContent.TruncationDiv, {
+    ref: targetRef,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, children);
+};
+
+var _default = TruncatedContent;
+exports["default"] = _default;

package/dist/components/TruncatedContent/TruncatedContent.style.d.ts

@@ -0,0 +1,4 @@
+export declare const TruncationDiv: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/TruncatedContent/TruncatedContent.style.js

@@ -0,0 +1,26 @@
+"use strict";
+
+exports.__esModule = true;
+exports.TruncationDiv = void 0;
+
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var TruncationDiv = (0, _base["default"])("div", process.env.NODE_ENV === "production" ? {
+  target: "ep8j7z50"
+} : {
+  target: "ep8j7z50",
+  label: "TruncationDiv"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1h52dri",
+  styles: "overflow:hidden;text-overflow:ellipsis;white-space:nowrap"
+} : {
+  name: "1h52dri",
+  styles: "overflow:hidden;text-overflow:ellipsis;white-space:nowrap",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1RydW5jYXRlZENvbnRlbnQvVHJ1bmNhdGVkQ29udGVudC5zdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRXVDIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1RydW5jYXRlZENvbnRlbnQvVHJ1bmNhdGVkQ29udGVudC5zdHlsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBjb25zdCBUcnVuY2F0aW9uRGl2ID0gc3R5bGVkLmRpdmBcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG5gO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+exports.TruncationDiv = TruncationDiv;

package/dist/components/TruncatedContent/index.d.ts

@@ -0,0 +1 @@
+export { default } from './TruncatedContent';

package/dist/components/TruncatedContent/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _TruncatedContent = _interopRequireDefault(require("./TruncatedContent"));
+
+exports["default"] = _TruncatedContent["default"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/dist/index.d.ts

@@ -52,5 +52,6 @@ export { default as useTheme } from './hooks/useTheme';
 export { default as useBreakpoints } from './hooks/useBreakpoints';
 export { default as useEscape } from './hooks/useEscape';
 export { default as Filter } from './components/Filter';
+export { default as TruncatedContent } from './components/TruncatedContent';
 export { default as themeConfig } from './theme';
 export { themeFunctions, palette, spacing, typography, elevation, overrides, queriesSizes, };

package/dist/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.typography = exports.spacing = exports.palette = exports.overrides = exports.themeFunctions = exports.elevation = exports.themeConfig = exports.Filter = exports.useEscape = exports.useBreakpoints = exports.useTheme = exports.TopNavBar = exports.Tooltip = exports.Toast = exports.ThemeProvider = exports.TextArea = exports.SearchField = exports.TextField = exports.Table = exports.Select = exports.RadioGroup = exports.Radio = exports.Pagination = exports.Snackbar = exports.Banner = exports.NotificationVisual = exports.NotificationsContainer = exports.InlineNotification = exports.Modal = exports.Menu = exports.Loader = exports.List = exports.Label = exports.IconButton = exports.Icon = exports.ExpandCollapse = exports.Drawer = exports.DatePicker = exports.Chip = exports.CheckBox = exports.DonutChart = exports.BarChart = exports.LineChart = exports.Card = exports.Button = exports.Breadcrumb = exports.Avatar = void 0;
+exports.typography = exports.spacing = exports.palette = exports.overrides = exports.themeFunctions = exports.elevation = exports.themeConfig = exports.TruncatedContent = exports.Filter = exports.useEscape = exports.useBreakpoints = exports.useTheme = exports.TopNavBar = exports.Tooltip = exports.Toast = exports.ThemeProvider = exports.TextArea = exports.SearchField = exports.TextField = exports.Table = exports.Select = exports.RadioGroup = exports.Radio = exports.Pagination = exports.Snackbar = exports.Banner = exports.NotificationVisual = exports.NotificationsContainer = exports.InlineNotification = exports.Modal = exports.Menu = exports.Loader = exports.List = exports.Label = exports.IconButton = exports.Icon = exports.ExpandCollapse = exports.Drawer = exports.DatePicker = exports.Chip = exports.CheckBox = exports.DonutChart = exports.BarChart = exports.LineChart = exports.Card = exports.Button = exports.Breadcrumb = exports.Avatar = void 0;
 
 var _useBreakpoints = _interopRequireWildcard(require("./hooks/useBreakpoints"));
 
@@ -188,6 +188,10 @@ var _Filter = _interopRequireDefault(require("./components/Filter"));
 
 exports.Filter = _Filter["default"];
 
+var _TruncatedContent = _interopRequireDefault(require("./components/TruncatedContent"));
+
+exports.TruncatedContent = _TruncatedContent["default"];
+
 var _theme = _interopRequireDefault(require("./theme"));
 
 exports.themeConfig = _theme["default"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orfium/ictinus",
-  "version": "4.6.1",
+  "version": "4.7.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",