@activecollab/components 2.0.422 → 2.0.424

package/dist/index.js

@@ -14611,7 +14611,7 @@
   };
   Bubble.displayName = "Bubble";
 
-  var StyledMenu$2 = styled__default["default"](Bubble).withConfig({
+  var StyledMenu$3 = styled__default["default"](Bubble).withConfig({
     displayName: "Styles__StyledMenu",
     componentId: "sc-8fhkp-0"
   })(["", " ", " ", " color:var(--color-theme-700);a:focus,a:active{outline:none;}", " ", " ", " ", ""], {
@@ -14629,7 +14629,7 @@
   }, function (props) {
     return props.$mode === "widest" && styled.css(["width:590px;"]);
   });
-  StyledMenu$2.displayName = "StyledMenu";
+  StyledMenu$3.displayName = "StyledMenu";
   var StyledMenuFooter$1 = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledMenuFooter",
     componentId: "sc-8fhkp-1"
@@ -14994,7 +14994,7 @@
       className: popperClassName,
       tabIndex: -1,
       afterWrite: onPopperOpen
-    }, /*#__PURE__*/React__default["default"].createElement(StyledMenu$2, {
+    }, /*#__PURE__*/React__default["default"].createElement(StyledMenu$3, {
       className: classNames__default["default"]("c-simple-menu__paper", "c-simple-menu__".concat(mode), menuClassName, className),
       $mode: mode,
       onMouseDown: onMenuClick
@@ -15771,7 +15771,7 @@
     "WebkitFontSmoothing": "antialiased",
     "MozOsxFontSmoothing": "grayscale"
   });
-  var StyledMenu$1 = styled__default["default"](Menu).withConfig({
+  var StyledMenu$2 = styled__default["default"](Menu).withConfig({
     displayName: "Styles__StyledMenu",
     componentId: "sc-1v8h7mt-1"
   })(["", ""], {
@@ -15837,7 +15837,7 @@
   StyledButtonGroup.displayName = "StyledButtonGroup";
   StyledSpan$1.displayName = "StyledSpan";
   StyledDiv$1.displayName = "StyledDiv";
-  StyledMenu$1.displayName = "StyledMenu";
+  StyledMenu$2.displayName = "StyledMenu";
   StyledButton$1.displayName = "StyledButton";
   StyledControl.displayName = "StyledControl";
 
@@ -23631,6 +23631,241 @@
   });
   DisplayHours.displayName = "DisplayHours";
 
+  var MeasuredPane = function MeasuredPane(_ref) {
+    var active = _ref.active,
+      onHeight = _ref.onHeight,
+      style = _ref.style,
+      children = _ref.children;
+    var _useState = React.useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      node = _useState2[0],
+      setNode = _useState2[1];
+    var reported = React.useRef(0);
+    React.useEffect(function () {
+      if (!active || !node) {
+        return undefined;
+      }
+      reported.current = 0;
+      var frame = 0;
+
+      // The reported height lands on an ancestor of the measured element, so a
+      // shrink can hand the observer back a taller box and loop forever. While a
+      // pane stays open the height only grows, and every slide starts over.
+      var observer = new ResizeObserver__default["default"](function (entries) {
+        var _entries$;
+        var height = Math.round(((_entries$ = entries[0]) === null || _entries$ === void 0 || (_entries$ = _entries$.contentRect) === null || _entries$ === void 0 ? void 0 : _entries$.height) || 0);
+        if (height <= reported.current) {
+          return;
+        }
+        reported.current = height;
+        cancelAnimationFrame(frame);
+        frame = requestAnimationFrame(function () {
+          return onHeight(height);
+        });
+      });
+      observer.observe(node);
+      return function () {
+        cancelAnimationFrame(frame);
+        observer.disconnect();
+      };
+    }, [active, node, onHeight]);
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      ref: setNode,
+      style: style
+    }, children);
+  };
+  MeasuredPane.displayName = "MeasuredPane";
+
+  var SubmenuHeader = function SubmenuHeader(_ref) {
+    var title = _ref.title,
+      onBack = _ref.onBack,
+      _ref$backLabel = _ref.backLabel,
+      backLabel = _ref$backLabel === void 0 ? "Back" : _ref$backLabel;
+    return /*#__PURE__*/React__default["default"].createElement(MenuHeader, {
+      title: title,
+      leftElement: onBack ? /*#__PURE__*/React__default["default"].createElement(IconButton, {
+        variant: "text gray",
+        size: "small",
+        onClick: onBack,
+        "aria-label": backLabel
+      }, /*#__PURE__*/React__default["default"].createElement(ArrowLeftIcon$1, null)) : null
+    });
+  };
+  SubmenuHeader.displayName = "SubmenuHeader";
+
+  var DEFAULT_PANE_WIDTH = 260;
+  var INDEX_VIEW = "index";
+  var NO_SUBMENUS$1 = [];
+  var DrilldownMenuContent = function DrilldownMenuContent(_ref) {
+    var width = _ref.width,
+      _ref$submenus = _ref.submenus,
+      submenus = _ref$submenus === void 0 ? NO_SUBMENUS$1 : _ref$submenus,
+      backLabel = _ref.backLabel,
+      children = _ref.children;
+    var _useState = React.useState(INDEX_VIEW),
+      _useState2 = _slicedToArray(_useState, 2),
+      view = _useState2[0],
+      setView = _useState2[1];
+    var _useState3 = React.useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isLeft = _useState4[0],
+      setIsLeft = _useState4[1];
+    var _useState5 = React.useState(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      menuHeight = _useState6[0],
+      setMenuHeight = _useState6[1];
+    var _useState7 = React.useState(INDEX_VIEW),
+      _useState8 = _slicedToArray(_useState7, 2),
+      enteredView = _useState8[0],
+      setEnteredView = _useState8[1];
+    var paneWidth = width || DEFAULT_PANE_WIDTH;
+    var handleHeight = React.useCallback(function (element) {
+      return setMenuHeight(element.offsetHeight);
+    }, []);
+    var handleEnteredIndex = React.useCallback(function () {
+      return setEnteredView(INDEX_VIEW);
+    }, []);
+    var openSubmenu = React.useCallback(function (id) {
+      setView(id);
+      setIsLeft(true);
+    }, []);
+    var goToIndex = React.useCallback(function () {
+      setView(INDEX_VIEW);
+      setIsLeft(false);
+    }, []);
+    var index = typeof children === "function" ? children({
+      openSubmenu
+    }) : children;
+    if (submenus.length === 0) {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, index);
+    }
+    return /*#__PURE__*/React__default["default"].createElement(ResizeTransition, {
+      in: true,
+      style: {
+        height: menuHeight || "auto",
+        width: paneWidth
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        height: menuHeight || "auto",
+        width: paneWidth
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(SlideLeftRightTransition, {
+      in: view === INDEX_VIEW,
+      appear: true,
+      direction: isLeft ? "left" : "right",
+      onEnter: handleHeight,
+      onEntered: handleEnteredIndex
+    }, /*#__PURE__*/React__default["default"].createElement(FocusLock.MoveFocusInside, {
+      disabled: enteredView !== INDEX_VIEW
+    }, /*#__PURE__*/React__default["default"].createElement(MeasuredPane, {
+      active: view === INDEX_VIEW,
+      onHeight: setMenuHeight
+    }, index))), submenus.map(function (submenu) {
+      var isEntered = enteredView === submenu.id;
+      var goBack = function goBack() {
+        var _submenu$onBack;
+        goToIndex();
+        (_submenu$onBack = submenu.onBack) === null || _submenu$onBack === void 0 || _submenu$onBack.call(submenu);
+      };
+      return /*#__PURE__*/React__default["default"].createElement(SlideLeftRightTransition, {
+        key: submenu.id,
+        in: view === submenu.id,
+        direction: isLeft ? "left" : "right",
+        onEnter: handleHeight,
+        onEntered: function onEntered() {
+          return setEnteredView(submenu.id);
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(FocusLock.MoveFocusInside, {
+        disabled: !isEntered
+      }, /*#__PURE__*/React__default["default"].createElement(MeasuredPane, {
+        active: view === submenu.id,
+        onHeight: setMenuHeight,
+        style: {
+          width: paneWidth
+        }
+      }, submenu.title ? /*#__PURE__*/React__default["default"].createElement(SubmenuHeader, {
+        title: submenu.title,
+        onBack: goBack,
+        backLabel: backLabel
+      }) : null, typeof submenu.content === "function" ? submenu.content({
+        isEntered,
+        goBack
+      }) : submenu.content)));
+    })));
+  };
+  DrilldownMenuContent.displayName = "DrilldownMenuContent";
+
+  var StyledMenu$1 = styled__default["default"](Menu).withConfig({
+    displayName: "Styles__StyledMenu",
+    componentId: "sc-15ei9o0-0"
+  })(["", ""], function (_ref) {
+    var $paned = _ref.$paned;
+    return $paned && {
+      "position": "relative",
+      "overflow": "hidden"
+    };
+  });
+  var StyledIndexList = styled__default["default"](List).withConfig({
+    displayName: "Styles__StyledIndexList",
+    componentId: "sc-15ei9o0-1"
+  })(["", ""], {
+    "paddingTop": "0.5rem",
+    "paddingBottom": "0.5rem"
+  });
+  StyledMenu$1.displayName = "StyledDrilldownMenu";
+  StyledIndexList.displayName = "StyledDrilldownIndexList";
+
+  var NO_SUBMENUS = [];
+  var DrilldownMenu = function DrilldownMenu(_ref) {
+    var target = _ref.target,
+      open = _ref.open,
+      onOpen = _ref.onOpen,
+      onClose = _ref.onClose,
+      position = _ref.position,
+      width = _ref.width,
+      header = _ref.header,
+      listClassName = _ref.listClassName,
+      backLabel = _ref.backLabel,
+      _ref$submenus = _ref.submenus,
+      submenus = _ref$submenus === void 0 ? NO_SUBMENUS : _ref$submenus,
+      children = _ref.children;
+    var _useState = React.useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      contentKey = _useState2[0],
+      setContentKey = _useState2[1];
+    var showPanes = submenus.length > 0;
+    var paneWidth = width || DEFAULT_PANE_WIDTH;
+    React.useEffect(function () {
+      if (!open) {
+        setContentKey(function (key) {
+          return key + 1;
+        });
+      }
+    }, [open]);
+    return /*#__PURE__*/React__default["default"].createElement(StyledMenu$1, {
+      $paned: showPanes,
+      target: target,
+      open: open,
+      onOpen: onOpen,
+      onClose: onClose,
+      position: position
+    }, /*#__PURE__*/React__default["default"].createElement(DrilldownMenuContent, {
+      key: contentKey,
+      width: width,
+      submenus: submenus,
+      backLabel: backLabel
+    }, function (paneProps) {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, header, /*#__PURE__*/React__default["default"].createElement(StyledIndexList, {
+        className: listClassName,
+        style: {
+          width: showPanes ? paneWidth : "100%"
+        }
+      }, typeof children === "function" ? children(paneProps) : children));
+    }));
+  };
+  DrilldownMenu.displayName = "DrilldownMenu";
+
   var _excluded$J = ["expanded"];
   var ExpandAll = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$expanded = _ref.expanded,
@@ -30646,6 +30881,7 @@
   exports.DARK_THEME_SELECTOR = DARK_THEME_SELECTOR;
   exports.DEFAULT_DARK_THEME = DEFAULT_DARK_THEME;
   exports.DEFAULT_KEYBOARD_STEP = DEFAULT_KEYBOARD_STEP;
+  exports.DEFAULT_PANE_WIDTH = DEFAULT_PANE_WIDTH;
   exports.DEFAULT_THEME = DEFAULT_THEME;
   exports.DataTable = DataTable;
   exports.DatePicker = DatePicker;
@@ -30674,6 +30910,8 @@
   exports.DotsLoader = DotsLoader;
   exports.DownloadIcon = DownloadIcon$1;
   exports.DrawIcon = DrawIcon$1;
+  exports.DrilldownMenu = DrilldownMenu;
+  exports.DrilldownMenuContent = DrilldownMenuContent;
   exports.DriveIcon = DriveIcon$1;
   exports.DropboxIcon = DropboxIcon$1;
   exports.DuplicateIcon = DuplicateIcon$1;
@@ -30733,6 +30971,7 @@
   exports.HeartIcon = HeartIcon$1;
   exports.HelpIcon = HelpIcon$1;
   exports.HistoryOfChangesIcon = HistoryOfChangesIcon$1;
+  exports.INDEX_VIEW = INDEX_VIEW;
   exports.IconButton = IconButton;
   exports.ImageIcon = ImageIcon$1;
   exports.InfoBox = InfoBox;
@@ -30775,6 +31014,7 @@
   exports.LockIcon = LockIcon$1;
   exports.LockSmallIcon = LockSmallIcon$1;
   exports.MarkerIcon = MarkerIcon$1;
+  exports.MeasuredPane = MeasuredPane;
   exports.Media = Media;
   exports.Menu = Menu;
   exports.MenuFooter = MenuFooter;
@@ -30937,6 +31177,7 @@
   exports.StopIcon = StopIcon$1;
   exports.StopwatchIcon = StopwatchIcon$1;
   exports.StyledInputTimeWrapper = StyledInputTimeWrapper;
+  exports.SubmenuHeader = SubmenuHeader;
   exports.SunIcon = SunIcon$1;
   exports.SystemSettingsIcon = SystemSettingsIcon$1;
   exports.THEMES = THEMES;