@elliemae/ds-read-more 2.1.0-rc.6 → 2.1.0

package/cjs/DSReadMore.js

@@ -5,9 +5,11 @@ 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 DSButton = require('@elliemae/ds-button');
+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');
@@ -27,32 +29,31 @@ const Text = /*#__PURE__*/styled__default["default"].span.withConfig({
   return expanded ? 'unset' : lines;
 });
 
-const DSReadMore = _ref2 => {
-  let {
+const DSReadMore = props => {
+  const {
     lines = 2,
     more = 'more',
     less = 'less',
-    onMore = () => null,
-    onLess = () => null,
+    onMore = lodash.noop,
+    onLess = lodash.noop,
     content,
-    buttonType = 'link',
-    size = 's',
-    ellipsis = '...'
-  } = _ref2;
-  const ref = react.useRef();
+    ellipsis = '...',
+    withTooltip = false
+  } = props;
+  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 = _ref3 => {
+  const overflows = _ref2 => {
     let {
       offsetHeight,
       scrollHeight
-    } = _ref3;
+    } = _ref2;
     return offsetHeight + 2 < scrollHeight;
   }; // Searchs the optimum cut on the text to have the button in the same line
 
 
-  const binSearchTextOverflow = (element, parent) => {
+  const binSearchTextOverflow = react.useCallback((element, parent) => {
     const text = element.innerText;
     let left = 1;
     let right = text.length;
@@ -68,15 +69,14 @@ const DSReadMore = _ref2 => {
     }
 
     element.innerText = content.slice(0, textEnd);
-  };
-
+  }, [content]);
   react.useLayoutEffect(() => {
     var _ref$current;
 
     const textElement = ref.current;
     const parentElement = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.parentElement;
 
-    if (parentElement) {
+    if (parentElement && textElement) {
       textElement.innerText = content;
       setShowButton(expanded || overflows(parentElement));
 
@@ -84,7 +84,7 @@ const DSReadMore = _ref2 => {
         binSearchTextOverflow(textElement, parentElement);
       }
     }
-  }, [lines, content, expanded, showButton, more, less]);
+  }, [lines, content, binSearchTextOverflow, expanded, showButton, withTooltip, more, less]);
 
   const toggleExpanded = newExpanded => {
     setExpanded(newExpanded);
@@ -97,15 +97,29 @@ const DSReadMore = _ref2 => {
   }, void 0, /*#__PURE__*/jsxRuntime.jsx("span", {
     ref: ref,
     "data-testid": "ds-read_more-text",
+    "aria-label": content,
     children: content
-  }), showButton && /*#__PURE__*/_jsx2__default["default"]("span", {}, void 0, /*#__PURE__*/_jsx2__default["default"](MoreLessButton.MoreLessButton, {
+  }), showButton && !withTooltip && /*#__PURE__*/_jsx2__default["default"](MoreLessButton.MoreLessButton, {
     expanded: expanded,
     label: expanded ? less : more,
     onClick: () => toggleExpanded(!expanded),
-    buttonType: buttonType,
-    size: size,
-    ellipsis: ellipsis
-  })));
+    ariaLabel: expanded ? less : more,
+    ellipsis: ellipsis,
+    dataTestId: "ds-read_more-button"
+  }), withTooltip && /*#__PURE__*/_jsx2__default["default"]("div", {
+    style: {
+      display: 'inline-block'
+    }
+  }, void 0, /*#__PURE__*/_jsx2__default["default"](dsTooltip.DSTooltipV3, {
+    text: content
+  }, void 0, /*#__PURE__*/_jsx2__default["default"](MoreLessButton.MoreLessButton, {
+    expanded: expanded,
+    label: "...",
+    ariaLabel: content,
+    ellipsis: ellipsis,
+    withTooltip: withTooltip,
+    dataTestId: "ds-read_more-tooltip-button"
+  }))));
 };
 
 const DSReadMoreProps = {
@@ -125,10 +139,10 @@ const DSReadMoreProps = {
   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.isRequired.description('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'),
+  buttonType: reactDesc.PropTypes.oneOf(dsButton.buttonTypes).description('The type for the more/less button').defaultValue('link'),
 
   /**
    * ['s', 'm', 'l']
@@ -136,9 +150,10 @@ const DSReadMoreProps = {
   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('...')
+  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')
 };
-const DSReadMoreWithSchema = reactDesc.describe(DSReadMore).description('ReadMore component');
+const DSReadMoreWithSchema = reactDesc.describe(DSReadMore);
 DSReadMoreWithSchema.propTypes = DSReadMoreProps;
 
 exports.DSReadMore = DSReadMore;

package/cjs/MoreLessButton.js

@@ -4,29 +4,54 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx2 = require('@babel/runtime/helpers/jsx');
 require('react');
-var DSButton = require('@elliemae/ds-button');
+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 DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const MoreLessButton = _ref => {
+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';
+});
+
+const MoreLessButton = props => {
+  const {
     expanded,
+    ariaLabel,
     label,
     onClick,
-    buttonType,
-    size,
-    ellipsis
-  } = _ref;
-  return /*#__PURE__*/_jsx2__default["default"]("span", {}, void 0, expanded ? ' ' : ellipsis, /*#__PURE__*/_jsx2__default["default"](DSButton__default["default"], {
-    buttonType: buttonType,
-    labelText: label,
+    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,
-    size: size,
-    "data-testid": "ds-read_more-button"
-  }));
+    "aria-hidden": true,
+    size: "s",
+    "data-testid": dataTestId
+  }, void 0, label));
 };
 
 exports.MoreLessButton = MoreLessButton;

package/cjs/index.d.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/esm/DSReadMore.js

@@ -1,8 +1,10 @@
 import _jsx2 from '@babel/runtime/helpers/esm/jsx';
 import 'core-js/modules/web.dom-collections.iterator.js';
-import { useRef, useState, useLayoutEffect } from 'react';
+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';
@@ -18,32 +20,31 @@ const Text = /*#__PURE__*/styled.span.withConfig({
   return expanded ? 'unset' : lines;
 });
 
-const DSReadMore = _ref2 => {
-  let {
+const DSReadMore = props => {
+  const {
     lines = 2,
     more = 'more',
     less = 'less',
-    onMore = () => null,
-    onLess = () => null,
+    onMore = noop,
+    onLess = noop,
     content,
-    buttonType = 'link',
-    size = 's',
-    ellipsis = '...'
-  } = _ref2;
-  const ref = useRef();
+    ellipsis = '...',
+    withTooltip = false
+  } = props;
+  const ref = useRef(null);
   const [showButton, setShowButton] = useState(false);
   const [expanded, setExpanded] = useState(false); // offsetHeight + 2 takes into consideration any size of the button
 
-  const overflows = _ref3 => {
+  const overflows = _ref2 => {
     let {
       offsetHeight,
       scrollHeight
-    } = _ref3;
+    } = _ref2;
     return offsetHeight + 2 < scrollHeight;
   }; // Searchs the optimum cut on the text to have the button in the same line
 
 
-  const binSearchTextOverflow = (element, parent) => {
+  const binSearchTextOverflow = useCallback((element, parent) => {
     const text = element.innerText;
     let left = 1;
     let right = text.length;
@@ -59,15 +60,14 @@ const DSReadMore = _ref2 => {
     }
 
     element.innerText = content.slice(0, textEnd);
-  };
-
+  }, [content]);
   useLayoutEffect(() => {
     var _ref$current;
 
     const textElement = ref.current;
     const parentElement = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.parentElement;
 
-    if (parentElement) {
+    if (parentElement && textElement) {
       textElement.innerText = content;
       setShowButton(expanded || overflows(parentElement));
 
@@ -75,7 +75,7 @@ const DSReadMore = _ref2 => {
         binSearchTextOverflow(textElement, parentElement);
       }
     }
-  }, [lines, content, expanded, showButton, more, less]);
+  }, [lines, content, binSearchTextOverflow, expanded, showButton, withTooltip, more, less]);
 
   const toggleExpanded = newExpanded => {
     setExpanded(newExpanded);
@@ -88,15 +88,29 @@ const DSReadMore = _ref2 => {
   }, void 0, /*#__PURE__*/jsx("span", {
     ref: ref,
     "data-testid": "ds-read_more-text",
+    "aria-label": content,
     children: content
-  }), showButton && /*#__PURE__*/_jsx2("span", {}, void 0, /*#__PURE__*/_jsx2(MoreLessButton, {
+  }), showButton && !withTooltip && /*#__PURE__*/_jsx2(MoreLessButton, {
     expanded: expanded,
     label: expanded ? less : more,
     onClick: () => toggleExpanded(!expanded),
-    buttonType: buttonType,
-    size: size,
-    ellipsis: ellipsis
-  })));
+    ariaLabel: expanded ? less : more,
+    ellipsis: ellipsis,
+    dataTestId: "ds-read_more-button"
+  }), withTooltip && /*#__PURE__*/_jsx2("div", {
+    style: {
+      display: 'inline-block'
+    }
+  }, void 0, /*#__PURE__*/_jsx2(DSTooltipV3, {
+    text: content
+  }, void 0, /*#__PURE__*/_jsx2(MoreLessButton, {
+    expanded: expanded,
+    label: "...",
+    ariaLabel: content,
+    ellipsis: ellipsis,
+    withTooltip: withTooltip,
+    dataTestId: "ds-read_more-tooltip-button"
+  }))));
 };
 
 const DSReadMoreProps = {
@@ -116,7 +130,7 @@ const DSReadMoreProps = {
   onLess: PropTypes.func.description("Function which will execute when the user click the 'Less' button"),
 
   /** The text content you want displayed */
-  content: PropTypes.string.isRequired.description('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'),
@@ -127,9 +141,10 @@ const DSReadMoreProps = {
   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('...')
+  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')
 };
-const DSReadMoreWithSchema = describe(DSReadMore).description('ReadMore component');
+const DSReadMoreWithSchema = describe(DSReadMore);
 DSReadMoreWithSchema.propTypes = DSReadMoreProps;
 
 export { DSReadMore, DSReadMoreWithSchema, DSReadMore as default };

package/esm/MoreLessButton.js

@@ -1,23 +1,48 @@
 import _jsx2 from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import DSButton from '@elliemae/ds-button';
+import styled from 'styled-components';
+import { DSButtonV2 } from '@elliemae/ds-button';
 
-const MoreLessButton = _ref => {
+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,
-    buttonType,
-    size,
-    ellipsis
-  } = _ref;
-  return /*#__PURE__*/_jsx2("span", {}, void 0, expanded ? ' ' : ellipsis, /*#__PURE__*/_jsx2(DSButton, {
-    buttonType: buttonType,
-    labelText: label,
+    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,
-    size: size,
-    "data-testid": "ds-read_more-button"
-  }));
+    "aria-hidden": true,
+    size: "s",
+    "data-testid": dataTestId
+  }, void 0, label));
 };
 
 export { MoreLessButton };

package/esm/index.d.js

@@ -0,0 +1 @@
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-read-more",
-  "version": "2.1.0-rc.6",
+  "version": "2.1.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.1.0-rc.6",
-    "@elliemae/ds-shared": "2.1.0-rc.6",
+    "@elliemae/ds-button": "2.1.0",
+    "@elliemae/ds-shared": "2.1.0",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {

package/types/DSReadMore.d.ts

@@ -1,62 +1,14 @@
 /// <reference path="../../../../shared/typings/react-desc.d.ts" />
-/// <reference types="react" />
+import React from 'react';
+import { DSReadMoreT } from './index.d';
 declare const DSReadMore: {
-    ({ lines, more, less, onMore, onLess, content, buttonType, size, ellipsis, }: {
-        lines?: number | undefined;
-        more?: string | undefined;
-        less?: string | undefined;
-        onMore?: (() => null) | undefined;
-        onLess?: (() => null) | undefined;
-        content: any;
-        buttonType?: string | undefined;
-        size?: string | undefined;
-        ellipsis?: string | undefined;
-    }): JSX.Element;
-    propTypes: {
-        /** Ammount of lines after you want to display an ellipsis + more/less button */
-        lines: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        /** Label which will appear on the 'More' button */
-        more: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        /** Label which will appear on the 'Less' button */
-        less: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        /** Function which will execute when the user click the 'More' button */
-        onMore: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        /** Function which will execute when the user click the 'Less' button */
-        onLess: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        /** The text content you want displayed */
-        content: any;
-        /** 'The type of button for more/less button' */
-        buttonType: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        /**
-         * ['s', 'm', 'l']
-         */
-        size: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        /** The text you want to appear when truncating */
-        ellipsis: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-    };
+    (props: DSReadMoreT): JSX.Element;
+    propTypes: React.WeakValidationMap<unknown>;
+};
+declare const DSReadMoreWithSchema: {
+    (props?: DSReadMoreT | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
 };
-declare const DSReadMoreWithSchema: any;
 export { DSReadMore, DSReadMoreWithSchema };
 export default DSReadMore;

package/types/MoreLessButton.d.ts

@@ -1,21 +1,4 @@
-/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
-declare const MoreLessButton: {
-    ({ expanded, label, onClick, buttonType, size, ellipsis, }: {
-        expanded: any;
-        label: any;
-        onClick: any;
-        buttonType: any;
-        size: any;
-        ellipsis: any;
-    }): JSX.Element;
-    propTypes: {
-        expanded: any;
-        label: import("react-desc").PropTypesDescValue;
-        onClick: import("react-desc").PropTypesDescValue;
-        buttonType: import("react-desc").PropTypesDescValue;
-        size: import("react-desc").PropTypesDescValue;
-        ellipsis: import("react-desc").PropTypesDescValue;
-    };
-};
+import type { MoreLessButtonT } from './index.d';
+declare const MoreLessButton: (props: MoreLessButtonT) => JSX.Element;
 export { MoreLessButton };

package/types/index.d.d.ts

@@ -0,0 +1,19 @@
+export interface DSReadMoreT {
+    lines: number;
+    more: string;
+    less: string;
+    onMore: () => void;
+    onLess: () => void;
+    content: string;
+    ellipsis: string;
+    withTooltip?: boolean;
+}
+export interface MoreLessButtonT {
+    expanded: boolean;
+    label: string;
+    onClick?: () => void;
+    ellipsis: string;
+    withTooltip?: boolean;
+    ariaLabel: string;
+    dataTestId: string;
+}