@helpdice/ui 2.6.0-beta.8 → 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/index.js

@@ -6,13 +6,12 @@ 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 Button$1 = require('components/button');
 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 +13389,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$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'
+      })
+    })]
+  });
+};
+
 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 +13533,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 +42566,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/package.json

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