@spaced-out/ui-design-system 0.1.72 → 0.1.74

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.74](https://github.com/spaced-out/ui-design-system/compare/v0.1.73...v0.1.74) (2024-01-04)
+
+
+### Bug Fixes
+
+* removed width of tablist container story ([caadaf6](https://github.com/spaced-out/ui-design-system/commit/caadaf69dfbc3c16598192719473d5b06cf8ae65))
+* support window resize for tablist ([#156](https://github.com/spaced-out/ui-design-system/issues/156)) ([8c2990a](https://github.com/spaced-out/ui-design-system/commit/8c2990a3e862ebac43a75cc026754584260c6aaa))
+
+### [0.1.73](https://github.com/spaced-out/ui-design-system/compare/v0.1.72...v0.1.73) (2024-01-02)
+
+
+### Features
+
+* ➕ storybook upgraded ([b6164b0](https://github.com/spaced-out/ui-design-system/commit/b6164b06193a6daff1eb0cdf24de0f991b87f584))
+* 🎉 🆕 auto truncation with tooltip component ([15dfd7f](https://github.com/spaced-out/ui-design-system/commit/15dfd7fd1f63abba99cd4882ec075294e42dc1c8))
+
 ### [0.1.72](https://github.com/spaced-out/ui-design-system/compare/v0.1.71...v0.1.72) (2023-12-15)
 
 

package/lib/components/Tabs/TabList/TabList.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TabList = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _useWindowSize = require("../../../hooks/useWindowSize/useWindowSize");
 var _size = require("../../../styles/variables/_size");
 var _space = require("../../../styles/variables/_space");
 var _classify = require("../../../utils/classify");
@@ -25,6 +26,9 @@ const TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   } = _ref;
   const ref = React.useRef(null);
   React.useImperativeHandle(forwardRef, () => ref.current);
+  const {
+    width
+  } = (0, _useWindowSize.useWindowSize)();
   const [containerWidth, setContainerWidth] = React.useState(0);
   const childrenWithProps = () => {
     const childrenArray = React.Children.toArray(children);
@@ -113,7 +117,8 @@ const TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
       const availableContainerWidth = ref.current.offsetWidth - (parseInt(_size.size36) + parseInt(_space.spaceMedium));
       setContainerWidth(availableContainerWidth);
     }
-  }, [ref.current]);
+    // it depends on width of the screen as ref.current.offsetWidth will not provide the events when changed.
+  }, [ref.current, width]);
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     "data-testid": "Tabs",

package/lib/components/Tabs/TabList/TabList.js.flow

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 
+import {useWindowSize} from '../../../hooks/useWindowSize/useWindowSize';
 import {size36, size100} from '../../../styles/variables/_size';
 import {spaceMedium} from '../../../styles/variables/_space';
 import {classify} from '../../../utils/classify';
@@ -37,6 +38,7 @@ export const TabList: React$AbstractComponent<TabListProps, HTMLDivElement> =
     ): React.Node => {
       const ref = React.useRef(null);
       React.useImperativeHandle(forwardRef, () => ref.current);
+      const {width} = useWindowSize();
 
       const [containerWidth, setContainerWidth] = React.useState(0);
 
@@ -132,7 +134,8 @@ export const TabList: React$AbstractComponent<TabListProps, HTMLDivElement> =
             (parseInt(size36) + parseInt(spaceMedium));
           setContainerWidth(availableContainerWidth);
         }
-      }, [ref.current]);
+        // it depends on width of the screen as ref.current.offsetWidth will not provide the events when changed.
+      }, [ref.current, width]);
 
       return (
         <div

package/lib/components/TruncatedTextWithTooltip/TruncatedTextWithTooltip.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TruncatedTextWithTooltip = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _size = require("../../styles/variables/_size");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Tooltip = require("../Tooltip");
+var _TruncatedTextWithTooltipModule = _interopRequireDefault(require("./TruncatedTextWithTooltip.module.css"));
+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 (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; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+const TruncatedTextWithTooltip = _ref => {
+  let {
+    classNames,
+    children,
+    tooltip,
+    wrapText = false,
+    ...props
+  } = _ref;
+  const [showMouseTip, setShowMouseTip] = React.useState(false);
+  const truncatedRef = React.useRef();
+  const checkWidths = React.useMemo(() => (0, _debounce.default)(() => {
+    const span = truncatedRef.current;
+    if (span) {
+      setShowMouseTip(span.offsetWidth < span.scrollWidth);
+    }
+  }, 200), []);
+
+  // Running only on mount and unmount
+  React.useEffect(() => {
+    const span = truncatedRef.current;
+    if (span) {
+      // Note(Nishant): This is a fix for the issue where the parent width is not set
+      // explicitly by the calling component, for truncation to work the parent wrapper should
+      // have a defined width. For cases where width is not set the component would set the
+      // width of the parent to 100%(sizeFluid) for the auto truncation to kick in
+      const parent = span.parentNode;
+      if (parent && parent instanceof HTMLElement) {
+        const computedStyles = window.getComputedStyle(parent);
+        const computedWidth = computedStyles.getPropertyValue('width');
+        const clientWidth = parent.clientWidth;
+        if (computedWidth !== `${clientWidth}px`) {
+          // Set the parent width to 100% if not explicitly set
+          parent.style.width = _size.sizeFluid;
+        }
+      }
+    }
+    window.addEventListener('resize', checkWidths);
+    return () => {
+      window.removeEventListener('resize', checkWidths);
+    };
+  }, [checkWidths]);
+  React.useEffect(() => {
+    checkWidths();
+  }, [children]);
+  const content = showMouseTip ? /*#__PURE__*/React.createElement(_Tooltip.Tooltip, _extends({}, tooltip, {
+    body: tooltip?.body ?? children,
+    elevation: tooltip?.elevation ?? 'toast'
+  }), /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: (0, _classify.default)(_TruncatedTextWithTooltipModule.default.truncatedText, classNames?.wrapper),
+    ref: truncatedRef
+  }), children)) : /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: (0, _classify.default)({
+      [_TruncatedTextWithTooltipModule.default.truncatedText]: !wrapText,
+      [_TruncatedTextWithTooltipModule.default.wrapText]: wrapText
+    }, classNames?.wrapper),
+    ref: truncatedRef
+  }), children);
+  return content;
+};
+exports.TruncatedTextWithTooltip = TruncatedTextWithTooltip;

package/lib/components/TruncatedTextWithTooltip/TruncatedTextWithTooltip.js.flow

@@ -0,0 +1,110 @@
+// @flow strict
+
+import * as React from 'react';
+import debounce from 'lodash/debounce';
+
+import {sizeFluid} from '../../styles/variables/_size';
+import classify from '../../utils/classify';
+import type {BaseTooltipProps} from '../Tooltip';
+import {Tooltip} from '../Tooltip';
+
+import css from './TruncatedTextWithTooltip.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type TruncatedTextWithTooltipProps = {
+  children?: React.Node,
+  tooltip?: BaseTooltipProps,
+  classNames?: ClassNames,
+  wrapText?: boolean,
+  ...
+};
+
+export const TruncatedTextWithTooltip = ({
+  classNames,
+  children,
+  tooltip,
+  wrapText = false,
+  ...props
+}: TruncatedTextWithTooltipProps): React.Node => {
+  const [showMouseTip, setShowMouseTip] = React.useState(false);
+  const truncatedRef = React.useRef<?HTMLSpanElement>();
+
+  const checkWidths = React.useMemo(
+    () =>
+      debounce(() => {
+        const span = truncatedRef.current;
+
+        if (span) {
+          setShowMouseTip(span.offsetWidth < span.scrollWidth);
+        }
+      }, 200),
+    [],
+  );
+
+  // Running only on mount and unmount
+  React.useEffect(() => {
+    const span = truncatedRef.current;
+
+    if (span) {
+      // Note(Nishant): This is a fix for the issue where the parent width is not set
+      // explicitly by the calling component, for truncation to work the parent wrapper should
+      // have a defined width. For cases where width is not set the component would set the
+      // width of the parent to 100%(sizeFluid) for the auto truncation to kick in
+      const parent = span.parentNode;
+      if (parent && parent instanceof HTMLElement) {
+        const computedStyles = window.getComputedStyle(parent);
+        const computedWidth = computedStyles.getPropertyValue('width');
+        const clientWidth = parent.clientWidth;
+
+        if (computedWidth !== `${clientWidth}px`) {
+          // Set the parent width to 100% if not explicitly set
+          parent.style.width = sizeFluid;
+        }
+      }
+    }
+
+    window.addEventListener('resize', checkWidths);
+
+    return () => {
+      window.removeEventListener('resize', checkWidths);
+    };
+  }, [checkWidths]);
+
+  React.useEffect(() => {
+    checkWidths();
+  }, [children]);
+
+  const content = showMouseTip ? (
+    <Tooltip
+      {...tooltip}
+      body={tooltip?.body ?? children}
+      elevation={tooltip?.elevation ?? 'toast'}
+    >
+      <span
+        {...props}
+        className={classify(css.truncatedText, classNames?.wrapper)}
+        ref={truncatedRef}
+      >
+        {children}
+      </span>
+    </Tooltip>
+  ) : (
+    <span
+      {...props}
+      className={classify(
+        {
+          [css.truncatedText]: !wrapText,
+          [css.wrapText]: wrapText,
+        },
+        classNames?.wrapper,
+      )}
+      ref={truncatedRef}
+    >
+      {children}
+    </span>
+  );
+
+  return content;
+};

package/lib/components/TruncatedTextWithTooltip/TruncatedTextWithTooltip.module.css

@@ -0,0 +1,18 @@
+@value (sizeFluid) from '../../styles/variables/_size.css';
+
+.wrapper {
+  display: flex;
+  width: sizeFluid;
+}
+
+.truncatedText {
+  width: sizeFluid;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.wrapText,
+.truncatedText {
+  width: sizeFluid;
+}

package/lib/components/TruncatedTextWithTooltip/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TruncatedTextWithTooltip = require("./TruncatedTextWithTooltip");
+Object.keys(_TruncatedTextWithTooltip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TruncatedTextWithTooltip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TruncatedTextWithTooltip[key];
+    }
+  });
+});

package/lib/components/TruncatedTextWithTooltip/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './TruncatedTextWithTooltip';

package/lib/components/index.js

@@ -564,6 +564,17 @@ Object.keys(_Truncate).forEach(function (key) {
     }
   });
 });
+var _TruncatedTextWithTooltip = require("./TruncatedTextWithTooltip");
+Object.keys(_TruncatedTextWithTooltip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TruncatedTextWithTooltip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TruncatedTextWithTooltip[key];
+    }
+  });
+});
 var _Typeahead = require("./Typeahead");
 Object.keys(_Typeahead).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -51,4 +51,5 @@ export * from './Toast';
 export * from './Toggle';
 export * from './Tooltip';
 export * from './Truncate';
+export * from './TruncatedTextWithTooltip';
 export * from './Typeahead';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.72",
+  "version": "0.1.74",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -59,16 +59,16 @@
     "@babel/preset-react": "^7.18.6",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
-    "@storybook/addon-a11y": "^7.4.6",
-    "@storybook/addon-essentials": "^7.4.6",
-    "@storybook/addon-mdx-gfm": "^7.4.6",
-    "@storybook/addon-storysource": "^7.4.6",
-    "@storybook/addons": "^7.4.6",
-    "@storybook/react": "^7.4.6",
-    "@storybook/react-webpack5": "^7.4.6",
-    "@storybook/test-runner": "^0.13.0",
+    "@storybook/addon-a11y": "^7.6.7",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-mdx-gfm": "^7.6.7",
+    "@storybook/addon-storysource": "^7.6.7",
+    "@storybook/addons": "^7.6.7",
+    "@storybook/react": "^7.6.7",
+    "@storybook/react-webpack5": "^7.6.7",
+    "@storybook/test-runner": "^0.16.0",
     "@storybook/testing-react": "^2.0.0",
-    "@storybook/theming": "^7.4.6",
+    "@storybook/theming": "^7.6.7",
     "@testing-library/react": "^11.2.7",
     "all-contributors-cli": "^6.20.0",
     "babel-eslint": "^10.1.0",
@@ -105,7 +105,7 @@
     "rimraf": "^3.0.2",
     "simple-git": "^3.12.0",
     "standard-version": "^9.5.0",
-    "storybook": "^7.4.6",
+    "storybook": "^7.6.7",
     "storybook-css-modules": "^1.0.8",
     "storybook-vscode-component": "^1.0.9",
     "style-dictionary": "^3.7.1"