@vuu-ui/vuu-popups 0.8.35 → 0.8.36

package/cjs/dialog/Dialog.css

@@ -0,0 +1,16 @@
+.vuuDialog {
+  background: var(--salt-container-primary-background);
+  border: var(--vuuDialog-border, solid 1px #ccc);
+  border-radius: 5px;
+  padding: var(--vuuDialog-padding, 16px);
+  position: relative;
+  box-shadow: var(--salt-overlayable-shadow, none);
+  height: var(--vuuDialog-height, fit-content);
+  overflow: visible;
+  width: var(--vuuDialog-width, fit-content);
+}
+
+.vuuDialog-body {
+  padding-top: 16px;
+}
+

package/cjs/dialog/Dialog.js

@@ -0,0 +1,87 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('clsx');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var React = require('react');
+var DialogHeader = require('../dialog-header/DialogHeader.js');
+require('react-dom');
+var useAnchoredPosition = require('../popup/useAnchoredPosition.js');
+
+const classBase = "vuuDialog";
+const AnchorBody = { current: document.body };
+const EMPTY_PROPS = {};
+const Dialog = ({
+  PopupProps = EMPTY_PROPS,
+  children,
+  className,
+  isOpen = false,
+  onClose,
+  style,
+  title,
+  hideCloseButton = false,
+  ...htmlAttributes
+}) => {
+  const {
+    anchorElement = AnchorBody,
+    offsetLeft = 0,
+    offsetTop = 0,
+    placement = "auto"
+  } = PopupProps;
+  const rootRef = React.useRef(null);
+  const portalRef = React.useRef(null);
+  const [themeClass, _, dataMode] = vuuUtils.useThemeAttributes();
+  const { position } = useAnchoredPosition.useAnchoredPosition({
+    anchorElement,
+    offsetLeft,
+    offsetTop,
+    placement
+  });
+  const close = React.useCallback(() => {
+    onClose?.();
+  }, [onClose]);
+  React.useLayoutEffect(() => {
+    if (rootRef.current) {
+      if (isOpen) {
+        rootRef.current.showModal();
+        const { left, top } = rootRef.current.getBoundingClientRect();
+        if (portalRef.current) {
+          portalRef.current.style.cssText = `left:-${left}px;position:absolute;top:-${top}px;`;
+        }
+      } else {
+        rootRef.current.close();
+      }
+      if (placement.endsWith("center")) {
+        const { width } = rootRef.current.getBoundingClientRect();
+        rootRef.current.style.marginLeft = `-${width / 2}px`;
+      }
+    }
+  }, [isOpen, placement]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "dialog",
+    {
+      ...htmlAttributes,
+      className: cx(classBase, themeClass),
+      "data-mode": dataMode,
+      onClose: close,
+      id: "vuu-dialog",
+      ref: rootRef,
+      style: { ...style, ...position },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DialogHeader.DialogHeader,
+          {
+            hideCloseButton,
+            onClose: close,
+            title
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-body`, children }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { id: "vuu-dialog-portal-root", ref: portalRef })
+      ]
+    }
+  );
+};
+
+exports.Dialog = Dialog;
+//# sourceMappingURL=Dialog.js.map

package/cjs/dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../../src/dialog/Dialog.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useThemeAttributes } from \"@vuu-ui/vuu-utils\";\nimport { HTMLAttributes, useCallback, useLayoutEffect, useRef } from \"react\";\nimport { DialogHeader } from \"../dialog-header\";\n\nimport \"./Dialog.css\";\nimport { PopupComponentProps, useAnchoredPosition } from \"../popup\";\n\nconst classBase = \"vuuDialog\";\n\nconst AnchorBody = { current: document.body };\nconst EMPTY_PROPS = {};\n\nexport interface DialogProps extends HTMLAttributes<HTMLDialogElement> {\n  PopupProps?: Partial<PopupComponentProps>;\n  isOpen?: boolean;\n  onClose?: () => void;\n  hideCloseButton?: boolean;\n}\n\nexport const Dialog = ({\n  PopupProps = EMPTY_PROPS,\n  children,\n  className,\n  isOpen = false,\n  onClose,\n  style,\n  title,\n  hideCloseButton = false,\n  ...htmlAttributes\n}: DialogProps) => {\n  const {\n    anchorElement = AnchorBody,\n    offsetLeft = 0,\n    offsetTop = 0,\n    placement = \"auto\",\n  } = PopupProps;\n\n  const rootRef = useRef<HTMLDialogElement>(null);\n  const portalRef = useRef<HTMLDivElement>(null);\n  const [themeClass, _, dataMode] = useThemeAttributes();\n  const { position } = useAnchoredPosition({\n    anchorElement,\n    offsetLeft,\n    offsetTop,\n    placement,\n  });\n\n  const close = useCallback(() => {\n    onClose?.();\n  }, [onClose]);\n\n  // if (!isOpen) {\n  //   return null;\n  // }\n\n  useLayoutEffect(() => {\n    if (rootRef.current) {\n      if (isOpen) {\n        rootRef.current.showModal();\n\n        const { left, top } = rootRef.current.getBoundingClientRect();\n        if (portalRef.current) {\n          portalRef.current.style.cssText = `left:-${left}px;position:absolute;top:-${top}px;`;\n        }\n      } else {\n        rootRef.current.close();\n      }\n      if (placement.endsWith(\"center\")) {\n        const { width } = rootRef.current.getBoundingClientRect();\n        rootRef.current.style.marginLeft = `-${width / 2}px`;\n      }\n    }\n  }, [isOpen, placement]);\n\n  return (\n    <dialog\n      {...htmlAttributes}\n      className={cx(classBase, themeClass)}\n      data-mode={dataMode}\n      onClose={close}\n      id=\"vuu-dialog\"\n      ref={rootRef}\n      style={{ ...style, ...position }}\n    >\n      <DialogHeader\n        hideCloseButton={hideCloseButton}\n        onClose={close}\n        title={title}\n      />\n      <div className={`${classBase}-body`}>{children}</div>\n      <div id=\"vuu-dialog-portal-root\" ref={portalRef} />\n    </dialog>\n  );\n};\n"],"names":["useRef","useThemeAttributes","useAnchoredPosition","useCallback","useLayoutEffect","jsxs","jsx","DialogHeader"],"mappings":"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"}

package/cjs/dialog/useDialog.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Dialog = require('./Dialog.js');
+
+const useDialog = () => {
+  const [dialogState, setDialogState] = React.useState();
+  const handleClose = React.useCallback(() => {
+    setDialogState(void 0);
+  }, []);
+  const dialog = dialogState ? /* @__PURE__ */ jsxRuntime.jsx(
+    Dialog.Dialog,
+    {
+      className: "vuDialog",
+      isOpen: true,
+      onClose: handleClose,
+      style: { maxHeight: 500 },
+      title: dialogState.title,
+      hideCloseButton: dialogState.hideCloseButton,
+      children: dialogState.content
+    }
+  ) : null;
+  return {
+    dialog,
+    setDialogState
+  };
+};
+
+exports.useDialog = useDialog;
+//# sourceMappingURL=useDialog.js.map

package/cjs/dialog/useDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDialog.js","sources":["../../src/dialog/useDialog.tsx"],"sourcesContent":["import { ReactElement, useCallback, useState } from \"react\";\nimport { Dialog } from \"./Dialog\";\n\nexport type DialogState = {\n  content: ReactElement;\n  title: string;\n  hideCloseButton?: boolean;\n};\n\nexport type SetDialog = (dialogState?: DialogState) => void;\n\nexport const useDialog = () => {\n  const [dialogState, setDialogState] = useState<DialogState>();\n\n  const handleClose = useCallback(() => {\n    setDialogState(undefined);\n  }, []);\n\n  const dialog = dialogState ? (\n    <Dialog\n      className=\"vuDialog\"\n      isOpen={true}\n      onClose={handleClose}\n      style={{ maxHeight: 500 }}\n      title={dialogState.title}\n      hideCloseButton={dialogState.hideCloseButton}\n    >\n      {dialogState.content}\n    </Dialog>\n  ) : null;\n\n  return {\n    dialog,\n    setDialogState,\n  };\n};\n"],"names":["useState","useCallback","jsx","Dialog"],"mappings":";;;;;;AAWO,MAAM,YAAY,MAAM;AAC7B,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIA,cAAsB,EAAA,CAAA;AAE5D,EAAM,MAAA,WAAA,GAAcC,kBAAY,MAAM;AACpC,IAAA,cAAA,CAAe,KAAS,CAAA,CAAA,CAAA;AAAA,GAC1B,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,SAAS,WACb,mBAAAC,cAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,UAAA;AAAA,MACV,MAAQ,EAAA,IAAA;AAAA,MACR,OAAS,EAAA,WAAA;AAAA,MACT,KAAA,EAAO,EAAE,SAAA,EAAW,GAAI,EAAA;AAAA,MACxB,OAAO,WAAY,CAAA,KAAA;AAAA,MACnB,iBAAiB,WAAY,CAAA,eAAA;AAAA,MAE5B,QAAY,EAAA,WAAA,CAAA,OAAA;AAAA,KAAA;AAAA,GAEb,GAAA,IAAA,CAAA;AAEJ,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA,cAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/cjs/dialog-header/DialogHeader.css

@@ -0,0 +1,25 @@
+.vuuDialogHeader {
+    --saltButton-height: 28px;
+    --saltButton-width: 28px;
+    --saltToolbar-background: transparent;
+    --saltToolbar-height: calc(var(--salt-size-base) + 5px);
+    --vuuToolbarProxy-height: 22px;
+    --salt-text-fontFamily: Nunito Sans A-Variant, sans-serif;
+
+    display: flex;
+    align-items: flex-start;
+    color: var(--light-text-primary, #15171B);
+    font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;
+    font-size: 16px;
+    font-weight: 600;
+}
+  
+.vuuDialogHeader > .Responsive-inner {
+    align-items: center;
+}
+  
+.vuuDialogHeader > .Responsive-inner > :last-child{
+    right: 2px;
+}
+  
+  

package/cjs/dialog-header/DialogHeader.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var cx = require('clsx');
+
+const classBase = "vuuDialogHeader";
+const DialogHeader = ({
+  hideCloseButton = false,
+  title,
+  onClose,
+  ...htmlAttributes
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: cx(classBase, "vuuToolbarProxy"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(core.Text, { className: "dialogHeader", children: title }),
+    !hideCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
+      core.Button,
+      {
+        onClick: onClose,
+        "data-align": "end",
+        "data-icon": "close",
+        variant: "secondary"
+      },
+      "close"
+    )
+  ] });
+};
+
+exports.DialogHeader = DialogHeader;
+//# sourceMappingURL=DialogHeader.js.map

package/cjs/dialog-header/DialogHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogHeader.js","sources":["../../src/dialog-header/DialogHeader.tsx"],"sourcesContent":["import { Button, Text } from \"@salt-ds/core\";\nimport { HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\n\nimport \"./DialogHeader.css\";\n\nconst classBase = \"vuuDialogHeader\";\n\nexport interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  hideCloseButton?: boolean;\n  onClose: () => void;\n}\n\nexport const DialogHeader = ({\n  hideCloseButton = false,\n  title,\n  onClose,\n  ...htmlAttributes\n}: DialogHeaderProps) => {\n  return (\n    <div {...htmlAttributes} className={cx(classBase, \"vuuToolbarProxy\")}>\n      <Text className=\"dialogHeader\">{title}</Text>\n      {!hideCloseButton && (\n        <Button\n          key=\"close\"\n          onClick={onClose}\n          data-align=\"end\"\n          data-icon=\"close\"\n          variant=\"secondary\"\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["jsxs","jsx","Text","Button"],"mappings":";;;;;;AAMA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAOX,MAAM,eAAe,CAAC;AAAA,EAC3B,eAAkB,GAAA,KAAA;AAAA,EAClB,KAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAyB,KAAA;AACvB,EACE,uBAAAA,eAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,iBAAiB,CACjE,EAAA,QAAA,EAAA;AAAA,oBAACC,cAAA,CAAAC,SAAA,EAAA,EAAK,SAAU,EAAA,cAAA,EAAgB,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,IACrC,CAAC,eACA,oBAAAD,cAAA;AAAA,MAACE,WAAA;AAAA,MAAA;AAAA,QAEC,OAAS,EAAA,OAAA;AAAA,QACT,YAAW,EAAA,KAAA;AAAA,QACX,WAAU,EAAA,OAAA;AAAA,QACV,OAAQ,EAAA,WAAA;AAAA,OAAA;AAAA,MAJJ,OAAA;AAAA,KAKN;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/menu/ContextMenu.js

@@ -0,0 +1,119 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+require('clsx');
+require('react-dom');
+var Popup = require('../popup/Popup.js');
+var Portal = require('../portal/Portal.js');
+var MenuList = require('./MenuList.js');
+var useCascade = require('./use-cascade.js');
+var useItemsWithIdsNext = require('./use-items-with-ids-next.js');
+
+const noop = () => void 0;
+const ContextMenu = ({
+  PortalProps: PortalProps2,
+  activatedByKeyboard,
+  children: childrenProp,
+  className,
+  id: idProp,
+  onClose = () => void 0,
+  position = { x: 0, y: 0 },
+  style,
+  ...menuListProps
+}) => {
+  const id = vuuUtils.useId(idProp);
+  const closeMenuRef = React.useRef(noop);
+  const [menus, actions] = useItemsWithIdsNext.useItemsWithIdsNext(childrenProp, id);
+  const navigatingWithKeyboard = React.useRef(activatedByKeyboard);
+  const handleMouseEnterItem = React.useCallback(() => {
+    navigatingWithKeyboard.current = false;
+  }, []);
+  const handleActivate = React.useCallback(
+    (menuItemId) => {
+      const actionId = menuItemId.slice(9);
+      const { action, options } = actions[actionId];
+      closeMenuRef.current(id);
+      onClose({
+        type: "menu-action",
+        menuId: action,
+        options
+      });
+    },
+    [actions, id, onClose]
+  );
+  const {
+    closeMenu,
+    listItemProps,
+    openMenu: onOpenMenu,
+    openMenus,
+    handleRender
+  } = useCascade.useCascade({
+    // FIXME
+    id: `${id}`,
+    onActivate: handleActivate,
+    onMouseEnterItem: handleMouseEnterItem,
+    position
+  });
+  closeMenuRef.current = closeMenu;
+  const handleCloseMenu = React.useCallback(
+    (evt, reason) => {
+      navigatingWithKeyboard.current = true;
+      closeMenu();
+      if (reason === "tab-away") {
+        onClose({
+          event: evt,
+          type: "tab-away"
+        });
+      }
+    },
+    [closeMenu, onClose]
+  );
+  const handleHighlightMenuItem = () => {
+  };
+  const lastMenu = openMenus.length - 1;
+  const getChildMenuId = (i) => {
+    if (i >= lastMenu) {
+      return void 0;
+    } else {
+      const { id: id2 } = openMenus[i + 1];
+      return id2;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: openMenus.map(({ id: menuId, left, top }, i, all) => {
+    const childMenuId = getChildMenuId(i);
+    return /* @__PURE__ */ React.createElement(Portal.Portal, { ...PortalProps2, key: i, onRender: handleRender }, /* @__PURE__ */ jsxRuntime.jsx(
+      Popup.PopupComponent,
+      {
+        anchorElement: { current: document.body },
+        placement: "absolute",
+        position: { left, top },
+        children: /* @__PURE__ */ React.createElement(
+          MenuList.MenuList,
+          {
+            ...menuListProps,
+            activatedByKeyboard: navigatingWithKeyboard.current,
+            childMenuShowing: childMenuId,
+            className,
+            id: menuId,
+            isRoot: i === 0,
+            key: i,
+            listItemProps,
+            onActivate: handleActivate,
+            onHighlightMenuItem: handleHighlightMenuItem,
+            onCloseMenu: handleCloseMenu,
+            openMenu: onOpenMenu,
+            style,
+            tabIndex: i === all.length - 1 ? 0 : void 0
+          },
+          menus[menuId]
+        )
+      }
+    ));
+  }) });
+};
+ContextMenu.displayName = "ContextMenu";
+
+exports.ContextMenu = ContextMenu;
+//# sourceMappingURL=ContextMenu.js.map

package/cjs/menu/ContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.js","sources":["../../src/menu/ContextMenu.tsx"],"sourcesContent":["import { useId } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useRef } from \"react\";\nimport { PopupCloseCallback, PopupComponent } from \"../popup\";\nimport { Portal, PortalProps } from \"../portal\";\nimport { MenuList, MenuListProps } from \"./MenuList\";\nimport { useCascade } from \"./use-cascade\";\nimport { useItemsWithIdsNext } from \"./use-items-with-ids-next\";\nimport { MenuCloseHandler } from \"./use-keyboard-navigation\";\nimport { ContextMenuOptions } from \"./useContextMenu\";\n\nexport interface ContextMenuProps extends Omit<MenuListProps, \"onCloseMenu\"> {\n  PortalProps?: Partial<PortalProps>;\n  onClose?: PopupCloseCallback;\n  position?: { x: number; y: number };\n  withPortal?: boolean;\n}\n\nconst noop = () => undefined;\n\nexport const ContextMenu = ({\n  PortalProps,\n  activatedByKeyboard,\n  children: childrenProp,\n  className,\n  id: idProp,\n  onClose = () => undefined,\n  position = { x: 0, y: 0 },\n  style,\n  ...menuListProps\n}: ContextMenuProps) => {\n  const id = useId(idProp);\n  const closeMenuRef = useRef<(location?: string) => void>(noop);\n  const [menus, actions] = useItemsWithIdsNext(childrenProp, id);\n  const navigatingWithKeyboard = useRef(activatedByKeyboard);\n  const handleMouseEnterItem = useCallback(() => {\n    navigatingWithKeyboard.current = false;\n  }, []);\n\n  const handleActivate = useCallback(\n    (menuItemId: string) => {\n      const actionId = menuItemId.slice(9);\n      const { action, options } = actions[actionId];\n      closeMenuRef.current(id);\n      onClose({\n        type: \"menu-action\",\n        menuId: action,\n        options: options as ContextMenuOptions,\n      });\n    },\n    [actions, id, onClose]\n  );\n\n  const {\n    closeMenu,\n    listItemProps,\n    openMenu: onOpenMenu,\n    openMenus,\n    handleRender,\n  } = useCascade({\n    // FIXME\n    id: `${id}`,\n    onActivate: handleActivate,\n    onMouseEnterItem: handleMouseEnterItem,\n    position,\n  });\n  closeMenuRef.current = closeMenu;\n\n  const handleCloseMenu = useCallback<MenuCloseHandler>(\n    (evt, reason) => {\n      navigatingWithKeyboard.current = true;\n      closeMenu();\n      if (reason === \"tab-away\") {\n        // TODO we should fire onclose whenever we're closing\n        // the root menu, not just on Tab\n        onClose({\n          event: evt,\n          type: \"tab-away\",\n        });\n      }\n    },\n    [closeMenu, onClose]\n  );\n\n  const handleHighlightMenuItem = () => {\n    // console.log(`highlight ${idx}`);\n  };\n\n  const lastMenu = openMenus.length - 1;\n\n  const getChildMenuId = (i: number) => {\n    if (i >= lastMenu) {\n      return undefined;\n    } else {\n      const { id } = openMenus[i + 1];\n      return id;\n    }\n  };\n\n  return (\n    <>\n      {openMenus.map(({ id: menuId, left, top }, i, all) => {\n        const childMenuId = getChildMenuId(i);\n        return (\n          <Portal {...PortalProps} key={i} onRender={handleRender}>\n            <PopupComponent\n              anchorElement={{ current: document.body }}\n              placement=\"absolute\"\n              position={{ left, top }}\n            >\n              <MenuList\n                {...menuListProps}\n                activatedByKeyboard={navigatingWithKeyboard.current}\n                childMenuShowing={childMenuId}\n                className={className}\n                id={menuId}\n                isRoot={i === 0}\n                key={i}\n                listItemProps={listItemProps}\n                onActivate={handleActivate}\n                onHighlightMenuItem={handleHighlightMenuItem}\n                onCloseMenu={handleCloseMenu}\n                openMenu={onOpenMenu}\n                style={style}\n                tabIndex={i === all.length - 1 ? 0 : undefined}\n              >\n                {menus[menuId]}\n              </MenuList>\n            </PopupComponent>\n          </Portal>\n        );\n      })}\n    </>\n  );\n};\n\nContextMenu.displayName = \"ContextMenu\";\n"],"names":["PortalProps","useId","useRef","useItemsWithIdsNext","useCallback","useCascade","id","jsx","Fragment","Portal","PopupComponent","createElement","MenuList"],"mappings":"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"}

package/cjs/menu/MenuList.css

@@ -0,0 +1,140 @@
+.vuuMenuList {
+  --salt-focused-outlineStyle: dashed !important;
+  --salt-focused-outlineWidth: 1px !important;
+  --vuuListItem-padding: 8px;
+  --context-menu-color: var(--vuuMenuList-color,#161616);
+  --context-menu-padding: var(--hw-list-item-padding, 0 6px);
+  --context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, 0.175));
+  --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));
+  --context-menu-highlight-bg: var(--salt-selectable-background-hover);
+  --menu-item-icon-color: black;
+  --menu-item-twisty-color: black;
+  --menu-item-twisty-content: '';
+  --menu-item-twisty-top: 50%;
+  --menu-item-twisty-left: auto;
+  --menu-item-twisty-right: 0px;
+  --menu-icon-size: 12px;
+
+  background-clip: padding-box;
+  background-color: white;
+  font-size: var(--vuuMenuList-fontSize, var(--salt-text-label-fontSize));
+  font-weight: var(--salt-typography-fontWeight-medium);
+  list-style: none;
+  outline: 0;
+  overflow: hidden;
+  padding: var(--vuuMenuList-padding, 0);
+  position: absolute;
+}
+
+/* hacky fix until problem is identified (css source code order in prod build )*/
+.vuuPortal > .vuuMenuList {
+  position: relative;
+}
+
+.vuuMenuItem {
+  --menu-item-background: var(--salt-selectable-background);
+  --menu-item-text-color: var(--salt-content-primary-foreground);
+
+  align-items: center;
+  background: var(--vuuMenuItem-background, var(--menu-item-background));
+  border-width: 1px;
+  border-color: var(--vuuMenuItem-borderColor, transparent);
+  border-style: var(--vuuMenuItem-borderStyle, none);
+  color: var(--vuuMenuItem-color, var(--menu-item-text-color));
+  display: flex;
+  gap: 6px;
+  height: var(--vuuMenuItem-height, var(--hw-list-item-height, 24px));
+  padding: var(--context-menu-padding);
+  padding-right: 24px;
+  position: relative;
+  white-space: nowrap;
+}
+
+.vuuIconContainer {
+  display: inline-block;
+  flex: 12px 0 0;
+  height: var(--menu-icon-size);
+  mask-repeat: no-repeat;
+  width: var(--menu-icon-size);
+}
+
+.vuuMenuItem[aria-expanded='true'] {
+  --menu-item-twisty-color: var(--salt-selectable-foreground-selected);
+  color: var(--salt-selectable-foreground-selected);
+  background-color: var(--salt-selectable-background-selected);
+}
+
+.vuuMenuItem-separator {
+  border-top: solid 1px var(--context-menu-blur-focus-bg);
+}
+
+.vuuMenuItem[aria-haspopup='true']:after {
+  content: var(--menu-item-twisty-content);
+  mask: var(--vuu-svg-chevron-right) center center/8px 8px no-repeat;
+  -webkit-mask: var(--vuu-svg-chevron-right) center center/8px 8px no-repeat;
+  background-color: var(--menu-item-twisty-color);
+  height: 16px;
+  left: var(--menu-item-twisty-left);
+  right: var(--menu-item-twisty-right);
+  margin-top: -8px;
+  position: absolute;
+  top: var(--menu-item-twisty-top);
+  transition: transform 0.3s;
+  width: 16px;
+}
+
+.vuuMenuItem.vuuHighlighted {
+  --menu-item-background: var(--tar-color-gray-15);
+}
+
+.vuuMenuItem:hover {
+  --menu-item-background: var(--salt-selectable-background-hover);
+  cursor: default;
+}
+
+.vuuMenuItem.focusVisible:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0px;
+  border: dotted var(--focus-visible-border-color) 2px;
+}
+
+.vuuPopupContainer.top-bottom-right-right .popup-menu {
+  left: auto;
+  right: 0;
+}
+
+.popup-menu .menu-item.showing > button,
+.popup-menu .menu-item > button:focus,
+.popup-menu .menu-item > button:hover {
+  text-decoration: none;
+  color: rgb(0, 0, 0);
+  background-color: rgb(220, 220, 220);
+}
+.vuuMenuItem-button:active,
+.vuuMenuItem-button:hover {
+  outline: 0;
+}
+
+.popup-menu .menu-item.disabled > button {
+  clear: both;
+  font-weight: normal;
+  line-height: 1.5;
+  color: rgb(120, 120, 120);
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: default;
+}
+
+/* hacky fix, to be revisited */
+.vuuMenuList.salt-theme {
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  position: absolute;
+  border-color: var(--salt-container-primary-borderColor);
+  border-style: solid !important;
+  border-width: 1px;
+
+}

package/cjs/menu/MenuList.js

@@ -0,0 +1,163 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('clsx');
+var React = require('react');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var useKeyboardNavigation = require('./use-keyboard-navigation.js');
+
+const classBase = "vuuMenuList";
+const Separator = () => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "vuuMenuItem-divider" });
+const isMenuItemGroup = (child) => child.type === MenuItemGroup || !!child.props["data-group"];
+const MenuItemGroup = () => null;
+const MenuItem = ({
+  children,
+  idx,
+  options,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, children });
+};
+const MenuItemLabel = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+MenuItemLabel.displayName = "MenuItemLabel";
+MenuItem.Label = MenuItemLabel;
+const getDisplayName = (item) => React.isValidElement(item) && typeof item.type !== "string" && "displayName" in item.type ? item.type.displayName : void 0;
+const isMenuItemLabel = (item) => getDisplayName(item) === "MenuItemLabel";
+const hasIcon = (child) => child.props["data-icon"];
+const MenuList = ({
+  activatedByKeyboard,
+  childMenuShowing,
+  children,
+  className,
+  defaultHighlightedIdx,
+  highlightedIdx: highlightedIdxProp,
+  id: idProp,
+  isRoot,
+  listItemProps,
+  onHighlightMenuItem,
+  onActivate,
+  onCloseMenu,
+  openMenu: onOpenMenu,
+  ...props
+}) => {
+  const id = vuuUtils.useId(idProp);
+  const root = React.useRef(null);
+  const mapIdxToId = React.useMemo(() => /* @__PURE__ */ new Map(), []);
+  const handleActivate = (idx) => {
+    const el = root.current?.querySelector(`:scope > [data-index='${idx}']`);
+    el?.id && onActivate?.(el.id);
+  };
+  const { focusVisible, highlightedIndex, listProps } = useKeyboardNavigation.useKeyboardNavigation({
+    count: React.Children.count(children),
+    defaultHighlightedIdx,
+    highlightedIndex: highlightedIdxProp,
+    onActivate: handleActivate,
+    onHighlight: onHighlightMenuItem,
+    onOpenMenu,
+    onCloseMenu
+  });
+  const appliedFocusVisible = childMenuShowing == void 0 ? focusVisible : -1;
+  React.useLayoutEffect(() => {
+    if (childMenuShowing === void 0 && activatedByKeyboard) {
+      root.current?.focus();
+    }
+  }, [activatedByKeyboard, childMenuShowing]);
+  const getActiveDescendant = () => highlightedIndex === void 0 || highlightedIndex === -1 ? void 0 : mapIdxToId.get(highlightedIndex);
+  function renderContent() {
+    const propsCommonToAllListItems = {
+      ...listItemProps,
+      role: "menuitem"
+    };
+    const maybeIcon = (childElement, withIcon, iconName) => withIcon ? [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "vuuIconContainer",
+          "data-icon": iconName
+        },
+        "icon"
+      )
+    ].concat(childElement) : childElement;
+    function addClonedChild(list, child, idx, withIcon) {
+      const {
+        children: children2,
+        className: className2,
+        "data-icon": iconName,
+        id: itemId,
+        hasSeparator,
+        label,
+        ...props2
+      } = child.props;
+      const hasSubMenu = isMenuItemGroup(child);
+      const subMenuShowing = hasSubMenu && childMenuShowing === itemId;
+      const ariaControls = subMenuShowing ? `${id}-${itemId}` : void 0;
+      const ariaLabel = label ?? typeof children2 === "string" ? children2 : void 0;
+      list.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          MenuItem,
+          {
+            ...props2,
+            ...propsCommonToAllListItems,
+            ...getMenuItemProps(
+              itemId,
+              idx,
+              child.key ?? itemId,
+              highlightedIndex,
+              appliedFocusVisible,
+              className2,
+              hasSeparator
+            ),
+            "aria-controls": ariaControls,
+            "aria-haspopup": hasSubMenu || void 0,
+            "aria-expanded": subMenuShowing || void 0,
+            "aria-label": ariaLabel,
+            children: hasSubMenu ? maybeIcon(label ?? children2, withIcon, iconName) : maybeIcon(children2, withIcon, iconName)
+          }
+        )
+      );
+    }
+    const listItems = [];
+    if (children.length > 0) {
+      const withIcon = children.some(hasIcon);
+      children.forEach((child, idx) => {
+        addClonedChild(listItems, child, idx, withIcon);
+      });
+    }
+    return listItems;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      ...listProps,
+      "aria-activedescendant": getActiveDescendant(),
+      className: cx(classBase, className, {
+        [`${classBase}-childMenuShowing`]: childMenuShowing !== void 0
+      }),
+      "data-root": isRoot || void 0,
+      id,
+      ref: root,
+      role: "menu",
+      children: renderContent()
+    }
+  );
+};
+const getMenuItemProps = (itemId, idx, key, highlightedIdx, focusVisible, className, hasSeparator) => ({
+  id: `menuitem-${itemId}`,
+  key: key ?? idx,
+  "data-index": idx,
+  className: cx("vuuMenuItem", className, {
+    "vuuMenuItem-separator": hasSeparator,
+    vuuHighlighted: idx === highlightedIdx,
+    focusVisible: focusVisible === idx
+  })
+});
+MenuList.displayName = "MenuList";
+
+exports.MenuItem = MenuItem;
+exports.MenuItemGroup = MenuItemGroup;
+exports.MenuList = MenuList;
+exports.Separator = Separator;
+exports.isMenuItemGroup = isMenuItemGroup;
+exports.isMenuItemLabel = isMenuItemLabel;
+//# sourceMappingURL=MenuList.js.map