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

package/esm/index.js

@@ -181,14 +181,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] = partition(children, isDrawer);
   const [verticalDrawers, horizontalDrawers] = partition(drawers, isVertical);
   const orientation = verticalDrawers.length === 0 ? "horizontal" : horizontalDrawers.length === 0 ? "vertical" : "both";
-  const className = cx5(classBase11, classNameProp, `${classBase11}-${orientation}`);
+  const className = cx5(classBase12, classNameProp, `${classBase12}-${orientation}`);
   return /* @__PURE__ */ jsxs3("div", { className, id, style, children: [
     drawers,
-    /* @__PURE__ */ jsx4("div", { className: `${classBase11}-content`, children: content })
+    /* @__PURE__ */ jsx4("div", { className: `${classBase12}-content`, children: content })
   ] });
 };
 DockLayout.displayName = "DockLayout";
@@ -1353,10 +1353,13 @@ function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false)
   const dimensionsRef = useRef5(dimensions);
   const measure = useCallback9((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;
+      },
+      {}
+    );
   }, []);
   useLayoutEffect(() => {
     const target = ref.current;
@@ -1382,7 +1385,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();
     }
@@ -1393,7 +1398,7 @@ function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false)
         cleanedUp = true;
       }
     };
-  }, [ref, measure]);
+  }, [ref, measure, reportInitialSize, onResize]);
   useLayoutEffect(() => {
     const target = ref.current;
     const record = observedMap.get(target);
@@ -1920,6 +1925,7 @@ var View = forwardRef5(function View2(props, forwardedRef) {
     className,
     collapsed,
     closeable,
+    "data-path": dataPath,
     "data-resizeable": dataResizeable,
     dropTargets,
     expanded,
@@ -1927,7 +1933,7 @@ var View = forwardRef5(function View2(props, forwardedRef) {
     id: idProp,
     header,
     orientation = "horizontal",
-    path,
+    path = dataPath,
     resize = "responsive",
     resizeable = dataResizeable,
     tearOut,
@@ -2064,7 +2070,7 @@ var Header = ({
   const [editing, setEditing] = useState8(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();
@@ -2074,9 +2080,9 @@ var Header = ({
   };
   const orientation = collapsed || orientationProp;
   const className = classnames2(
-    classBase11,
+    classBase12,
     classNameProp,
-    `${classBase11}-${orientation}`
+    `${classBase12}-${orientation}`
   );
   const handleEnterEditMode = () => {
     setEditing(true);
@@ -2209,7 +2215,7 @@ var Palette = ({
   ...props
 }) => {
   const dispatch = useLayoutProviderDispatch();
-  const classBase11 = "vuuPalette";
+  const classBase12 = "vuuPalette";
   function handleMouseDown(evt) {
     var _a;
     const target = evt.target;
@@ -2256,7 +2262,7 @@ var Palette = ({
     {
       ...props,
       borderless: true,
-      className: cx12(classBase11, className, `${classBase11}-${orientation}`),
+      className: cx12(classBase12, className, `${classBase12}-${orientation}`),
       maxHeight: 800,
       selected: null,
       children: children.map(
@@ -2646,7 +2652,15 @@ import { jsx as jsx28, jsxs as jsxs10 } from "react/jsx-runtime";
 
 // ../vuu-shell/src/login/login-utils.ts
 import { getCookieValue } from "@vuu-ui/vuu-utils";
-var redirectToLogin = (loginUrl = "login.html") => {
+var getAuthModeFromCookies = () => {
+  const mode = 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) => {
@@ -3754,6 +3768,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;
@@ -4131,6 +4146,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
@@ -4561,7 +4577,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,
@@ -4681,7 +4709,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":
@@ -6761,8 +6789,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
@@ -8263,10 +8291,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) => {
@@ -9473,9 +9501,11 @@ import {
   debounce,
   EventEmitter as EventEmitter4,
   itemsOrOrderChanged,
+  logger as logger2,
   throttle,
   uuid as uuid10
 } from "@vuu-ui/vuu-utils";
+var { info } = logger2("RemoteDataSource");
 var _config2, _groupBy2, _optimize, _range3, _selectedRowsCount3, _size3, _title3;
 var RemoteDataSource = class extends EventEmitter4 {
   constructor({
@@ -9493,8 +9523,6 @@ var RemoteDataSource = class extends EventEmitter4 {
     super();
     this.server = null;
     this.status = "initialising";
-    this.disabled = false;
-    this.suspended = false;
     __privateAdd(this, _config2, vanillaConfig);
     __privateAdd(this, _groupBy2, []);
     __privateAdd(this, _optimize, "throttle");
@@ -9633,6 +9661,7 @@ var RemoteDataSource = class extends EventEmitter4 {
   }
   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);
     }
@@ -9641,8 +9670,9 @@ var RemoteDataSource = class extends EventEmitter4 {
   }
   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
@@ -9652,20 +9682,25 @@ var RemoteDataSource = class extends EventEmitter4 {
   }
   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"
@@ -9675,13 +9710,13 @@ var RemoteDataSource = class extends EventEmitter4 {
   }
   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;
   }
@@ -10161,7 +10196,7 @@ var ThemeProvider = ({
 ThemeProvider.displayName = "ThemeProvider";
 
 // ../vuu-shell/src/shell.tsx
-import { logger as logger2 } from "@vuu-ui/vuu-utils";
+import { logger as logger3 } from "@vuu-ui/vuu-utils";
 
 // ../vuu-shell/src/shell-layouts/context-panel/ContextPanel.tsx
 import { Button as Button6 } from "@salt-ds/core";
@@ -10183,7 +10218,7 @@ import { jsx as jsx38, jsxs as jsxs19 } from "react/jsx-runtime";
 
 // ../vuu-shell/src/shell.tsx
 import { jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
-var { error } = logger2("Shell");
+var { error } = logger3("Shell");
 
 // ../vuu-shell/src/ShellContextProvider.tsx
 import { createContext as createContext3, useContext as useContext4 } from "react";
@@ -11384,7 +11419,7 @@ var Popup = (props) => {
 
 // src/menu/useContextMenu.tsx
 import { jsx as jsx45 } from "react/jsx-runtime";
-var useContextMenu = (menuBuilder) => {
+var useContextMenu = (menuBuilder, menuActionHandler) => {
   const ctx = useContext5(ContextMenuContext);
   const [themeClass, densityClass, dataMode] = useThemeAttributes();
   const buildMenuOptions = useCallback32(
@@ -11412,11 +11447,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: cx27(
               ContextMenuProps2 == null ? void 0 : ContextMenuProps2.className,
@@ -11438,6 +11474,7 @@ var useContextMenu = (menuBuilder) => {
       ctx == null ? void 0 : ctx.menuBuilders,
       dataMode,
       densityClass,
+      menuActionHandler,
       menuBuilder,
       themeClass
     ]
@@ -11485,6 +11522,60 @@ var showContextMenu = (e, menuDescriptors, handleContextMenuAction, {
   );
   PopupService.showPopup({ left: 0, top: 0, component });
 };
+
+// src/popup-menu/PopupMenu.tsx
+import {
+  useCallback as useCallback33,
+  useRef as useRef22,
+  useState as useState18
+} from "react";
+import cx28 from "classnames";
+import { jsx as jsx46 } from "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 = useRef22(null);
+  const [menuOpen, setMenuOpen] = useState18(false);
+  const showContextMenu2 = useContextMenu(menuBuilder, menuActionHandler);
+  const handleMenuClose = useCallback33(() => {
+    setMenuOpen(false);
+  }, []);
+  const showColumnMenu = useCallback33(
+    (e) => {
+      setMenuOpen(true);
+      showContextMenu2(e, menuLocation, {
+        ContextMenuProps: {
+          onClose: handleMenuClose,
+          position: getPosition3(rootRef.current)
+        }
+      });
+    },
+    [handleMenuClose, menuLocation, showContextMenu2]
+  );
+  return /* @__PURE__ */ jsx46(
+    "span",
+    {
+      ...htmlAttributes,
+      className: cx28(classBase11, className, {
+        [`${classBase11}-open`]: menuOpen
+      }),
+      "data-icon": "more-vert",
+      onClick: showColumnMenu,
+      ref: rootRef
+    }
+  );
+};
 export {
   ContextMenu,
   ContextMenuContext,
@@ -11494,6 +11585,7 @@ export {
   MenuItem,
   MenuItemGroup,
   Popup,
+  PopupMenu,
   PopupService,
   Portal,
   Separator,