@helpdice/ui 2.6.0-beta.8 → 2.6.0

package/dist/index.js

@@ -6,13 +6,11 @@ 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) {
@@ -13390,6 +13388,115 @@ var GridContainer = withScale(GridContainerComponent);
 
 Grid.Container = GridContainer;
 
+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$B = ["gap", "children", "direction", "justify", "alignItems", "alignContent", "collapse", "className"];
 var wrap = tuple('nowrap', 'wrap', 'wrap-reverse');
 var Container = function Container(_ref) {
@@ -13425,7 +13532,7 @@ var Container = function Container(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs(GridBasicItem, _objectSpread2(_objectSpread2({
     className: classes
   }, props), {}, {
-    children: [collapse > 10 ? /*#__PURE__*/jsxRuntime.jsx(Expandable$1, {
+    children: [collapse > 10 ? /*#__PURE__*/jsxRuntime.jsx(Expandable, {
       collapsedHeight: collapse,
       children: children
     }) : children, styles]
@@ -42458,115 +42565,6 @@ function Clipboard(props) {
   }), _objectSpread2({}, props));
 }
 
-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$1, {
-      "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'
-      })
-    })]
-  });
-};
-
 exports.AutoComplete = AutoComplete;
 exports.Avatar = Avatar;
 exports.Badge = Badge;

package/esm/container/box.js

@@ -7,7 +7,7 @@ import GridBasicItem from "../grid/basic-item";
 import useScale, { withScale } from '../use-scale';
 import { useClasses } from '@helpdice/theme';
 import { tuple } from '../utils/prop-types';
-import Expandable from "components/expandable";
+import Expandable from "../expandable";
 var wrap = tuple('nowrap', 'wrap', 'wrap-reverse');
 var Container = function Container(_ref) {
   var _ref$gap = _ref.gap,

package/esm/expandable/expand.js

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import Button from "components/button";
+import Button from "../button";
 import React, { useEffect, useRef, useState } from "react";
 var Expandable = function Expandable(_ref) {
   var children = _ref.children,

package/package.json

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