@versini/ui-dropdown 1.1.1 → 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 +26 -9
  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.1
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.1",
9
- buildTime: "12/15/2025 06:39 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,8 @@ 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
+ 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";
45
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");
46
47
  /**
47
48
  * Convert Radix placement format to our simplified format.
@@ -74,6 +75,8 @@ const getRadixAlign = (placement)=>{
74
75
  };
75
76
  const DropdownMenu = ({ trigger, children, label = "Open menu", defaultPlacement = "bottom-start", onOpenChange, mode = "system", focusMode = "system", sideOffset = 10, modal = true })=>{
76
77
  const [isOpen, setIsOpen] = useState(false);
78
+ // Track the portal container - either explicitly passed or auto-detected dialog
79
+ const [portalContainer, setPortalContainer] = useState(undefined);
77
80
  const noInternalClick = getDisplayName(trigger) === "Button" || getDisplayName(trigger) === "ButtonIcon";
78
81
  const uiButtonsExtraProps = noInternalClick ? {
79
82
  noInternalClick,
@@ -90,11 +93,24 @@ const DropdownMenu = ({ trigger, children, label = "Open menu", defaultPlacement
90
93
  setIsOpen(open);
91
94
  onOpenChange?.(open);
92
95
  /**
93
- * When the menu opens, dispatch a click event to parent elements.
94
- * This ensures that parent components like Tooltip can detect the
95
- * 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.
96
101
  */ if (open && triggerRef.current) {
97
- 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", {
98
114
  bubbles: true,
99
115
  cancelable: true,
100
116
  view: window
@@ -112,6 +128,7 @@ const DropdownMenu = ({ trigger, children, label = "Open menu", defaultPlacement
112
128
  children: triggerElement
113
129
  }),
114
130
  /*#__PURE__*/ jsx(Portal, {
131
+ container: portalContainer,
115
132
  children: /*#__PURE__*/ jsx(Content, {
116
133
  className: CONTENT_CLASS,
117
134
  sideOffset: sideOffset,
@@ -143,7 +160,7 @@ const DropdownMenuSub = ({ label, children, disabled = false, sideOffset = 2, al
143
160
  }),
144
161
  /*#__PURE__*/ jsx(Portal, {
145
162
  children: /*#__PURE__*/ jsx(SubContent, {
146
- className: CONTENT_CLASS,
163
+ className: SUB_CONTENT_CLASS,
147
164
  sideOffset: sideOffset,
148
165
  alignOffset: alignOffset,
149
166
  children: children
package/dist/DropdownMenu/DropdownMenuItem.js CHANGED
@@ -1,12 +1,12 @@
1
1
  /*!
2
- @versini/ui-dropdown v1.1.1
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.1",
9
- buildTime: "12/15/2025 06:39 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.1
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.1",
9
- buildTime: "12/15/2025 06:39 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.1
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.1",
9
- buildTime: "12/15/2025 06:39 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.1
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.1",
9
- buildTime: "12/15/2025 06:39 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.1",
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": "e525a00f1bf7288dffb5c49451e075cedc22aaa0"
53
+ "gitHead": "ef4323fa1f14f9f2a5471d71f063519230762aec"
54
54
  }