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

package/dist/container/index.js

@@ -5,13 +5,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var theme = require('@helpdice/theme');
 var jsxRuntime = require('react/jsx-runtime');
-var Expandable = require('components/expandable');
+var Button = require('components/button');
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
   for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
   return n;
 }
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
 function _createForOfIteratorHelper(r, e) {
   var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
   if (!t) {
@@ -68,6 +71,33 @@ function _defineProperty(e, r, t) {
     writable: true
   }) : e[r] = t, e;
 }
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function ownKeys(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -109,6 +139,9 @@ function _objectWithoutPropertiesLoose(r, e) {
   }
   return t;
 }
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
@@ -953,6 +986,115 @@ tuple('hover', 'click');
 tuple('top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'bottom', 'bottomStart', 'bottomEnd', 'right', 'rightStart', 'rightEnd');
 tuple('start', 'center', 'end', 'left', 'right');
 
+var Expandable = function Expandable(_ref) {
+  var children = _ref.children,
+    _ref$collapsedHeight = _ref.collapsedHeight,
+    collapsedHeight = _ref$collapsedHeight === void 0 ? 150 : _ref$collapsedHeight,
+    _ref$fadeHeight = _ref.fadeHeight,
+    fadeHeight = _ref$fadeHeight === void 0 ? 40 : _ref$fadeHeight,
+    className = _ref.className,
+    _ref$transitionDurati = _ref.transitionDuration,
+    transitionDuration = _ref$transitionDurati === void 0 ? 300 : _ref$transitionDurati;
+  var contentRef = React.useRef(null);
+  var containerRef = React.useRef(null);
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    expanded = _useState2[0],
+    setExpanded = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isOverflowing = _useState4[0],
+    setIsOverflowing = _useState4[1];
+  var _useState5 = React.useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    contentHeight = _useState6[0],
+    setContentHeight = _useState6[1];
+  var _useState7 = React.useState("#fff"),
+    _useState8 = _slicedToArray(_useState7, 2),
+    fadeColor = _useState8[0],
+    setFadeColor = _useState8[1];
+
+  // Measure content height and detect overflow
+  React.useEffect(function () {
+    var el = contentRef.current;
+    if (!el) return;
+    var updateHeight = function updateHeight() {
+      var _containerRef$current;
+      var scrollHeight = el.scrollHeight;
+      setContentHeight(scrollHeight);
+      setIsOverflowing(scrollHeight > collapsedHeight);
+
+      // Detect background color dynamically
+      var parentBg = window.getComputedStyle((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 ? _containerRef$current : el).backgroundColor;
+      setFadeColor(parentBg || "#fff");
+    };
+    updateHeight();
+    var observer = new ResizeObserver(updateHeight);
+    observer.observe(el);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [children, collapsedHeight]);
+  var containerHeight = !isOverflowing ? contentHeight : expanded ? contentHeight : collapsedHeight;
+  var fadeStyle = {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: fadeHeight,
+    background: "linear-gradient(to bottom, rgba(255,255,255,0), ".concat(fadeColor, ")"),
+    pointerEvents: "none",
+    transition: "opacity ".concat(transitionDuration, "ms ease"),
+    opacity: !expanded && isOverflowing ? 1 : 0
+  };
+  var toggleExpanded = function toggleExpanded() {
+    return setExpanded(function (prev) {
+      return !prev;
+    });
+  };
+  var handleKey = function handleKey(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      toggleExpanded();
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    ref: containerRef,
+    className: className,
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      style: {
+        height: containerHeight,
+        overflow: "hidden",
+        transition: "height ".concat(transitionDuration, "ms ease"),
+        position: "relative"
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        ref: contentRef,
+        children: children
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        style: fadeStyle
+      })]
+    }), isOverflowing && /*#__PURE__*/jsxRuntime.jsx(Button, {
+      "aria-expanded": expanded,
+      onKeyDown: handleKey,
+      margin: 0,
+      padding: 0,
+      onClick: function onClick() {
+        return setExpanded(function (prev) {
+          return !prev;
+        });
+      },
+      effect: false,
+      color: "abort",
+      scale: 2 / 3,
+      auto: true,
+      children: /*#__PURE__*/jsxRuntime.jsx("b", {
+        children: expanded ? 'Show less' : 'Show more'
+      })
+    })]
+  });
+};
+
 var _excluded = ["gap", "children", "direction", "justify", "alignItems", "alignContent", "collapse", "className"];
 var wrap = tuple('nowrap', 'wrap', 'wrap-reverse');
 var Container = function Container(_ref) {

package/dist/expandable/expand.d.ts

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