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

package/dist/index.js

@@ -6,11 +6,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var icons = require('@helpdice/icons');
 var framerMotion = require('framer-motion');
 var reactDom = require('react-dom');
+var Expandable$1 = require('components/expandable');
 var reactDom$1 = require('@floating-ui/react-dom');
 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) {
@@ -13403,10 +13405,6 @@ var Container = function Container(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     props = _objectWithoutProperties(_ref, _excluded$B);
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    expand = _useState2[0],
-    setExpand = _useState2[1];
   var _useScale = useScale(),
     unit = _useScale.unit,
     SCALES = _useScale.SCALES;
@@ -13427,34 +13425,9 @@ var Container = function Container(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs(GridBasicItem, _objectSpread2(_objectSpread2({
     className: classes
   }, props), {}, {
-    children: [collapse > 50 ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        style: {
-          maxHeight: expand ? '100%' : "".concat(collapse, "px"),
-          overflow: 'hidden',
-          display: 'inline',
-          transition: "max-height 0.3s ease"
-        },
-        children: children
-      }), /*#__PURE__*/jsxRuntime.jsx(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,
-        children: /*#__PURE__*/jsxRuntime.jsx("b", {
-          children: expand ? 'less' : 'more'
-        })
-      })]
+    children: [collapse > 10 ? /*#__PURE__*/jsxRuntime.jsx(Expandable$1, {
+      collapsedHeight: collapse,
+      children: children
     }) : children, styles]
   }));
 };
@@ -42487,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);
@@ -42516,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/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

@@ -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.6",
+  "version": "2.6.0-beta.8",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
   "unpkg": "dist/index.min.js",