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

package/dist/index.js

@@ -12,6 +12,7 @@ var pro = require('@helpdice/pro');
 var reactSyntaxHighlighter = require('react-syntax-highlighter');
 var prism = require('react-syntax-highlighter/dist/cjs/styles/prism');
 var require$$0 = require('react-is');
+var Button$1 = require('components/button');
 var isEqual = require('react-fast-compare');
 
 function _interopNamespaceDefault(e) {
@@ -42459,27 +42460,45 @@ function Clipboard(props) {
 
 var Expandable = function Expandable(_ref) {
   var children = _ref.children,
-    collapsedHeight = _ref.collapsedHeight;
+    _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(0),
+  var _useState3 = React.useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    fullHeight = _useState4[0],
-    setFullHeight = _useState4[1];
-  var _useState5 = React.useState(false),
+    isOverflowing = _useState4[0],
+    setIsOverflowing = _useState4[1];
+  var _useState5 = React.useState(0),
     _useState6 = _slicedToArray(_useState5, 2),
-    isOverflowing = _useState6[0],
-    setIsOverflowing = _useState6[1];
+    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;
-      setFullHeight(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);
@@ -42488,28 +42507,48 @@ var Expandable = function Expandable(_ref) {
       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: expanded ? fullHeight : collapsedHeight,
+        height: containerHeight,
         overflow: "hidden",
-        transition: "height 0.3s ease",
+        transition: "height ".concat(transitionDuration, "ms ease"),
         position: "relative"
       },
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
         ref: contentRef,
         children: children
-      }), !expanded && isOverflowing && /*#__PURE__*/jsxRuntime.jsx("div", {
-        style: {
-          position: "absolute",
-          bottom: 0,
-          left: 0,
-          right: 0,
-          height: 40,
-          background: "linear-gradient(to bottom, rgba(255,255,255,0), white)"
-        }
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        style: fadeStyle
       })]
-    }), isOverflowing && /*#__PURE__*/jsxRuntime.jsx(Button, {
+    }), isOverflowing && /*#__PURE__*/jsxRuntime.jsx(Button$1, {
+      "aria-expanded": expanded,
+      onKeyDown: handleKey,
       margin: 0,
       padding: 0,
       onClick: function onClick() {

package/esm/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;

package/esm/expandable/expand.js

@@ -1,29 +1,47 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import Button from "../button";
+import Button from "components/button";
 import React, { useEffect, useRef, useState } from "react";
 var Expandable = function Expandable(_ref) {
   var children = _ref.children,
-    collapsedHeight = _ref.collapsedHeight;
+    _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 = useRef(null);
+  var containerRef = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     expanded = _useState2[0],
     setExpanded = _useState2[1];
-  var _useState3 = useState(0),
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    fullHeight = _useState4[0],
-    setFullHeight = _useState4[1];
-  var _useState5 = useState(false),
+    isOverflowing = _useState4[0],
+    setIsOverflowing = _useState4[1];
+  var _useState5 = useState(0),
     _useState6 = _slicedToArray(_useState5, 2),
-    isOverflowing = _useState6[0],
-    setIsOverflowing = _useState6[1];
+    contentHeight = _useState6[0],
+    setContentHeight = _useState6[1];
+  var _useState7 = useState("#fff"),
+    _useState8 = _slicedToArray(_useState7, 2),
+    fadeColor = _useState8[0],
+    setFadeColor = _useState8[1];
+
+  // Measure content height and detect overflow
   useEffect(function () {
     var el = contentRef.current;
     if (!el) return;
     var updateHeight = function updateHeight() {
+      var _containerRef$current;
       var scrollHeight = el.scrollHeight;
-      setFullHeight(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);
@@ -32,25 +50,46 @@ var Expandable = function Expandable(_ref) {
       return observer.disconnect();
     };
   }, [children, collapsedHeight]);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  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__*/React.createElement("div", {
+    ref: containerRef,
+    className: className
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
-      height: expanded ? fullHeight : collapsedHeight,
+      height: containerHeight,
       overflow: "hidden",
-      transition: "height 0.3s ease",
+      transition: "height ".concat(transitionDuration, "ms 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)"
-    }
+  }, children), /*#__PURE__*/React.createElement("div", {
+    style: fadeStyle
   })), isOverflowing && /*#__PURE__*/React.createElement(Button, {
+    "aria-expanded": expanded,
+    onKeyDown: handleKey,
     margin: 0,
     padding: 0,
     onClick: function onClick() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpdice/ui",
-  "version": "2.6.0-beta.7",
+  "version": "2.6.0-beta.8",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
   "unpkg": "dist/index.min.js",