@activecollab/components 2.0.142 → 2.0.144

package/dist/index.js

@@ -12736,34 +12736,6 @@
   });
   EntityCard$1.displayName = "EntityCard";
 
-  var StyledSignifier = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledSignifier",
-    componentId: "sc-1idn4je-0"
-  })(["", " ", " ", " cursor:default;", " ", ""], {
-    "display": "inline-flex",
-    "alignItems": "center",
-    "color": "var(--color-theme-800)"
-  }, FontStyle, BoxSizingStyle, function (props) {
-    return props.$direction === "c-signifier--top" && styled.css(["--signifier-in:60%;--signifier-out:-60%;"]);
-  }, function (props) {
-    return props.$direction === "c-signifier--bottom" && styled.css(["--signifier-in:-60%;--signifier-out:60%;"]);
-  });
-  StyledSignifier.displayName = "StyledSignifier";
-  var StyledSignifierTransition = styled__default["default"](reactTransitionGroup.CSSTransition).withConfig({
-    displayName: "Styles__StyledSignifierTransition",
-    componentId: "sc-1idn4je-1"
-  })(["&.c-signifier--animate-enter{opacity:0;transform:translateY(var(--signifier-in));}&.c-signifier--animate-enter-active{opacity:1;transform:translateY(0%);transition-duration:300ms;}&.c-signifier--animate-exit{transform:translateY(0%);opacity:1;}&.c-signifier--animate-exit-active{transform:translateY(var(--signifier-out));opacity:0;transition-duration:300ms;}"]);
-  StyledSignifierTransition.displayName = "StyledSignifierTransition";
-  var StyledIcon$1 = styled__default["default"].svg.withConfig({
-    displayName: "Styles__StyledIcon",
-    componentId: "sc-1idn4je-2"
-  })(["", ""], {
-    "marginRight": "0.25rem",
-    "fontSize": "0.75rem",
-    "lineHeight": "1rem"
-  });
-  StyledIcon$1.displayName = "StyledIcon";
-
   var _excluded$Y = ["weight", "children"];
   var Title1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
@@ -12846,6 +12818,124 @@
   });
   Caption2.displayName = "Caption2";
 
+  var StyledChildrenWrapper$1 = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledChildrenWrapper",
+    componentId: "sc-13n85xv-0"
+  })(["", ""], {
+    "flexShrink": "0"
+  });
+  StyledChildrenWrapper$1.displayName = "StyledChildrenWrapper";
+  var StyledWrapper$2 = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledWrapper",
+    componentId: "sc-13n85xv-1"
+  })(["", " justify-content:", ";"], {
+    "marginBottom": "1rem",
+    "display": "flex",
+    "alignItems": "center",
+    "gap": "1rem"
+  }, function (_ref) {
+    var $expanded = _ref.$expanded;
+    return $expanded ? "space-between" : "flex-start";
+  });
+  StyledWrapper$2.displayName = "StyledWrapper";
+  var StyledTitle = styled__default["default"](Body2).withConfig({
+    displayName: "Styles__StyledTitle",
+    componentId: "sc-13n85xv-2"
+  })(["", ""], {
+    "overflow": "hidden",
+    "textOverflow": "ellipsis",
+    "whiteSpace": "nowrap"
+  });
+  StyledTitle.displayName = "StyledTitle";
+  var StyledDividerLine = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledDividerLine",
+    componentId: "sc-13n85xv-3"
+  })(["", " border-top:1px solid var(--border-primary);"], {
+    "flex": "1 1 0%"
+  });
+  StyledDividerLine.displayName = "StyledDividerLine";
+  var StyledCollapseExpandSingleIcon = styled__default["default"](CollapseExpandSingleIcon$1).withConfig({
+    displayName: "Styles__StyledCollapseExpandSingleIcon",
+    componentId: "sc-13n85xv-4"
+  })(["", " transform:", ";transition:all 0.2s ease;"], {
+    "marginRight": "0.25rem",
+    "cursor": "pointer"
+  }, function (_ref2) {
+    var $expanded = _ref2.$expanded;
+    return $expanded ? "rotate(0deg)" : "rotate(180deg)";
+  });
+  StyledCollapseExpandSingleIcon.displayName = "StyledCollapseExpandSingleIcon";
+
+  var EntitiesHeader = function EntitiesHeader(_ref) {
+    var onClick = _ref.onClick,
+      title = _ref.title,
+      children = _ref.children,
+      _ref$expanded = _ref.expanded,
+      expanded = _ref$expanded === void 0 ? true : _ref$expanded,
+      className = _ref.className;
+    var ref = React.useRef(null);
+    var _useState = React.useState(expanded),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+    React.useEffect(function () {
+      setOpen(expanded);
+    }, [expanded]);
+    var handleOnClick = React.useCallback(function () {
+      var _ref$current;
+      (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
+      setOpen(function (prev) {
+        return !prev;
+      });
+      if (onClick) onClick();
+    }, [onClick]);
+    return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$2, {
+      className: className,
+      tabIndex: 0,
+      ref: ref,
+      $expanded: open
+    }, /*#__PURE__*/React__default["default"].createElement(Button, {
+      variant: "text gray",
+      size: "small",
+      onClick: handleOnClick
+    }, /*#__PURE__*/React__default["default"].createElement(StyledCollapseExpandSingleIcon, {
+      $expanded: open
+    }), /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
+      color: "secondary",
+      weight: "medium"
+    }, title)), !open && /*#__PURE__*/React__default["default"].createElement(StyledDividerLine, {
+      "data-testid": "divider-line"
+    }), open && /*#__PURE__*/React__default["default"].createElement(StyledChildrenWrapper$1, null, children));
+  };
+
+  var StyledSignifier = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledSignifier",
+    componentId: "sc-1idn4je-0"
+  })(["", " ", " ", " cursor:default;", " ", ""], {
+    "display": "inline-flex",
+    "alignItems": "center",
+    "color": "var(--color-theme-800)"
+  }, FontStyle, BoxSizingStyle, function (props) {
+    return props.$direction === "c-signifier--top" && styled.css(["--signifier-in:60%;--signifier-out:-60%;"]);
+  }, function (props) {
+    return props.$direction === "c-signifier--bottom" && styled.css(["--signifier-in:-60%;--signifier-out:60%;"]);
+  });
+  StyledSignifier.displayName = "StyledSignifier";
+  var StyledSignifierTransition = styled__default["default"](reactTransitionGroup.CSSTransition).withConfig({
+    displayName: "Styles__StyledSignifierTransition",
+    componentId: "sc-1idn4je-1"
+  })(["&.c-signifier--animate-enter{opacity:0;transform:translateY(var(--signifier-in));}&.c-signifier--animate-enter-active{opacity:1;transform:translateY(0%);transition-duration:300ms;}&.c-signifier--animate-exit{transform:translateY(0%);opacity:1;}&.c-signifier--animate-exit-active{transform:translateY(var(--signifier-out));opacity:0;transition-duration:300ms;}"]);
+  StyledSignifierTransition.displayName = "StyledSignifierTransition";
+  var StyledIcon$1 = styled__default["default"].svg.withConfig({
+    displayName: "Styles__StyledIcon",
+    componentId: "sc-1idn4je-2"
+  })(["", ""], {
+    "marginRight": "0.25rem",
+    "fontSize": "0.75rem",
+    "lineHeight": "1rem"
+  });
+  StyledIcon$1.displayName = "StyledIcon";
+
   var signifierTypes = ["EyeIcon", "EyeSmallIcon", "PencilIcon", "PencilSmallIcon", "EyeOffIcon", "EyeOffSmallIcon", "ChecklistIcon", "ChecklistSmallIcon", "WarningTriangleIcon", "WarningTriangleSmallIcon", "DependencyIcon", "DependencySmallIcon", "MessageIcon", "MessageSmallIcon", "ClockStopwatchIcon", "ClockStopwatchSmallIcon", "ClockIcon", "ClockSmallIcon", "DollarOffIcon", "DollarOffSmallIcon", "DollarIcon", "DollarSmallIcon", "DollarCheckmarkIcon", "DollarCheckmarkSmallIcon", "DollarClockIcon", "DollarClockSmallIcon", "BellOffIcon", "BellOffSmallIcon", "LockIcon", "LockSmallIcon", "RecurringCheckmarkIcon", "RecurringCheckmarkSmallIcon"];
   var Signifier = function Signifier(_ref) {
     var Component = _ref.type,
@@ -21348,6 +21438,7 @@
   exports.EditableText = EditableText;
   exports.EmojiIcon = EmojiIcon$1;
   exports.EmptySlate = EmptySlate;
+  exports.EntitiesHeader = EntitiesHeader;
   exports.Entity = Entity;
   exports.EntityCard = EntityCard$1;
   exports.EstimatePlusIcon = EstimatePlusIcon$1;