@elliemae/ds-read-more 2.2.0-alpha.2 → 2.2.0-beta.0

package/cjs/DSReadMore.js

@@ -1,149 +1,161 @@
-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 DSReadMore_exports = {};
-__export(DSReadMore_exports, {
-  DSReadMore: () => DSReadMore,
-  DSReadMoreWithSchema: () => DSReadMoreWithSchema,
-  default: () => DSReadMore_default
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx2 = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+var react = require('react');
+var lodash = require('lodash');
+var reactDesc = require('react-desc');
+var styled = require('styled-components');
+var dsTooltip = require('@elliemae/ds-tooltip');
+var dsButton = require('@elliemae/ds-button');
+var propTypes = require('@elliemae/ds-shared/prop-types');
+var MoreLessButton = require('./MoreLessButton.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx2__default = /*#__PURE__*/_interopDefaultLegacy(_jsx2);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const Text = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-1c4w5m6-0"
+})(["display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-all;"], _ref => {
+  let {
+    lines,
+    expanded
+  } = _ref;
+  return expanded ? 'unset' : lines;
 });
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_lodash = __toESM(require("lodash"));
-var import_react_desc = __toESM(require("react-desc"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_ds_tooltip = __toESM(require("@elliemae/ds-tooltip"));
-var import_ds_button = __toESM(require("@elliemae/ds-button"));
-var import_prop_types = __toESM(require("@elliemae/ds-shared/prop-types"));
-var import_MoreLessButton = __toESM(require("./MoreLessButton"));
-const Text = import_styled_components.default.span`
-  display: -webkit-box;
-  -webkit-line-clamp: ${({ lines, expanded }) => expanded ? "unset" : lines};
-  -webkit-box-orient: vertical;
-  -webkit-hyphens: auto;
-  -moz-hyphens: auto;
-  -ms-hyphens: auto;
-  hyphens: auto;
-  word-break: break-all;
-`;
-const DSReadMore = (props) => {
+
+const DSReadMore = props => {
   const {
     lines = 2,
-    more = "more",
-    less = "less",
-    onMore = import_lodash.noop,
-    onLess = import_lodash.noop,
+    more = 'more',
+    less = 'less',
+    onMore = lodash.noop,
+    onLess = lodash.noop,
     content,
-    ellipsis = "...",
+    ellipsis = '...',
     withTooltip = false
   } = props;
-  const ref = (0, import_react.useRef)(null);
-  const [showButton, setShowButton] = (0, import_react.useState)(false);
-  const [expanded, setExpanded] = (0, import_react.useState)(false);
-  const overflows = ({ offsetHeight, scrollHeight }) => offsetHeight + 2 < scrollHeight;
-  const binSearchTextOverflow = (0, import_react.useCallback)((element, parent) => {
+  const ref = react.useRef(null);
+  const [showButton, setShowButton] = react.useState(false);
+  const [expanded, setExpanded] = react.useState(false); // offsetHeight + 2 takes into consideration any size of the button
+
+  const overflows = _ref2 => {
+    let {
+      offsetHeight,
+      scrollHeight
+    } = _ref2;
+    return offsetHeight + 2 < scrollHeight;
+  }; // Searchs the optimum cut on the text to have the button in the same line
+
+
+  const binSearchTextOverflow = react.useCallback((element, parent) => {
     const text = element.innerText;
     let left = 1;
     let right = text.length;
     let textEnd = 0;
+
     while (left <= right) {
       const middle = (left + right) / 2;
       element.innerText = content.slice(0, middle);
-      if (overflows(parent))
-        right = middle - 1;
-      else {
+      if (overflows(parent)) right = middle - 1;else {
         left = middle + 1;
         textEnd = middle;
       }
     }
+
     element.innerText = content.slice(0, textEnd);
   }, [content]);
-  (0, import_react.useLayoutEffect)(() => {
+  react.useLayoutEffect(() => {
+    var _ref$current;
+
     const textElement = ref.current;
-    const parentElement = ref.current?.parentElement;
+    const parentElement = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.parentElement;
+
     if (parentElement && textElement) {
       textElement.innerText = content;
       setShowButton(expanded || overflows(parentElement));
+
       if (!expanded && overflows(parentElement)) {
         binSearchTextOverflow(textElement, parentElement);
       }
     }
   }, [lines, content, binSearchTextOverflow, expanded, showButton, withTooltip, more, less]);
-  const toggleExpanded = (newExpanded) => {
+
+  const toggleExpanded = newExpanded => {
     setExpanded(newExpanded);
-    if (newExpanded)
-      onMore();
-    else
-      onLess();
+    if (newExpanded) onMore();else onLess();
   };
-  return /* @__PURE__ */ import_react.default.createElement(Text, {
-    lines,
-    expanded
-  }, /* @__PURE__ */ import_react.default.createElement("span", {
-    ref,
+
+  return /*#__PURE__*/_jsx2__default["default"](Text, {
+    lines: lines,
+    expanded: expanded
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx("span", {
+    ref: ref,
     "data-testid": "ds-read_more-text",
-    "aria-label": content
-  }, content), showButton && !withTooltip && /* @__PURE__ */ import_react.default.createElement(import_MoreLessButton.MoreLessButton, {
-    expanded,
+    "aria-label": content,
+    children: content
+  }), showButton && !withTooltip && /*#__PURE__*/_jsx2__default["default"](MoreLessButton.MoreLessButton, {
+    expanded: expanded,
     label: expanded ? less : more,
     onClick: () => toggleExpanded(!expanded),
     ariaLabel: expanded ? less : more,
-    ellipsis,
+    ellipsis: ellipsis,
     dataTestId: "ds-read_more-button"
-  }), withTooltip && /* @__PURE__ */ import_react.default.createElement("div", {
+  }), withTooltip && /*#__PURE__*/_jsx2__default["default"]("div", {
     style: {
-      display: "inline-block"
+      display: 'inline-block'
     }
-  }, /* @__PURE__ */ import_react.default.createElement(import_ds_tooltip.DSTooltipV3, {
+  }, void 0, /*#__PURE__*/_jsx2__default["default"](dsTooltip.DSTooltipV3, {
     text: content
-  }, /* @__PURE__ */ import_react.default.createElement(import_MoreLessButton.MoreLessButton, {
-    expanded,
+  }, void 0, /*#__PURE__*/_jsx2__default["default"](MoreLessButton.MoreLessButton, {
+    expanded: expanded,
     label: "...",
     ariaLabel: content,
-    ellipsis,
-    withTooltip,
+    ellipsis: ellipsis,
+    withTooltip: withTooltip,
     dataTestId: "ds-read_more-tooltip-button"
   }))));
 };
+
 const DSReadMoreProps = {
-  lines: import_react_desc.PropTypes.number.description("Ammount of lines after you want to display an ellipsis + more/less button").defaultValue(2),
-  more: import_react_desc.PropTypes.string.description("Label which will appear on the 'More' button").defaultValue("more"),
-  less: import_react_desc.PropTypes.string.description("Label which will appear on the 'Less' button").defaultValue("less"),
-  onMore: import_react_desc.PropTypes.func.description("Function which will execute when the user click the 'More' button"),
-  onLess: import_react_desc.PropTypes.func.description("Function which will execute when the user click the 'Less' button"),
-  content: import_react_desc.PropTypes.string.description("The text content you want displayed").isRequired,
-  buttonType: import_react_desc.PropTypes.oneOf(import_ds_button.buttonTypes).description("The type for the more/less button").defaultValue("link"),
-  size: import_react_desc.PropTypes.oneOf(import_prop_types.dsBasicSizes).description("Size of the button").defaultValue("s"),
-  ellipsis: import_react_desc.PropTypes.string.description("The text you want to appear when truncating").defaultValue("..."),
-  withTooltip: import_react_desc.PropTypes.bool.description("Whether to show expandable tooltip on ellipsis focus instead of expandable buttons").defaultValue("false")
+  /** Ammount of lines after you want to display an ellipsis + more/less button */
+  lines: reactDesc.PropTypes.number.description('Ammount of lines after you want to display an ellipsis + more/less button').defaultValue(2),
+
+  /** Label which will appear on the 'More' button */
+  more: reactDesc.PropTypes.string.description("Label which will appear on the 'More' button").defaultValue('more'),
+
+  /** Label which will appear on the 'Less' button */
+  less: reactDesc.PropTypes.string.description("Label which will appear on the 'Less' button").defaultValue('less'),
+
+  /** Function which will execute when the user click the 'More' button */
+  onMore: reactDesc.PropTypes.func.description("Function which will execute when the user click the 'More' button"),
+
+  /** Function which will execute when the user click the 'Less' button */
+  onLess: reactDesc.PropTypes.func.description("Function which will execute when the user click the 'Less' button"),
+
+  /** The text content you want displayed */
+  content: reactDesc.PropTypes.string.description('The text content you want displayed').isRequired,
+
+  /** 'The type of button for more/less button' */
+  buttonType: reactDesc.PropTypes.oneOf(dsButton.buttonTypes).description('The type for the more/less button').defaultValue('link'),
+
+  /**
+   * ['s', 'm', 'l']
+   */
+  size: reactDesc.PropTypes.oneOf(propTypes.dsBasicSizes).description('Size of the button').defaultValue('s'),
+
+  /** The text you want to appear when truncating */
+  ellipsis: reactDesc.PropTypes.string.description('The text you want to appear when truncating').defaultValue('...'),
+  withTooltip: reactDesc.PropTypes.bool.description('Whether to show expandable tooltip on ellipsis focus instead of expandable buttons').defaultValue('false')
 };
-DSReadMore.propTypes = DSReadMoreProps;
-const DSReadMoreWithSchema = (0, import_react_desc.describe)(DSReadMore);
+const DSReadMoreWithSchema = reactDesc.describe(DSReadMore);
 DSReadMoreWithSchema.propTypes = DSReadMoreProps;
-var DSReadMore_default = DSReadMore;
-module.exports = __toCommonJS(DSReadMore_exports);
-//# sourceMappingURL=DSReadMore.js.map
+
+exports.DSReadMore = DSReadMore;
+exports.DSReadMoreWithSchema = DSReadMoreWithSchema;
+exports["default"] = DSReadMore;

package/cjs/MoreLessButton.js

@@ -1,65 +1,57 @@
-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 MoreLessButton_exports = {};
-__export(MoreLessButton_exports, {
-  MoreLessButton: () => MoreLessButton
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx2 = require('@babel/runtime/helpers/jsx');
+require('react');
+var styled = require('styled-components');
+var dsButton = require('@elliemae/ds-button');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx2__default = /*#__PURE__*/_interopDefaultLegacy(_jsx2);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledButton = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
+  componentId: "sc-1innsd2-0"
+})(["padding:0;color:", ";border:0;margin:0;font-size:12px;font-weight:200;min-width:0px;height:auto;text-transform:unset;&:hover:not([disabled]){color:", ";background-color:transparent;text-decoration:", ";}"], _ref => {
+  let {
+    withTooltip,
+    theme
+  } = _ref;
+  return withTooltip ? 'inherit' : "".concat(theme.colors.brand['600']);
+}, _ref2 => {
+  let {
+    withTooltip,
+    theme
+  } = _ref2;
+  return withTooltip ? 'inherit' : "".concat(theme.colors.brand['600']);
+}, _ref3 => {
+  let {
+    withTooltip
+  } = _ref3;
+  return withTooltip ? '' : 'underline';
 });
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_ds_button = __toESM(require("@elliemae/ds-button"));
-const StyledButton = (0, import_styled_components.default)(import_ds_button.DSButtonV2)`
-  padding: 0;
-  color: ${({ withTooltip, theme }) => withTooltip ? "inherit" : `${theme.colors.brand["600"]}`};
-  border: 0;
-  margin: 0;
-  font-size: 12px;
-  font-weight: 200;
-  min-width: 0px;
-  height: auto;
-  text-transform: unset;
-  &:hover:not([disabled]) {
-    color: ${({ withTooltip, theme }) => withTooltip ? "inherit" : `${theme.colors.brand["600"]}`};
-    background-color: transparent;
-    text-decoration: ${({ withTooltip }) => withTooltip ? "" : "underline"};
-  }
-`;
-const MoreLessButton = (props) => {
-  const { expanded, ariaLabel, label, onClick, ellipsis, withTooltip, dataTestId } = props;
-  return /* @__PURE__ */ import_react.default.createElement("span", null, expanded || withTooltip ? " " : ellipsis, /* @__PURE__ */ import_react.default.createElement(StyledButton, {
+
+const MoreLessButton = props => {
+  const {
+    expanded,
+    ariaLabel,
+    label,
+    onClick,
+    ellipsis,
     withTooltip,
+    dataTestId
+  } = props;
+  return /*#__PURE__*/_jsx2__default["default"]("span", {}, void 0, expanded || withTooltip ? ' ' : ellipsis, /*#__PURE__*/_jsx2__default["default"](StyledButton, {
+    withTooltip: withTooltip,
     "aria-label": ariaLabel,
     buttonType: "text",
-    onClick,
+    onClick: onClick,
     "aria-hidden": true,
     size: "s",
     "data-testid": dataTestId
-  }, label));
+  }, void 0, label));
 };
-module.exports = __toCommonJS(MoreLessButton_exports);
-//# sourceMappingURL=MoreLessButton.js.map
+
+exports.MoreLessButton = MoreLessButton;

package/cjs/index.d.js

@@ -1,27 +1,2 @@
-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 __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 index_d_exports = {};
-var React = __toESM(require("react"));
-module.exports = __toCommonJS(index_d_exports);
-//# sourceMappingURL=index.d.js.map
+'use strict';
+

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_DSReadMore.default
-});
-var React = __toESM(require("react"));
-__reExport(src_exports, __toESM(require("./DSReadMore")));
-var import_DSReadMore = __toESM(require("./DSReadMore"));
-module.exports = __toCommonJS(src_exports);
-//# sourceMappingURL=index.js.map
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSReadMore = require('./DSReadMore.js');
+
+
+
+exports.DSReadMore = DSReadMore.DSReadMore;
+exports.DSReadMoreWithSchema = DSReadMore.DSReadMoreWithSchema;
+exports["default"] = DSReadMore.DSReadMore;

package/esm/DSReadMore.js

@@ -1,120 +1,150 @@
-import * as React from "react";
-import React2, { useLayoutEffect, useRef, useState, useCallback } from "react";
-import { noop } from "lodash";
-import { describe, PropTypes } from "react-desc";
-import styled from "styled-components";
-import { DSTooltipV3 } from "@elliemae/ds-tooltip";
-import { buttonTypes } from "@elliemae/ds-button";
-import { dsBasicSizes } from "@elliemae/ds-shared/prop-types";
-import { MoreLessButton } from "./MoreLessButton";
-const Text = styled.span`
-  display: -webkit-box;
-  -webkit-line-clamp: ${({ lines, expanded }) => expanded ? "unset" : lines};
-  -webkit-box-orient: vertical;
-  -webkit-hyphens: auto;
-  -moz-hyphens: auto;
-  -ms-hyphens: auto;
-  hyphens: auto;
-  word-break: break-all;
-`;
-const DSReadMore = (props) => {
+import _jsx2 from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useRef, useState, useCallback, useLayoutEffect } from 'react';
+import { noop } from 'lodash';
+import { PropTypes, describe } from 'react-desc';
+import styled from 'styled-components';
+import { DSTooltipV3 } from '@elliemae/ds-tooltip';
+import { buttonTypes } from '@elliemae/ds-button';
+import { dsBasicSizes } from '@elliemae/ds-shared/prop-types';
+import { MoreLessButton } from './MoreLessButton.js';
+import { jsx } from 'react/jsx-runtime';
+
+const Text = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-1c4w5m6-0"
+})(["display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-all;"], _ref => {
+  let {
+    lines,
+    expanded
+  } = _ref;
+  return expanded ? 'unset' : lines;
+});
+
+const DSReadMore = props => {
   const {
     lines = 2,
-    more = "more",
-    less = "less",
+    more = 'more',
+    less = 'less',
     onMore = noop,
     onLess = noop,
     content,
-    ellipsis = "...",
+    ellipsis = '...',
     withTooltip = false
   } = props;
   const ref = useRef(null);
   const [showButton, setShowButton] = useState(false);
-  const [expanded, setExpanded] = useState(false);
-  const overflows = ({ offsetHeight, scrollHeight }) => offsetHeight + 2 < scrollHeight;
+  const [expanded, setExpanded] = useState(false); // offsetHeight + 2 takes into consideration any size of the button
+
+  const overflows = _ref2 => {
+    let {
+      offsetHeight,
+      scrollHeight
+    } = _ref2;
+    return offsetHeight + 2 < scrollHeight;
+  }; // Searchs the optimum cut on the text to have the button in the same line
+
+
   const binSearchTextOverflow = useCallback((element, parent) => {
     const text = element.innerText;
     let left = 1;
     let right = text.length;
     let textEnd = 0;
+
     while (left <= right) {
       const middle = (left + right) / 2;
       element.innerText = content.slice(0, middle);
-      if (overflows(parent))
-        right = middle - 1;
-      else {
+      if (overflows(parent)) right = middle - 1;else {
         left = middle + 1;
         textEnd = middle;
       }
     }
+
     element.innerText = content.slice(0, textEnd);
   }, [content]);
   useLayoutEffect(() => {
+    var _ref$current;
+
     const textElement = ref.current;
-    const parentElement = ref.current?.parentElement;
+    const parentElement = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.parentElement;
+
     if (parentElement && textElement) {
       textElement.innerText = content;
       setShowButton(expanded || overflows(parentElement));
+
       if (!expanded && overflows(parentElement)) {
         binSearchTextOverflow(textElement, parentElement);
       }
     }
   }, [lines, content, binSearchTextOverflow, expanded, showButton, withTooltip, more, less]);
-  const toggleExpanded = (newExpanded) => {
+
+  const toggleExpanded = newExpanded => {
     setExpanded(newExpanded);
-    if (newExpanded)
-      onMore();
-    else
-      onLess();
+    if (newExpanded) onMore();else onLess();
   };
-  return /* @__PURE__ */ React2.createElement(Text, {
-    lines,
-    expanded
-  }, /* @__PURE__ */ React2.createElement("span", {
-    ref,
+
+  return /*#__PURE__*/_jsx2(Text, {
+    lines: lines,
+    expanded: expanded
+  }, void 0, /*#__PURE__*/jsx("span", {
+    ref: ref,
     "data-testid": "ds-read_more-text",
-    "aria-label": content
-  }, content), showButton && !withTooltip && /* @__PURE__ */ React2.createElement(MoreLessButton, {
-    expanded,
+    "aria-label": content,
+    children: content
+  }), showButton && !withTooltip && /*#__PURE__*/_jsx2(MoreLessButton, {
+    expanded: expanded,
     label: expanded ? less : more,
     onClick: () => toggleExpanded(!expanded),
     ariaLabel: expanded ? less : more,
-    ellipsis,
+    ellipsis: ellipsis,
     dataTestId: "ds-read_more-button"
-  }), withTooltip && /* @__PURE__ */ React2.createElement("div", {
+  }), withTooltip && /*#__PURE__*/_jsx2("div", {
     style: {
-      display: "inline-block"
+      display: 'inline-block'
     }
-  }, /* @__PURE__ */ React2.createElement(DSTooltipV3, {
+  }, void 0, /*#__PURE__*/_jsx2(DSTooltipV3, {
     text: content
-  }, /* @__PURE__ */ React2.createElement(MoreLessButton, {
-    expanded,
+  }, void 0, /*#__PURE__*/_jsx2(MoreLessButton, {
+    expanded: expanded,
     label: "...",
     ariaLabel: content,
-    ellipsis,
-    withTooltip,
+    ellipsis: ellipsis,
+    withTooltip: withTooltip,
     dataTestId: "ds-read_more-tooltip-button"
   }))));
 };
+
 const DSReadMoreProps = {
-  lines: PropTypes.number.description("Ammount of lines after you want to display an ellipsis + more/less button").defaultValue(2),
-  more: PropTypes.string.description("Label which will appear on the 'More' button").defaultValue("more"),
-  less: PropTypes.string.description("Label which will appear on the 'Less' button").defaultValue("less"),
+  /** Ammount of lines after you want to display an ellipsis + more/less button */
+  lines: PropTypes.number.description('Ammount of lines after you want to display an ellipsis + more/less button').defaultValue(2),
+
+  /** Label which will appear on the 'More' button */
+  more: PropTypes.string.description("Label which will appear on the 'More' button").defaultValue('more'),
+
+  /** Label which will appear on the 'Less' button */
+  less: PropTypes.string.description("Label which will appear on the 'Less' button").defaultValue('less'),
+
+  /** Function which will execute when the user click the 'More' button */
   onMore: PropTypes.func.description("Function which will execute when the user click the 'More' button"),
+
+  /** Function which will execute when the user click the 'Less' button */
   onLess: PropTypes.func.description("Function which will execute when the user click the 'Less' button"),
-  content: PropTypes.string.description("The text content you want displayed").isRequired,
-  buttonType: PropTypes.oneOf(buttonTypes).description("The type for the more/less button").defaultValue("link"),
-  size: PropTypes.oneOf(dsBasicSizes).description("Size of the button").defaultValue("s"),
-  ellipsis: PropTypes.string.description("The text you want to appear when truncating").defaultValue("..."),
-  withTooltip: PropTypes.bool.description("Whether to show expandable tooltip on ellipsis focus instead of expandable buttons").defaultValue("false")
+
+  /** The text content you want displayed */
+  content: PropTypes.string.description('The text content you want displayed').isRequired,
+
+  /** 'The type of button for more/less button' */
+  buttonType: PropTypes.oneOf(buttonTypes).description('The type for the more/less button').defaultValue('link'),
+
+  /**
+   * ['s', 'm', 'l']
+   */
+  size: PropTypes.oneOf(dsBasicSizes).description('Size of the button').defaultValue('s'),
+
+  /** The text you want to appear when truncating */
+  ellipsis: PropTypes.string.description('The text you want to appear when truncating').defaultValue('...'),
+  withTooltip: PropTypes.bool.description('Whether to show expandable tooltip on ellipsis focus instead of expandable buttons').defaultValue('false')
 };
-DSReadMore.propTypes = DSReadMoreProps;
 const DSReadMoreWithSchema = describe(DSReadMore);
 DSReadMoreWithSchema.propTypes = DSReadMoreProps;
-var DSReadMore_default = DSReadMore;
-export {
-  DSReadMore,
-  DSReadMoreWithSchema,
-  DSReadMore_default as default
-};
-//# sourceMappingURL=DSReadMore.js.map
+
+export { DSReadMore, DSReadMoreWithSchema, DSReadMore as default };

package/esm/MoreLessButton.js

@@ -1,36 +1,48 @@
-import * as React from "react";
-import React2 from "react";
-import styled from "styled-components";
-import { DSButtonV2 } from "@elliemae/ds-button";
-const StyledButton = styled(DSButtonV2)`
-  padding: 0;
-  color: ${({ withTooltip, theme }) => withTooltip ? "inherit" : `${theme.colors.brand["600"]}`};
-  border: 0;
-  margin: 0;
-  font-size: 12px;
-  font-weight: 200;
-  min-width: 0px;
-  height: auto;
-  text-transform: unset;
-  &:hover:not([disabled]) {
-    color: ${({ withTooltip, theme }) => withTooltip ? "inherit" : `${theme.colors.brand["600"]}`};
-    background-color: transparent;
-    text-decoration: ${({ withTooltip }) => withTooltip ? "" : "underline"};
-  }
-`;
-const MoreLessButton = (props) => {
-  const { expanded, ariaLabel, label, onClick, ellipsis, withTooltip, dataTestId } = props;
-  return /* @__PURE__ */ React2.createElement("span", null, expanded || withTooltip ? " " : ellipsis, /* @__PURE__ */ React2.createElement(StyledButton, {
+import _jsx2 from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import styled from 'styled-components';
+import { DSButtonV2 } from '@elliemae/ds-button';
+
+const StyledButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
+  componentId: "sc-1innsd2-0"
+})(["padding:0;color:", ";border:0;margin:0;font-size:12px;font-weight:200;min-width:0px;height:auto;text-transform:unset;&:hover:not([disabled]){color:", ";background-color:transparent;text-decoration:", ";}"], _ref => {
+  let {
     withTooltip,
+    theme
+  } = _ref;
+  return withTooltip ? 'inherit' : "".concat(theme.colors.brand['600']);
+}, _ref2 => {
+  let {
+    withTooltip,
+    theme
+  } = _ref2;
+  return withTooltip ? 'inherit' : "".concat(theme.colors.brand['600']);
+}, _ref3 => {
+  let {
+    withTooltip
+  } = _ref3;
+  return withTooltip ? '' : 'underline';
+});
+
+const MoreLessButton = props => {
+  const {
+    expanded,
+    ariaLabel,
+    label,
+    onClick,
+    ellipsis,
+    withTooltip,
+    dataTestId
+  } = props;
+  return /*#__PURE__*/_jsx2("span", {}, void 0, expanded || withTooltip ? ' ' : ellipsis, /*#__PURE__*/_jsx2(StyledButton, {
+    withTooltip: withTooltip,
     "aria-label": ariaLabel,
     buttonType: "text",
-    onClick,
+    onClick: onClick,
     "aria-hidden": true,
     size: "s",
     "data-testid": dataTestId
-  }, label));
-};
-export {
-  MoreLessButton
+  }, void 0, label));
 };
-//# sourceMappingURL=MoreLessButton.js.map
+
+export { MoreLessButton };

package/esm/index.d.js

@@ -1,2 +1 @@
-import * as React from "react";
-//# sourceMappingURL=index.d.js.map
+

package/esm/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-read-more",
-  "version": "2.2.0-alpha.2",
+  "version": "2.2.0-beta.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Read More",
   "module": "./esm/index.js",
@@ -40,8 +40,8 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.2.0-alpha.2",
-    "@elliemae/ds-shared": "2.2.0-alpha.2",
+    "@elliemae/ds-button": "2.2.0-beta.0",
+    "@elliemae/ds-shared": "2.2.0-beta.0",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {

package/cjs/DSReadMore.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/DSReadMore.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useLayoutEffect, useRef, useState, useCallback } from 'react';\nimport { noop } from 'lodash';\nimport type { WeakValidationMap } from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport styled from 'styled-components';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nimport { buttonTypes } from '@elliemae/ds-button';\nimport { dsBasicSizes } from '@elliemae/ds-shared/prop-types';\nimport { MoreLessButton } from './MoreLessButton';\nimport { DSReadMoreT } from './index.d';\n\nconst Text = styled.span<{ lines: number; expanded: boolean }>`\n  display: -webkit-box;\n  -webkit-line-clamp: ${({ lines, expanded }) => (expanded ? 'unset' : lines)};\n  -webkit-box-orient: vertical;\n  -webkit-hyphens: auto;\n  -moz-hyphens: auto;\n  -ms-hyphens: auto;\n  hyphens: auto;\n  word-break: break-all;\n`;\n\nconst DSReadMore = (props: DSReadMoreT) => {\n  const {\n    lines = 2,\n    more = 'more',\n    less = 'less',\n    onMore = noop,\n    onLess = noop,\n    content,\n    ellipsis = '...',\n    withTooltip = false,\n  } = props;\n  const ref = useRef<HTMLElement>(null);\n  const [showButton, setShowButton] = useState(false);\n  const [expanded, setExpanded] = useState(false);\n\n  // offsetHeight + 2 takes into consideration any size of the button\n  const overflows = ({ offsetHeight, scrollHeight }: { offsetHeight: number; scrollHeight: number }) =>\n    offsetHeight + 2 < scrollHeight;\n\n  // Searchs the optimum cut on the text to have the button in the same line\n  const binSearchTextOverflow = useCallback(\n    (element: HTMLElement, parent: HTMLElement) => {\n      const text = element.innerText;\n      let left = 1;\n      let right = text.length;\n      let textEnd = 0;\n      while (left <= right) {\n        const middle = (left + right) / 2;\n        element.innerText = content.slice(0, middle);\n        if (overflows(parent)) right = middle - 1;\n        else {\n          left = middle + 1;\n          textEnd = middle;\n        }\n      }\n      element.innerText = content.slice(0, textEnd);\n    },\n    [content],\n  );\n\n  useLayoutEffect(() => {\n    const textElement = ref.current;\n    const parentElement = ref.current?.parentElement;\n    if (parentElement && textElement) {\n      textElement.innerText = content;\n      setShowButton(expanded || overflows(parentElement));\n      if (!expanded && overflows(parentElement)) {\n        binSearchTextOverflow(textElement, parentElement);\n      }\n    }\n  }, [lines, content, binSearchTextOverflow, expanded, showButton, withTooltip, more, less]);\n\n  const toggleExpanded = (newExpanded: boolean) => {\n    setExpanded(newExpanded);\n    if (newExpanded) onMore();\n    else onLess();\n  };\n\n  return (\n    <Text lines={lines} expanded={expanded}>\n      <span ref={ref} data-testid=\"ds-read_more-text\" aria-label={content}>\n        {content}\n      </span>\n      {showButton && !withTooltip && (\n        <MoreLessButton\n          expanded={expanded}\n          label={expanded ? less : more}\n          onClick={() => toggleExpanded(!expanded)}\n          ariaLabel={expanded ? less : more}\n          ellipsis={ellipsis}\n          dataTestId=\"ds-read_more-button\"\n        />\n      )}\n      {withTooltip && (\n        <div\n          style={{\n            display: 'inline-block',\n          }}\n        >\n          <DSTooltipV3 text={content}>\n            <MoreLessButton\n              expanded={expanded}\n              label=\"...\"\n              ariaLabel={content}\n              ellipsis={ellipsis}\n              withTooltip={withTooltip}\n              dataTestId=\"ds-read_more-tooltip-button\"\n            />\n          </DSTooltipV3>\n        </div>\n      )}\n    </Text>\n  );\n};\n\nconst DSReadMoreProps = {\n  /** Ammount of lines after you want to display an ellipsis + more/less button */\n  lines: PropTypes.number\n    .description('Ammount of lines after you want to display an ellipsis + more/less button')\n    .defaultValue(2),\n  /** Label which will appear on the 'More' button */\n  more: PropTypes.string.description(\"Label which will appear on the 'More' button\").defaultValue('more'),\n  /** Label which will appear on the 'Less' button */\n  less: PropTypes.string.description(\"Label which will appear on the 'Less' button\").defaultValue('less'),\n  /** Function which will execute when the user click the 'More' button */\n  onMore: PropTypes.func.description(\"Function which will execute when the user click the 'More' button\"),\n  /** Function which will execute when the user click the 'Less' button */\n  onLess: PropTypes.func.description(\"Function which will execute when the user click the 'Less' button\"),\n  /** The text content you want displayed */\n  content: PropTypes.string.description('The text content you want displayed').isRequired,\n\n  /** 'The type of button for more/less button' */\n  buttonType: PropTypes.oneOf(buttonTypes).description('The type for the more/less button').defaultValue('link'),\n  /**\n   * ['s', 'm', 'l']\n   */\n  size: PropTypes.oneOf(dsBasicSizes as string[])\n    .description('Size of the button')\n    .defaultValue('s'),\n\n  /** The text you want to appear when truncating */\n  ellipsis: PropTypes.string.description('The text you want to appear when truncating').defaultValue('...'),\n  withTooltip: PropTypes.bool\n    .description('Whether to show expandable tooltip on ellipsis focus instead of expandable buttons')\n    .defaultValue('false'),\n};\n\nDSReadMore.propTypes = DSReadMoreProps as WeakValidationMap<unknown>;\n\nconst DSReadMoreWithSchema = describe<DSReadMoreT>(DSReadMore);\n\nDSReadMoreWithSchema.propTypes = DSReadMoreProps;\n\nexport { DSReadMore, DSReadMoreWithSchema };\nexport default DSReadMore;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
-  "names": []
-}

package/cjs/MoreLessButton.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/MoreLessButton.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport styled from 'styled-components';\nimport { DSButtonV2 } from '@elliemae/ds-button';\n\nimport type { MoreLessButtonT } from './index.d';\n\nconst StyledButton = styled(DSButtonV2)<{ withTooltip: boolean }>`\n  padding: 0;\n  color: ${({ withTooltip, theme }) => (withTooltip ? 'inherit' : `${theme.colors.brand['600']}`)};\n  border: 0;\n  margin: 0;\n  font-size: 12px;\n  font-weight: 200;\n  min-width: 0px;\n  height: auto;\n  text-transform: unset;\n  &:hover:not([disabled]) {\n    color: ${({ withTooltip, theme }) => (withTooltip ? 'inherit' : `${theme.colors.brand['600']}`)};\n    background-color: transparent;\n    text-decoration: ${({ withTooltip }) => (withTooltip ? '' : 'underline')};\n  }\n`;\nconst MoreLessButton = (props: MoreLessButtonT) => {\n  const { expanded, ariaLabel, label, onClick, ellipsis, withTooltip, dataTestId } = props;\n\n  return (\n    <span>\n      {expanded || withTooltip ? ' ' : ellipsis}\n\n      <StyledButton\n        withTooltip={withTooltip}\n        aria-label={ariaLabel}\n        buttonType=\"text\"\n        onClick={onClick}\n        aria-hidden\n        size=\"s\"\n        data-testid={dataTestId}\n      >\n        {label}\n      </StyledButton>\n    </span>\n  );\n};\n\nexport { MoreLessButton };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,+BAAmB;AACnB,uBAA2B;AAI3B,MAAM,eAAe,sCAAO;AAAA;AAAA,WAEjB,CAAC,EAAE,aAAa,YAAa,cAAc,YAAY,GAAG,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAS3E,CAAC,EAAE,aAAa,YAAa,cAAc,YAAY,GAAG,MAAM,OAAO,MAAM;AAAA;AAAA,uBAEnE,CAAC,EAAE,kBAAmB,cAAc,KAAK;AAAA;AAAA;AAGhE,MAAM,iBAAiB,CAAC,UAA2B;AACjD,QAAM,EAAE,UAAU,WAAW,OAAO,SAAS,UAAU,aAAa,eAAe;AAEnF,SACE,mDAAC,QAAD,MACG,YAAY,cAAc,MAAM,UAEjC,mDAAC,cAAD;AAAA,IACE;AAAA,IACA,cAAY;AAAA,IACZ,YAAW;AAAA,IACX;AAAA,IACA,eAAW;AAAA,IACX,MAAK;AAAA,IACL,eAAa;AAAA,KAEZ;AAAA;",
-  "names": []
-}

package/cjs/index.d.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/index.d.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export interface DSReadMoreT {\n  lines: number;\n  more: string;\n  less: string;\n  onMore: () => void;\n  onLess: () => void;\n  content: string;\n  ellipsis: string;\n  withTooltip?: boolean;\n}\n\nexport interface MoreLessButtonT {\n  expanded: boolean;\n  label: string;\n  onClick?: () => void;\n  ellipsis: string;\n  withTooltip?: boolean;\n  ariaLabel: string;\n  dataTestId: string;\n}\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;",
-  "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 './DSReadMore';\nexport { default } from './DSReadMore';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc;AACd,wBAAwB;",
-  "names": []
-}

package/esm/DSReadMore.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSReadMore.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useLayoutEffect, useRef, useState, useCallback } from 'react';\nimport { noop } from 'lodash';\nimport type { WeakValidationMap } from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport styled from 'styled-components';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nimport { buttonTypes } from '@elliemae/ds-button';\nimport { dsBasicSizes } from '@elliemae/ds-shared/prop-types';\nimport { MoreLessButton } from './MoreLessButton';\nimport { DSReadMoreT } from './index.d';\n\nconst Text = styled.span<{ lines: number; expanded: boolean }>`\n  display: -webkit-box;\n  -webkit-line-clamp: ${({ lines, expanded }) => (expanded ? 'unset' : lines)};\n  -webkit-box-orient: vertical;\n  -webkit-hyphens: auto;\n  -moz-hyphens: auto;\n  -ms-hyphens: auto;\n  hyphens: auto;\n  word-break: break-all;\n`;\n\nconst DSReadMore = (props: DSReadMoreT) => {\n  const {\n    lines = 2,\n    more = 'more',\n    less = 'less',\n    onMore = noop,\n    onLess = noop,\n    content,\n    ellipsis = '...',\n    withTooltip = false,\n  } = props;\n  const ref = useRef<HTMLElement>(null);\n  const [showButton, setShowButton] = useState(false);\n  const [expanded, setExpanded] = useState(false);\n\n  // offsetHeight + 2 takes into consideration any size of the button\n  const overflows = ({ offsetHeight, scrollHeight }: { offsetHeight: number; scrollHeight: number }) =>\n    offsetHeight + 2 < scrollHeight;\n\n  // Searchs the optimum cut on the text to have the button in the same line\n  const binSearchTextOverflow = useCallback(\n    (element: HTMLElement, parent: HTMLElement) => {\n      const text = element.innerText;\n      let left = 1;\n      let right = text.length;\n      let textEnd = 0;\n      while (left <= right) {\n        const middle = (left + right) / 2;\n        element.innerText = content.slice(0, middle);\n        if (overflows(parent)) right = middle - 1;\n        else {\n          left = middle + 1;\n          textEnd = middle;\n        }\n      }\n      element.innerText = content.slice(0, textEnd);\n    },\n    [content],\n  );\n\n  useLayoutEffect(() => {\n    const textElement = ref.current;\n    const parentElement = ref.current?.parentElement;\n    if (parentElement && textElement) {\n      textElement.innerText = content;\n      setShowButton(expanded || overflows(parentElement));\n      if (!expanded && overflows(parentElement)) {\n        binSearchTextOverflow(textElement, parentElement);\n      }\n    }\n  }, [lines, content, binSearchTextOverflow, expanded, showButton, withTooltip, more, less]);\n\n  const toggleExpanded = (newExpanded: boolean) => {\n    setExpanded(newExpanded);\n    if (newExpanded) onMore();\n    else onLess();\n  };\n\n  return (\n    <Text lines={lines} expanded={expanded}>\n      <span ref={ref} data-testid=\"ds-read_more-text\" aria-label={content}>\n        {content}\n      </span>\n      {showButton && !withTooltip && (\n        <MoreLessButton\n          expanded={expanded}\n          label={expanded ? less : more}\n          onClick={() => toggleExpanded(!expanded)}\n          ariaLabel={expanded ? less : more}\n          ellipsis={ellipsis}\n          dataTestId=\"ds-read_more-button\"\n        />\n      )}\n      {withTooltip && (\n        <div\n          style={{\n            display: 'inline-block',\n          }}\n        >\n          <DSTooltipV3 text={content}>\n            <MoreLessButton\n              expanded={expanded}\n              label=\"...\"\n              ariaLabel={content}\n              ellipsis={ellipsis}\n              withTooltip={withTooltip}\n              dataTestId=\"ds-read_more-tooltip-button\"\n            />\n          </DSTooltipV3>\n        </div>\n      )}\n    </Text>\n  );\n};\n\nconst DSReadMoreProps = {\n  /** Ammount of lines after you want to display an ellipsis + more/less button */\n  lines: PropTypes.number\n    .description('Ammount of lines after you want to display an ellipsis + more/less button')\n    .defaultValue(2),\n  /** Label which will appear on the 'More' button */\n  more: PropTypes.string.description(\"Label which will appear on the 'More' button\").defaultValue('more'),\n  /** Label which will appear on the 'Less' button */\n  less: PropTypes.string.description(\"Label which will appear on the 'Less' button\").defaultValue('less'),\n  /** Function which will execute when the user click the 'More' button */\n  onMore: PropTypes.func.description(\"Function which will execute when the user click the 'More' button\"),\n  /** Function which will execute when the user click the 'Less' button */\n  onLess: PropTypes.func.description(\"Function which will execute when the user click the 'Less' button\"),\n  /** The text content you want displayed */\n  content: PropTypes.string.description('The text content you want displayed').isRequired,\n\n  /** 'The type of button for more/less button' */\n  buttonType: PropTypes.oneOf(buttonTypes).description('The type for the more/less button').defaultValue('link'),\n  /**\n   * ['s', 'm', 'l']\n   */\n  size: PropTypes.oneOf(dsBasicSizes as string[])\n    .description('Size of the button')\n    .defaultValue('s'),\n\n  /** The text you want to appear when truncating */\n  ellipsis: PropTypes.string.description('The text you want to appear when truncating').defaultValue('...'),\n  withTooltip: PropTypes.bool\n    .description('Whether to show expandable tooltip on ellipsis focus instead of expandable buttons')\n    .defaultValue('false'),\n};\n\nDSReadMore.propTypes = DSReadMoreProps as WeakValidationMap<unknown>;\n\nconst DSReadMoreWithSchema = describe<DSReadMoreT>(DSReadMore);\n\nDSReadMoreWithSchema.propTypes = DSReadMoreProps;\n\nexport { DSReadMore, DSReadMoreWithSchema };\nexport default DSReadMore;\n"],
-  "mappings": "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",
-  "names": []
-}

package/esm/MoreLessButton.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/MoreLessButton.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport styled from 'styled-components';\nimport { DSButtonV2 } from '@elliemae/ds-button';\n\nimport type { MoreLessButtonT } from './index.d';\n\nconst StyledButton = styled(DSButtonV2)<{ withTooltip: boolean }>`\n  padding: 0;\n  color: ${({ withTooltip, theme }) => (withTooltip ? 'inherit' : `${theme.colors.brand['600']}`)};\n  border: 0;\n  margin: 0;\n  font-size: 12px;\n  font-weight: 200;\n  min-width: 0px;\n  height: auto;\n  text-transform: unset;\n  &:hover:not([disabled]) {\n    color: ${({ withTooltip, theme }) => (withTooltip ? 'inherit' : `${theme.colors.brand['600']}`)};\n    background-color: transparent;\n    text-decoration: ${({ withTooltip }) => (withTooltip ? '' : 'underline')};\n  }\n`;\nconst MoreLessButton = (props: MoreLessButtonT) => {\n  const { expanded, ariaLabel, label, onClick, ellipsis, withTooltip, dataTestId } = props;\n\n  return (\n    <span>\n      {expanded || withTooltip ? ' ' : ellipsis}\n\n      <StyledButton\n        withTooltip={withTooltip}\n        aria-label={ariaLabel}\n        buttonType=\"text\"\n        onClick={onClick}\n        aria-hidden\n        size=\"s\"\n        data-testid={dataTestId}\n      >\n        {label}\n      </StyledButton>\n    </span>\n  );\n};\n\nexport { MoreLessButton };\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AAIA,MAAM,eAAe,OAAO;AAAA;AAAA,WAEjB,CAAC,EAAE,aAAa,YAAa,cAAc,YAAY,GAAG,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAS3E,CAAC,EAAE,aAAa,YAAa,cAAc,YAAY,GAAG,MAAM,OAAO,MAAM;AAAA;AAAA,uBAEnE,CAAC,EAAE,kBAAmB,cAAc,KAAK;AAAA;AAAA;AAGhE,MAAM,iBAAiB,CAAC,UAA2B;AACjD,QAAM,EAAE,UAAU,WAAW,OAAO,SAAS,UAAU,aAAa,eAAe;AAEnF,SACE,qCAAC,QAAD,MACG,YAAY,cAAc,MAAM,UAEjC,qCAAC,cAAD;AAAA,IACE;AAAA,IACA,cAAY;AAAA,IACZ,YAAW;AAAA,IACX;AAAA,IACA,eAAW;AAAA,IACX,MAAK;AAAA,IACL,eAAa;AAAA,KAEZ;AAAA;",
-  "names": []
-}

package/esm/index.d.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
-  "mappings": "AAAA;",
-  "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 './DSReadMore';\nexport { default } from './DSReadMore';\n"],
-  "mappings": "AAAA;ACAA;AACA;",
-  "names": []
-}