@elliemae/ds-read-more 2.0.0-alpha.1 → 2.0.0-alpha.13

package/cjs/DSReadMore.js

@@ -3,6 +3,7 @@
 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 reactDesc = require('react-desc');
 var styled = require('styled-components');
@@ -16,32 +17,39 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx2__default = /*#__PURE__*/_interopDefaultLegacy(_jsx2);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const Text = /*#__PURE__*/styled__default['default'].span.withConfig({
+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;"], ({
-  lines,
-  expanded
-}) => expanded ? 'unset' : lines);
-
-const DSReadMore = ({
-  lines = 2,
-  more = 'more',
-  less = 'less',
-  onMore = () => null,
-  onLess = () => null,
-  content,
-  buttonType = 'link',
-  size = 's',
-  ellipsis = '...'
-}) => {
+})(["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 = _ref2 => {
+  let {
+    lines = 2,
+    more = 'more',
+    less = 'less',
+    onMore = () => null,
+    onLess = () => null,
+    content,
+    buttonType = 'link',
+    size = 's',
+    ellipsis = '...'
+  } = _ref2;
   const ref = react.useRef();
   const [showButton, setShowButton] = react.useState(false);
   const [expanded, setExpanded] = react.useState(false); // offsetHeight + 2 takes into consideration any size of the button
 
-  const overflows = ({
-    offsetHeight,
-    scrollHeight
-  }) => offsetHeight + 2 < scrollHeight; // Searchs the optimum cut on the text to have the button in the same line
+  const overflows = _ref3 => {
+    let {
+      offsetHeight,
+      scrollHeight
+    } = _ref3;
+    return offsetHeight + 2 < scrollHeight;
+  }; // Searchs the optimum cut on the text to have the button in the same line
 
 
   const binSearchTextOverflow = (element, parent) => {
@@ -83,14 +91,14 @@ const DSReadMore = ({
     if (newExpanded) onMore();else onLess();
   };
 
-  return /*#__PURE__*/_jsx2__default['default'](Text, {
+  return /*#__PURE__*/_jsx2__default["default"](Text, {
     lines: lines,
     expanded: expanded
   }, void 0, /*#__PURE__*/jsxRuntime.jsx("span", {
     ref: ref,
     "data-testid": "ds-read_more-text",
     children: content
-  }), showButton && /*#__PURE__*/_jsx2__default['default']("span", {}, void 0, /*#__PURE__*/_jsx2__default['default'](MoreLessButton.MoreLessButton, {
+  }), showButton && /*#__PURE__*/_jsx2__default["default"]("span", {}, void 0, /*#__PURE__*/_jsx2__default["default"](MoreLessButton.MoreLessButton, {
     expanded: expanded,
     label: expanded ? less : more,
     onClick: () => toggleExpanded(!expanded),
@@ -135,4 +143,4 @@ DSReadMoreWithSchema.propTypes = DSReadMoreProps;
 
 exports.DSReadMore = DSReadMore;
 exports.DSReadMoreWithSchema = DSReadMoreWithSchema;
-exports['default'] = DSReadMore;
+exports["default"] = DSReadMore;

package/cjs/MoreLessButton.js

@@ -11,19 +11,22 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx2__default = /*#__PURE__*/_interopDefaultLegacy(_jsx2);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
-const MoreLessButton = ({
-  expanded,
-  label,
-  onClick,
-  buttonType,
-  size,
-  ellipsis
-}) => /*#__PURE__*/_jsx2__default['default']("span", {}, void 0, expanded ? ' ' : ellipsis, /*#__PURE__*/_jsx2__default['default'](DSButton__default['default'], {
-  buttonType: buttonType,
-  labelText: label,
-  onClick: onClick,
-  size: size,
-  "data-testid": "ds-read_more-button"
-}));
+const MoreLessButton = _ref => {
+  let {
+    expanded,
+    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,
+    onClick: onClick,
+    size: size,
+    "data-testid": "ds-read_more-button"
+  }));
+};
 
 exports.MoreLessButton = MoreLessButton;

package/cjs/index.js

@@ -8,4 +8,4 @@ var DSReadMore = require('./DSReadMore.js');
 
 exports.DSReadMore = DSReadMore.DSReadMore;
 exports.DSReadMoreWithSchema = DSReadMore.DSReadMoreWithSchema;
-exports.default = DSReadMore.DSReadMore;
+exports["default"] = DSReadMore.DSReadMore;

package/esm/DSReadMore.js

@@ -1,4 +1,5 @@
 import _jsx2 from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useRef, useState, useLayoutEffect } from 'react';
 import { PropTypes, describe } from 'react-desc';
 import styled from 'styled-components';
@@ -9,30 +10,37 @@ 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;"], ({
-  lines,
-  expanded
-}) => expanded ? 'unset' : lines);
-
-const DSReadMore = ({
-  lines = 2,
-  more = 'more',
-  less = 'less',
-  onMore = () => null,
-  onLess = () => null,
-  content,
-  buttonType = 'link',
-  size = 's',
-  ellipsis = '...'
-}) => {
+})(["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 = _ref2 => {
+  let {
+    lines = 2,
+    more = 'more',
+    less = 'less',
+    onMore = () => null,
+    onLess = () => null,
+    content,
+    buttonType = 'link',
+    size = 's',
+    ellipsis = '...'
+  } = _ref2;
   const ref = useRef();
   const [showButton, setShowButton] = useState(false);
   const [expanded, setExpanded] = useState(false); // offsetHeight + 2 takes into consideration any size of the button
 
-  const overflows = ({
-    offsetHeight,
-    scrollHeight
-  }) => offsetHeight + 2 < scrollHeight; // Searchs the optimum cut on the text to have the button in the same line
+  const overflows = _ref3 => {
+    let {
+      offsetHeight,
+      scrollHeight
+    } = _ref3;
+    return offsetHeight + 2 < scrollHeight;
+  }; // Searchs the optimum cut on the text to have the button in the same line
 
 
   const binSearchTextOverflow = (element, parent) => {

package/esm/MoreLessButton.js

@@ -2,19 +2,22 @@ import _jsx2 from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import DSButton from '@elliemae/ds-button';
 
-const MoreLessButton = ({
-  expanded,
-  label,
-  onClick,
-  buttonType,
-  size,
-  ellipsis
-}) => /*#__PURE__*/_jsx2("span", {}, void 0, expanded ? ' ' : ellipsis, /*#__PURE__*/_jsx2(DSButton, {
-  buttonType: buttonType,
-  labelText: label,
-  onClick: onClick,
-  size: size,
-  "data-testid": "ds-read_more-button"
-}));
+const MoreLessButton = _ref => {
+  let {
+    expanded,
+    label,
+    onClick,
+    buttonType,
+    size,
+    ellipsis
+  } = _ref;
+  return /*#__PURE__*/_jsx2("span", {}, void 0, expanded ? ' ' : ellipsis, /*#__PURE__*/_jsx2(DSButton, {
+    buttonType: buttonType,
+    labelText: label,
+    onClick: onClick,
+    size: size,
+    "data-testid": "ds-read_more-button"
+  }));
+};
 
 export { MoreLessButton };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-read-more",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.13",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Read More",
   "module": "./esm/index.js",
@@ -40,16 +40,18 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.0.0-alpha.1",
+    "@elliemae/ds-button": "2.0.0-alpha.13",
+    "@elliemae/ds-shared": "2.0.0-alpha.13",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {
-    "styled-components": "~5.3.1"
+    "@testing-library/react": "~12.1.2",
+    "styled-components": "~5.3.3"
   },
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.3"
   },
   "publishConfig": {
     "access": "public",

package/types/DSReadMore.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 declare const DSReadMore: {
     ({ lines, more, less, onMore, onLess, content, buttonType, size, ellipsis, }: {
@@ -13,25 +14,47 @@ declare const DSReadMore: {
     }): JSX.Element;
     propTypes: {
         /** Ammount of lines after you want to display an ellipsis + more/less button */
-        lines: any;
+        lines: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
         /** Label which will appear on the 'More' button */
-        more: any;
+        more: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
         /** Label which will appear on the 'Less' button */
-        less: any;
+        less: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
         /** Function which will execute when the user click the 'More' button */
-        onMore: any;
+        onMore: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Function which will execute when the user click the 'Less' button */
-        onLess: any;
+        onLess: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** The text content you want displayed */
         content: any;
         /** 'The type of button for more/less button' */
-        buttonType: any;
+        buttonType: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
         /**
          * ['s', 'm', 'l']
          */
-        size: any;
+        size: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
         /** The text you want to appear when truncating */
-        ellipsis: any;
+        ellipsis: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
 declare const DSReadMoreWithSchema: any;

package/types/MoreLessButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 declare const MoreLessButton: {
     ({ expanded, label, onClick, buttonType, size, ellipsis, }: {
@@ -10,11 +11,11 @@ declare const MoreLessButton: {
     }): JSX.Element;
     propTypes: {
         expanded: any;
-        label: any;
-        onClick: any;
-        buttonType: any;
-        size: any;
-        ellipsis: 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;
     };
 };
 export { MoreLessButton };

package/cjs/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "commonjs",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}

package/esm/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "module",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}