@elliemae/ds-truncated-expandable-text 2.2.0-alpha.5 → 2.2.0-next.1

package/cjs/TruncatedExpandableText.js

@@ -1,107 +1,100 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var TruncatedExpandableText_exports = {};
-__export(TruncatedExpandableText_exports, {
-  DSTruncatedExpandableTextWithSchema: () => DSTruncatedExpandableTextWithSchema,
-  TruncatedExpandableText: () => TruncatedExpandableText,
-  default: () => TruncatedExpandableText_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_react_desc = require("react-desc");
-var import_styled_components = __toESM(require("styled-components"));
-var import_props = require("./props");
-var import_defaultProps = require("./defaultProps");
-const Text = import_styled_components.default.span`
-  text-overflow: ellipsis;
-  white-space: ${(props) => props.isExpanded ? "wrap" : "nowrap"};
-  overflow: hidden;
-  display: ${(props) => props.isExpanded ? "-webkit-box" : "inline-block"};
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  max-width: 100%;
-  word-break: break-all;
-`;
-const TruncatedExpandableText = ({
-  containerProps,
-  value
-}) => {
-  const [open, setOpen] = (0, import_react.useState)(false);
-  const ref = (0, import_react.useRef)(null);
-  (0, import_react.useLayoutEffect)(() => {
-    if (typeof value !== "string")
-      return;
-    if (!open)
-      return;
-    let newHyphenizedValue = "";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+var react = require('react');
+var reactDesc = require('react-desc');
+var styled = require('styled-components');
+var props = require('./props.js');
+var defaultProps = require('./defaultProps.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const Text = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-1wjt65j-0"
+})(["text-overflow:ellipsis;white-space:", ";overflow:hidden;display:", ";-webkit-line-clamp:3;-webkit-box-orient:vertical;max-width:100%;word-break:break-all;"], props => props.isExpanded ? 'wrap' : 'nowrap', props => props.isExpanded ? '-webkit-box' : 'inline-block');
+
+const TruncatedExpandableText = _ref => {
+  let {
+    containerProps,
+    value
+  } = _ref;
+  const [open, setOpen] = react.useState(false);
+  const ref = react.useRef(null);
+  react.useLayoutEffect(() => {
+    if (typeof value !== 'string') return;
+    if (!open) return;
+    let newHyphenizedValue = '';
     const element = ref.current;
     element.innerText = newHyphenizedValue;
-    let { height: previousHeight } = element.getBoundingClientRect();
-    value.split("").forEach((char, index) => {
-      element.innerText = `${newHyphenizedValue}-${char}`;
-      const { height: newHeight } = element.getBoundingClientRect();
+    let {
+      height: previousHeight
+    } = element.getBoundingClientRect();
+    value.split('').forEach((char, index) => {
+      // try the hyphen here
+      element.innerText = "".concat(newHyphenizedValue, "-").concat(char);
+      const {
+        height: newHeight
+      } = element.getBoundingClientRect(); // if it's the first line or the height didn't change, hyphen doesn't go here,
+      // since we tried "-c", we are sure that "c-" fits in the line (so we don't
+      // ever have a case where the hyphen goes to the next line
+
       if (!index || previousHeight === newHeight) {
         newHyphenizedValue += char;
       } else if (index < value.length - 1 && value[index + 1].match(/\s/)) {
-        element.innerText = `${newHyphenizedValue}${char}`;
-        const { height: endOfWordHeight } = element.getBoundingClientRect();
-        if (endOfWordHeight === previousHeight)
-          newHyphenizedValue += char;
-        else
-          newHyphenizedValue += `-${char}`;
+        // end of word
+        element.innerText = "".concat(newHyphenizedValue).concat(char); // sometimes the last character is wider and doesn't fit
+
+        const {
+          height: endOfWordHeight
+        } = element.getBoundingClientRect();
+        if (endOfWordHeight === previousHeight) newHyphenizedValue += char;else newHyphenizedValue += "-".concat(char);
       } else if (char.match(/\s/)) {
+        // we dont want "- ", leave the space character only
         newHyphenizedValue += char;
       } else if (newHyphenizedValue.length && newHyphenizedValue[newHyphenizedValue.length - 1].match(/\s/)) {
-        newHyphenizedValue += ` ${char}`;
+        // we produce and empty space to make sure to start on the next line
+        newHyphenizedValue += " ".concat(char);
       } else {
-        newHyphenizedValue += `-${char}`;
+        newHyphenizedValue += "-".concat(char);
       }
+
       previousHeight = newHeight;
     });
     element.innerText = newHyphenizedValue;
   }, [open, value]);
-  return /* @__PURE__ */ import_react.default.createElement(Text, {
-    ref,
-    ...containerProps,
+  return /*#__PURE__*/jsxRuntime.jsx(Text, _objectSpread(_objectSpread({
+    ref: ref
+  }, containerProps), {}, {
     isExpanded: open,
-    onClick: (e) => {
+    onClick: e => {
       e.persist();
       setOpen(!open);
-      if (containerProps.onClick)
-        containerProps.onClick(e);
+      if (containerProps.onClick) containerProps.onClick(e);
     },
-    "data-testid": "ds-truncated-expandable-text"
-  }, value);
+    "data-testid": "ds-truncated-expandable-text",
+    children: value
+  }));
 };
-TruncatedExpandableText.propTypes = import_props.textProps;
-TruncatedExpandableText.defaultProps = import_defaultProps.defaultProps;
-const DSTruncatedExpandableTextWithSchema = (0, import_react_desc.describe)(TruncatedExpandableText);
-DSTruncatedExpandableTextWithSchema.propTypes = import_props.textProps;
-var TruncatedExpandableText_default = TruncatedExpandableText;
-module.exports = __toCommonJS(TruncatedExpandableText_exports);
-//# sourceMappingURL=TruncatedExpandableText.js.map
+
+TruncatedExpandableText.defaultProps = defaultProps.defaultProps;
+const DSTruncatedExpandableTextWithSchema = reactDesc.describe(TruncatedExpandableText);
+DSTruncatedExpandableTextWithSchema.propTypes = props.textProps;
+
+exports.DSTruncatedExpandableTextWithSchema = DSTruncatedExpandableTextWithSchema;
+exports.TruncatedExpandableText = TruncatedExpandableText;
+exports["default"] = TruncatedExpandableText;

package/cjs/defaultProps.js

@@ -1,35 +1,10 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const defaultProps = {
+  containerProps: {},
+  value: ''
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var defaultProps_exports = {};
-__export(defaultProps_exports, {
-  defaultProps: () => defaultProps
-});
-var React = __toESM(require("react"));
-const defaultProps = { containerProps: {}, value: "" };
-module.exports = __toCommonJS(defaultProps_exports);
-//# sourceMappingURL=defaultProps.js.map
+
+exports.defaultProps = defaultProps;

package/cjs/index.js

@@ -1,36 +1,11 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var src_exports = {};
-__export(src_exports, {
-  default: () => import_TruncatedExpandableText.default
-});
-var React = __toESM(require("react"));
-__reExport(src_exports, require("./TruncatedExpandableText"));
-var import_TruncatedExpandableText = require("./TruncatedExpandableText");
-module.exports = __toCommonJS(src_exports);
-//# sourceMappingURL=index.js.map
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var TruncatedExpandableText = require('./TruncatedExpandableText.js');
+
+
+
+exports.DSTruncatedExpandableTextWithSchema = TruncatedExpandableText.DSTruncatedExpandableTextWithSchema;
+exports.TruncatedExpandableText = TruncatedExpandableText.TruncatedExpandableText;
+exports["default"] = TruncatedExpandableText.TruncatedExpandableText;

package/cjs/props.js

@@ -1,39 +1,15 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var props_exports = {};
-__export(props_exports, {
-  textProps: () => textProps
-});
-var React = __toESM(require("react"));
-var import_react_desc = require("react-desc");
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+
 const textProps = {
-  containerProps: import_react_desc.PropTypes.object.description("props injected to wrapper of truncated expandable text"),
-  value: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number]).description("Text that when truncated will trigger the tooltip interaction")
-};
-module.exports = __toCommonJS(props_exports);
-//# sourceMappingURL=props.js.map
+  /** props injected to wrapper of page header */
+  containerProps: reactDesc.PropTypes.object.description('props injected to wrapper of truncated expandable text'),
+
+  /** Text that when truncated will trigger the tooltip interaction */
+  value: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('Text that when truncated will trigger the tooltip interaction')
+};
+
+exports.textProps = textProps;

package/esm/TruncatedExpandableText.js

@@ -1,82 +1,89 @@
-import * as React from "react";
-import React2, {
-  useRef,
-  useState,
-  useLayoutEffect
-} from "react";
-import { describe } from "react-desc";
-import styled from "styled-components";
-import { textProps } from "./props";
-import { defaultProps } from "./defaultProps";
-const Text = styled.span`
-  text-overflow: ellipsis;
-  white-space: ${(props) => props.isExpanded ? "wrap" : "nowrap"};
-  overflow: hidden;
-  display: ${(props) => props.isExpanded ? "-webkit-box" : "inline-block"};
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  max-width: 100%;
-  word-break: break-all;
-`;
-const TruncatedExpandableText = ({
-  containerProps,
-  value
-}) => {
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import { useState, useRef, useLayoutEffect } from 'react';
+import { describe } from 'react-desc';
+import styled from 'styled-components';
+import { textProps } from './props.js';
+import { defaultProps } from './defaultProps.js';
+import { jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const Text = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-1wjt65j-0"
+})(["text-overflow:ellipsis;white-space:", ";overflow:hidden;display:", ";-webkit-line-clamp:3;-webkit-box-orient:vertical;max-width:100%;word-break:break-all;"], props => props.isExpanded ? 'wrap' : 'nowrap', props => props.isExpanded ? '-webkit-box' : 'inline-block');
+
+const TruncatedExpandableText = _ref => {
+  let {
+    containerProps,
+    value
+  } = _ref;
   const [open, setOpen] = useState(false);
   const ref = useRef(null);
   useLayoutEffect(() => {
-    if (typeof value !== "string")
-      return;
-    if (!open)
-      return;
-    let newHyphenizedValue = "";
+    if (typeof value !== 'string') return;
+    if (!open) return;
+    let newHyphenizedValue = '';
     const element = ref.current;
     element.innerText = newHyphenizedValue;
-    let { height: previousHeight } = element.getBoundingClientRect();
-    value.split("").forEach((char, index) => {
-      element.innerText = `${newHyphenizedValue}-${char}`;
-      const { height: newHeight } = element.getBoundingClientRect();
+    let {
+      height: previousHeight
+    } = element.getBoundingClientRect();
+    value.split('').forEach((char, index) => {
+      // try the hyphen here
+      element.innerText = "".concat(newHyphenizedValue, "-").concat(char);
+      const {
+        height: newHeight
+      } = element.getBoundingClientRect(); // if it's the first line or the height didn't change, hyphen doesn't go here,
+      // since we tried "-c", we are sure that "c-" fits in the line (so we don't
+      // ever have a case where the hyphen goes to the next line
+
       if (!index || previousHeight === newHeight) {
         newHyphenizedValue += char;
       } else if (index < value.length - 1 && value[index + 1].match(/\s/)) {
-        element.innerText = `${newHyphenizedValue}${char}`;
-        const { height: endOfWordHeight } = element.getBoundingClientRect();
-        if (endOfWordHeight === previousHeight)
-          newHyphenizedValue += char;
-        else
-          newHyphenizedValue += `-${char}`;
+        // end of word
+        element.innerText = "".concat(newHyphenizedValue).concat(char); // sometimes the last character is wider and doesn't fit
+
+        const {
+          height: endOfWordHeight
+        } = element.getBoundingClientRect();
+        if (endOfWordHeight === previousHeight) newHyphenizedValue += char;else newHyphenizedValue += "-".concat(char);
       } else if (char.match(/\s/)) {
+        // we dont want "- ", leave the space character only
         newHyphenizedValue += char;
       } else if (newHyphenizedValue.length && newHyphenizedValue[newHyphenizedValue.length - 1].match(/\s/)) {
-        newHyphenizedValue += ` ${char}`;
+        // we produce and empty space to make sure to start on the next line
+        newHyphenizedValue += " ".concat(char);
       } else {
-        newHyphenizedValue += `-${char}`;
+        newHyphenizedValue += "-".concat(char);
       }
+
       previousHeight = newHeight;
     });
     element.innerText = newHyphenizedValue;
   }, [open, value]);
-  return /* @__PURE__ */ React2.createElement(Text, {
-    ref,
-    ...containerProps,
+  return /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({
+    ref: ref
+  }, containerProps), {}, {
     isExpanded: open,
-    onClick: (e) => {
+    onClick: e => {
       e.persist();
       setOpen(!open);
-      if (containerProps.onClick)
-        containerProps.onClick(e);
+      if (containerProps.onClick) containerProps.onClick(e);
     },
-    "data-testid": "ds-truncated-expandable-text"
-  }, value);
+    "data-testid": "ds-truncated-expandable-text",
+    children: value
+  }));
 };
-TruncatedExpandableText.propTypes = textProps;
+
 TruncatedExpandableText.defaultProps = defaultProps;
 const DSTruncatedExpandableTextWithSchema = describe(TruncatedExpandableText);
 DSTruncatedExpandableTextWithSchema.propTypes = textProps;
-var TruncatedExpandableText_default = TruncatedExpandableText;
-export {
-  DSTruncatedExpandableTextWithSchema,
-  TruncatedExpandableText,
-  TruncatedExpandableText_default as default
-};
-//# sourceMappingURL=TruncatedExpandableText.js.map
+
+export { DSTruncatedExpandableTextWithSchema, TruncatedExpandableText, TruncatedExpandableText as default };

package/esm/defaultProps.js

@@ -1,6 +1,6 @@
-import * as React from "react";
-const defaultProps = { containerProps: {}, value: "" };
-export {
-  defaultProps
+const defaultProps = {
+  containerProps: {},
+  value: ''
 };
-//# sourceMappingURL=defaultProps.js.map
+
+export { defaultProps };

package/esm/index.js

@@ -1,7 +1 @@
-import * as React from "react";
-export * from "./TruncatedExpandableText";
-import { default as default2 } from "./TruncatedExpandableText";
-export {
-  default2 as default
-};
-//# sourceMappingURL=index.js.map
+export { DSTruncatedExpandableTextWithSchema, TruncatedExpandableText, TruncatedExpandableText as default } from './TruncatedExpandableText.js';

package/esm/props.js

@@ -1,10 +1,11 @@
-import * as React from "react";
-import { PropTypes } from "react-desc";
+import { PropTypes } from 'react-desc';
+
 const textProps = {
-  containerProps: PropTypes.object.description("props injected to wrapper of truncated expandable text"),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("Text that when truncated will trigger the tooltip interaction")
+  /** props injected to wrapper of page header */
+  containerProps: PropTypes.object.description('props injected to wrapper of truncated expandable text'),
+
+  /** Text that when truncated will trigger the tooltip interaction */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Text that when truncated will trigger the tooltip interaction')
 };
-export {
-  textProps
-};
-//# sourceMappingURL=props.js.map
+
+export { textProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-truncated-expandable-text",
-  "version": "2.2.0-alpha.5",
+  "version": "2.2.0-next.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Truncated Expandable Text",
   "module": "./esm/index.js",

package/cjs/TruncatedExpandableText.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/TruncatedExpandableText.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, {\n  useRef,\n  useState,\n  useLayoutEffect,\n  HTMLAttributes,\n} from 'react';\nimport { describe } from 'react-desc';\nimport styled from 'styled-components';\nimport { textProps } from './props';\nimport { defaultProps } from './defaultProps';\n\ntype TextProps = HTMLAttributes<HTMLSpanElement> & { isExpanded: boolean };\n\nconst Text = styled.span<TextProps>`\n  text-overflow: ellipsis;\n  white-space: ${(props) => (props.isExpanded ? 'wrap' : 'nowrap')};\n  overflow: hidden;\n  display: ${(props) => (props.isExpanded ? '-webkit-box' : 'inline-block')};\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  max-width: 100%;\n  word-break: break-all;\n`;\n\nconst TruncatedExpandableText = ({\n  containerProps,\n  value,\n}: {\n  containerProps: HTMLAttributes<HTMLSpanElement>;\n  value: string;\n}): JSX.Element => {\n  const [open, setOpen] = useState(false);\n  const ref = useRef<HTMLSpanElement>(null);\n\n  useLayoutEffect(() => {\n    if (typeof value !== 'string') return;\n    if (!open) return;\n\n    let newHyphenizedValue = '';\n\n    const element = ref.current;\n    element.innerText = newHyphenizedValue;\n    let { height: previousHeight } = element.getBoundingClientRect();\n\n    value.split('').forEach((char, index) => {\n      // try the hyphen here\n      element.innerText = `${newHyphenizedValue}-${char}`;\n      const { height: newHeight } = element.getBoundingClientRect();\n      // if it's the first line or the height didn't change, hyphen doesn't go here,\n      // since we tried \"-c\", we are sure that \"c-\" fits in the line (so we don't\n      // ever have a case where the hyphen goes to the next line\n      if (!index || previousHeight === newHeight) {\n        newHyphenizedValue += char;\n      } else if (index < value.length - 1 && value[index + 1].match(/\\s/)) {\n        // end of word\n        element.innerText = `${newHyphenizedValue}${char}`;\n\n        // sometimes the last character is wider and doesn't fit\n        const { height: endOfWordHeight } = element.getBoundingClientRect();\n        if (endOfWordHeight === previousHeight) newHyphenizedValue += char;\n        else newHyphenizedValue += `-${char}`;\n      } else if (char.match(/\\s/)) {\n        // we dont want \"- \", leave the space character only\n        newHyphenizedValue += char;\n      } else if (\n        newHyphenizedValue.length &&\n        newHyphenizedValue[newHyphenizedValue.length - 1].match(/\\s/)\n      ) {\n        // we produce and empty space to make sure to start on the next line\n        newHyphenizedValue += ` ${char}`;\n      } else {\n        newHyphenizedValue += `-${char}`;\n      }\n      previousHeight = newHeight;\n    });\n    element.innerText = newHyphenizedValue;\n  }, [open, value]);\n\n  return (\n    <Text\n      ref={ref}\n      {...containerProps}\n      isExpanded={open}\n      onClick={(e) => {\n        e.persist();\n        setOpen(!open);\n        if (containerProps.onClick) containerProps.onClick(e);\n      }}\n      data-testid=\"ds-truncated-expandable-text\"\n    >\n      {value}\n    </Text>\n  );\n};\n\nTruncatedExpandableText.propTypes = textProps;\n\nTruncatedExpandableText.defaultProps = defaultProps;\n\nconst DSTruncatedExpandableTextWithSchema = describe(TruncatedExpandableText);\n\nDSTruncatedExpandableTextWithSchema.propTypes = textProps;\n\nexport { TruncatedExpandableText, DSTruncatedExpandableTextWithSchema };\nexport default TruncatedExpandableText;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAKO;AACP,wBAAyB;AACzB,+BAAmB;AACnB,mBAA0B;AAC1B,0BAA6B;AAI7B,MAAM,OAAO,iCAAO;AAAA;AAAA,iBAEH,CAAC,UAAW,MAAM,aAAa,SAAS;AAAA;AAAA,aAE5C,CAAC,UAAW,MAAM,aAAa,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAO5D,MAAM,0BAA0B,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,MAIiB;AACjB,QAAM,CAAC,MAAM,WAAW,2BAAS;AACjC,QAAM,MAAM,yBAAwB;AAEpC,oCAAgB,MAAM;AACpB,QAAI,OAAO,UAAU;AAAU;AAC/B,QAAI,CAAC;AAAM;AAEX,QAAI,qBAAqB;AAEzB,UAAM,UAAU,IAAI;AACpB,YAAQ,YAAY;AACpB,QAAI,EAAE,QAAQ,mBAAmB,QAAQ;AAEzC,UAAM,MAAM,IAAI,QAAQ,CAAC,MAAM,UAAU;AAEvC,cAAQ,YAAY,GAAG,sBAAsB;AAC7C,YAAM,EAAE,QAAQ,cAAc,QAAQ;AAItC,UAAI,CAAC,SAAS,mBAAmB,WAAW;AAC1C,8BAAsB;AAAA,iBACb,QAAQ,MAAM,SAAS,KAAK,MAAM,QAAQ,GAAG,MAAM,OAAO;AAEnE,gBAAQ,YAAY,GAAG,qBAAqB;AAG5C,cAAM,EAAE,QAAQ,oBAAoB,QAAQ;AAC5C,YAAI,oBAAoB;AAAgB,gCAAsB;AAAA;AACzD,gCAAsB,IAAI;AAAA,iBACtB,KAAK,MAAM,OAAO;AAE3B,8BAAsB;AAAA,iBAEtB,mBAAmB,UACnB,mBAAmB,mBAAmB,SAAS,GAAG,MAAM,OACxD;AAEA,8BAAsB,IAAI;AAAA,aACrB;AACL,8BAAsB,IAAI;AAAA;AAE5B,uBAAiB;AAAA;AAEnB,YAAQ,YAAY;AAAA,KACnB,CAAC,MAAM;AAEV,SACE,mDAAC,MAAD;AAAA,IACE;AAAA,OACI;AAAA,IACJ,YAAY;AAAA,IACZ,SAAS,CAAC,MAAM;AACd,QAAE;AACF,cAAQ,CAAC;AACT,UAAI,eAAe;AAAS,uBAAe,QAAQ;AAAA;AAAA,IAErD,eAAY;AAAA,KAEX;AAAA;AAKP,wBAAwB,YAAY;AAEpC,wBAAwB,eAAe;AAEvC,MAAM,sCAAsC,gCAAS;AAErD,oCAAoC,YAAY;AAGhD,IAAO,kCAAQ;",
-  "names": []
-}

package/cjs/defaultProps.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/defaultProps.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const defaultProps = { containerProps: {}, value: '' };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe,EAAE,gBAAgB,IAAI,OAAO;",
-  "names": []
-}

package/cjs/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './TruncatedExpandableText';\nexport { default } from './TruncatedExpandableText';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc;AACd,qCAAwB;",
-  "names": []
-}

package/cjs/props.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/props.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { PropTypes } from 'react-desc';\n\nexport const textProps = {\n  /** props injected to wrapper of page header */\n  containerProps: PropTypes.object.description(\n    'props injected to wrapper of truncated expandable text',\n  ),\n  /** Text that when truncated will trigger the tooltip interaction */\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'Text that when truncated will trigger the tooltip interaction',\n  ),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA0B;AAEnB,MAAM,YAAY;AAAA,EAEvB,gBAAgB,4BAAU,OAAO,YAC/B;AAAA,EAGF,OAAO,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,SAAS,YAC/D;AAAA;",
-  "names": []
-}

package/esm/TruncatedExpandableText.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/TruncatedExpandableText.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, {\n  useRef,\n  useState,\n  useLayoutEffect,\n  HTMLAttributes,\n} from 'react';\nimport { describe } from 'react-desc';\nimport styled from 'styled-components';\nimport { textProps } from './props';\nimport { defaultProps } from './defaultProps';\n\ntype TextProps = HTMLAttributes<HTMLSpanElement> & { isExpanded: boolean };\n\nconst Text = styled.span<TextProps>`\n  text-overflow: ellipsis;\n  white-space: ${(props) => (props.isExpanded ? 'wrap' : 'nowrap')};\n  overflow: hidden;\n  display: ${(props) => (props.isExpanded ? '-webkit-box' : 'inline-block')};\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  max-width: 100%;\n  word-break: break-all;\n`;\n\nconst TruncatedExpandableText = ({\n  containerProps,\n  value,\n}: {\n  containerProps: HTMLAttributes<HTMLSpanElement>;\n  value: string;\n}): JSX.Element => {\n  const [open, setOpen] = useState(false);\n  const ref = useRef<HTMLSpanElement>(null);\n\n  useLayoutEffect(() => {\n    if (typeof value !== 'string') return;\n    if (!open) return;\n\n    let newHyphenizedValue = '';\n\n    const element = ref.current;\n    element.innerText = newHyphenizedValue;\n    let { height: previousHeight } = element.getBoundingClientRect();\n\n    value.split('').forEach((char, index) => {\n      // try the hyphen here\n      element.innerText = `${newHyphenizedValue}-${char}`;\n      const { height: newHeight } = element.getBoundingClientRect();\n      // if it's the first line or the height didn't change, hyphen doesn't go here,\n      // since we tried \"-c\", we are sure that \"c-\" fits in the line (so we don't\n      // ever have a case where the hyphen goes to the next line\n      if (!index || previousHeight === newHeight) {\n        newHyphenizedValue += char;\n      } else if (index < value.length - 1 && value[index + 1].match(/\\s/)) {\n        // end of word\n        element.innerText = `${newHyphenizedValue}${char}`;\n\n        // sometimes the last character is wider and doesn't fit\n        const { height: endOfWordHeight } = element.getBoundingClientRect();\n        if (endOfWordHeight === previousHeight) newHyphenizedValue += char;\n        else newHyphenizedValue += `-${char}`;\n      } else if (char.match(/\\s/)) {\n        // we dont want \"- \", leave the space character only\n        newHyphenizedValue += char;\n      } else if (\n        newHyphenizedValue.length &&\n        newHyphenizedValue[newHyphenizedValue.length - 1].match(/\\s/)\n      ) {\n        // we produce and empty space to make sure to start on the next line\n        newHyphenizedValue += ` ${char}`;\n      } else {\n        newHyphenizedValue += `-${char}`;\n      }\n      previousHeight = newHeight;\n    });\n    element.innerText = newHyphenizedValue;\n  }, [open, value]);\n\n  return (\n    <Text\n      ref={ref}\n      {...containerProps}\n      isExpanded={open}\n      onClick={(e) => {\n        e.persist();\n        setOpen(!open);\n        if (containerProps.onClick) containerProps.onClick(e);\n      }}\n      data-testid=\"ds-truncated-expandable-text\"\n    >\n      {value}\n    </Text>\n  );\n};\n\nTruncatedExpandableText.propTypes = textProps;\n\nTruncatedExpandableText.defaultProps = defaultProps;\n\nconst DSTruncatedExpandableTextWithSchema = describe(TruncatedExpandableText);\n\nDSTruncatedExpandableTextWithSchema.propTypes = textProps;\n\nexport { TruncatedExpandableText, DSTruncatedExpandableTextWithSchema };\nexport default TruncatedExpandableText;\n"],
-  "mappings": "AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACA;AACA;AAIA,MAAM,OAAO,OAAO;AAAA;AAAA,iBAEH,CAAC,UAAW,MAAM,aAAa,SAAS;AAAA;AAAA,aAE5C,CAAC,UAAW,MAAM,aAAa,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAO5D,MAAM,0BAA0B,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,MAIiB;AACjB,QAAM,CAAC,MAAM,WAAW,SAAS;AACjC,QAAM,MAAM,OAAwB;AAEpC,kBAAgB,MAAM;AACpB,QAAI,OAAO,UAAU;AAAU;AAC/B,QAAI,CAAC;AAAM;AAEX,QAAI,qBAAqB;AAEzB,UAAM,UAAU,IAAI;AACpB,YAAQ,YAAY;AACpB,QAAI,EAAE,QAAQ,mBAAmB,QAAQ;AAEzC,UAAM,MAAM,IAAI,QAAQ,CAAC,MAAM,UAAU;AAEvC,cAAQ,YAAY,GAAG,sBAAsB;AAC7C,YAAM,EAAE,QAAQ,cAAc,QAAQ;AAItC,UAAI,CAAC,SAAS,mBAAmB,WAAW;AAC1C,8BAAsB;AAAA,iBACb,QAAQ,MAAM,SAAS,KAAK,MAAM,QAAQ,GAAG,MAAM,OAAO;AAEnE,gBAAQ,YAAY,GAAG,qBAAqB;AAG5C,cAAM,EAAE,QAAQ,oBAAoB,QAAQ;AAC5C,YAAI,oBAAoB;AAAgB,gCAAsB;AAAA;AACzD,gCAAsB,IAAI;AAAA,iBACtB,KAAK,MAAM,OAAO;AAE3B,8BAAsB;AAAA,iBAEtB,mBAAmB,UACnB,mBAAmB,mBAAmB,SAAS,GAAG,MAAM,OACxD;AAEA,8BAAsB,IAAI;AAAA,aACrB;AACL,8BAAsB,IAAI;AAAA;AAE5B,uBAAiB;AAAA;AAEnB,YAAQ,YAAY;AAAA,KACnB,CAAC,MAAM;AAEV,SACE,qCAAC,MAAD;AAAA,IACE;AAAA,OACI;AAAA,IACJ,YAAY;AAAA,IACZ,SAAS,CAAC,MAAM;AACd,QAAE;AACF,cAAQ,CAAC;AACT,UAAI,eAAe;AAAS,uBAAe,QAAQ;AAAA;AAAA,IAErD,eAAY;AAAA,KAEX;AAAA;AAKP,wBAAwB,YAAY;AAEpC,wBAAwB,eAAe;AAEvC,MAAM,sCAAsC,SAAS;AAErD,oCAAoC,YAAY;AAGhD,IAAO,kCAAQ;",
-  "names": []
-}

package/esm/defaultProps.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/defaultProps.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const defaultProps = { containerProps: {}, value: '' };\n"],
-  "mappings": "AAAA;ACAO,MAAM,eAAe,EAAE,gBAAgB,IAAI,OAAO;",
-  "names": []
-}

package/esm/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './TruncatedExpandableText';\nexport { default } from './TruncatedExpandableText';\n"],
-  "mappings": "AAAA;ACAA;AACA;",
-  "names": []
-}

package/esm/props.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/props.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\n\nexport const textProps = {\n  /** props injected to wrapper of page header */\n  containerProps: PropTypes.object.description(\n    'props injected to wrapper of truncated expandable text',\n  ),\n  /** Text that when truncated will trigger the tooltip interaction */\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'Text that when truncated will trigger the tooltip interaction',\n  ),\n};\n"],
-  "mappings": "AAAA;ACAA;AAEO,MAAM,YAAY;AAAA,EAEvB,gBAAgB,UAAU,OAAO,YAC/B;AAAA,EAGF,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAC/D;AAAA;",
-  "names": []
-}