@sanity/ui 2.7.1-canary.1 → 2.7.1-canary.2
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.
- package/dist/index.d.mts +33 -8
- package/dist/index.d.ts +33 -8
- package/dist/index.esm.js +14 -18
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +14 -18
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +14 -18
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -2
- package/src/core/components/dialog/dialog.tsx +9 -12
- package/src/core/components/menu/menu.tsx +2 -8
- package/src/core/components/menu/menuButton.tsx +1 -1
- package/src/core/components/menu/menuContext.ts +1 -1
- package/src/core/hooks/useClickOutside.test.tsx +568 -46
- package/src/core/hooks/useClickOutside.ts +42 -18
- package/src/core/primitives/popover/__workshop__/AlignedStory.tsx +9 -7
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sanity/ui",
|
|
3
|
-
"version": "2.7.1-canary.
|
|
3
|
+
"version": "2.7.1-canary.2",
|
|
4
4
|
"keywords": [
|
|
5
5
|
"sanity",
|
|
6
6
|
"ui",
|
|
@@ -116,6 +116,7 @@
|
|
|
116
116
|
"@testing-library/dom": "^10.3.2",
|
|
117
117
|
"@testing-library/jest-dom": "^6.4.6",
|
|
118
118
|
"@testing-library/react": "^16.0.0",
|
|
119
|
+
"@testing-library/user-event": "^14.5.2",
|
|
119
120
|
"@types/jest": "^29.5.12",
|
|
120
121
|
"@types/jest-axe": "^3.5.9",
|
|
121
122
|
"@types/node": "^20.12.7",
|
|
@@ -126,7 +127,7 @@
|
|
|
126
127
|
"@typescript-eslint/eslint-plugin": "^7.16.1",
|
|
127
128
|
"@typescript-eslint/parser": "^7.16.1",
|
|
128
129
|
"commitizen": "^4.3.0",
|
|
129
|
-
"cypress": "^13.13.
|
|
130
|
+
"cypress": "^13.13.1",
|
|
130
131
|
"cypress-real-events": "^1.13.0",
|
|
131
132
|
"cz-conventional-changelog": "^3.3.0",
|
|
132
133
|
"eslint": "^8.57.0",
|
|
@@ -216,21 +216,18 @@ const DialogCard = forwardRef(function DialogCard(
|
|
|
216
216
|
)
|
|
217
217
|
|
|
218
218
|
useClickOutside(
|
|
219
|
-
|
|
220
|
-
(
|
|
221
|
-
if (!isTopLayer || !onClickOutside) return
|
|
219
|
+
(event: MouseEvent) => {
|
|
220
|
+
if (!isTopLayer || !onClickOutside) return
|
|
222
221
|
|
|
223
|
-
|
|
222
|
+
const target = event.target as Node | null
|
|
224
223
|
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
224
|
+
if (target && !isTargetWithinScope(boundaryElement, portalElement, target)) {
|
|
225
|
+
// Ignore clicks outside of the scope
|
|
226
|
+
return
|
|
227
|
+
}
|
|
229
228
|
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
[boundaryElement, isTopLayer, onClickOutside, portalElement],
|
|
233
|
-
),
|
|
229
|
+
onClickOutside()
|
|
230
|
+
},
|
|
234
231
|
[rootElement],
|
|
235
232
|
)
|
|
236
233
|
|
|
@@ -19,7 +19,7 @@ export interface MenuProps extends ResponsivePaddingProps {
|
|
|
19
19
|
* @deprecated Use `shouldFocus="last"` instead.
|
|
20
20
|
*/
|
|
21
21
|
focusLast?: boolean
|
|
22
|
-
onClickOutside?: (event: MouseEvent
|
|
22
|
+
onClickOutside?: (event: MouseEvent) => void
|
|
23
23
|
onEscape?: () => void
|
|
24
24
|
onItemClick?: () => void
|
|
25
25
|
onItemSelect?: (index: number) => void
|
|
@@ -93,13 +93,7 @@ export const Menu = forwardRef(function Menu(
|
|
|
93
93
|
}, [activeIndex, onItemSelect])
|
|
94
94
|
|
|
95
95
|
// Close menu when clicking outside
|
|
96
|
-
useClickOutside(
|
|
97
|
-
useCallback(
|
|
98
|
-
(event) => isTopLayer && onClickOutside && onClickOutside(event),
|
|
99
|
-
[isTopLayer, onClickOutside],
|
|
100
|
-
),
|
|
101
|
-
[rootElement],
|
|
102
|
-
)
|
|
96
|
+
useClickOutside((event) => isTopLayer && onClickOutside && onClickOutside(event), [rootElement])
|
|
103
97
|
|
|
104
98
|
// Close menu when pressing Escape
|
|
105
99
|
useGlobalKeyDown(
|
|
@@ -140,7 +140,7 @@ export const MenuButton = forwardRef(function MenuButton(
|
|
|
140
140
|
}, [])
|
|
141
141
|
|
|
142
142
|
const handleMenuClickOutside = useCallback(
|
|
143
|
-
(event: MouseEvent
|
|
143
|
+
(event: MouseEvent) => {
|
|
144
144
|
const target = event.target
|
|
145
145
|
|
|
146
146
|
if (!(target instanceof Node)) {
|
|
@@ -5,7 +5,7 @@ export interface MenuContextValue {
|
|
|
5
5
|
activeElement: HTMLElement | null
|
|
6
6
|
activeIndex: number
|
|
7
7
|
mount: (element: HTMLElement | null, selected?: boolean) => () => void
|
|
8
|
-
onClickOutside?: (event: MouseEvent
|
|
8
|
+
onClickOutside?: (event: MouseEvent) => void
|
|
9
9
|
onEscape?: () => void
|
|
10
10
|
onItemClick?: () => void
|
|
11
11
|
onItemMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void
|