@sanity/ui 3.0.9 → 3.0.11-canary.0
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/_chunks-cjs/_visual-editing.js +82 -64
- package/dist/_chunks-cjs/_visual-editing.js.map +1 -1
- package/dist/_chunks-es/_visual-editing.mjs +82 -64
- package/dist/_chunks-es/_visual-editing.mjs.map +1 -1
- package/dist/index.js +308 -98
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +310 -100
- package/dist/index.mjs.map +1 -1
- package/package.json +31 -45
- package/src/core/components/autocomplete/autocomplete.tsx +79 -47
- package/src/core/components/menu/menu.test.tsx +11 -14
- package/src/core/components/menu/menu.tsx +13 -18
- package/src/core/components/menu/menuContext.ts +3 -14
- package/src/core/components/menu/menuGroup.tsx +1 -1
- package/src/core/components/menu/menuItem.tsx +2 -2
- package/src/core/components/menu/useMenu.ts +2 -2
- package/src/core/components/menu/useMenuController.ts +5 -5
- package/src/core/components/tree/treeItem.tsx +17 -15
- package/src/core/hooks/useClickOutside.test.tsx +1 -1
- package/src/core/lib/createGlobalScopedContext.ts +3 -1
- package/src/core/primitives/avatar/avatar.tsx +1 -0
- package/src/core/primitives/card/card.tsx +1 -0
- package/src/core/primitives/popover/types.ts +2 -1
- package/src/core/styles/font/responsiveFont.ts +2 -0
- package/src/core/theme/__workshop__/canvas.tsx +1 -0
- package/src/core/utils/portal/portalProvider.tsx +2 -34
|
@@ -203,7 +203,7 @@ function useArrayProp(val, defaultVal) {
|
|
|
203
203
|
return hash !== cachedHash && setCache([_getArrayProp(val, defaultVal), hash]), cachedVal;
|
|
204
204
|
}
|
|
205
205
|
function useClickOutsideEvent(listener, t0, boundaryElement) {
|
|
206
|
-
const $ = c(9), elementsArg = t0 === void 0 ? _temp$
|
|
206
|
+
const $ = c(9), elementsArg = t0 === void 0 ? _temp$a : t0;
|
|
207
207
|
let t1;
|
|
208
208
|
$[0] !== boundaryElement || $[1] !== elementsArg || $[2] !== listener ? (t1 = (evt) => {
|
|
209
209
|
if (!listener)
|
|
@@ -233,7 +233,7 @@ function useClickOutsideEvent(listener, t0, boundaryElement) {
|
|
|
233
233
|
let t3;
|
|
234
234
|
$[7] !== hasListener ? (t3 = [hasListener], $[7] = hasListener, $[8] = t3) : t3 = $[8], useEffect(t2, t3), useDebugValue(listener ? "MouseDown On" : "MouseDown Off");
|
|
235
235
|
}
|
|
236
|
-
function _temp$
|
|
236
|
+
function _temp$a() {
|
|
237
237
|
return EMPTY_ARRAY;
|
|
238
238
|
}
|
|
239
239
|
function useCustomValidity(ref, customValidity) {
|
|
@@ -324,7 +324,11 @@ function getGlobalScope() {
|
|
|
324
324
|
const globalScope = getGlobalScope();
|
|
325
325
|
function createGlobalScopedContext(key2, defaultValue) {
|
|
326
326
|
const symbol = Symbol.for(key2);
|
|
327
|
-
|
|
327
|
+
if (typeof document > "u") {
|
|
328
|
+
const context = createContext(defaultValue);
|
|
329
|
+
return context.displayName = key2, context;
|
|
330
|
+
}
|
|
331
|
+
return globalScope[symbol] = globalScope[symbol] || createContext(defaultValue), globalScope[symbol];
|
|
328
332
|
}
|
|
329
333
|
const ThemeContext = createGlobalScopedContext("@sanity/ui/context/theme", null);
|
|
330
334
|
function ThemeProvider(props) {
|
|
@@ -448,15 +452,15 @@ function useMediaIndex() {
|
|
|
448
452
|
return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);
|
|
449
453
|
}
|
|
450
454
|
function usePrefersDark(t0) {
|
|
451
|
-
return useMatchMedia("(prefers-color-scheme: dark)", t0 === void 0 ? _temp$
|
|
455
|
+
return useMatchMedia("(prefers-color-scheme: dark)", t0 === void 0 ? _temp$9 : t0);
|
|
452
456
|
}
|
|
453
|
-
function _temp$
|
|
457
|
+
function _temp$9() {
|
|
454
458
|
return !1;
|
|
455
459
|
}
|
|
456
460
|
function usePrefersReducedMotion(t0) {
|
|
457
|
-
return useMatchMedia("(prefers-reduced-motion: reduce)", t0 === void 0 ? _temp$
|
|
461
|
+
return useMatchMedia("(prefers-reduced-motion: reduce)", t0 === void 0 ? _temp$8 : t0);
|
|
458
462
|
}
|
|
459
|
-
function _temp$
|
|
463
|
+
function _temp$8() {
|
|
460
464
|
return !1;
|
|
461
465
|
}
|
|
462
466
|
function responsiveBorderStyle() {
|
|
@@ -1401,7 +1405,7 @@ const StyledAvatar = /* @__PURE__ */ styled.div.withConfig({
|
|
|
1401
1405
|
}, $[20] = onImageLoadError, $[21] = t7) : t7 = $[21];
|
|
1402
1406
|
const handleImageError = t7;
|
|
1403
1407
|
let t8;
|
|
1404
|
-
$[22] !== size2 ? (t8 = size2.map(_temp$
|
|
1408
|
+
$[22] !== size2 ? (t8 = size2.map(_temp$7), $[22] = size2, $[23] = t8) : t8 = $[23];
|
|
1405
1409
|
const initialsSize = t8, t9 = typeof as == "string" ? as : void 0;
|
|
1406
1410
|
let t10;
|
|
1407
1411
|
$[24] !== color ? (t10 = /* @__PURE__ */ jsx(Arrow$1, { children: /* @__PURE__ */ jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z", fill: color }) }) }), $[24] = color, $[25] = t10) : t10 = $[25];
|
|
@@ -1422,7 +1426,7 @@ const StyledAvatar = /* @__PURE__ */ styled.div.withConfig({
|
|
|
1422
1426
|
] }), $[39] = arrowPosition, $[40] = as, $[41] = color, $[42] = ref, $[43] = restProps, $[44] = size2, $[45] = status, $[46] = t10, $[47] = t11, $[48] = t12, $[49] = t9, $[50] = title, $[51] = t13) : t13 = $[51], t13;
|
|
1423
1427
|
});
|
|
1424
1428
|
Avatar.displayName = "ForwardRef(Avatar)";
|
|
1425
|
-
function _temp$
|
|
1429
|
+
function _temp$7(s) {
|
|
1426
1430
|
return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
|
|
1427
1431
|
}
|
|
1428
1432
|
function _responsiveAvatarCounterSizeStyle(props) {
|
|
@@ -1470,7 +1474,7 @@ const StyledAvatarCounter = /* @__PURE__ */ styled.div.withConfig({
|
|
|
1470
1474
|
size: t0
|
|
1471
1475
|
} = props, size2 = useArrayProp(t0 === void 0 ? 1 : t0);
|
|
1472
1476
|
let t1;
|
|
1473
|
-
$[0] !== size2 ? (t1 = size2.map(_temp$
|
|
1477
|
+
$[0] !== size2 ? (t1 = size2.map(_temp$6), $[0] = size2, $[1] = t1) : t1 = $[1];
|
|
1474
1478
|
const fontSize2 = t1;
|
|
1475
1479
|
let t2;
|
|
1476
1480
|
$[2] !== count || $[3] !== fontSize2 ? (t2 = /* @__PURE__ */ jsx(Label, { as: "span", size: fontSize2, weight: "medium", children: count }), $[2] = count, $[3] = fontSize2, $[4] = t2) : t2 = $[4];
|
|
@@ -1478,7 +1482,7 @@ const StyledAvatarCounter = /* @__PURE__ */ styled.div.withConfig({
|
|
|
1478
1482
|
return $[5] !== ref || $[6] !== size2 || $[7] !== t2 ? (t3 = /* @__PURE__ */ jsx(StyledAvatarCounter, { $size: size2, "data-ui": "AvatarCounter", ref, children: t2 }), $[5] = ref, $[6] = size2, $[7] = t2, $[8] = t3) : t3 = $[8], t3;
|
|
1479
1483
|
});
|
|
1480
1484
|
AvatarCounter.displayName = "ForwardRef(AvatarCounter)";
|
|
1481
|
-
function _temp$
|
|
1485
|
+
function _temp$6(s) {
|
|
1482
1486
|
return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
|
|
1483
1487
|
}
|
|
1484
1488
|
const BASE_STYLES = css`
|
|
@@ -2713,13 +2717,13 @@ const StyledInline = /* @__PURE__ */ styled(Box).withConfig({
|
|
|
2713
2717
|
...restProps
|
|
2714
2718
|
} = props, $[0] = props, $[1] = as, $[2] = childrenProp, $[3] = restProps, $[4] = space) : (as = $[1], childrenProp = $[2], restProps = $[3], space = $[4]);
|
|
2715
2719
|
let t0;
|
|
2716
|
-
$[5] !== childrenProp ? (t0 = Children.map(childrenProp, _temp$
|
|
2720
|
+
$[5] !== childrenProp ? (t0 = Children.map(childrenProp, _temp$5), $[5] = childrenProp, $[6] = t0) : t0 = $[6];
|
|
2717
2721
|
const children = t0, t1 = useArrayProp(space), t2 = ref;
|
|
2718
2722
|
let t3;
|
|
2719
2723
|
return $[7] !== as || $[8] !== children || $[9] !== restProps || $[10] !== t1 || $[11] !== t2 ? (t3 = /* @__PURE__ */ jsx(StyledInline, { "data-ui": "Inline", ...restProps, $space: t1, forwardedAs: as, ref: t2, children }), $[7] = as, $[8] = children, $[9] = restProps, $[10] = t1, $[11] = t2, $[12] = t3) : t3 = $[12], t3;
|
|
2720
2724
|
});
|
|
2721
2725
|
Inline.displayName = "ForwardRef(Inline)";
|
|
2722
|
-
function _temp$
|
|
2726
|
+
function _temp$5(child) {
|
|
2723
2727
|
return child && /* @__PURE__ */ jsx("div", { children: child });
|
|
2724
2728
|
}
|
|
2725
2729
|
function kbdStyle() {
|
|
@@ -3040,7 +3044,7 @@ function LayerProvider(props) {
|
|
|
3040
3044
|
[childLevel]: prevLen + 1
|
|
3041
3045
|
};
|
|
3042
3046
|
return setSize(Object.keys(nextState).length), nextState;
|
|
3043
|
-
}) : setSize(_temp$
|
|
3047
|
+
}) : setSize(_temp$4), () => {
|
|
3044
3048
|
childLevel !== void 0 ? setChildLayers((state_0) => {
|
|
3045
3049
|
const nextState_0 = {
|
|
3046
3050
|
...state_0
|
|
@@ -3068,7 +3072,7 @@ function LayerProvider(props) {
|
|
|
3068
3072
|
function _temp2$2(v_0) {
|
|
3069
3073
|
return v_0 - 1;
|
|
3070
3074
|
}
|
|
3071
|
-
function _temp$
|
|
3075
|
+
function _temp$4(v) {
|
|
3072
3076
|
return v + 1;
|
|
3073
3077
|
}
|
|
3074
3078
|
LayerProvider.displayName = "LayerProvider";
|
|
@@ -3173,8 +3177,8 @@ function PortalProvider(props) {
|
|
|
3173
3177
|
boundaryElement,
|
|
3174
3178
|
children,
|
|
3175
3179
|
element,
|
|
3176
|
-
__unstable_elements:
|
|
3177
|
-
} = props,
|
|
3180
|
+
__unstable_elements: elements
|
|
3181
|
+
} = props, fallbackElement = useSyncExternalStore(emptySubscribe, _temp$3, _temp2$1), t0 = boundaryElement || null, t1 = element || fallbackElement;
|
|
3178
3182
|
let t2;
|
|
3179
3183
|
$[0] !== elements || $[1] !== t0 || $[2] !== t1 ? (t2 = {
|
|
3180
3184
|
version: 0,
|
|
@@ -3189,23 +3193,12 @@ function PortalProvider(props) {
|
|
|
3189
3193
|
function _temp2$1() {
|
|
3190
3194
|
return null;
|
|
3191
3195
|
}
|
|
3192
|
-
function _temp$
|
|
3196
|
+
function _temp$3() {
|
|
3193
3197
|
return document.body;
|
|
3194
3198
|
}
|
|
3195
3199
|
PortalProvider.displayName = "PortalProvider";
|
|
3196
3200
|
const emptySubscribe = () => () => {
|
|
3197
|
-
}
|
|
3198
|
-
function useUnique(value) {
|
|
3199
|
-
const valueRef = useRef(value);
|
|
3200
|
-
return _isEqual(valueRef.current, value) || (valueRef.current = value), valueRef.current;
|
|
3201
|
-
}
|
|
3202
|
-
function _isEqual(objA, objB) {
|
|
3203
|
-
if (!objA || !objB)
|
|
3204
|
-
return objA === objB;
|
|
3205
|
-
const keysA = Object.keys(objA), keysB = Object.keys(objB);
|
|
3206
|
-
return keysA.length !== keysB.length ? !1 : keysA.every((key2) => objA[key2] === objB[key2]);
|
|
3207
|
-
}
|
|
3208
|
-
const StyledSrOnly = styled.div.withConfig({
|
|
3201
|
+
}, StyledSrOnly = styled.div.withConfig({
|
|
3209
3202
|
displayName: "StyledSrOnly",
|
|
3210
3203
|
componentId: "sc-mubr0c-0"
|
|
3211
3204
|
})`display:block;width:0;height:0;position:absolute;overflow:hidden;overflow:clip;`, SrOnly = forwardRef(function(props, ref) {
|
|
@@ -4278,7 +4271,7 @@ const CLEAR_BUTTON_BOX_STYLE = {
|
|
|
4278
4271
|
const border2 = t0 === void 0 ? !0 : t0, disabled = t1 === void 0 ? !1 : t1, fontSizeProp = t2 === void 0 ? 2 : t2, paddingProp = t3 === void 0 ? 3 : t3, radiusProp = t4 === void 0 ? 2 : t4, spaceProp = t5 === void 0 ? 3 : t5, type = t6 === void 0 ? "text" : t6, ref = useRef(null), rootTheme = useRootTheme(), fontSize2 = useArrayProp(fontSizeProp), padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), space = useArrayProp(spaceProp), $hasClearButton = !!clearButton, $hasIcon = !!IconComponent, $hasIconRight = !!IconRightComponent, $hasSuffix = !!suffix, $hasPrefix = !!prefix;
|
|
4279
4272
|
let t7;
|
|
4280
4273
|
$[19] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => ref.current, $[19] = t7) : t7 = $[19], useImperativeHandle(forwardedRef, t7), useCustomValidity(ref, customValidity);
|
|
4281
|
-
const handleClearMouseDown = _temp$
|
|
4274
|
+
const handleClearMouseDown = _temp$2;
|
|
4282
4275
|
let t8;
|
|
4283
4276
|
$[20] !== onClear ? (t8 = (event_0) => {
|
|
4284
4277
|
event_0.preventDefault(), event_0.stopPropagation(), onClear && onClear(), ref.current?.focus();
|
|
@@ -4331,7 +4324,7 @@ const CLEAR_BUTTON_BOX_STYLE = {
|
|
|
4331
4324
|
] }), $[79] = prefixNode, $[80] = rootTheme.tone, $[81] = suffixNode, $[82] = t20, $[83] = t21) : t21 = $[83], t21;
|
|
4332
4325
|
});
|
|
4333
4326
|
TextInput.displayName = "ForwardRef(TextInput)";
|
|
4334
|
-
function _temp$
|
|
4327
|
+
function _temp$2(event) {
|
|
4335
4328
|
event.preventDefault(), event.stopPropagation();
|
|
4336
4329
|
}
|
|
4337
4330
|
function _temp2(v) {
|
|
@@ -4669,16 +4662,24 @@ function _sortElements(rootElement, elements) {
|
|
|
4669
4662
|
elements.sort(_sort);
|
|
4670
4663
|
}
|
|
4671
4664
|
function useMenuController(props) {
|
|
4672
|
-
const {
|
|
4665
|
+
const $ = c(21), {
|
|
4673
4666
|
onKeyDown,
|
|
4674
4667
|
originElement,
|
|
4675
4668
|
shouldFocus,
|
|
4676
4669
|
rootElementRef
|
|
4677
|
-
} = props
|
|
4678
|
-
|
|
4679
|
-
|
|
4680
|
-
|
|
4681
|
-
|
|
4670
|
+
} = props;
|
|
4671
|
+
let t0;
|
|
4672
|
+
$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = [], $[0] = t0) : t0 = $[0];
|
|
4673
|
+
const elementsRef = useRef(t0), [activeIndex, _setActiveIndex] = useState(-1), activeIndexRef = useRef(activeIndex), [activeElement, setActiveElement] = useState(null);
|
|
4674
|
+
let t1;
|
|
4675
|
+
$[1] === Symbol.for("react.memo_cache_sentinel") ? (t1 = (nextActiveIndex) => {
|
|
4676
|
+
_setActiveIndex(nextActiveIndex), activeIndexRef.current = nextActiveIndex, setActiveElement(elementsRef.current[nextActiveIndex] || null);
|
|
4677
|
+
}, $[1] = t1) : t1 = $[1];
|
|
4678
|
+
const setActiveIndex = t1;
|
|
4679
|
+
let t2;
|
|
4680
|
+
$[2] !== rootElementRef ? (t2 = (element, selected) => {
|
|
4681
|
+
if (!element)
|
|
4682
|
+
return _temp$1;
|
|
4682
4683
|
if (elementsRef.current.indexOf(element) === -1 && (elementsRef.current.push(element), _sortElements(rootElementRef.current, elementsRef.current)), selected) {
|
|
4683
4684
|
const selectedIndex = elementsRef.current.indexOf(element);
|
|
4684
4685
|
setActiveIndex(selectedIndex);
|
|
@@ -4687,7 +4688,10 @@ function useMenuController(props) {
|
|
|
4687
4688
|
const idx = elementsRef.current.indexOf(element);
|
|
4688
4689
|
idx > -1 && elementsRef.current.splice(idx, 1);
|
|
4689
4690
|
};
|
|
4690
|
-
}, [rootElementRef,
|
|
4691
|
+
}, $[2] = rootElementRef, $[3] = t2) : t2 = $[3];
|
|
4692
|
+
const mount = t2;
|
|
4693
|
+
let t3;
|
|
4694
|
+
$[4] !== onKeyDown || $[5] !== originElement ? (t3 = (event) => {
|
|
4691
4695
|
if (event.key === "Tab") {
|
|
4692
4696
|
originElement && originElement.focus();
|
|
4693
4697
|
return;
|
|
@@ -4695,7 +4699,8 @@ function useMenuController(props) {
|
|
|
4695
4699
|
if (event.key === "Home") {
|
|
4696
4700
|
event.preventDefault(), event.stopPropagation();
|
|
4697
4701
|
const el = _getFocusableElements(elementsRef.current)[0];
|
|
4698
|
-
if (!el)
|
|
4702
|
+
if (!el)
|
|
4703
|
+
return;
|
|
4699
4704
|
const currentIndex = elementsRef.current.indexOf(el);
|
|
4700
4705
|
setActiveIndex(currentIndex);
|
|
4701
4706
|
return;
|
|
@@ -4703,7 +4708,8 @@ function useMenuController(props) {
|
|
|
4703
4708
|
if (event.key === "End") {
|
|
4704
4709
|
event.preventDefault(), event.stopPropagation();
|
|
4705
4710
|
const focusableElements_0 = _getFocusableElements(elementsRef.current), el_0 = focusableElements_0[focusableElements_0.length - 1];
|
|
4706
|
-
if (!el_0)
|
|
4711
|
+
if (!el_0)
|
|
4712
|
+
return;
|
|
4707
4713
|
const currentIndex_0 = elementsRef.current.indexOf(el_0);
|
|
4708
4714
|
setActiveIndex(currentIndex_0);
|
|
4709
4715
|
return;
|
|
@@ -4711,7 +4717,8 @@ function useMenuController(props) {
|
|
|
4711
4717
|
if (event.key === "ArrowUp") {
|
|
4712
4718
|
event.preventDefault(), event.stopPropagation();
|
|
4713
4719
|
const focusableElements_1 = _getFocusableElements(elementsRef.current), focusableLen = focusableElements_1.length;
|
|
4714
|
-
if (focusableLen === 0)
|
|
4720
|
+
if (focusableLen === 0)
|
|
4721
|
+
return;
|
|
4715
4722
|
const focusedElement = elementsRef.current[activeIndexRef.current];
|
|
4716
4723
|
let focusedIndex = focusableElements_1.indexOf(focusedElement);
|
|
4717
4724
|
focusedIndex = (focusedIndex - 1 + focusableLen) % focusableLen;
|
|
@@ -4722,7 +4729,8 @@ function useMenuController(props) {
|
|
|
4722
4729
|
if (event.key === "ArrowDown") {
|
|
4723
4730
|
event.preventDefault(), event.stopPropagation();
|
|
4724
4731
|
const focusableElements_2 = _getFocusableElements(elementsRef.current), focusableLen_0 = focusableElements_2.length;
|
|
4725
|
-
if (focusableLen_0 === 0)
|
|
4732
|
+
if (focusableLen_0 === 0)
|
|
4733
|
+
return;
|
|
4726
4734
|
const focusedElement_0 = elementsRef.current[activeIndexRef.current];
|
|
4727
4735
|
let focusedIndex_0 = focusableElements_2.indexOf(focusedElement_0);
|
|
4728
4736
|
focusedIndex_0 = (focusedIndex_0 + 1) % focusableLen_0;
|
|
@@ -4731,14 +4739,23 @@ function useMenuController(props) {
|
|
|
4731
4739
|
return;
|
|
4732
4740
|
}
|
|
4733
4741
|
onKeyDown && onKeyDown(event);
|
|
4734
|
-
}, [onKeyDown, originElement,
|
|
4742
|
+
}, $[4] = onKeyDown, $[5] = originElement, $[6] = t3) : t3 = $[6];
|
|
4743
|
+
const handleKeyDown = t3;
|
|
4744
|
+
let t4;
|
|
4745
|
+
$[7] === Symbol.for("react.memo_cache_sentinel") ? (t4 = (event_0) => {
|
|
4735
4746
|
const element_0 = event_0.currentTarget, currentIndex_3 = elementsRef.current.indexOf(element_0);
|
|
4736
4747
|
setActiveIndex(currentIndex_3);
|
|
4737
|
-
}, [
|
|
4748
|
+
}, $[7] = t4) : t4 = $[7];
|
|
4749
|
+
const handleItemMouseEnter = t4;
|
|
4750
|
+
let t5;
|
|
4751
|
+
$[8] !== rootElementRef ? (t5 = () => {
|
|
4738
4752
|
setActiveIndex(-2), rootElementRef.current?.focus();
|
|
4739
|
-
}, [rootElementRef,
|
|
4740
|
-
|
|
4741
|
-
|
|
4753
|
+
}, $[8] = rootElementRef, $[9] = t5) : t5 = $[9];
|
|
4754
|
+
const handleItemMouseLeave = t5;
|
|
4755
|
+
let t6, t7;
|
|
4756
|
+
$[10] !== activeIndex || $[11] !== rootElementRef || $[12] !== shouldFocus ? (t6 = () => {
|
|
4757
|
+
if (!rootElementRef.current)
|
|
4758
|
+
return;
|
|
4742
4759
|
const rafId = requestAnimationFrame(() => {
|
|
4743
4760
|
if (activeIndex === -1) {
|
|
4744
4761
|
if (shouldFocus === "first") {
|
|
@@ -4760,20 +4777,24 @@ function useMenuController(props) {
|
|
|
4760
4777
|
(elementsRef.current[activeIndex] || null)?.focus();
|
|
4761
4778
|
});
|
|
4762
4779
|
return () => cancelAnimationFrame(rafId);
|
|
4763
|
-
}, [activeIndex,
|
|
4780
|
+
}, t7 = [activeIndex, rootElementRef, setActiveIndex, shouldFocus], $[10] = activeIndex, $[11] = rootElementRef, $[12] = shouldFocus, $[13] = t6, $[14] = t7) : (t6 = $[13], t7 = $[14]), useEffect(t6, t7);
|
|
4781
|
+
let t8;
|
|
4782
|
+
return $[15] !== activeElement || $[16] !== activeIndex || $[17] !== handleItemMouseLeave || $[18] !== handleKeyDown || $[19] !== mount ? (t8 = {
|
|
4764
4783
|
activeElement,
|
|
4765
4784
|
activeIndex,
|
|
4766
4785
|
handleItemMouseEnter,
|
|
4767
4786
|
handleItemMouseLeave,
|
|
4768
4787
|
handleKeyDown,
|
|
4769
4788
|
mount
|
|
4770
|
-
};
|
|
4789
|
+
}, $[15] = activeElement, $[16] = activeIndex, $[17] = handleItemMouseLeave, $[18] = handleKeyDown, $[19] = mount, $[20] = t8) : t8 = $[20], t8;
|
|
4790
|
+
}
|
|
4791
|
+
function _temp$1() {
|
|
4771
4792
|
}
|
|
4772
4793
|
const StyledMenu = styled(Box).withConfig({
|
|
4773
4794
|
displayName: "StyledMenu",
|
|
4774
4795
|
componentId: "sc-xt0tnv-0"
|
|
4775
4796
|
})`outline:none;overflow:auto;`, Menu = forwardRef(function(props, forwardedRef) {
|
|
4776
|
-
const $ = c(
|
|
4797
|
+
const $ = c(49);
|
|
4777
4798
|
let _shouldFocus, children, onClickOutside, onEscape, onItemClick, onItemSelect, onKeyDown, originElement, registerElement, restProps, t0, t1;
|
|
4778
4799
|
if ($[0] !== props) {
|
|
4779
4800
|
const {
|
|
@@ -4832,27 +4853,24 @@ const StyledMenu = styled(Box).withConfig({
|
|
|
4832
4853
|
isTopLayer && event.key === "Escape" && (event.stopPropagation(), onEscape && onEscape());
|
|
4833
4854
|
}, $[25] = isTopLayer, $[26] = onEscape, $[27] = t8) : t8 = $[27], useGlobalKeyDown(t8);
|
|
4834
4855
|
let t9;
|
|
4835
|
-
$[28] !== activeElement || $[29] !==
|
|
4836
|
-
version:
|
|
4856
|
+
$[28] !== activeElement || $[29] !== handleItemMouseEnter || $[30] !== handleItemMouseLeave || $[31] !== mount || $[32] !== onClickOutside || $[33] !== onEscape || $[34] !== onItemClick || $[35] !== registerElement ? (t9 = {
|
|
4857
|
+
version: 2,
|
|
4837
4858
|
activeElement,
|
|
4838
|
-
activeIndex,
|
|
4839
4859
|
mount,
|
|
4840
4860
|
onClickOutside,
|
|
4841
4861
|
onEscape,
|
|
4842
4862
|
onItemClick,
|
|
4843
4863
|
onItemMouseEnter: handleItemMouseEnter,
|
|
4844
4864
|
onItemMouseLeave: handleItemMouseLeave,
|
|
4845
|
-
registerElement
|
|
4846
|
-
|
|
4847
|
-
onMouseLeave: handleItemMouseLeave
|
|
4848
|
-
}, $[28] = activeElement, $[29] = activeIndex, $[30] = handleItemMouseEnter, $[31] = handleItemMouseLeave, $[32] = mount, $[33] = onClickOutside, $[34] = onEscape, $[35] = onItemClick, $[36] = registerElement, $[37] = t9) : t9 = $[37];
|
|
4865
|
+
registerElement
|
|
4866
|
+
}, $[28] = activeElement, $[29] = handleItemMouseEnter, $[30] = handleItemMouseLeave, $[31] = mount, $[32] = onClickOutside, $[33] = onEscape, $[34] = onItemClick, $[35] = registerElement, $[36] = t9) : t9 = $[36];
|
|
4849
4867
|
const value = t9;
|
|
4850
4868
|
let t10;
|
|
4851
|
-
$[
|
|
4869
|
+
$[37] !== children || $[38] !== space ? (t10 = /* @__PURE__ */ jsx(Stack, { space, children }), $[37] = children, $[38] = space, $[39] = t10) : t10 = $[39];
|
|
4852
4870
|
let t11;
|
|
4853
|
-
$[
|
|
4871
|
+
$[40] !== handleKeyDown || $[41] !== handleRefChange || $[42] !== padding || $[43] !== restProps || $[44] !== t10 ? (t11 = /* @__PURE__ */ jsx(StyledMenu, { "data-ui": "Menu", ...restProps, onKeyDown: handleKeyDown, padding, ref: handleRefChange, role: "menu", tabIndex: -1, children: t10 }), $[40] = handleKeyDown, $[41] = handleRefChange, $[42] = padding, $[43] = restProps, $[44] = t10, $[45] = t11) : t11 = $[45];
|
|
4854
4872
|
let t12;
|
|
4855
|
-
return $[
|
|
4873
|
+
return $[46] !== t11 || $[47] !== value ? (t12 = /* @__PURE__ */ jsx(MenuContext.Provider, { value, children: t11 }), $[46] = t11, $[47] = value, $[48] = t12) : t12 = $[48], t12;
|
|
4856
4874
|
});
|
|
4857
4875
|
Menu.displayName = "ForwardRef(Menu)";
|
|
4858
4876
|
const MenuDivider = styled.hr.withConfig({
|
|
@@ -4969,7 +4987,7 @@ function useMenu() {
|
|
|
4969
4987
|
const value = useContext(MenuContext);
|
|
4970
4988
|
if (!value)
|
|
4971
4989
|
throw new Error("useMenu(): missing context value");
|
|
4972
|
-
if (!isRecord(value) || value.version !==
|
|
4990
|
+
if (!isRecord(value) || value.version !== 2)
|
|
4973
4991
|
throw new Error("useMenu(): the context value is not compatible");
|
|
4974
4992
|
return value;
|
|
4975
4993
|
}
|
|
@@ -5001,7 +5019,7 @@ function MenuGroup(props) {
|
|
|
5001
5019
|
onItemClick,
|
|
5002
5020
|
onItemMouseEnter: _onItemMouseEnter,
|
|
5003
5021
|
registerElement
|
|
5004
|
-
} = menu, onItemMouseEnter = _onItemMouseEnter ?? menu.
|
|
5022
|
+
} = menu, onItemMouseEnter = _onItemMouseEnter ?? menu.onItemMouseEnter, [rootElement, setRootElement] = useState(null), [open, setOpen] = useState(!1), [shouldFocus, setShouldFocus] = useState(null), active = !!activeElement && activeElement === rootElement, [withinMenu, setWithinMenu] = useState(!1);
|
|
5005
5023
|
let t6;
|
|
5006
5024
|
$[14] !== onItemMouseEnter ? (t6 = (event) => {
|
|
5007
5025
|
setWithinMenu(!1), onItemMouseEnter(event), setOpen(!0);
|
|
@@ -5114,7 +5132,7 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
|
|
|
5114
5132
|
onItemClick,
|
|
5115
5133
|
onItemMouseEnter: _onItemMouseEnter,
|
|
5116
5134
|
onItemMouseLeave: _onItemMouseLeave
|
|
5117
|
-
} = menu, onItemMouseEnter = _onItemMouseEnter ?? menu.
|
|
5135
|
+
} = menu, onItemMouseEnter = _onItemMouseEnter ?? menu.onItemMouseEnter, onItemMouseLeave = _onItemMouseLeave ?? menu.onItemMouseLeave, [rootElement, setRootElement] = useState(null), active = !!activeElement && activeElement === rootElement, ref = useRef(null);
|
|
5118
5136
|
let t6;
|
|
5119
5137
|
$[23] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => ref.current, $[23] = t6) : t6 = $[23], useImperativeHandle(forwardedRef, t6);
|
|
5120
5138
|
let t7, t8;
|