mirror of
https://github.com/coder/coder.git
synced 2026-09-24 15:04:27 +08:00
chore: add shadcnui popover, deprecate MUI popover (#15884)
Add popover component from shadcn/ui - https://ui.shadcn.com/docs/components/popover This is preparation for replacing MUI popover and additional work for organizations redesigns: https://www.figma.com/design/OR75XeUI0Z3ksqt1mHsNQw/Dashboard-v1?node-id=139-1380&m=dev
This commit is contained in:
Jaayden Halko
@@ -53,6 +53,7 @@
|
||||
"@radix-ui/react-avatar": "1.1.2",
|
||||
"@radix-ui/react-dialog": "1.1.2",
|
||||
"@radix-ui/react-label": "2.1.0",
|
||||
"@radix-ui/react-popover": "1.1.3",
|
||||
"@radix-ui/react-slider": "1.2.1",
|
||||
"@radix-ui/react-slot": "1.1.0",
|
||||
"@radix-ui/react-switch": "1.1.1",
|
||||
|
||||
Generated
+215
@@ -72,6 +72,9 @@ importers:
|
||||
'@radix-ui/react-label':
|
||||
specifier: 2.1.0
|
||||
version: 2.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-popover':
|
||||
specifier: 1.1.3
|
||||
version: 1.1.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-slider':
|
||||
specifier: 1.2.1
|
||||
version: 1.2.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
@@ -1553,6 +1556,22 @@ packages:
|
||||
'@radix-ui/primitive@1.1.0':
|
||||
resolution: {integrity: sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==}
|
||||
|
||||
'@radix-ui/primitive@1.1.1':
|
||||
resolution: {integrity: sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==}
|
||||
|
||||
'@radix-ui/react-arrow@1.1.1':
|
||||
resolution: {integrity: sha512-NaVpZfmv8SKeZbn4ijN2V3jlHA9ngBG16VnIIm22nUR0Yk8KUALyBxT3KYEUnNuch9sTE8UTsS3whzBgKOL30w==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-avatar@1.1.2':
|
||||
resolution: {integrity: sha512-GaC7bXQZ5VgZvVvsJ5mu/AEbjYLnhhkoidOboC50Z6FFlLA03wG2ianUoH+zgDQ31/9gCF59bE4+2bBgTyMiig==}
|
||||
peerDependencies:
|
||||
@@ -1694,6 +1713,19 @@ packages:
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-dismissable-layer@1.1.2':
|
||||
resolution: {integrity: sha512-kEHnlhv7wUggvhuJPkyw4qspXLJOdYoAP4dO2c8ngGuXTq1w/HZp1YeVB+NQ2KbH1iEG+pvOCGYSqh9HZOz6hg==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-focus-guards@1.0.1':
|
||||
resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
|
||||
peerDependencies:
|
||||
@@ -1738,6 +1770,19 @@ packages:
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-focus-scope@1.1.1':
|
||||
resolution: {integrity: sha512-01omzJAYRxXdG2/he/+xy+c8a8gCydoQ1yOxnWNcRhrrBW5W+RQJ22EK1SaO8tb3WoUsuEw7mJjBozPzihDFjA==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-id@1.0.1':
|
||||
resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
|
||||
peerDependencies:
|
||||
@@ -1769,6 +1814,32 @@ packages:
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-popover@1.1.3':
|
||||
resolution: {integrity: sha512-MBDKFwRe6fi0LT8m/Jl4V8J3WbS/UfXJtsgg8Ym5w5AyPG3XfHH4zhBp1P8HmZK83T8J7UzVm6/JpDE3WMl1Dw==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-popper@1.2.1':
|
||||
resolution: {integrity: sha512-3kn5Me69L+jv82EKRuQCXdYyf1DqHwD2U/sxoNgBGCB7K9TRc3bQamQ+5EPM9EvyPdli0W41sROd+ZU1dTCztw==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-portal@1.0.4':
|
||||
resolution: {integrity: sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==}
|
||||
peerDependencies:
|
||||
@@ -1795,6 +1866,19 @@ packages:
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-portal@1.1.3':
|
||||
resolution: {integrity: sha512-NciRqhXnGojhT93RPyDaMPfLH3ZSl4jjIFbZQ1b/vxvZEdHsBZ49wP9w8L3HzUQwep01LcWtkUvm0OVB5JAHTw==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-presence@1.0.1':
|
||||
resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
|
||||
peerDependencies:
|
||||
@@ -1821,6 +1905,19 @@ packages:
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-presence@1.1.2':
|
||||
resolution: {integrity: sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-primitive@1.0.3':
|
||||
resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
|
||||
peerDependencies:
|
||||
@@ -1994,6 +2091,15 @@ packages:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-use-rect@1.1.0':
|
||||
resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-use-size@1.1.0':
|
||||
resolution: {integrity: sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==}
|
||||
peerDependencies:
|
||||
@@ -2016,6 +2122,9 @@ packages:
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/rect@1.1.0':
|
||||
resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==}
|
||||
|
||||
'@remix-run/router@1.19.2':
|
||||
resolution: {integrity: sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
@@ -3560,6 +3669,7 @@ packages:
|
||||
eslint@8.52.0:
|
||||
resolution: {integrity: sha512-zh/JHnaixqHZsolRB/w9/02akBk9EPrOs9JwcTP2ek7yL5bVvXuRariiaAjjoJ5DvuwQ1WAE/HsMz+w17YgBCg==}
|
||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||
deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
|
||||
hasBin: true
|
||||
|
||||
espree@9.6.1:
|
||||
@@ -7259,6 +7369,17 @@ snapshots:
|
||||
|
||||
'@radix-ui/primitive@1.1.0': {}
|
||||
|
||||
'@radix-ui/primitive@1.1.1': {}
|
||||
|
||||
'@radix-ui/react-arrow@1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
optionalDependencies:
|
||||
'@types/react': 18.3.12
|
||||
'@types/react-dom': 18.3.1
|
||||
|
||||
'@radix-ui/react-avatar@1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@radix-ui/react-context': 1.1.1(@types/react@18.3.12)(react@18.3.1)
|
||||
@@ -7399,6 +7520,19 @@ snapshots:
|
||||
'@types/react': 18.3.12
|
||||
'@types/react-dom': 18.3.1
|
||||
|
||||
'@radix-ui/react-dismissable-layer@1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@radix-ui/primitive': 1.1.1
|
||||
'@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.12)(react@18.3.1)
|
||||
'@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.12)(react@18.3.1)
|
||||
'@radix-ui/react-use-escape-keydown': 1.1.0(@types/react@18.3.12)(react@18.3.1)
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
optionalDependencies:
|
||||
'@types/react': 18.3.12
|
||||
'@types/react-dom': 18.3.1
|
||||
|
||||
'@radix-ui/react-focus-guards@1.0.1(@types/react@18.3.12)(react@18.3.1)':
|
||||
dependencies:
|
||||
'@babel/runtime': 7.25.6
|
||||
@@ -7435,6 +7569,17 @@ snapshots:
|
||||
'@types/react': 18.3.12
|
||||
'@types/react-dom': 18.3.1
|
||||
|
||||
'@radix-ui/react-focus-scope@1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.12)(react@18.3.1)
|
||||
'@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.12)(react@18.3.1)
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
optionalDependencies:
|
||||
'@types/react': 18.3.12
|
||||
'@types/react-dom': 18.3.1
|
||||
|
||||
'@radix-ui/react-id@1.0.1(@types/react@18.3.12)(react@18.3.1)':
|
||||
dependencies:
|
||||
'@babel/runtime': 7.25.6
|
||||
@@ -7459,6 +7604,47 @@ snapshots:
|
||||
'@types/react': 18.3.12
|
||||
'@types/react-dom': 18.3.1
|
||||
|
||||
'@radix-ui/react-popover@1.1.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@radix-ui/primitive': 1.1.1
|
||||
'@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.12)(react@18.3.1)
|
||||
'@radix-ui/react-context': 1.1.1(@types/react@18.3.12)(react@18.3.1)
|
||||
'@radix-ui/react-dismissable-layer': 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-focus-guards': 1.1.1(@types/react@18.3.12)(react@18.3.1)
|
||||
'@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-id': 1.1.0(@types/react@18.3.12)(react@18.3.1)
|
||||
'@radix-ui/react-popper': 1.2.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-portal': 1.1.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-slot': 1.1.1(@types/react@18.3.12)(react@18.3.1)
|
||||
'@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.12)(react@18.3.1)
|
||||
aria-hidden: 1.2.4
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
react-remove-scroll: 2.6.0(@types/react@18.3.12)(react@18.3.1)
|
||||
optionalDependencies:
|
||||
'@types/react': 18.3.12
|
||||
'@types/react-dom': 18.3.1
|
||||
|
||||
'@radix-ui/react-popper@1.2.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@floating-ui/react-dom': 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-arrow': 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.12)(react@18.3.1)
|
||||
'@radix-ui/react-context': 1.1.1(@types/react@18.3.12)(react@18.3.1)
|
||||
'@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.12)(react@18.3.1)
|
||||
'@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.12)(react@18.3.1)
|
||||
'@radix-ui/react-use-rect': 1.1.0(@types/react@18.3.12)(react@18.3.1)
|
||||
'@radix-ui/react-use-size': 1.1.0(@types/react@18.3.12)(react@18.3.1)
|
||||
'@radix-ui/rect': 1.1.0
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
optionalDependencies:
|
||||
'@types/react': 18.3.12
|
||||
'@types/react-dom': 18.3.1
|
||||
|
||||
'@radix-ui/react-portal@1.0.4(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@babel/runtime': 7.25.6
|
||||
@@ -7479,6 +7665,16 @@ snapshots:
|
||||
'@types/react': 18.3.12
|
||||
'@types/react-dom': 18.3.1
|
||||
|
||||
'@radix-ui/react-portal@1.1.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.12)(react@18.3.1)
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
optionalDependencies:
|
||||
'@types/react': 18.3.12
|
||||
'@types/react-dom': 18.3.1
|
||||
|
||||
'@radix-ui/react-presence@1.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@babel/runtime': 7.25.6
|
||||
@@ -7500,6 +7696,16 @@ snapshots:
|
||||
'@types/react': 18.3.12
|
||||
'@types/react-dom': 18.3.1
|
||||
|
||||
'@radix-ui/react-presence@1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.12)(react@18.3.1)
|
||||
'@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.12)(react@18.3.1)
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
optionalDependencies:
|
||||
'@types/react': 18.3.12
|
||||
'@types/react-dom': 18.3.1
|
||||
|
||||
'@radix-ui/react-primitive@1.0.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@babel/runtime': 7.25.6
|
||||
@@ -7646,6 +7852,13 @@ snapshots:
|
||||
optionalDependencies:
|
||||
'@types/react': 18.3.12
|
||||
|
||||
'@radix-ui/react-use-rect@1.1.0(@types/react@18.3.12)(react@18.3.1)':
|
||||
dependencies:
|
||||
'@radix-ui/rect': 1.1.0
|
||||
react: 18.3.1
|
||||
optionalDependencies:
|
||||
'@types/react': 18.3.12
|
||||
|
||||
'@radix-ui/react-use-size@1.1.0(@types/react@18.3.12)(react@18.3.1)':
|
||||
dependencies:
|
||||
'@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.12)(react@18.3.1)
|
||||
@@ -7662,6 +7875,8 @@ snapshots:
|
||||
'@types/react': 18.3.12
|
||||
'@types/react-dom': 18.3.1
|
||||
|
||||
'@radix-ui/rect@1.1.0': {}
|
||||
|
||||
'@remix-run/router@1.19.2': {}
|
||||
|
||||
'@rollup/pluginutils@5.0.5(rollup@4.24.3)':
|
||||
|
||||
@@ -2,7 +2,7 @@ import type { Interpolation, Theme } from "@emotion/react";
|
||||
import Link from "@mui/material/Link";
|
||||
import { visuallyHidden } from "@mui/utils";
|
||||
import { HelpTooltipContent } from "components/HelpTooltip/HelpTooltip";
|
||||
import { Popover, PopoverTrigger } from "components/Popover/Popover";
|
||||
import { Popover, PopoverTrigger } from "components/deprecated/Popover/Popover";
|
||||
import type { FC, HTMLAttributes, ReactNode } from "react";
|
||||
import { docs } from "utils/docs";
|
||||
|
||||
|
||||
@@ -8,6 +8,7 @@ import {
|
||||
import HelpIcon from "@mui/icons-material/HelpOutline";
|
||||
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
|
||||
import Link from "@mui/material/Link";
|
||||
import { Stack } from "components/Stack/Stack";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
@@ -15,8 +16,7 @@ import {
|
||||
type PopoverProps,
|
||||
PopoverTrigger,
|
||||
usePopover,
|
||||
} from "components/Popover/Popover";
|
||||
import { Stack } from "components/Stack/Stack";
|
||||
} from "components/deprecated/Popover/Popover";
|
||||
import {
|
||||
type FC,
|
||||
type HTMLAttributes,
|
||||
|
||||
@@ -6,12 +6,12 @@ import { visuallyHidden } from "@mui/utils";
|
||||
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
|
||||
import { ExternalImage } from "components/ExternalImage/ExternalImage";
|
||||
import { Loader } from "components/Loader/Loader";
|
||||
import { Stack } from "components/Stack/Stack";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "components/Popover/Popover";
|
||||
import { Stack } from "components/Stack/Stack";
|
||||
} from "components/deprecated/Popover/Popover";
|
||||
import { type FC, Suspense, lazy, useState } from "react";
|
||||
|
||||
// See: https://github.com/missive/emoji-mart/issues/51#issuecomment-287353222
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import Button from "@mui/material/Button";
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { expect, screen, userEvent, waitFor, within } from "@storybook/test";
|
||||
import { Button } from "components/Button/Button";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
|
||||
|
||||
const meta: Meta<typeof Popover> = {
|
||||
@@ -17,15 +17,15 @@ Its wings are too small to get its fat little body off the ground. The bee, of c
|
||||
flies anyway because bees don't care what humans think is impossible.
|
||||
`;
|
||||
|
||||
export const Example: Story = {
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
children: (
|
||||
<>
|
||||
<PopoverTrigger>
|
||||
<Button>Click here!</Button>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button className="ml-20">Click here!</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent>{content}</PopoverContent>
|
||||
</>
|
||||
</Popover>
|
||||
),
|
||||
},
|
||||
play: async ({ canvasElement, step }) => {
|
||||
@@ -42,16 +42,16 @@ export const Example: Story = {
|
||||
},
|
||||
};
|
||||
|
||||
export const Horizontal: Story = {
|
||||
export const AlignStart: Story = {
|
||||
args: {
|
||||
children: (
|
||||
<>
|
||||
<PopoverTrigger>
|
||||
<Button>Click here!</Button>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button className="ml-20">Click here!</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent horizontal="right">{content}</PopoverContent>
|
||||
</>
|
||||
<PopoverContent align="start">{content}</PopoverContent>
|
||||
</Popover>
|
||||
),
|
||||
},
|
||||
play: Example.play,
|
||||
play: Default.play,
|
||||
};
|
||||
|
||||
@@ -1,240 +1,39 @@
|
||||
import MuiPopover, {
|
||||
type PopoverProps as MuiPopoverProps,
|
||||
// biome-ignore lint/nursery/noRestrictedImports: This is the base component that our custom popover is based on
|
||||
} from "@mui/material/Popover";
|
||||
/**
|
||||
* Copied from shadcn/ui and modified on 12/13/2024
|
||||
* @see {@link https://ui.shadcn.com/docs/components/popover}
|
||||
*/
|
||||
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
||||
import {
|
||||
type FC,
|
||||
type HTMLAttributes,
|
||||
type PointerEvent,
|
||||
type PointerEventHandler,
|
||||
type ReactElement,
|
||||
type ReactNode,
|
||||
type RefObject,
|
||||
cloneElement,
|
||||
createContext,
|
||||
useContext,
|
||||
useEffect,
|
||||
useId,
|
||||
useRef,
|
||||
useState,
|
||||
type ComponentPropsWithoutRef,
|
||||
type ElementRef,
|
||||
forwardRef,
|
||||
} from "react";
|
||||
import { cn } from "utils/cn";
|
||||
|
||||
type TriggerMode = "hover" | "click";
|
||||
export const Popover = PopoverPrimitive.Root;
|
||||
|
||||
type TriggerRef = RefObject<HTMLElement>;
|
||||
export const PopoverTrigger = PopoverPrimitive.Trigger;
|
||||
|
||||
// Have to append ReactNode type to satisfy React's cloneElement function. It
|
||||
// has absolutely no bearing on what happens at runtime
|
||||
type TriggerElement = ReactNode &
|
||||
ReactElement<{
|
||||
ref: TriggerRef;
|
||||
onClick?: () => void;
|
||||
}>;
|
||||
|
||||
type PopoverContextValue = {
|
||||
id: string;
|
||||
open: boolean;
|
||||
setOpen: (open: boolean) => void;
|
||||
triggerRef: TriggerRef;
|
||||
mode: TriggerMode;
|
||||
};
|
||||
|
||||
const PopoverContext = createContext<PopoverContextValue | undefined>(
|
||||
undefined,
|
||||
);
|
||||
|
||||
type BasePopoverProps = {
|
||||
children: ReactNode;
|
||||
mode?: TriggerMode;
|
||||
};
|
||||
|
||||
// By separating controlled and uncontrolled props, we achieve more accurate
|
||||
// type inference.
|
||||
type UncontrolledPopoverProps = BasePopoverProps & {
|
||||
open?: undefined;
|
||||
onOpenChange?: undefined;
|
||||
};
|
||||
|
||||
type ControlledPopoverProps = BasePopoverProps & {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
};
|
||||
|
||||
export type PopoverProps = UncontrolledPopoverProps | ControlledPopoverProps;
|
||||
|
||||
export const Popover: FC<PopoverProps> = (props) => {
|
||||
const hookId = useId();
|
||||
const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
|
||||
const triggerRef: TriggerRef = useRef(null);
|
||||
|
||||
// Helps makes sure that popovers close properly when the user switches to
|
||||
// a different tab. This won't help with controlled instances of the
|
||||
// component, but this is basically the most we can do from here
|
||||
useEffect(() => {
|
||||
const closeOnTabSwitch = () => setUncontrolledOpen(false);
|
||||
window.addEventListener("blur", closeOnTabSwitch);
|
||||
return () => window.removeEventListener("blur", closeOnTabSwitch);
|
||||
}, []);
|
||||
|
||||
const value: PopoverContextValue = {
|
||||
triggerRef,
|
||||
id: `${hookId}-popover`,
|
||||
mode: props.mode ?? "click",
|
||||
open: props.open ?? uncontrolledOpen,
|
||||
setOpen: props.onOpenChange ?? setUncontrolledOpen,
|
||||
};
|
||||
|
||||
return (
|
||||
<PopoverContext.Provider value={value}>
|
||||
{props.children}
|
||||
</PopoverContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const usePopover = () => {
|
||||
const context = useContext(PopoverContext);
|
||||
if (!context) {
|
||||
throw new Error(
|
||||
"Popover compound components cannot be rendered outside the Popover component",
|
||||
);
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
type PopoverTriggerRenderProps = Readonly<{
|
||||
isOpen: boolean;
|
||||
}>;
|
||||
|
||||
type PopoverTriggerProps = Readonly<
|
||||
Omit<HTMLAttributes<HTMLElement>, "children"> & {
|
||||
children:
|
||||
| TriggerElement
|
||||
| ((props: PopoverTriggerRenderProps) => TriggerElement);
|
||||
}
|
||||
>;
|
||||
|
||||
export const PopoverTrigger: FC<PopoverTriggerProps> = (props) => {
|
||||
const popover = usePopover();
|
||||
const { children, onClick, onPointerEnter, onPointerLeave, ...elementProps } =
|
||||
props;
|
||||
|
||||
const clickProps = {
|
||||
onClick: (event: PointerEvent<HTMLElement>) => {
|
||||
popover.setOpen(true);
|
||||
onClick?.(event);
|
||||
},
|
||||
};
|
||||
|
||||
const hoverProps = {
|
||||
onPointerEnter: (event: PointerEvent<HTMLElement>) => {
|
||||
popover.setOpen(true);
|
||||
onPointerEnter?.(event);
|
||||
},
|
||||
onPointerLeave: (event: PointerEvent<HTMLElement>) => {
|
||||
popover.setOpen(false);
|
||||
onPointerLeave?.(event);
|
||||
},
|
||||
};
|
||||
|
||||
const evaluatedChildren =
|
||||
typeof children === "function"
|
||||
? children({ isOpen: popover.open })
|
||||
: children;
|
||||
|
||||
return cloneElement(evaluatedChildren, {
|
||||
...elementProps,
|
||||
...(popover.mode === "click" ? clickProps : hoverProps),
|
||||
"aria-haspopup": true,
|
||||
"aria-owns": popover.id,
|
||||
"aria-expanded": popover.open,
|
||||
ref: popover.triggerRef,
|
||||
});
|
||||
};
|
||||
|
||||
type Horizontal = "left" | "right";
|
||||
|
||||
export type PopoverContentProps = Omit<
|
||||
MuiPopoverProps,
|
||||
"open" | "onClose" | "anchorEl"
|
||||
> & {
|
||||
horizontal?: Horizontal;
|
||||
};
|
||||
|
||||
export const PopoverContent: FC<PopoverContentProps> = ({
|
||||
horizontal = "left",
|
||||
onPointerEnter,
|
||||
onPointerLeave,
|
||||
...popoverProps
|
||||
}) => {
|
||||
const popover = usePopover();
|
||||
const hoverMode = popover.mode === "hover";
|
||||
|
||||
return (
|
||||
<MuiPopover
|
||||
disablePortal
|
||||
css={{
|
||||
// When it is on hover mode, and the mode is moving from the trigger to
|
||||
// the popover, if there is any space, the popover will be closed. I
|
||||
// found this is a limitation on how MUI structured the component. It is
|
||||
// not a big issue for now but we can re-evaluate it in the future.
|
||||
marginTop: hoverMode ? undefined : 8,
|
||||
pointerEvents: hoverMode ? "none" : undefined,
|
||||
"& .MuiPaper-root": {
|
||||
minWidth: 320,
|
||||
fontSize: 14,
|
||||
pointerEvents: hoverMode ? "auto" : undefined,
|
||||
},
|
||||
}}
|
||||
{...horizontalProps(horizontal)}
|
||||
{...modeProps(popover, onPointerEnter, onPointerLeave)}
|
||||
{...popoverProps}
|
||||
id={popover.id}
|
||||
open={popover.open}
|
||||
onClose={() => popover.setOpen(false)}
|
||||
anchorEl={popover.triggerRef.current}
|
||||
export const PopoverContent = forwardRef<
|
||||
ElementRef<typeof PopoverPrimitive.Content>,
|
||||
ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
|
||||
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
|
||||
<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Content
|
||||
ref={ref}
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
`z-50 w-72 rounded-md border border-solid bg-surface-primary p-4
|
||||
text-content-primary shadow-md outline-none
|
||||
data-[state=open]:animate-in data-[state=closed]:animate-out
|
||||
data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
|
||||
data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95
|
||||
data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2
|
||||
data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2`,
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const modeProps = (
|
||||
popover: PopoverContextValue,
|
||||
externalOnPointerEnter: PointerEventHandler<HTMLDivElement> | undefined,
|
||||
externalOnPointerLeave: PointerEventHandler<HTMLDivElement> | undefined,
|
||||
) => {
|
||||
if (popover.mode === "hover") {
|
||||
return {
|
||||
onPointerEnter: (event: PointerEvent<HTMLDivElement>) => {
|
||||
popover.setOpen(true);
|
||||
externalOnPointerEnter?.(event);
|
||||
},
|
||||
onPointerLeave: (event: PointerEvent<HTMLDivElement>) => {
|
||||
popover.setOpen(false);
|
||||
externalOnPointerLeave?.(event);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return {};
|
||||
};
|
||||
|
||||
const horizontalProps = (horizontal: Horizontal) => {
|
||||
if (horizontal === "right") {
|
||||
return {
|
||||
anchorOrigin: {
|
||||
vertical: "bottom",
|
||||
horizontal: "right",
|
||||
},
|
||||
transformOrigin: {
|
||||
vertical: "top",
|
||||
horizontal: "right",
|
||||
},
|
||||
} as const;
|
||||
}
|
||||
|
||||
return {
|
||||
anchorOrigin: {
|
||||
vertical: "bottom",
|
||||
horizontal: "left",
|
||||
},
|
||||
} as const;
|
||||
};
|
||||
</PopoverPrimitive.Portal>
|
||||
));
|
||||
|
||||
@@ -3,15 +3,15 @@ import Button, { type ButtonProps } from "@mui/material/Button";
|
||||
import MenuItem, { type MenuItemProps } from "@mui/material/MenuItem";
|
||||
import MenuList, { type MenuListProps } from "@mui/material/MenuList";
|
||||
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "components/Popover/Popover";
|
||||
import {
|
||||
SearchField,
|
||||
type SearchFieldProps,
|
||||
} from "components/SearchField/SearchField";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "components/deprecated/Popover/Popover";
|
||||
import {
|
||||
Children,
|
||||
type FC,
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
import Button from "@mui/material/Button";
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { expect, screen, userEvent, waitFor, within } from "@storybook/test";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
|
||||
|
||||
const meta: Meta<typeof Popover> = {
|
||||
title: "components/PopoverDeprecated",
|
||||
component: Popover,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Popover>;
|
||||
|
||||
const content = `
|
||||
According to all known laws of aviation, there is no way a bee should be able to fly.
|
||||
Its wings are too small to get its fat little body off the ground. The bee, of course,
|
||||
flies anyway because bees don't care what humans think is impossible.
|
||||
`;
|
||||
|
||||
export const Example: Story = {
|
||||
args: {
|
||||
children: (
|
||||
<>
|
||||
<PopoverTrigger>
|
||||
<Button>Click here!</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent>{content}</PopoverContent>
|
||||
</>
|
||||
),
|
||||
},
|
||||
play: async ({ canvasElement, step }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
await step("click to open", async () => {
|
||||
await userEvent.click(canvas.getByRole("button"));
|
||||
await waitFor(() =>
|
||||
expect(
|
||||
screen.getByText(/according to all known laws/i),
|
||||
).toBeInTheDocument(),
|
||||
);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export const Horizontal: Story = {
|
||||
args: {
|
||||
children: (
|
||||
<>
|
||||
<PopoverTrigger>
|
||||
<Button>Click here!</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent horizontal="right">{content}</PopoverContent>
|
||||
</>
|
||||
),
|
||||
},
|
||||
play: Example.play,
|
||||
};
|
||||
@@ -0,0 +1,243 @@
|
||||
import MuiPopover, {
|
||||
type PopoverProps as MuiPopoverProps,
|
||||
// biome-ignore lint/nursery/noRestrictedImports: This is the base component that our custom popover is based on
|
||||
} from "@mui/material/Popover";
|
||||
import {
|
||||
type FC,
|
||||
type HTMLAttributes,
|
||||
type PointerEvent,
|
||||
type PointerEventHandler,
|
||||
type ReactElement,
|
||||
type ReactNode,
|
||||
type RefObject,
|
||||
cloneElement,
|
||||
createContext,
|
||||
useContext,
|
||||
useEffect,
|
||||
useId,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
|
||||
type TriggerMode = "hover" | "click";
|
||||
|
||||
type TriggerRef = RefObject<HTMLElement>;
|
||||
|
||||
// Have to append ReactNode type to satisfy React's cloneElement function. It
|
||||
// has absolutely no bearing on what happens at runtime
|
||||
type TriggerElement = ReactNode &
|
||||
ReactElement<{
|
||||
ref: TriggerRef;
|
||||
onClick?: () => void;
|
||||
}>;
|
||||
|
||||
type PopoverContextValue = {
|
||||
id: string;
|
||||
open: boolean;
|
||||
setOpen: (open: boolean) => void;
|
||||
triggerRef: TriggerRef;
|
||||
mode: TriggerMode;
|
||||
};
|
||||
|
||||
const PopoverContext = createContext<PopoverContextValue | undefined>(
|
||||
undefined,
|
||||
);
|
||||
|
||||
type BasePopoverProps = {
|
||||
children: ReactNode;
|
||||
mode?: TriggerMode;
|
||||
};
|
||||
|
||||
// By separating controlled and uncontrolled props, we achieve more accurate
|
||||
// type inference.
|
||||
type UncontrolledPopoverProps = BasePopoverProps & {
|
||||
open?: undefined;
|
||||
onOpenChange?: undefined;
|
||||
};
|
||||
|
||||
type ControlledPopoverProps = BasePopoverProps & {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
};
|
||||
|
||||
export type PopoverProps = UncontrolledPopoverProps | ControlledPopoverProps;
|
||||
|
||||
/** @deprecated prefer `components.Popover` */
|
||||
export const Popover: FC<PopoverProps> = (props) => {
|
||||
const hookId = useId();
|
||||
const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
|
||||
const triggerRef: TriggerRef = useRef(null);
|
||||
|
||||
// Helps makes sure that popovers close properly when the user switches to
|
||||
// a different tab. This won't help with controlled instances of the
|
||||
// component, but this is basically the most we can do from here
|
||||
useEffect(() => {
|
||||
const closeOnTabSwitch = () => setUncontrolledOpen(false);
|
||||
window.addEventListener("blur", closeOnTabSwitch);
|
||||
return () => window.removeEventListener("blur", closeOnTabSwitch);
|
||||
}, []);
|
||||
|
||||
const value: PopoverContextValue = {
|
||||
triggerRef,
|
||||
id: `${hookId}-popover`,
|
||||
mode: props.mode ?? "click",
|
||||
open: props.open ?? uncontrolledOpen,
|
||||
setOpen: props.onOpenChange ?? setUncontrolledOpen,
|
||||
};
|
||||
|
||||
return (
|
||||
<PopoverContext.Provider value={value}>
|
||||
{props.children}
|
||||
</PopoverContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const usePopover = () => {
|
||||
const context = useContext(PopoverContext);
|
||||
if (!context) {
|
||||
throw new Error(
|
||||
"Popover compound components cannot be rendered outside the Popover component",
|
||||
);
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
type PopoverTriggerRenderProps = Readonly<{
|
||||
isOpen: boolean;
|
||||
}>;
|
||||
|
||||
type PopoverTriggerProps = Readonly<
|
||||
Omit<HTMLAttributes<HTMLElement>, "children"> & {
|
||||
children:
|
||||
| TriggerElement
|
||||
| ((props: PopoverTriggerRenderProps) => TriggerElement);
|
||||
}
|
||||
>;
|
||||
|
||||
/** @deprecated prefer `components.Popover.PopoverTrigger` */
|
||||
export const PopoverTrigger: FC<PopoverTriggerProps> = (props) => {
|
||||
const popover = usePopover();
|
||||
const { children, onClick, onPointerEnter, onPointerLeave, ...elementProps } =
|
||||
props;
|
||||
|
||||
const clickProps = {
|
||||
onClick: (event: PointerEvent<HTMLElement>) => {
|
||||
popover.setOpen(true);
|
||||
onClick?.(event);
|
||||
},
|
||||
};
|
||||
|
||||
const hoverProps = {
|
||||
onPointerEnter: (event: PointerEvent<HTMLElement>) => {
|
||||
popover.setOpen(true);
|
||||
onPointerEnter?.(event);
|
||||
},
|
||||
onPointerLeave: (event: PointerEvent<HTMLElement>) => {
|
||||
popover.setOpen(false);
|
||||
onPointerLeave?.(event);
|
||||
},
|
||||
};
|
||||
|
||||
const evaluatedChildren =
|
||||
typeof children === "function"
|
||||
? children({ isOpen: popover.open })
|
||||
: children;
|
||||
|
||||
return cloneElement(evaluatedChildren, {
|
||||
...elementProps,
|
||||
...(popover.mode === "click" ? clickProps : hoverProps),
|
||||
"aria-haspopup": true,
|
||||
"aria-owns": popover.id,
|
||||
"aria-expanded": popover.open,
|
||||
ref: popover.triggerRef,
|
||||
});
|
||||
};
|
||||
|
||||
type Horizontal = "left" | "right";
|
||||
|
||||
export type PopoverContentProps = Omit<
|
||||
MuiPopoverProps,
|
||||
"open" | "onClose" | "anchorEl"
|
||||
> & {
|
||||
horizontal?: Horizontal;
|
||||
};
|
||||
|
||||
/** @deprecated prefer `components.Popover.PopoverContent` */
|
||||
export const PopoverContent: FC<PopoverContentProps> = ({
|
||||
horizontal = "left",
|
||||
onPointerEnter,
|
||||
onPointerLeave,
|
||||
...popoverProps
|
||||
}) => {
|
||||
const popover = usePopover();
|
||||
const hoverMode = popover.mode === "hover";
|
||||
|
||||
return (
|
||||
<MuiPopover
|
||||
disablePortal
|
||||
css={{
|
||||
// When it is on hover mode, and the mode is moving from the trigger to
|
||||
// the popover, if there is any space, the popover will be closed. I
|
||||
// found this is a limitation on how MUI structured the component. It is
|
||||
// not a big issue for now but we can re-evaluate it in the future.
|
||||
marginTop: hoverMode ? undefined : 8,
|
||||
pointerEvents: hoverMode ? "none" : undefined,
|
||||
"& .MuiPaper-root": {
|
||||
minWidth: 320,
|
||||
fontSize: 14,
|
||||
pointerEvents: hoverMode ? "auto" : undefined,
|
||||
},
|
||||
}}
|
||||
{...horizontalProps(horizontal)}
|
||||
{...modeProps(popover, onPointerEnter, onPointerLeave)}
|
||||
{...popoverProps}
|
||||
id={popover.id}
|
||||
open={popover.open}
|
||||
onClose={() => popover.setOpen(false)}
|
||||
anchorEl={popover.triggerRef.current}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const modeProps = (
|
||||
popover: PopoverContextValue,
|
||||
externalOnPointerEnter: PointerEventHandler<HTMLDivElement> | undefined,
|
||||
externalOnPointerLeave: PointerEventHandler<HTMLDivElement> | undefined,
|
||||
) => {
|
||||
if (popover.mode === "hover") {
|
||||
return {
|
||||
onPointerEnter: (event: PointerEvent<HTMLDivElement>) => {
|
||||
popover.setOpen(true);
|
||||
externalOnPointerEnter?.(event);
|
||||
},
|
||||
onPointerLeave: (event: PointerEvent<HTMLDivElement>) => {
|
||||
popover.setOpen(false);
|
||||
externalOnPointerLeave?.(event);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return {};
|
||||
};
|
||||
|
||||
const horizontalProps = (horizontal: Horizontal) => {
|
||||
if (horizontal === "right") {
|
||||
return {
|
||||
anchorOrigin: {
|
||||
vertical: "bottom",
|
||||
horizontal: "right",
|
||||
},
|
||||
transformOrigin: {
|
||||
vertical: "top",
|
||||
horizontal: "right",
|
||||
},
|
||||
} as const;
|
||||
}
|
||||
|
||||
return {
|
||||
anchorOrigin: {
|
||||
vertical: "bottom",
|
||||
horizontal: "left",
|
||||
},
|
||||
} as const;
|
||||
};
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
usePopover,
|
||||
} from "components/Popover/Popover";
|
||||
} from "components/deprecated/Popover/Popover";
|
||||
import { linkToAuditing, linkToUsers } from "modules/navigation";
|
||||
import type { FC } from "react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
|
||||
@@ -2,12 +2,12 @@ import { type Interpolation, type Theme, css, useTheme } from "@emotion/react";
|
||||
import Badge from "@mui/material/Badge";
|
||||
import type * as TypesGen from "api/typesGenerated";
|
||||
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
|
||||
import { UserAvatar } from "components/UserAvatar/UserAvatar";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "components/Popover/Popover";
|
||||
import { UserAvatar } from "components/UserAvatar/UserAvatar";
|
||||
} from "components/deprecated/Popover/Popover";
|
||||
import { type FC, useState } from "react";
|
||||
import { BUTTON_SM_HEIGHT, navHeight } from "theme/constants";
|
||||
import { UserDropdownContent } from "./UserDropdownContent";
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { screen } from "@testing-library/react";
|
||||
import { Popover } from "components/Popover/Popover";
|
||||
import { Popover } from "components/deprecated/Popover/Popover";
|
||||
import { MockUser } from "testHelpers/entities";
|
||||
import { render, waitForLoaderToBeRemoved } from "testHelpers/renderHelpers";
|
||||
import { Language, UserDropdownContent } from "./UserDropdownContent";
|
||||
|
||||
@@ -17,8 +17,8 @@ import Tooltip from "@mui/material/Tooltip";
|
||||
import type * as TypesGen from "api/typesGenerated";
|
||||
import { CopyButton } from "components/CopyButton/CopyButton";
|
||||
import { ExternalImage } from "components/ExternalImage/ExternalImage";
|
||||
import { usePopover } from "components/Popover/Popover";
|
||||
import { Stack } from "components/Stack/Stack";
|
||||
import { usePopover } from "components/deprecated/Popover/Popover";
|
||||
import type { FC } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
|
||||
@@ -15,13 +15,13 @@ import {
|
||||
HelpTooltipTrigger,
|
||||
} from "components/HelpTooltip/HelpTooltip";
|
||||
import { Pill } from "components/Pill/Pill";
|
||||
import { Stack } from "components/Stack/Stack";
|
||||
import { StatusIndicator } from "components/StatusIndicator/StatusIndicator";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "components/Popover/Popover";
|
||||
import { Stack } from "components/Stack/Stack";
|
||||
import { StatusIndicator } from "components/StatusIndicator/StatusIndicator";
|
||||
} from "components/deprecated/Popover/Popover";
|
||||
import { type FC, useState } from "react";
|
||||
import { createDayString } from "utils/createDayString";
|
||||
import { docs } from "utils/docs";
|
||||
|
||||
@@ -6,8 +6,8 @@ import {
|
||||
HelpTooltipText,
|
||||
HelpTooltipTitle,
|
||||
} from "components/HelpTooltip/HelpTooltip";
|
||||
import { PopoverTrigger } from "components/Popover/Popover";
|
||||
import { Stack } from "components/Stack/Stack";
|
||||
import { PopoverTrigger } from "components/deprecated/Popover/Popover";
|
||||
import type { FC } from "react";
|
||||
import { getLatencyColor } from "utils/latency";
|
||||
|
||||
|
||||
@@ -9,8 +9,8 @@ import {
|
||||
HelpTooltipText,
|
||||
HelpTooltipTitle,
|
||||
} from "components/HelpTooltip/HelpTooltip";
|
||||
import { PopoverTrigger } from "components/Popover/Popover";
|
||||
import { Stack } from "components/Stack/Stack";
|
||||
import { PopoverTrigger } from "components/deprecated/Popover/Popover";
|
||||
import type { FC } from "react";
|
||||
import { agentVersionStatus } from "../../utils/workspace";
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
HelpTooltipText,
|
||||
HelpTooltipTitle,
|
||||
} from "components/HelpTooltip/HelpTooltip";
|
||||
import { PopoverTrigger } from "components/Popover/Popover";
|
||||
import { PopoverTrigger } from "components/deprecated/Popover/Popover";
|
||||
import type { FC } from "react";
|
||||
|
||||
// If we think in the agent status and lifecycle into a single enum/state I’d
|
||||
|
||||
@@ -39,7 +39,7 @@ import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "components/Popover/Popover";
|
||||
} from "components/deprecated/Popover/Popover";
|
||||
import { type FormikContextType, useFormik } from "formik";
|
||||
import { type ClassName, useClassName } from "hooks/useClassName";
|
||||
import { useDashboard } from "modules/dashboard/useDashboard";
|
||||
|
||||
@@ -7,12 +7,12 @@ import {
|
||||
HelpTooltipLinksGroup,
|
||||
HelpTooltipText,
|
||||
} from "components/HelpTooltip/HelpTooltip";
|
||||
import { Stack } from "components/Stack/Stack";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "components/Popover/Popover";
|
||||
import { Stack } from "components/Stack/Stack";
|
||||
} from "components/deprecated/Popover/Popover";
|
||||
import { type ClassName, useClassName } from "hooks/useClassName";
|
||||
import type { FC } from "react";
|
||||
import { docs } from "utils/docs";
|
||||
|
||||
@@ -13,7 +13,7 @@ import {
|
||||
HelpTooltipTitle,
|
||||
HelpTooltipTrigger,
|
||||
} from "components/HelpTooltip/HelpTooltip";
|
||||
import { usePopover } from "components/Popover/Popover";
|
||||
import { usePopover } from "components/deprecated/Popover/Popover";
|
||||
import { linkToTemplate, useLinks } from "modules/navigation";
|
||||
import type { FC } from "react";
|
||||
import { useQuery } from "react-query";
|
||||
|
||||
+2
-2
@@ -8,12 +8,12 @@ import {
|
||||
PremiumBadge,
|
||||
} from "components/Badges/Badges";
|
||||
import { PopoverPaywall } from "components/Paywall/PopoverPaywall";
|
||||
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "components/Popover/Popover";
|
||||
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
|
||||
} from "components/deprecated/Popover/Popover";
|
||||
import { useFormik } from "formik";
|
||||
import type { FC } from "react";
|
||||
import { getFormHelpers } from "utils/formUtils";
|
||||
|
||||
@@ -4,7 +4,7 @@ import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "components/Popover/Popover";
|
||||
} from "components/deprecated/Popover/Popover";
|
||||
import type { FC } from "react";
|
||||
import { cn } from "utils/cn";
|
||||
import { isUUID } from "utils/uuid";
|
||||
|
||||
+3
-3
@@ -5,13 +5,13 @@ import {
|
||||
PremiumBadge,
|
||||
} from "components/Badges/Badges";
|
||||
import { PopoverPaywall } from "components/Paywall/PopoverPaywall";
|
||||
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
|
||||
import { Stack } from "components/Stack/Stack";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "components/Popover/Popover";
|
||||
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
|
||||
import { Stack } from "components/Stack/Stack";
|
||||
} from "components/deprecated/Popover/Popover";
|
||||
import type { FC } from "react";
|
||||
import { deploymentGroupHasParent } from "utils/deployOptions";
|
||||
import { docs } from "utils/docs";
|
||||
|
||||
@@ -13,13 +13,13 @@ import {
|
||||
import { IconField } from "components/IconField/IconField";
|
||||
import { Paywall } from "components/Paywall/Paywall";
|
||||
import { PopoverPaywall } from "components/Paywall/PopoverPaywall";
|
||||
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
|
||||
import { Stack } from "components/Stack/Stack";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "components/Popover/Popover";
|
||||
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
|
||||
import { Stack } from "components/Stack/Stack";
|
||||
} from "components/deprecated/Popover/Popover";
|
||||
import { useFormik } from "formik";
|
||||
import type { FC } from "react";
|
||||
import { docs } from "utils/docs";
|
||||
|
||||
@@ -6,7 +6,7 @@ import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "components/Popover/Popover";
|
||||
} from "components/deprecated/Popover/Popover";
|
||||
import type { FC } from "react";
|
||||
|
||||
function getUniqueResourceTypes(jsonObject: readonly Permission[]) {
|
||||
|
||||
@@ -5,7 +5,7 @@ import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "components/Popover/Popover";
|
||||
} from "components/deprecated/Popover/Popover";
|
||||
import type { FC } from "react";
|
||||
import { isUUID } from "utils/uuid";
|
||||
|
||||
|
||||
@@ -12,12 +12,12 @@ import {
|
||||
HelpTooltipTrigger,
|
||||
} from "components/HelpTooltip/HelpTooltip";
|
||||
import { EditSquare } from "components/Icons/EditSquare";
|
||||
import { Stack } from "components/Stack/Stack";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "components/Popover/Popover";
|
||||
import { Stack } from "components/Stack/Stack";
|
||||
} from "components/deprecated/Popover/Popover";
|
||||
import { type ClassName, useClassName } from "hooks/useClassName";
|
||||
import type { FC } from "react";
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "components/Popover/Popover";
|
||||
} from "components/deprecated/Popover/Popover";
|
||||
import type { FC } from "react";
|
||||
import { EditRolesButton } from "./EditRolesButton";
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "components/Popover/Popover";
|
||||
} from "components/deprecated/Popover/Popover";
|
||||
import {
|
||||
addDays,
|
||||
addHours,
|
||||
|
||||
@@ -6,12 +6,12 @@ import TextField from "@mui/material/TextField";
|
||||
import useTheme from "@mui/system/useTheme";
|
||||
import { FormFields, FormSection, VerticalForm } from "components/Form/Form";
|
||||
import { TopbarButton } from "components/FullPageLayout/Topbar";
|
||||
import { Stack } from "components/Stack/Stack";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "components/Popover/Popover";
|
||||
import { Stack } from "components/Stack/Stack";
|
||||
} from "components/deprecated/Popover/Popover";
|
||||
import { useFormik } from "formik";
|
||||
import { ProvisionerTag } from "modules/provisioners/ProvisionerTag";
|
||||
import { type FC, Fragment } from "react";
|
||||
|
||||
@@ -5,13 +5,13 @@ import ListItem from "@mui/material/ListItem";
|
||||
import TableCell from "@mui/material/TableCell";
|
||||
import type { Group } from "api/typesGenerated";
|
||||
import { OverflowY } from "components/OverflowY/OverflowY";
|
||||
import { Stack } from "components/Stack/Stack";
|
||||
import { Avatar } from "components/deprecated/Avatar/Avatar";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "components/Popover/Popover";
|
||||
import { Stack } from "components/Stack/Stack";
|
||||
import { Avatar } from "components/deprecated/Avatar/Avatar";
|
||||
} from "components/deprecated/Popover/Popover";
|
||||
import type { FC } from "react";
|
||||
|
||||
type GroupsCellProps = {
|
||||
|
||||
@@ -17,13 +17,13 @@ import {
|
||||
HelpTooltipTitle,
|
||||
} from "components/HelpTooltip/HelpTooltip";
|
||||
import { Loader } from "components/Loader/Loader";
|
||||
import { RichParameterInput } from "components/RichParameterInput/RichParameterInput";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
usePopover,
|
||||
} from "components/Popover/Popover";
|
||||
import { RichParameterInput } from "components/RichParameterInput/RichParameterInput";
|
||||
} from "components/deprecated/Popover/Popover";
|
||||
import { useFormik } from "formik";
|
||||
import type { FC } from "react";
|
||||
import { useQuery } from "react-query";
|
||||
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
usePopover,
|
||||
} from "components/Popover/Popover";
|
||||
} from "components/deprecated/Popover/Popover";
|
||||
import type { FC, ReactNode } from "react";
|
||||
import type { ThemeRole } from "theme/roles";
|
||||
|
||||
|
||||
@@ -16,9 +16,9 @@ import {
|
||||
TopbarIconButton,
|
||||
} from "components/FullPageLayout/Topbar";
|
||||
import { HelpTooltipContent } from "components/HelpTooltip/HelpTooltip";
|
||||
import { Popover, PopoverTrigger } from "components/Popover/Popover";
|
||||
import { UserAvatar } from "components/UserAvatar/UserAvatar";
|
||||
import { ExternalAvatar } from "components/deprecated/Avatar/Avatar";
|
||||
import { Popover, PopoverTrigger } from "components/deprecated/Popover/Popover";
|
||||
import { useDashboard } from "modules/dashboard/useDashboard";
|
||||
import { linkToTemplate, useLinks } from "modules/navigation";
|
||||
import { WorkspaceStatusBadge } from "modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge";
|
||||
|
||||
@@ -6,13 +6,13 @@ import type { Template } from "api/typesGenerated";
|
||||
import { Loader } from "components/Loader/Loader";
|
||||
import { MenuSearch } from "components/Menu/MenuSearch";
|
||||
import { OverflowY } from "components/OverflowY/OverflowY";
|
||||
import { SearchEmpty, searchStyles } from "components/Search/Search";
|
||||
import { Avatar } from "components/deprecated/Avatar/Avatar";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "components/Popover/Popover";
|
||||
import { SearchEmpty, searchStyles } from "components/Search/Search";
|
||||
import { Avatar } from "components/deprecated/Avatar/Avatar";
|
||||
} from "components/deprecated/Popover/Popover";
|
||||
import { linkToTemplate, useLinks } from "modules/navigation";
|
||||
import { type FC, type ReactNode, useState } from "react";
|
||||
import type { UseQueryResult } from "react-query";
|
||||
|
||||
Reference in New Issue
Block a user