@vuu-ui/vuu-popups 0.8.1-debug → 0.8.2-debug

package/cjs/index.js

@@ -64,6 +64,7 @@ __export(src_exports, {
   MenuItem: () => MenuItem,
   MenuItemGroup: () => MenuItemGroup,
   Popup: () => Popup,
+  PopupMenu: () => PopupMenu,
   PopupService: () => PopupService,
   Portal: () => Portal,
   Separator: () => Separator,
@@ -230,14 +231,14 @@ var isDrawer = (component) => component.type === Drawer_default;
 var isVertical = ({ props: { position = "left" } }) => position.match(/top|bottom/);
 var DockLayout = (props) => {
   const { children, className: classNameProp, id, style } = props;
-  const classBase11 = "vuuDockLayout";
+  const classBase12 = "vuuDockLayout";
   const [drawers, content] = (0, import_vuu_utils.partition)(children, isDrawer);
   const [verticalDrawers, horizontalDrawers] = (0, import_vuu_utils.partition)(drawers, isVertical);
   const orientation = verticalDrawers.length === 0 ? "horizontal" : horizontalDrawers.length === 0 ? "vertical" : "both";
-  const className = (0, import_classnames5.default)(classBase11, classNameProp, `${classBase11}-${orientation}`);
+  const className = (0, import_classnames5.default)(classBase12, classNameProp, `${classBase12}-${orientation}`);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className, id, style, children: [
     drawers,
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `${classBase11}-content`, children: content })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `${classBase12}-content`, children: content })
   ] });
 };
 DockLayout.displayName = "DockLayout";
@@ -1387,10 +1388,13 @@ function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false)
   const dimensionsRef = (0, import_react23.useRef)(dimensions);
   const measure = (0, import_react23.useCallback)((target) => {
     const rect = target.getBoundingClientRect();
-    return dimensionsRef.current.reduce((map, dim) => {
-      map[dim] = getTargetSize(target, rect, dim);
-      return map;
-    }, {});
+    return dimensionsRef.current.reduce(
+      (map, dim) => {
+        map[dim] = getTargetSize(target, rect, dim);
+        return map;
+      },
+      {}
+    );
   }, []);
   (0, import_react23.useLayoutEffect)(() => {
     const target = ref.current;
@@ -1416,7 +1420,9 @@ function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false)
     }
     if (target) {
       if (observedMap.has(target)) {
-        throw Error("useResizeObserver attemping to observe same element twice");
+        throw Error(
+          "useResizeObserver attemping to observe same element twice"
+        );
       }
       void registerObserver();
     }
@@ -1427,7 +1433,7 @@ function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false)
         cleanedUp = true;
       }
     };
-  }, [ref, measure]);
+  }, [ref, measure, reportInitialSize, onResize]);
   (0, import_react23.useLayoutEffect)(() => {
     const target = ref.current;
     const record = observedMap.get(target);
@@ -1936,6 +1942,7 @@ var View = (0, import_react31.forwardRef)(function View2(props, forwardedRef) {
     className,
     collapsed,
     closeable,
+    "data-path": dataPath,
     "data-resizeable": dataResizeable,
     dropTargets,
     expanded,
@@ -1943,7 +1950,7 @@ var View = (0, import_react31.forwardRef)(function View2(props, forwardedRef) {
     id: idProp,
     header,
     orientation = "horizontal",
-    path,
+    path = dataPath,
     resize = "responsive",
     resizeable = dataResizeable,
     tearOut,
@@ -2074,7 +2081,7 @@ var Header = ({
   const [editing, setEditing] = (0, import_react32.useState)(false);
   const viewDispatch = useViewDispatch();
   const handleClose = (evt) => viewDispatch == null ? void 0 : viewDispatch({ type: "remove" }, evt);
-  const classBase11 = "vuuHeader";
+  const classBase12 = "vuuHeader";
   const handleTitleMouseDown = () => {
     var _a;
     (_a = labelFieldRef.current) == null ? void 0 : _a.focus();
@@ -2084,9 +2091,9 @@ var Header = ({
   };
   const orientation = collapsed || orientationProp;
   const className = (0, import_classnames13.default)(
-    classBase11,
+    classBase12,
     classNameProp,
-    `${classBase11}-${orientation}`
+    `${classBase12}-${orientation}`
   );
   const handleEnterEditMode = () => {
     setEditing(true);
@@ -2216,7 +2223,7 @@ var Palette = ({
   ...props
 }) => {
   const dispatch = useLayoutProviderDispatch();
-  const classBase11 = "vuuPalette";
+  const classBase12 = "vuuPalette";
   function handleMouseDown(evt) {
     var _a;
     const target = evt.target;
@@ -2263,7 +2270,7 @@ var Palette = ({
     {
       ...props,
       borderless: true,
-      className: (0, import_classnames14.default)(classBase11, className, `${classBase11}-${orientation}`),
+      className: (0, import_classnames14.default)(classBase12, className, `${classBase12}-${orientation}`),
       maxHeight: 800,
       selected: null,
       children: children.map(
@@ -2650,7 +2657,15 @@ var import_jsx_runtime28 = require("react/jsx-runtime");
 
 // ../vuu-shell/src/login/login-utils.ts
 var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
-var redirectToLogin = (loginUrl = "login.html") => {
+var getAuthModeFromCookies = () => {
+  const mode = (0, import_vuu_utils10.getCookieValue)("vuu-auth-mode");
+  return mode != null ? mode : "";
+};
+var getDefaultLoginUrl = () => {
+  const authMode = getAuthModeFromCookies();
+  return authMode === "login" ? "login.html" : "demo.html";
+};
+var redirectToLogin = (loginUrl = getDefaultLoginUrl()) => {
   window.location.href = loginUrl;
 };
 var logout = (loginUrl) => {
@@ -3748,6 +3763,7 @@ var Viewport = class {
     // TODO roll disabled/suspended into status
     this.status = "";
     this.suspended = false;
+    this.suspendTimer = null;
     this.rangeRequestAlreadyPending = (range) => {
       const { bufferSize } = this;
       const bufferThreshold = bufferSize * 0.25;
@@ -4125,6 +4141,7 @@ var Viewport = class {
   disable(requestId) {
     this.awaitOperation(requestId, { type: "disable" });
     info2 == null ? void 0 : info2(\`disable: \${this.serverViewportId}\`);
+    this.suspended = false;
     return {
       type: DISABLE_VP,
       viewPortId: this.serverViewportId
@@ -4555,7 +4572,19 @@ var ServerProxy = class {
       this.sendIfReady(request, requestId, viewport.status === "subscribed");
     }
   }
+  suspendViewport(viewport) {
+    viewport.suspend();
+    viewport.suspendTimer = setTimeout(() => {
+      info3 == null ? void 0 : info3("suspendTimer expired, escalate suspend to disable");
+      this.disableViewport(viewport);
+    }, 3e3);
+  }
   resumeViewport(viewport) {
+    if (viewport.suspendTimer) {
+      debug4 == null ? void 0 : debug4("clear suspend timer");
+      clearTimeout(viewport.suspendTimer);
+      viewport.suspendTimer = null;
+    }
     const rows = viewport.resume();
     this.postMessageToClient({
       clientViewportId: viewport.clientViewportId,
@@ -4675,7 +4704,7 @@ var ServerProxy = class {
           case "select":
             return this.select(viewport, message);
           case "suspend":
-            return viewport.suspend();
+            return this.suspendViewport(viewport);
           case "resume":
             return this.resumeViewport(viewport);
           case "enable":
@@ -6755,8 +6784,8 @@ var Stack3 = class {
   // Start an empty stack
   /// @internal
   static start(p, state, pos = 0) {
-    let cx28 = p.parser.context;
-    return new Stack3(p, [], state, pos, pos, 0, [], 0, cx28 ? new StackContext(cx28, cx28.start) : null, 0, null);
+    let cx29 = p.parser.context;
+    return new Stack3(p, [], state, pos, pos, 0, [], 0, cx29 ? new StackContext(cx29, cx29.start) : null, 0, null);
   }
   /// The stack's current [context](#lr.ContextTracker) value, if
   /// any. Its type will depend on the context tracker's type
@@ -8257,10 +8286,10 @@ var LRParser = class extends Parser {
     if (config.props)
       copy.nodeSet = this.nodeSet.extend(...config.props);
     if (config.top) {
-      let info = this.topRules[config.top];
-      if (!info)
+      let info2 = this.topRules[config.top];
+      if (!info2)
         throw new RangeError(`Invalid top rule name ${config.top}`);
-      copy.top = info;
+      copy.top = info2;
     }
     if (config.tokenizers)
       copy.tokenizers = this.tokenizers.map((t) => {
@@ -9443,6 +9472,7 @@ var cloneRow = (row, index, isExpanded) => {
 
 // ../vuu-data/src/remote-data-source.ts
 var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
+var { info } = (0, import_vuu_utils16.logger)("RemoteDataSource");
 var _config2, _groupBy2, _optimize, _range3, _selectedRowsCount3, _size3, _title3;
 var RemoteDataSource = class extends import_vuu_utils16.EventEmitter {
   constructor({
@@ -9460,8 +9490,6 @@ var RemoteDataSource = class extends import_vuu_utils16.EventEmitter {
     super();
     this.server = null;
     this.status = "initialising";
-    this.disabled = false;
-    this.suspended = false;
     __privateAdd(this, _config2, vanillaConfig);
     __privateAdd(this, _groupBy2, []);
     __privateAdd(this, _optimize, "throttle");
@@ -9600,6 +9628,7 @@ var RemoteDataSource = class extends import_vuu_utils16.EventEmitter {
   }
   unsubscribe() {
     var _a, _b;
+    info == null ? void 0 : info(`unsubscribe #${this.viewport}`);
     if (this.viewport) {
       (_a = this.server) == null ? void 0 : _a.unsubscribe(this.viewport);
     }
@@ -9608,8 +9637,9 @@ var RemoteDataSource = class extends import_vuu_utils16.EventEmitter {
   }
   suspend() {
     var _a;
+    info == null ? void 0 : info(`suspend #${this.viewport}, current status ${this.status}`);
     if (this.viewport) {
-      this.suspended = true;
+      this.status = "suspended";
       (_a = this.server) == null ? void 0 : _a.send({
         type: "suspend",
         viewport: this.viewport
@@ -9619,20 +9649,25 @@ var RemoteDataSource = class extends import_vuu_utils16.EventEmitter {
   }
   resume() {
     var _a;
-    if (this.viewport && this.suspended) {
-      (_a = this.server) == null ? void 0 : _a.send({
-        type: "resume",
-        viewport: this.viewport
-      });
-      this.suspended = false;
+    info == null ? void 0 : info(`resume #${this.viewport}, current status ${this.status}`);
+    if (this.viewport) {
+      if (this.status === "disabled" || this.status === "disabling") {
+        this.enable();
+      } else if (this.status === "suspended") {
+        (_a = this.server) == null ? void 0 : _a.send({
+          type: "resume",
+          viewport: this.viewport
+        });
+        this.status = "subscribed";
+      }
     }
     return this;
   }
   disable() {
     var _a;
+    info == null ? void 0 : info(`disable #${this.viewport}, current status ${this.status}`);
     if (this.viewport) {
       this.status = "disabling";
-      this.disabled = true;
       (_a = this.server) == null ? void 0 : _a.send({
         viewport: this.viewport,
         type: "disable"
@@ -9642,13 +9677,13 @@ var RemoteDataSource = class extends import_vuu_utils16.EventEmitter {
   }
   enable() {
     var _a;
-    if (this.viewport && this.disabled) {
+    info == null ? void 0 : info(`enable #${this.viewport}, current status ${this.status}`);
+    if (this.viewport && (this.status === "disabled" || this.status === "disabling")) {
       this.status = "enabling";
       (_a = this.server) == null ? void 0 : _a.send({
         viewport: this.viewport,
         type: "enable"
       });
-      this.disabled = false;
     }
     return this;
   }
@@ -11312,7 +11347,7 @@ var Popup = (props) => {
 
 // src/menu/useContextMenu.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var useContextMenu = (menuBuilder) => {
+var useContextMenu = (menuBuilder, menuActionHandler) => {
   const ctx = (0, import_react63.useContext)(ContextMenuContext);
   const [themeClass, densityClass, dataMode] = useThemeAttributes();
   const buildMenuOptions = (0, import_react63.useCallback)(
@@ -11340,11 +11375,12 @@ var useContextMenu = (menuBuilder) => {
         console.log({
           menuItemDescriptors
         });
-        if (menuItemDescriptors.length && (ctx == null ? void 0 : ctx.menuActionHandler)) {
+        const menuHandler = menuActionHandler != null ? menuActionHandler : ctx == null ? void 0 : ctx.menuActionHandler;
+        if (menuItemDescriptors.length && menuHandler) {
           console.log(`showContextMenu ${location2}`, {
             options
           });
-          showContextMenu(e, menuItemDescriptors, ctx.menuActionHandler, {
+          showContextMenu(e, menuItemDescriptors, menuHandler, {
             ...ContextMenuProps2,
             className: (0, import_classnames29.default)(
               ContextMenuProps2 == null ? void 0 : ContextMenuProps2.className,
@@ -11366,6 +11402,7 @@ var useContextMenu = (menuBuilder) => {
       ctx == null ? void 0 : ctx.menuBuilders,
       dataMode,
       densityClass,
+      menuActionHandler,
       menuBuilder,
       themeClass
     ]
@@ -11413,4 +11450,54 @@ var showContextMenu = (e, menuDescriptors, handleContextMenuAction, {
   );
   PopupService.showPopup({ left: 0, top: 0, component });
 };
+
+// src/popup-menu/PopupMenu.tsx
+var import_react64 = require("react");
+var import_classnames30 = __toESM(require("classnames"));
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var classBase11 = "vuuPopupMenu";
+var getPosition3 = (element) => {
+  if (element) {
+    const { bottom, left } = element.getBoundingClientRect();
+    return { x: left, y: bottom + 6 };
+  }
+};
+var PopupMenu = ({
+  className,
+  menuActionHandler,
+  menuBuilder,
+  menuLocation = "header",
+  ...htmlAttributes
+}) => {
+  const rootRef = (0, import_react64.useRef)(null);
+  const [menuOpen, setMenuOpen] = (0, import_react64.useState)(false);
+  const showContextMenu2 = useContextMenu(menuBuilder, menuActionHandler);
+  const handleMenuClose = (0, import_react64.useCallback)(() => {
+    setMenuOpen(false);
+  }, []);
+  const showColumnMenu = (0, import_react64.useCallback)(
+    (e) => {
+      setMenuOpen(true);
+      showContextMenu2(e, menuLocation, {
+        ContextMenuProps: {
+          onClose: handleMenuClose,
+          position: getPosition3(rootRef.current)
+        }
+      });
+    },
+    [handleMenuClose, menuLocation, showContextMenu2]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    "span",
+    {
+      ...htmlAttributes,
+      className: (0, import_classnames30.default)(classBase11, className, {
+        [`${classBase11}-open`]: menuOpen
+      }),
+      "data-icon": "more-vert",
+      onClick: showColumnMenu,
+      ref: rootRef
+    }
+  );
+};
 //# sourceMappingURL=index.js.map