@versini/ui-dropdown 1.1.2 → 1.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/DropdownMenu/DropdownMenu.js +24 -8
  2. package/dist/DropdownMenu/DropdownMenuItem.js +3 -3
  3. package/dist/DropdownMenu/DropdownMenuTypes.js +3 -3
  4. package/dist/DropdownMenu/utilities.js +3 -3
  5. package/dist/index.js +3 -3
  6. package/package.json +2 -2
package/dist/DropdownMenu/DropdownMenu.js CHANGED
@@ -1,12 +1,12 @@
1
1
  /*!
2
- @versini/ui-dropdown v1.1.2
2
+ @versini/ui-dropdown v1.1.3
3
3
  © 2025 gizmette.com
4
4
  */
5
5
  try {
6
6
  if (!window.__VERSINI_UI_DROPDOWN__) {
7
7
  window.__VERSINI_UI_DROPDOWN__ = {
8
- version: "1.1.2",
9
- buildTime: "12/15/2025 07:44 PM EST",
8
+ version: "1.1.3",
9
+ buildTime: "12/16/2025 01:48 PM EST",
10
10
  homepage: "https://www.npmjs.com/package/@versini/ui-dropdown",
11
11
  license: "MIT",
12
12
  };
@@ -41,7 +41,7 @@ import { getDisplayName } from "./utilities.js";
41
41
 
42
42
 
43
43
 
44
- const CONTENT_CLASS = "z-[60] rounded-md bg-surface-light shadow-sm shadow-border-dark outline-hidden p-3 sm:p-2";
44
+ const CONTENT_CLASS = "z-100 rounded-md bg-surface-light shadow-sm shadow-border-dark outline-hidden p-3 sm:p-2 prose prose-dark";
45
45
  const SUB_CONTENT_CLASS = "z-[60] rounded-md bg-surface-light shadow-sm shadow-border-dark outline-hidden p-3 sm:p-2 mx-3";
46
46
  const SUB_TRIGGER_CLASS = clsx("flex items-center flex-row justify-between", "w-full", "m-0 first:mt-0 mt-2 sm:mt-1 px-2 py-1", "rounded-md border border-transparent", "text-left text-base select-none cursor-pointer", "outline-hidden focus:border focus:border-border-medium focus:bg-surface-lighter focus:underline", "disabled:cursor-not-allowed disabled:text-copy-medium", "data-[highlighted]:bg-surface-lighter data-[highlighted]:border-border-medium data-[highlighted]:underline", "data-[state=open]:bg-surface-lighter");
47
47
  /**
@@ -75,6 +75,8 @@ const getRadixAlign = (placement)=>{
75
75
  };
76
76
  const DropdownMenu = ({ trigger, children, label = "Open menu", defaultPlacement = "bottom-start", onOpenChange, mode = "system", focusMode = "system", sideOffset = 10, modal = true })=>{
77
77
  const [isOpen, setIsOpen] = useState(false);
78
+ // Track the portal container - either explicitly passed or auto-detected dialog
79
+ const [portalContainer, setPortalContainer] = useState(undefined);
78
80
  const noInternalClick = getDisplayName(trigger) === "Button" || getDisplayName(trigger) === "ButtonIcon";
79
81
  const uiButtonsExtraProps = noInternalClick ? {
80
82
  noInternalClick,
@@ -91,11 +93,24 @@ const DropdownMenu = ({ trigger, children, label = "Open menu", defaultPlacement
91
93
  setIsOpen(open);
92
94
  onOpenChange?.(open);
93
95
  /**
94
- * When the menu opens, dispatch a click event to parent elements.
95
- * This ensures that parent components like Tooltip can detect the
96
- * interaction and respond appropriately (e.g., disable tooltip display).
96
+ * When the menu opens, check if we're inside a native <dialog> element
97
+ * that's shown modally. If so, we need to portal the dropdown content
98
+ * into the dialog so it appears in the browser's top layer.
99
+ * Without this, the dropdown would render to document.body which is
100
+ * behind the dialog's top layer and therefore invisible.
97
101
  */ if (open && triggerRef.current) {
98
- const clickEvent = new MouseEvent("click", {
102
+ // Auto-detect if we're inside a native <dialog> element shown modally
103
+ const closestDialog = triggerRef.current.closest("dialog");
104
+ /* v8 ignore next 5 - dialog detection cannot be fully tested without native showModal */ if (closestDialog?.open) {
105
+ setPortalContainer(closestDialog);
106
+ } else {
107
+ setPortalContainer(undefined);
108
+ }
109
+ /**
110
+ * Dispatch a click event to parent elements.
111
+ * This ensures that parent components like Tooltip can detect the
112
+ * interaction and respond appropriately (e.g., disable tooltip display).
113
+ */ const clickEvent = new MouseEvent("click", {
99
114
  bubbles: true,
100
115
  cancelable: true,
101
116
  view: window
@@ -113,6 +128,7 @@ const DropdownMenu = ({ trigger, children, label = "Open menu", defaultPlacement
113
128
  children: triggerElement
114
129
  }),
115
130
  /*#__PURE__*/ jsx(Portal, {
131
+ container: portalContainer,
116
132
  children: /*#__PURE__*/ jsx(Content, {
117
133
  className: CONTENT_CLASS,
118
134
  sideOffset: sideOffset,
package/dist/DropdownMenu/DropdownMenuItem.js CHANGED
@@ -1,12 +1,12 @@
1
1
  /*!
2
- @versini/ui-dropdown v1.1.2
2
+ @versini/ui-dropdown v1.1.3
3
3
  © 2025 gizmette.com
4
4
  */
5
5
  try {
6
6
  if (!window.__VERSINI_UI_DROPDOWN__) {
7
7
  window.__VERSINI_UI_DROPDOWN__ = {
8
- version: "1.1.2",
9
- buildTime: "12/15/2025 07:44 PM EST",
8
+ version: "1.1.3",
9
+ buildTime: "12/16/2025 01:48 PM EST",
10
10
  homepage: "https://www.npmjs.com/package/@versini/ui-dropdown",
11
11
  license: "MIT",
12
12
  };
package/dist/DropdownMenu/DropdownMenuTypes.js CHANGED
@@ -1,12 +1,12 @@
1
1
  /*!
2
- @versini/ui-dropdown v1.1.2
2
+ @versini/ui-dropdown v1.1.3
3
3
  © 2025 gizmette.com
4
4
  */
5
5
  try {
6
6
  if (!window.__VERSINI_UI_DROPDOWN__) {
7
7
  window.__VERSINI_UI_DROPDOWN__ = {
8
- version: "1.1.2",
9
- buildTime: "12/15/2025 07:44 PM EST",
8
+ version: "1.1.3",
9
+ buildTime: "12/16/2025 01:48 PM EST",
10
10
  homepage: "https://www.npmjs.com/package/@versini/ui-dropdown",
11
11
  license: "MIT",
12
12
  };
package/dist/DropdownMenu/utilities.js CHANGED
@@ -1,12 +1,12 @@
1
1
  /*!
2
- @versini/ui-dropdown v1.1.2
2
+ @versini/ui-dropdown v1.1.3
3
3
  © 2025 gizmette.com
4
4
  */
5
5
  try {
6
6
  if (!window.__VERSINI_UI_DROPDOWN__) {
7
7
  window.__VERSINI_UI_DROPDOWN__ = {
8
- version: "1.1.2",
9
- buildTime: "12/15/2025 07:44 PM EST",
8
+ version: "1.1.3",
9
+ buildTime: "12/16/2025 01:48 PM EST",
10
10
  homepage: "https://www.npmjs.com/package/@versini/ui-dropdown",
11
11
  license: "MIT",
12
12
  };
package/dist/index.js CHANGED
@@ -1,12 +1,12 @@
1
1
  /*!
2
- @versini/ui-dropdown v1.1.2
2
+ @versini/ui-dropdown v1.1.3
3
3
  © 2025 gizmette.com
4
4
  */
5
5
  try {
6
6
  if (!window.__VERSINI_UI_DROPDOWN__) {
7
7
  window.__VERSINI_UI_DROPDOWN__ = {
8
- version: "1.1.2",
9
- buildTime: "12/15/2025 07:44 PM EST",
8
+ version: "1.1.3",
9
+ buildTime: "12/16/2025 01:48 PM EST",
10
10
  homepage: "https://www.npmjs.com/package/@versini/ui-dropdown",
11
11
  license: "MIT",
12
12
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@versini/ui-dropdown",
3
- "version": "1.1.2",
3
+ "version": "1.1.3",
4
4
  "license": "MIT",
5
5
  "author": "Arno Versini",
6
6
  "publishConfig": {
@@ -50,5 +50,5 @@
50
50
  "sideEffects": [
51
51
  "**/*.css"
52
52
  ],
53
- "gitHead": "699b13029f1d14089c1875bc50f049c1c7b9859a"
53
+ "gitHead": "ef4323fa1f14f9f2a5471d71f063519230762aec"
54
54
  }