@helpdice/ui 2.6.0-beta.5 → 2.6.0-beta.7

package/esm/container/box.js

@@ -1,14 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["gap", "children", "direction", "justify", "alignItems", "alignContent", "collapse", "className"];
 import _JSXStyle from "../styled-jsx.es.js";
-import React, { useMemo, useState } from "react";
+import React, { useMemo } from "react";
 import GridBasicItem from "../grid/basic-item";
 import useScale, { withScale } from '../use-scale';
 import { useClasses } from '@helpdice/theme';
 import { tuple } from '../utils/prop-types';
-import Button from "../button";
+import Expandable from "components/expandable";
 var wrap = tuple('nowrap', 'wrap', 'wrap-reverse');
 var Container = function Container(_ref) {
   var _ref$gap = _ref.gap,
@@ -23,10 +22,6 @@ var Container = function Container(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     props = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    expand = _useState2[0],
-    setExpand = _useState2[1];
   var _useScale = useScale(),
     unit = _useScale.unit,
     SCALES = _useScale.SCALES;
@@ -45,29 +40,9 @@ var Container = function Container(_ref) {
   var classes = useClasses(resolveClassName, className);
   return /*#__PURE__*/React.createElement(GridBasicItem, _extends({
     className: classes
-  }, props), collapse > 50 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    style: {
-      maxHeight: expand ? '100%' : "".concat(collapse, "px"),
-      overflow: 'hidden',
-      display: 'inline',
-      transition: "max-height 0.3s ease"
-    }
-  }, children), /*#__PURE__*/React.createElement(Button, {
-    margin: 0,
-    onClick: function onClick() {
-      return setExpand(!expand);
-    },
-    style: {
-      textTransform: 'lowercase',
-      height: '25px'
-    },
-    effect: false,
-    color: "abort",
-    scale: 2 / 3,
-    px: 0.2,
-    py: 0,
-    auto: true
-  }, /*#__PURE__*/React.createElement("b", null, expand ? 'less' : 'more'))) : children, styles);
+  }, props), collapse > 10 ? /*#__PURE__*/React.createElement(Expandable, {
+    collapsedHeight: collapse
+  }, children) : children, styles);
 };
 Container.displayName = 'Container';
 export default withScale(Container);

package/esm/expandable/expand.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface ExpandableProps {
+    children: React.ReactNode;
+    collapsedHeight: number;
+}
+declare const Expandable: React.FC<ExpandableProps>;
+export default Expandable;

package/esm/expandable/expand.js

@@ -0,0 +1,67 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import Button from "../button";
+import React, { useEffect, useRef, useState } from "react";
+var Expandable = function Expandable(_ref) {
+  var children = _ref.children,
+    collapsedHeight = _ref.collapsedHeight;
+  var contentRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    expanded = _useState2[0],
+    setExpanded = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    fullHeight = _useState4[0],
+    setFullHeight = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isOverflowing = _useState6[0],
+    setIsOverflowing = _useState6[1];
+  useEffect(function () {
+    var el = contentRef.current;
+    if (!el) return;
+    var updateHeight = function updateHeight() {
+      var scrollHeight = el.scrollHeight;
+      setFullHeight(scrollHeight);
+      setIsOverflowing(scrollHeight > collapsedHeight);
+    };
+    updateHeight();
+    var observer = new ResizeObserver(updateHeight);
+    observer.observe(el);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [children, collapsedHeight]);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: expanded ? fullHeight : collapsedHeight,
+      overflow: "hidden",
+      transition: "height 0.3s ease",
+      position: "relative"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: contentRef
+  }, children), !expanded && isOverflowing && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      height: 40,
+      background: "linear-gradient(to bottom, rgba(255,255,255,0), white)"
+    }
+  })), isOverflowing && /*#__PURE__*/React.createElement(Button, {
+    margin: 0,
+    padding: 0,
+    onClick: function onClick() {
+      return setExpanded(function (prev) {
+        return !prev;
+      });
+    },
+    effect: false,
+    color: "abort",
+    scale: 2 / 3,
+    auto: true
+  }, /*#__PURE__*/React.createElement("b", null, expanded ? 'Show less' : 'Show more')));
+};
+export default Expandable;

package/esm/expandable/index.d.ts

@@ -0,0 +1,2 @@
+import Expandable from "./expand";
+export default Expandable;

package/esm/expandable/index.js

@@ -0,0 +1,2 @@
+import Expandable from "./expand";
+export default Expandable;

package/esm/index.d.ts

@@ -129,3 +129,4 @@ export type { CarouselProps } from './carousal';
 export { default as useToasts } from './use-toasts';
 export type { Toast, ToastInput, ToastAction, ToastLayout } from './use-toasts';
 export { default as Clipboard } from './copy-to-clipboard';
+export { default as Expandable } from './expandable';

package/esm/index.js

@@ -88,4 +88,5 @@ export { default as Carousel } from './carousal';
 // export type { CurrencyInputProps, CurrencyInputOnChangeValues } from './input/input-currency';
 
 export { default as useToasts } from './use-toasts';
-export { default as Clipboard } from './copy-to-clipboard';
+export { default as Clipboard } from './copy-to-clipboard';
+export { default as Expandable } from './expandable';

package/esm/text/text.d.ts

@@ -15,7 +15,6 @@ interface Props {
     span?: boolean;
     del?: boolean;
     em?: boolean;
-    collapse?: number;
     blockquote?: boolean;
     noWrap?: boolean;
     className?: string;

package/esm/text/text.js

@@ -1,12 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "noWrap", "collapse", "children", "className", "display", "alignItems", "justify"];
+var _excluded = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "noWrap", "children", "className", "display", "alignItems", "justify"];
 /* "use client" */;
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import TextChild from './child';
 import { withScale } from '../use-scale';
-import Button from '../button';
 var _getModifierChild = function getModifierChild(tags, children) {
   if (!tags.length) return children;
   var nextTag = tags.slice(1, tags.length);
@@ -45,8 +43,6 @@ var TextComponent = function TextComponent(_ref) {
     blockquote = _ref$blockquote === void 0 ? false : _ref$blockquote,
     _ref$noWrap = _ref.noWrap,
     noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
-    _ref$collapse = _ref.collapse,
-    collapse = _ref$collapse === void 0 ? 0 : _ref$collapse,
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
@@ -90,10 +86,6 @@ var TextComponent = function TextComponent(_ref) {
    *
    */
 
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    expand = _useState2[0],
-    setExpand = _useState2[1];
   var tag = useMemo(function () {
     if (names[0]) return names[0];
     if (inlineNames[0]) return inlineNames[0];
@@ -115,21 +107,7 @@ var TextComponent = function TextComponent(_ref) {
     },
     className: "".concat(className, " ").concat(noWrap ? 'no-wrap' : ''),
     tag: tag
-  }, props), typeof children === 'string' && collapse > 50 ? /*#__PURE__*/React.createElement(React.Fragment, null, expand ? modifers : (modifers === null || modifers === void 0 ? void 0 : modifers.toString().substring(0, collapse)) + '...', /*#__PURE__*/React.createElement(Button, {
-    margin: 0,
-    onClick: function onClick() {
-      return setExpand(!expand);
-    },
-    style: {
-      textTransform: 'lowercase'
-    },
-    effect: false,
-    color: "abort",
-    scale: 2 / 3,
-    px: 0.2,
-    py: 0,
-    auto: true
-  }, /*#__PURE__*/React.createElement("b", null, expand ? 'less' : 'more'))) : modifers);
+  }, props), modifers);
 };
 TextComponent.displayName = 'Text';
 var Text = withScale(TextComponent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpdice/ui",
-  "version": "2.6.0-beta.5",
+  "version": "2.6.0-beta.7",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
   "unpkg": "dist/index.min.js",
@@ -275,6 +275,11 @@
       "require": "./dist/drawer/index.js",
       "types": "./dist/drawer/index.d.ts"
     },
+    "./Expandable": {
+      "import": "./esm/expandable/index.js",
+      "require": "./dist/expandable/index.js",
+      "types": "./dist/expandable/index.d.ts"
+    },
     "./Fieldset": {
       "import": "./esm/fieldset/index.js",
       "require": "./dist/fieldset/index.js",
@@ -589,6 +594,9 @@
       "Drawer": [
         "dist/drawer/index.d.ts"
       ],
+      "Expandable": [
+        "dist/expandable/index.d.ts"
+      ],
       "Fieldset": [
         "dist/fieldset/index.d.ts"
       ],