mlola-ui 1.1.12 → 1.1.13

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/package.json +1 -1
  2. package/registry/index.json +68 -56
  3. package/registry/source/packages/components/_internal/anchor.ts +1 -1
  4. package/registry/source/packages/components/_internal/dialog.ts +2 -1
  5. package/registry/source/packages/components/dropdown-menu/dropdown-menu.tsx +18 -25
  6. package/registry/source-manifest.json +3 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mlola-ui",
3
- "version": "1.1.12",
3
+ "version": "1.1.13",
4
4
  "mcpName": "io.github.mlolahq/mlola-ui",
5
5
  "description": "Source-copy CLI that writes framework-free Mlola UI items into your project",
6
6
  "type": "module",
package/registry/index.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "$schema": "./schema/registry-index.schema.json",
3
3
  "schemaVersion": 2,
4
4
  "name": "mlola-ui",
5
- "version": "1.1.12",
5
+ "version": "1.1.13",
6
6
  "homepage": "https://ui.mlola.com",
7
7
  "themeContract": {
8
8
  "attribute": "data-theme",
@@ -177,8 +177,8 @@
177
177
  },
178
178
  "registryDependencies": [],
179
179
  "engineDependencies": {
180
- "@mlola-ui/behavior": "^1.1.12",
181
- "@mlola-ui/icons": "^1.1.12"
180
+ "@mlola-ui/behavior": "^1.1.13",
181
+ "@mlola-ui/icons": "^1.1.13"
182
182
  },
183
183
  "options": [
184
184
  {
@@ -239,7 +239,7 @@
239
239
  },
240
240
  "registryDependencies": [],
241
241
  "engineDependencies": {
242
- "@mlola-ui/icons": "^1.1.12"
242
+ "@mlola-ui/icons": "^1.1.13"
243
243
  },
244
244
  "options": [
245
245
  {
@@ -401,7 +401,7 @@
401
401
  },
402
402
  "registryDependencies": [],
403
403
  "engineDependencies": {
404
- "@mlola-ui/icons": "^1.1.12"
404
+ "@mlola-ui/icons": "^1.1.13"
405
405
  },
406
406
  "options": [
407
407
  {
@@ -493,7 +493,7 @@
493
493
  },
494
494
  "registryDependencies": [],
495
495
  "engineDependencies": {
496
- "@mlola-ui/icons": "^1.1.12"
496
+ "@mlola-ui/icons": "^1.1.13"
497
497
  },
498
498
  "options": [],
499
499
  "variants": [],
@@ -546,7 +546,7 @@
546
546
  "spinner"
547
547
  ],
548
548
  "engineDependencies": {
549
- "@mlola-ui/motion": "^1.1.12"
549
+ "@mlola-ui/motion": "^1.1.13"
550
550
  },
551
551
  "options": [
552
552
  {
@@ -713,8 +713,8 @@
713
713
  },
714
714
  "registryDependencies": [],
715
715
  "engineDependencies": {
716
- "@mlola-ui/behavior": "^1.1.12",
717
- "@mlola-ui/icons": "^1.1.12"
716
+ "@mlola-ui/behavior": "^1.1.13",
717
+ "@mlola-ui/icons": "^1.1.13"
718
718
  },
719
719
  "options": [
720
720
  {
@@ -782,7 +782,7 @@
782
782
  },
783
783
  "registryDependencies": [],
784
784
  "engineDependencies": {
785
- "@mlola-ui/icons": "^1.1.12"
785
+ "@mlola-ui/icons": "^1.1.13"
786
786
  },
787
787
  "options": [],
788
788
  "variants": [],
@@ -837,7 +837,7 @@
837
837
  "modal"
838
838
  ],
839
839
  "engineDependencies": {
840
- "@mlola-ui/icons": "^1.1.12"
840
+ "@mlola-ui/icons": "^1.1.13"
841
841
  },
842
842
  "options": [],
843
843
  "variants": [],
@@ -900,8 +900,8 @@
900
900
  },
901
901
  "registryDependencies": [],
902
902
  "engineDependencies": {
903
- "@mlola-ui/behavior": "^1.1.12",
904
- "@mlola-ui/icons": "^1.1.12"
903
+ "@mlola-ui/behavior": "^1.1.13",
904
+ "@mlola-ui/icons": "^1.1.13"
905
905
  },
906
906
  "options": [
907
907
  {
@@ -917,6 +917,18 @@
917
917
  "variants": [],
918
918
  "sizes": [],
919
919
  "files": [
920
+ {
921
+ "path": "packages/components/_internal/anchor.ts",
922
+ "target": "{{aliases.components}}/_internal/anchor.ts",
923
+ "type": "registry:ui",
924
+ "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
925
+ },
926
+ {
927
+ "path": "packages/components/_internal/floating.ts",
928
+ "target": "{{aliases.components}}/_internal/floating.ts",
929
+ "type": "registry:ui",
930
+ "integrity": "sha256-8iKD2nqqwTY0grZ+KDnP81CcChrQK4CDvlDvApl0fF4="
931
+ },
920
932
  {
921
933
  "path": "packages/components/_internal/react.ts",
922
934
  "target": "{{aliases.components}}/_internal/react.ts",
@@ -927,7 +939,7 @@
927
939
  "path": "packages/components/dropdown-menu/dropdown-menu.tsx",
928
940
  "target": "{{aliases.components}}/dropdown-menu.tsx",
929
941
  "type": "registry:ui",
930
- "integrity": "sha256-kafvzv+Kc9MKJqXteEIUwvYvSD+npDrOyvthc5+L2ck="
942
+ "integrity": "sha256-/LLytsatKd5giWMlpsZI2uUvh88pHi8qGQalNd7/wQA="
931
943
  }
932
944
  ],
933
945
  "themeContract": {
@@ -965,7 +977,7 @@
965
977
  "input"
966
978
  ],
967
979
  "engineDependencies": {
968
- "@mlola-ui/icons": "^1.1.12"
980
+ "@mlola-ui/icons": "^1.1.13"
969
981
  },
970
982
  "options": [],
971
983
  "variants": [],
@@ -1189,8 +1201,8 @@
1189
1201
  },
1190
1202
  "registryDependencies": [],
1191
1203
  "engineDependencies": {
1192
- "@mlola-ui/behavior": "^1.1.12",
1193
- "@mlola-ui/icons": "^1.1.12"
1204
+ "@mlola-ui/behavior": "^1.1.13",
1205
+ "@mlola-ui/icons": "^1.1.13"
1194
1206
  },
1195
1207
  "options": [
1196
1208
  {
@@ -1219,13 +1231,13 @@
1219
1231
  "path": "packages/components/_internal/anchor.ts",
1220
1232
  "target": "{{aliases.components}}/_internal/anchor.ts",
1221
1233
  "type": "registry:ui",
1222
- "integrity": "sha256-Z/JqFS7yiQHgVMqUVu+Lr5qnqIzIxRFs+Zuq7r/iU7w="
1234
+ "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
1223
1235
  },
1224
1236
  {
1225
1237
  "path": "packages/components/_internal/dialog.ts",
1226
1238
  "target": "{{aliases.components}}/_internal/dialog.ts",
1227
1239
  "type": "registry:ui",
1228
- "integrity": "sha256-dfOsfaszM/rhBJXvl7vtM4Vdh7SGflY5Capi1YoY6ow="
1240
+ "integrity": "sha256-HouQjNfiorcAUoc7DFu78QLuhNDgvUuDOxjWZYYd62E="
1229
1241
  },
1230
1242
  {
1231
1243
  "path": "packages/components/_internal/floating.ts",
@@ -1340,7 +1352,7 @@
1340
1352
  },
1341
1353
  "registryDependencies": [],
1342
1354
  "engineDependencies": {
1343
- "@mlola-ui/icons": "^1.1.12"
1355
+ "@mlola-ui/icons": "^1.1.13"
1344
1356
  },
1345
1357
  "options": [],
1346
1358
  "variants": [],
@@ -1391,7 +1403,7 @@
1391
1403
  },
1392
1404
  "registryDependencies": [],
1393
1405
  "engineDependencies": {
1394
- "@mlola-ui/behavior": "^1.1.12"
1406
+ "@mlola-ui/behavior": "^1.1.13"
1395
1407
  },
1396
1408
  "options": [
1397
1409
  {
@@ -1423,7 +1435,7 @@
1423
1435
  "path": "packages/components/_internal/anchor.ts",
1424
1436
  "target": "{{aliases.components}}/_internal/anchor.ts",
1425
1437
  "type": "registry:ui",
1426
- "integrity": "sha256-Z/JqFS7yiQHgVMqUVu+Lr5qnqIzIxRFs+Zuq7r/iU7w="
1438
+ "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
1427
1439
  },
1428
1440
  {
1429
1441
  "path": "packages/components/_internal/floating.ts",
@@ -1766,7 +1778,7 @@
1766
1778
  },
1767
1779
  "registryDependencies": [],
1768
1780
  "engineDependencies": {
1769
- "@mlola-ui/behavior": "^1.1.12"
1781
+ "@mlola-ui/behavior": "^1.1.13"
1770
1782
  },
1771
1783
  "options": [],
1772
1784
  "variants": [],
@@ -1819,8 +1831,8 @@
1819
1831
  "input"
1820
1832
  ],
1821
1833
  "engineDependencies": {
1822
- "@mlola-ui/behavior": "^1.1.12",
1823
- "@mlola-ui/icons": "^1.1.12"
1834
+ "@mlola-ui/behavior": "^1.1.13",
1835
+ "@mlola-ui/icons": "^1.1.13"
1824
1836
  },
1825
1837
  "options": [
1826
1838
  {
@@ -1844,7 +1856,7 @@
1844
1856
  "path": "packages/components/_internal/anchor.ts",
1845
1857
  "target": "{{aliases.components}}/_internal/anchor.ts",
1846
1858
  "type": "registry:ui",
1847
- "integrity": "sha256-Z/JqFS7yiQHgVMqUVu+Lr5qnqIzIxRFs+Zuq7r/iU7w="
1859
+ "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
1848
1860
  },
1849
1861
  {
1850
1862
  "path": "packages/components/_internal/floating.ts",
@@ -1897,8 +1909,8 @@
1897
1909
  },
1898
1910
  "registryDependencies": [],
1899
1911
  "engineDependencies": {
1900
- "@mlola-ui/behavior": "^1.1.12",
1901
- "@mlola-ui/icons": "^1.1.12"
1912
+ "@mlola-ui/behavior": "^1.1.13",
1913
+ "@mlola-ui/icons": "^1.1.13"
1902
1914
  },
1903
1915
  "options": [
1904
1916
  {
@@ -1934,13 +1946,13 @@
1934
1946
  "path": "packages/components/_internal/anchor.ts",
1935
1947
  "target": "{{aliases.components}}/_internal/anchor.ts",
1936
1948
  "type": "registry:ui",
1937
- "integrity": "sha256-Z/JqFS7yiQHgVMqUVu+Lr5qnqIzIxRFs+Zuq7r/iU7w="
1949
+ "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
1938
1950
  },
1939
1951
  {
1940
1952
  "path": "packages/components/_internal/dialog.ts",
1941
1953
  "target": "{{aliases.components}}/_internal/dialog.ts",
1942
1954
  "type": "registry:ui",
1943
- "integrity": "sha256-dfOsfaszM/rhBJXvl7vtM4Vdh7SGflY5Capi1YoY6ow="
1955
+ "integrity": "sha256-HouQjNfiorcAUoc7DFu78QLuhNDgvUuDOxjWZYYd62E="
1944
1956
  },
1945
1957
  {
1946
1958
  "path": "packages/components/_internal/floating.ts",
@@ -2044,7 +2056,7 @@
2044
2056
  "input"
2045
2057
  ],
2046
2058
  "engineDependencies": {
2047
- "@mlola-ui/behavior": "^1.1.12"
2059
+ "@mlola-ui/behavior": "^1.1.13"
2048
2060
  },
2049
2061
  "options": [
2050
2062
  {
@@ -2189,7 +2201,7 @@
2189
2201
  },
2190
2202
  "registryDependencies": [],
2191
2203
  "engineDependencies": {
2192
- "@mlola-ui/behavior": "^1.1.12"
2204
+ "@mlola-ui/behavior": "^1.1.13"
2193
2205
  },
2194
2206
  "options": [
2195
2207
  {
@@ -2321,7 +2333,7 @@
2321
2333
  },
2322
2334
  "registryDependencies": [],
2323
2335
  "engineDependencies": {
2324
- "@mlola-ui/icons": "^1.1.12"
2336
+ "@mlola-ui/icons": "^1.1.13"
2325
2337
  },
2326
2338
  "options": [
2327
2339
  {
@@ -2407,7 +2419,7 @@
2407
2419
  "spinner"
2408
2420
  ],
2409
2421
  "engineDependencies": {
2410
- "@mlola-ui/icons": "^1.1.12"
2422
+ "@mlola-ui/icons": "^1.1.13"
2411
2423
  },
2412
2424
  "options": [
2413
2425
  {
@@ -2550,7 +2562,7 @@
2550
2562
  },
2551
2563
  "registryDependencies": [],
2552
2564
  "engineDependencies": {
2553
- "@mlola-ui/behavior": "^1.1.12"
2565
+ "@mlola-ui/behavior": "^1.1.13"
2554
2566
  },
2555
2567
  "options": [
2556
2568
  {
@@ -2572,7 +2584,7 @@
2572
2584
  "path": "packages/components/_internal/anchor.ts",
2573
2585
  "target": "{{aliases.components}}/_internal/anchor.ts",
2574
2586
  "type": "registry:ui",
2575
- "integrity": "sha256-Z/JqFS7yiQHgVMqUVu+Lr5qnqIzIxRFs+Zuq7r/iU7w="
2587
+ "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
2576
2588
  },
2577
2589
  {
2578
2590
  "path": "packages/components/_internal/react.ts",
@@ -2689,7 +2701,7 @@
2689
2701
  },
2690
2702
  "registryDependencies": [],
2691
2703
  "engineDependencies": {
2692
- "@mlola-ui/icons": "^1.1.12"
2704
+ "@mlola-ui/icons": "^1.1.13"
2693
2705
  },
2694
2706
  "options": [
2695
2707
  {
@@ -2761,7 +2773,7 @@
2761
2773
  "popover"
2762
2774
  ],
2763
2775
  "engineDependencies": {
2764
- "@mlola-ui/icons": "^1.1.12"
2776
+ "@mlola-ui/icons": "^1.1.13"
2765
2777
  },
2766
2778
  "options": [
2767
2779
  {
@@ -2831,7 +2843,7 @@
2831
2843
  "popover"
2832
2844
  ],
2833
2845
  "engineDependencies": {
2834
- "@mlola-ui/icons": "^1.1.12"
2846
+ "@mlola-ui/icons": "^1.1.13"
2835
2847
  },
2836
2848
  "options": [],
2837
2849
  "variants": [],
@@ -3029,7 +3041,7 @@
3029
3041
  "input"
3030
3042
  ],
3031
3043
  "engineDependencies": {
3032
- "@mlola-ui/icons": "^1.1.12"
3044
+ "@mlola-ui/icons": "^1.1.13"
3033
3045
  },
3034
3046
  "options": [
3035
3047
  {
@@ -3106,7 +3118,7 @@
3106
3118
  "input"
3107
3119
  ],
3108
3120
  "engineDependencies": {
3109
- "@mlola-ui/icons": "^1.1.12"
3121
+ "@mlola-ui/icons": "^1.1.13"
3110
3122
  },
3111
3123
  "options": [],
3112
3124
  "variants": [],
@@ -3161,7 +3173,7 @@
3161
3173
  "input"
3162
3174
  ],
3163
3175
  "engineDependencies": {
3164
- "@mlola-ui/icons": "^1.1.12"
3176
+ "@mlola-ui/icons": "^1.1.13"
3165
3177
  },
3166
3178
  "options": [],
3167
3179
  "variants": [],
@@ -3224,7 +3236,7 @@
3224
3236
  "popover"
3225
3237
  ],
3226
3238
  "engineDependencies": {
3227
- "@mlola-ui/icons": "^1.1.12"
3239
+ "@mlola-ui/icons": "^1.1.13"
3228
3240
  },
3229
3241
  "options": [
3230
3242
  {
@@ -3294,7 +3306,7 @@
3294
3306
  },
3295
3307
  "registryDependencies": [],
3296
3308
  "engineDependencies": {
3297
- "@mlola-ui/icons": "^1.1.12"
3309
+ "@mlola-ui/icons": "^1.1.13"
3298
3310
  },
3299
3311
  "options": [
3300
3312
  {
@@ -3413,8 +3425,8 @@
3413
3425
  },
3414
3426
  "registryDependencies": [],
3415
3427
  "engineDependencies": {
3416
- "@mlola-ui/behavior": "^1.1.12",
3417
- "@mlola-ui/icons": "^1.1.12"
3428
+ "@mlola-ui/behavior": "^1.1.13",
3429
+ "@mlola-ui/icons": "^1.1.13"
3418
3430
  },
3419
3431
  "options": [],
3420
3432
  "variants": [],
@@ -3424,7 +3436,7 @@
3424
3436
  "path": "packages/components/_internal/anchor.ts",
3425
3437
  "target": "{{aliases.components}}/_internal/anchor.ts",
3426
3438
  "type": "registry:ui",
3427
- "integrity": "sha256-Z/JqFS7yiQHgVMqUVu+Lr5qnqIzIxRFs+Zuq7r/iU7w="
3439
+ "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
3428
3440
  },
3429
3441
  {
3430
3442
  "path": "packages/components/_internal/floating.ts",
@@ -3478,7 +3490,7 @@
3478
3490
  },
3479
3491
  "registryDependencies": [],
3480
3492
  "engineDependencies": {
3481
- "@mlola-ui/behavior": "^1.1.12"
3493
+ "@mlola-ui/behavior": "^1.1.13"
3482
3494
  },
3483
3495
  "options": [
3484
3496
  {
@@ -3510,7 +3522,7 @@
3510
3522
  "path": "packages/components/_internal/anchor.ts",
3511
3523
  "target": "{{aliases.components}}/_internal/anchor.ts",
3512
3524
  "type": "registry:ui",
3513
- "integrity": "sha256-Z/JqFS7yiQHgVMqUVu+Lr5qnqIzIxRFs+Zuq7r/iU7w="
3525
+ "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
3514
3526
  },
3515
3527
  {
3516
3528
  "path": "packages/components/_internal/floating.ts",
@@ -3565,8 +3577,8 @@
3565
3577
  },
3566
3578
  "registryDependencies": [],
3567
3579
  "engineDependencies": {
3568
- "@mlola-ui/behavior": "^1.1.12",
3569
- "@mlola-ui/icons": "^1.1.12"
3580
+ "@mlola-ui/behavior": "^1.1.13",
3581
+ "@mlola-ui/icons": "^1.1.13"
3570
3582
  },
3571
3583
  "options": [],
3572
3584
  "variants": [],
@@ -3576,7 +3588,7 @@
3576
3588
  "path": "packages/components/_internal/anchor.ts",
3577
3589
  "target": "{{aliases.components}}/_internal/anchor.ts",
3578
3590
  "type": "registry:ui",
3579
- "integrity": "sha256-Z/JqFS7yiQHgVMqUVu+Lr5qnqIzIxRFs+Zuq7r/iU7w="
3591
+ "integrity": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8="
3580
3592
  },
3581
3593
  {
3582
3594
  "path": "packages/components/_internal/floating.ts",
@@ -3640,7 +3652,7 @@
3640
3652
  "sheet"
3641
3653
  ],
3642
3654
  "engineDependencies": {
3643
- "@mlola-ui/icons": "^1.1.12"
3655
+ "@mlola-ui/icons": "^1.1.13"
3644
3656
  },
3645
3657
  "options": [],
3646
3658
  "variants": [],
@@ -3763,7 +3775,7 @@
3763
3775
  "button"
3764
3776
  ],
3765
3777
  "engineDependencies": {
3766
- "@mlola-ui/icons": "^1.1.12"
3778
+ "@mlola-ui/icons": "^1.1.13"
3767
3779
  },
3768
3780
  "options": [
3769
3781
  {
@@ -3866,8 +3878,8 @@
3866
3878
  "input"
3867
3879
  ],
3868
3880
  "engineDependencies": {
3869
- "@mlola-ui/behavior": "^1.1.12",
3870
- "@mlola-ui/icons": "^1.1.12"
3881
+ "@mlola-ui/behavior": "^1.1.13",
3882
+ "@mlola-ui/icons": "^1.1.13"
3871
3883
  },
3872
3884
  "options": [
3873
3885
  {
package/registry/source/packages/components/_internal/anchor.ts CHANGED
@@ -2,4 +2,4 @@
2
2
  * Where a floating layer goes next to its anchor. The math is shared with the
3
3
  * framework-free runtime, so it lives in @mlola-ui/behavior/logic.
4
4
  */
5
- export { fitMenu, fitTooltip, placeFloating, type Align, type Placement, type Rect, type Side } from "@mlola-ui/behavior/logic";
5
+ export { fitTooltip, placeFloating, type Align, type Placement, type Rect, type Side } from "@mlola-ui/behavior/logic";
package/registry/source/packages/components/_internal/dialog.ts CHANGED
@@ -110,7 +110,8 @@ export function useDialogLayer({
110
110
  if (!panel.contains(document.activeElement)) focusPanel();
111
111
 
112
112
  const onKeyDown = (event: KeyboardEvent) => {
113
- if (event.key === "Escape" && closeOnEscape) {
113
+ // A menu or listbox open above the dialog closes first: it marks the Escape it used.
114
+ if (event.key === "Escape" && closeOnEscape && !event.defaultPrevented) {
114
115
  event.preventDefault();
115
116
  closeRef.current();
116
117
  return;
package/registry/source/packages/components/dropdown-menu/dropdown-menu.tsx CHANGED
@@ -1,7 +1,9 @@
1
1
  "use client";
2
2
 
3
3
  import * as React from "react";
4
- import { fitMenu, rovingIndex } from "@mlola-ui/behavior/logic";
4
+ import { createPortal } from "react-dom";
5
+ import { rovingIndex } from "@mlola-ui/behavior/logic";
6
+ import { useFloating, usePortalNode } from "../_internal/floating";
5
7
  import { composeRefs, cx } from "../_internal/react";
6
8
  import { IconChevronDown } from "@mlola-ui/icons";
7
9
 
@@ -65,31 +67,16 @@ const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
65
67
  if (target >= 0) focus(target);
66
68
  };
67
69
 
68
- // CSS hangs the menu under the trigger; this keeps it on screen, the same way the framework-free runtime does.
69
- React.useLayoutEffect(() => {
70
- const menu = menuRef.current;
71
- const root = rootRef.current;
72
- if (!open || !menu || !root) return;
73
- const fit = () => {
74
- const rect = root.getBoundingClientRect();
75
- const { side, shift } = fitMenu(
76
- { x: rect.left, y: rect.top, width: rect.width, height: rect.height },
77
- { width: menu.offsetWidth, height: menu.offsetHeight },
78
- { width: window.innerWidth, height: window.innerHeight },
79
- align,
80
- );
81
- menu.style.setProperty("--ml-dropdown-shift", `${shift}px`);
82
- menu.setAttribute("data-side", side);
83
- };
84
- fit();
85
- window.addEventListener("resize", fit);
86
- return () => window.removeEventListener("resize", fit);
87
- }, [align, open]);
70
+ // The menu is a layer on <body>, beside its trigger: no card, panel or modal around the trigger can cut it off.
71
+ const portal = usePortalNode();
72
+ useFloating(triggerRef, menuRef, open, { side: "bottom", align, offset: 6 });
88
73
 
89
74
  React.useEffect(() => {
90
75
  if (!open) return;
91
76
  const onPointerDown = (event: MouseEvent) => {
92
- if (rootRef.current && event.target instanceof Node && !rootRef.current.contains(event.target)) close();
77
+ if (!(event.target instanceof Node)) return;
78
+ if (rootRef.current?.contains(event.target) || menuRef.current?.contains(event.target)) return;
79
+ close();
93
80
  };
94
81
  document.addEventListener("mousedown", onPointerDown);
95
82
  return () => document.removeEventListener("mousedown", onPointerDown);
@@ -111,7 +98,9 @@ const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
111
98
  } else if (event.key === "ArrowUp") {
112
99
  event.preventDefault();
113
100
  openAt(enabled[enabled.length - 1] ?? -1);
114
- } else if (event.key === "Escape") {
101
+ } else if (event.key === "Escape" && open) {
102
+ // Used here, so a dialog around the menu stays open.
103
+ event.preventDefault();
115
104
  close(true);
116
105
  }
117
106
  }}
@@ -119,12 +108,13 @@ const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
119
108
  <span className="ml-dropdown-trigger-label">{trigger}</span>
120
109
  <IconChevronDown aria-hidden="true" className="ml-dropdown-chevron" size="1em" />
121
110
  </button>
122
- {open ? (
111
+ {open && portal ? createPortal(
123
112
  <div
124
113
  ref={menuRef}
125
114
  role="menu"
126
115
  aria-label={label}
127
116
  data-align={align}
117
+ data-ml-portal=""
128
118
  className="ml-dropdown-menu"
129
119
  onKeyDown={(event) => {
130
120
  if (event.key === "Escape") {
@@ -137,6 +127,8 @@ const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
137
127
  event.preventDefault();
138
128
  focus(event.key === "Home" ? enabled[0] : enabled[enabled.length - 1]);
139
129
  } else if (event.key === "Tab") {
130
+ // From the trigger, the Tab carries on to what follows it, as if the menu had been in its place.
131
+ triggerRef.current?.focus();
140
132
  close();
141
133
  } else if (event.key.length === 1 && /\S/.test(event.key)) {
142
134
  const start = Math.max(0, enabled.indexOf(activeIndex) + 1);
@@ -170,7 +162,8 @@ const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
170
162
  </button>
171
163
  </React.Fragment>
172
164
  ))}
173
- </div>
165
+ </div>,
166
+ portal,
174
167
  ) : null}
175
168
  </div>
176
169
  );
package/registry/source-manifest.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
- "packages/components/_internal/anchor.ts": "sha256-Z/JqFS7yiQHgVMqUVu+Lr5qnqIzIxRFs+Zuq7r/iU7w=",
2
+ "packages/components/_internal/anchor.ts": "sha256-/yW3RVjoY6QfTWnUYSeZ9rFkC9W4WGB1qop8Jp/H1r8=",
3
3
  "packages/components/_internal/clipboard.ts": "sha256-0y5p88CTXWuOrUYlC5J4XP1VCrOwkx9jYWVHmD2LouQ=",
4
- "packages/components/_internal/dialog.ts": "sha256-dfOsfaszM/rhBJXvl7vtM4Vdh7SGflY5Capi1YoY6ow=",
4
+ "packages/components/_internal/dialog.ts": "sha256-HouQjNfiorcAUoc7DFu78QLuhNDgvUuDOxjWZYYd62E=",
5
5
  "packages/components/_internal/dom.ts": "sha256-TJp94MipbXHonH/PC7FFHu5pnAqcoxzLocksWLsTAsc=",
6
6
  "packages/components/_internal/floating.ts": "sha256-8iKD2nqqwTY0grZ+KDnP81CcChrQK4CDvlDvApl0fF4=",
7
7
  "packages/components/_internal/match.ts": "sha256-3tUYob6xmD2nLerh634E3R5iPbzMeNBzdDynsDFjj28=",
@@ -29,7 +29,7 @@
29
29
  "packages/components/context-menu/context-menu.tsx": "sha256-OGaKzthZJGaV5T+4sRWYecA64wEEg2KImKnIzMMg1i4=",
30
30
  "packages/components/copy-button/copy-button.tsx": "sha256-6fvfifoiDOtW+WxKWon4SGEn3THtERuCX2hqGSZDtVM=",
31
31
  "packages/components/date-picker/date-picker.tsx": "sha256-QABmZzPKHc706/Rs+ln3ifDK3T2lXl34rehhuRXW+8o=",
32
- "packages/components/dropdown-menu/dropdown-menu.tsx": "sha256-kafvzv+Kc9MKJqXteEIUwvYvSD+npDrOyvthc5+L2ck=",
32
+ "packages/components/dropdown-menu/dropdown-menu.tsx": "sha256-/LLytsatKd5giWMlpsZI2uUvh88pHi8qGQalNd7/wQA=",
33
33
  "packages/components/dropzone/dropzone.tsx": "sha256-tHCCpEWE6839UeLOszTo+R2vAL4Sp9UxuRdLkFLfnq4=",
34
34
  "packages/components/empty-state/empty-state.tsx": "sha256-/phk3A6TDaiqo61fCcAc/4Bi85e1yBGAtKXFaGhrjyw=",
35
35
  "packages/components/hover-card/hover-card.tsx": "sha256-Bu5m03mFjiM7x38U1aSrcb9Th8RLYozyjwW/Cu3knlk=",