@sanity/ui 2.8.7 → 2.8.9
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/getTheme_v2.js +7 -10
- package/dist/_chunks-cjs/getTheme_v2.js.map +1 -1
- package/dist/_chunks-es/getTheme_v2.mjs +7 -10
- package/dist/_chunks-es/getTheme_v2.mjs.map +1 -1
- package/dist/_legacy/getTheme_v2.esm.js +7 -10
- package/dist/_legacy/getTheme_v2.esm.js.map +1 -1
- package/dist/index.esm.js +94 -144
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +94 -144
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +94 -144
- package/dist/index.mjs.map +1 -1
- package/dist/theme.esm.js +218 -235
- package/dist/theme.esm.js.map +1 -1
- package/dist/theme.js +218 -235
- package/dist/theme.js.map +1 -1
- package/dist/theme.mjs +218 -235
- package/dist/theme.mjs.map +1 -1
- package/package.json +32 -32
package/dist/index.esm.js
CHANGED
|
@@ -37,7 +37,7 @@ function rem(pixelValue) {
|
|
|
37
37
|
return pixelValue === 0 ? 0 : `${pixelValue / 16}rem`;
|
|
38
38
|
}
|
|
39
39
|
function _responsive(media, values, callback) {
|
|
40
|
-
return (
|
|
40
|
+
return (values?.map(callback) || []).map((statement, mediaIndex) => mediaIndex === 0 ? statement : { [`@media screen and (min-width: ${media[mediaIndex - 1]}px)`]: statement });
|
|
41
41
|
}
|
|
42
42
|
function _getArrayProp(val, defaultVal) {
|
|
43
43
|
return val === void 0 ? defaultVal || EMPTY_ARRAY : Array.isArray(val) ? val : [val];
|
|
@@ -123,7 +123,7 @@ function responsiveTextFont(props) {
|
|
|
123
123
|
return responsiveFont("text", props);
|
|
124
124
|
}
|
|
125
125
|
function useArrayProp(val, defaultVal) {
|
|
126
|
-
const __perf_hash__ = useMemo(() => JSON.stringify(val
|
|
126
|
+
const __perf_hash__ = useMemo(() => JSON.stringify(val ?? defaultVal), [defaultVal, val]);
|
|
127
127
|
return useMemo(
|
|
128
128
|
() => _getArrayProp(val, defaultVal),
|
|
129
129
|
// Improve performance: Keep object identify for a given hash of the value
|
|
@@ -178,7 +178,7 @@ function useClickOutsideEvent(listener, elementsArg = () => EMPTY_ARRAY, boundar
|
|
|
178
178
|
const target = evt.target;
|
|
179
179
|
if (!(target instanceof Node))
|
|
180
180
|
return;
|
|
181
|
-
const resolvedBoundaryElement = boundaryElement
|
|
181
|
+
const resolvedBoundaryElement = boundaryElement?.();
|
|
182
182
|
if (resolvedBoundaryElement && !resolvedBoundaryElement.contains(target))
|
|
183
183
|
return;
|
|
184
184
|
const elements = elementsArg().flat();
|
|
@@ -197,8 +197,7 @@ function useClickOutsideEvent(listener, elementsArg = () => EMPTY_ARRAY, boundar
|
|
|
197
197
|
}
|
|
198
198
|
function useCustomValidity(ref, customValidity) {
|
|
199
199
|
useEffect(() => {
|
|
200
|
-
|
|
201
|
-
(_a = ref.current) == null || _a.setCustomValidity(customValidity || "");
|
|
200
|
+
ref.current?.setCustomValidity(customValidity || "");
|
|
202
201
|
}, [customValidity, ref]);
|
|
203
202
|
}
|
|
204
203
|
var resizeObservers = [], hasActiveObservations = function() {
|
|
@@ -248,7 +247,7 @@ var freeze = function(obj) {
|
|
|
248
247
|
var _a;
|
|
249
248
|
if (obj instanceof Element)
|
|
250
249
|
return !0;
|
|
251
|
-
var scope = (_a = obj
|
|
250
|
+
var scope = (_a = obj?.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
|
|
252
251
|
return !!(scope && obj instanceof scope.Element);
|
|
253
252
|
}, isReplacedElement = function(target) {
|
|
254
253
|
switch (target.tagName) {
|
|
@@ -531,8 +530,7 @@ function useElementSize(element) {
|
|
|
531
530
|
}, [element]), size2;
|
|
532
531
|
}
|
|
533
532
|
function useElementRect(element) {
|
|
534
|
-
|
|
535
|
-
return (elementSize == null ? void 0 : elementSize._contentRect) || null;
|
|
533
|
+
return useElementSize(element)?._contentRect || null;
|
|
536
534
|
}
|
|
537
535
|
function useForwardedRef(ref) {
|
|
538
536
|
const innerRef = useRef(null);
|
|
@@ -574,9 +572,9 @@ const ThemeContext = createGlobalScopedContext(
|
|
|
574
572
|
function ThemeProvider(props) {
|
|
575
573
|
const parentTheme = useContext(ThemeContext), {
|
|
576
574
|
children,
|
|
577
|
-
scheme =
|
|
578
|
-
theme: rootTheme =
|
|
579
|
-
tone =
|
|
575
|
+
scheme = parentTheme?.scheme || "light",
|
|
576
|
+
theme: rootTheme = parentTheme?.theme || null,
|
|
577
|
+
tone = parentTheme?.tone || "default"
|
|
580
578
|
} = props, themeContext = useMemo(() => rootTheme ? {
|
|
581
579
|
version: 0,
|
|
582
580
|
theme: rootTheme,
|
|
@@ -654,8 +652,7 @@ function responsiveBorderStyle() {
|
|
|
654
652
|
return [border, borderTop, borderRight, borderBottom, borderLeft];
|
|
655
653
|
}
|
|
656
654
|
function border(props) {
|
|
657
|
-
|
|
658
|
-
const { card, media } = getTheme_v2(props.theme), borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
|
|
655
|
+
const { card, media } = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
|
|
659
656
|
return _responsive(
|
|
660
657
|
media,
|
|
661
658
|
props.$border,
|
|
@@ -663,8 +660,7 @@ function border(props) {
|
|
|
663
660
|
);
|
|
664
661
|
}
|
|
665
662
|
function borderTop(props) {
|
|
666
|
-
|
|
667
|
-
const { card, media } = getTheme_v2(props.theme), borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
|
|
663
|
+
const { card, media } = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
|
|
668
664
|
return _responsive(
|
|
669
665
|
media,
|
|
670
666
|
props.$borderTop,
|
|
@@ -672,8 +668,7 @@ function borderTop(props) {
|
|
|
672
668
|
);
|
|
673
669
|
}
|
|
674
670
|
function borderRight(props) {
|
|
675
|
-
|
|
676
|
-
const { card, media } = getTheme_v2(props.theme), borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
|
|
671
|
+
const { card, media } = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
|
|
677
672
|
return _responsive(
|
|
678
673
|
media,
|
|
679
674
|
props.$borderRight,
|
|
@@ -681,8 +676,7 @@ function borderRight(props) {
|
|
|
681
676
|
);
|
|
682
677
|
}
|
|
683
678
|
function borderBottom(props) {
|
|
684
|
-
|
|
685
|
-
const { card, media } = getTheme_v2(props.theme), borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
|
|
679
|
+
const { card, media } = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
|
|
686
680
|
return _responsive(
|
|
687
681
|
media,
|
|
688
682
|
props.$borderBottom,
|
|
@@ -690,8 +684,7 @@ function borderBottom(props) {
|
|
|
690
684
|
);
|
|
691
685
|
}
|
|
692
686
|
function borderLeft(props) {
|
|
693
|
-
|
|
694
|
-
const { card, media } = getTheme_v2(props.theme), borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
|
|
687
|
+
const { card, media } = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
|
|
695
688
|
return _responsive(
|
|
696
689
|
media,
|
|
697
690
|
props.$borderLeft,
|
|
@@ -1919,7 +1912,7 @@ function _cardColorStyle(base, color, checkered = !1) {
|
|
|
1919
1912
|
function buttonBaseStyles(props) {
|
|
1920
1913
|
const { $width } = props, { style } = getTheme_v2(props.theme);
|
|
1921
1914
|
return css`
|
|
1922
|
-
${style
|
|
1915
|
+
${style?.button};
|
|
1923
1916
|
|
|
1924
1917
|
-webkit-font-smoothing: inherit;
|
|
1925
1918
|
appearance: none;
|
|
@@ -1962,7 +1955,6 @@ function combineBoxShadow(...boxShadows) {
|
|
|
1962
1955
|
return boxShadows.filter(Boolean).join(",");
|
|
1963
1956
|
}
|
|
1964
1957
|
function buttonColorStyles(props) {
|
|
1965
|
-
var _a;
|
|
1966
1958
|
const { $mode } = props, { button, color: baseColor, style } = getTheme_v2(props.theme), shadow = props.$mode === "ghost", mode = baseColor.button[$mode] || baseColor.button.default, color = mode[props.$tone] || mode.default, border2 = {
|
|
1967
1959
|
width: button.border.width,
|
|
1968
1960
|
color: "var(--card-border-color)"
|
|
@@ -2000,7 +1992,7 @@ function buttonColorStyles(props) {
|
|
|
2000
1992
|
"&[data-selected]": _cardColorStyle(baseColor, color.pressed)
|
|
2001
1993
|
}
|
|
2002
1994
|
},
|
|
2003
|
-
|
|
1995
|
+
style?.button?.root
|
|
2004
1996
|
].filter(Boolean);
|
|
2005
1997
|
}
|
|
2006
1998
|
const Root$t = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles), LoadingBox = styled.div`
|
|
@@ -2136,7 +2128,6 @@ function cardBaseStyle(props) {
|
|
|
2136
2128
|
`;
|
|
2137
2129
|
}
|
|
2138
2130
|
function cardColorStyle(props) {
|
|
2139
|
-
var _a;
|
|
2140
2131
|
const { $checkered, $focusRing, $muted } = props, { card, color, style } = getTheme_v2(props.theme), border2 = { width: card.border.width, color: "var(--card-border-color)" };
|
|
2141
2132
|
return css`
|
|
2142
2133
|
color-scheme: ${color._dark ? "dark" : "light"};
|
|
@@ -2222,7 +2213,7 @@ function cardColorStyle(props) {
|
|
|
2222
2213
|
}
|
|
2223
2214
|
}
|
|
2224
2215
|
|
|
2225
|
-
${
|
|
2216
|
+
${style?.card?.root}
|
|
2226
2217
|
`;
|
|
2227
2218
|
}
|
|
2228
2219
|
const Root$s = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = forwardRef(function(props, ref) {
|
|
@@ -2715,8 +2706,7 @@ KBD.displayName = "ForwardRef(KBD)";
|
|
|
2715
2706
|
const origin = {
|
|
2716
2707
|
name: "@sanity/ui/origin",
|
|
2717
2708
|
fn({ middlewareData, placement, rects }) {
|
|
2718
|
-
|
|
2719
|
-
const [side] = placement.split("-"), floatingWidth = rects.floating.width, floatingHeight = rects.floating.height, shiftX = ((_a = middlewareData.shift) == null ? void 0 : _a.x) || 0, shiftY = ((_b = middlewareData.shift) == null ? void 0 : _b.y) || 0;
|
|
2709
|
+
const [side] = placement.split("-"), floatingWidth = rects.floating.width, floatingHeight = rects.floating.height, shiftX = middlewareData.shift?.x || 0, shiftY = middlewareData.shift?.y || 0;
|
|
2720
2710
|
if (floatingWidth <= 0 || floatingHeight <= 0)
|
|
2721
2711
|
return {};
|
|
2722
2712
|
const isVerticalPlacement = ["bottom", "top"].includes(side), { originX, originY } = isVerticalPlacement ? {
|
|
@@ -2898,10 +2888,7 @@ function findMinBreakpoints(media, width) {
|
|
|
2898
2888
|
return ret;
|
|
2899
2889
|
}
|
|
2900
2890
|
const ElementQuery = forwardRef(function(props, forwardedRef) {
|
|
2901
|
-
const theme = useTheme_v2(), { children, media = theme.media, ...restProps } = props, ref = useRef(null), [element, setElement] = useState(null), elementSize = useElementSize(element), width = useMemo(() =>
|
|
2902
|
-
var _a;
|
|
2903
|
-
return (_a = elementSize == null ? void 0 : elementSize.border.width) != null ? _a : window.innerWidth;
|
|
2904
|
-
}, [elementSize]), max = useMemo(() => findMaxBreakpoints(media, width), [media, width]), min = useMemo(() => findMinBreakpoints(media, width), [media, width]);
|
|
2891
|
+
const theme = useTheme_v2(), { children, media = theme.media, ...restProps } = props, ref = useRef(null), [element, setElement] = useState(null), elementSize = useElementSize(element), width = useMemo(() => elementSize?.border.width ?? window.innerWidth, [elementSize]), max = useMemo(() => findMaxBreakpoints(media, width), [media, width]), min = useMemo(() => findMinBreakpoints(media, width), [media, width]);
|
|
2905
2892
|
useImperativeHandle(forwardedRef, () => ref.current);
|
|
2906
2893
|
const setRef = useCallback((el) => {
|
|
2907
2894
|
ref.current = el, setElement(el);
|
|
@@ -2919,11 +2906,8 @@ const ElementQuery = forwardRef(function(props, forwardedRef) {
|
|
|
2919
2906
|
);
|
|
2920
2907
|
});
|
|
2921
2908
|
ElementQuery.displayName = "ForwardRef(ElementQuery)";
|
|
2922
|
-
var __defProp = Object.defineProperty, __defNormalProp = (obj, key2, value) => key2 in obj ? __defProp(obj, key2, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key2] = value, __publicField = (obj, key2, value) => __defNormalProp(obj, key2 + "", value);
|
|
2923
2909
|
class ErrorBoundary extends Component {
|
|
2924
|
-
|
|
2925
|
-
super(...arguments), __publicField(this, "state", { error: null });
|
|
2926
|
-
}
|
|
2910
|
+
state = { error: null };
|
|
2927
2911
|
static getDerivedStateFromError(error) {
|
|
2928
2912
|
return { error };
|
|
2929
2913
|
}
|
|
@@ -2933,7 +2917,7 @@ class ErrorBoundary extends Component {
|
|
|
2933
2917
|
render() {
|
|
2934
2918
|
const { error } = this.state;
|
|
2935
2919
|
if (error) {
|
|
2936
|
-
const message = typeof
|
|
2920
|
+
const message = typeof error?.message == "string" ? error.message : "Error";
|
|
2937
2921
|
return /* @__PURE__ */ jsx(Code, { children: message });
|
|
2938
2922
|
}
|
|
2939
2923
|
return this.props.children;
|
|
@@ -3038,24 +3022,22 @@ function _isScrollable(el) {
|
|
|
3038
3022
|
return style.overflowX.includes("auto") || style.overflowX.includes("scroll") || style.overflowY.includes("auto") || style.overflowY.includes("scroll");
|
|
3039
3023
|
}
|
|
3040
3024
|
function LayerProvider(props) {
|
|
3041
|
-
|
|
3042
|
-
const { children, zOffset: zOffsetProp = 0 } = props, parentContextValue = useContext(LayerContext), parent = parentContextValue && getLayerContext(parentContextValue), parentRegisterChild = parent == null ? void 0 : parent.registerChild, level = ((_a = parent == null ? void 0 : parent.level) != null ? _a : 0) + 1, zOffset = useArrayProp(zOffsetProp), maxMediaIndex = zOffset.length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex], [, setChildLayers] = useState({}), [size2, setSize] = useState(0), isTopLayer = size2 === 0, registerChild = useCallback(
|
|
3025
|
+
const { children, zOffset: zOffsetProp = 0 } = props, parentContextValue = useContext(LayerContext), parent = parentContextValue && getLayerContext(parentContextValue), parentRegisterChild = parent?.registerChild, level = (parent?.level ?? 0) + 1, zOffset = useArrayProp(zOffsetProp), maxMediaIndex = zOffset.length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex], [, setChildLayers] = useState({}), [size2, setSize] = useState(0), isTopLayer = size2 === 0, registerChild = useCallback(
|
|
3043
3026
|
(childLevel) => {
|
|
3044
|
-
const parentDispose = parentRegisterChild
|
|
3027
|
+
const parentDispose = parentRegisterChild?.(childLevel);
|
|
3045
3028
|
return childLevel !== void 0 ? setChildLayers((state) => {
|
|
3046
|
-
|
|
3047
|
-
const prevLen = (_a2 = state[childLevel]) != null ? _a2 : 0, nextState = { ...state, [childLevel]: prevLen + 1 };
|
|
3029
|
+
const prevLen = state[childLevel] ?? 0, nextState = { ...state, [childLevel]: prevLen + 1 };
|
|
3048
3030
|
return setSize(Object.keys(nextState).length), nextState;
|
|
3049
3031
|
}) : setSize((v) => v + 1), () => {
|
|
3050
3032
|
childLevel !== void 0 ? setChildLayers((state) => {
|
|
3051
3033
|
const nextState = { ...state };
|
|
3052
3034
|
return nextState[childLevel] === 1 ? (delete nextState[childLevel], setSize(Object.keys(nextState).length)) : nextState[childLevel] -= 1, nextState;
|
|
3053
|
-
}) : setSize((v) => v - 1), parentDispose
|
|
3035
|
+
}) : setSize((v) => v - 1), parentDispose?.();
|
|
3054
3036
|
};
|
|
3055
3037
|
},
|
|
3056
3038
|
[parentRegisterChild]
|
|
3057
3039
|
);
|
|
3058
|
-
useEffect(() => parentRegisterChild
|
|
3040
|
+
useEffect(() => parentRegisterChild?.(level), [level, parentRegisterChild]);
|
|
3059
3041
|
const value = useMemo(
|
|
3060
3042
|
() => ({
|
|
3061
3043
|
version: 0,
|
|
@@ -3073,11 +3055,11 @@ LayerProvider.displayName = "LayerProvider";
|
|
|
3073
3055
|
const Root$j = styled.div({ position: "relative" }), LayerChildren = forwardRef(function(props, forwardedRef) {
|
|
3074
3056
|
const { children, onActivate, onFocus, style = EMPTY_RECORD, ...restProps } = props, { zIndex, isTopLayer } = useLayer(), lastFocusedRef = useRef(null), ref = useRef(null), isTopLayerRef = useRef(isTopLayer);
|
|
3075
3057
|
useImperativeHandle(forwardedRef, () => ref.current), useEffect(() => {
|
|
3076
|
-
isTopLayerRef.current !== isTopLayer && isTopLayer &&
|
|
3058
|
+
isTopLayerRef.current !== isTopLayer && isTopLayer && onActivate?.({ activeElement: lastFocusedRef.current }), isTopLayerRef.current = isTopLayer;
|
|
3077
3059
|
}, [isTopLayer, onActivate]);
|
|
3078
3060
|
const handleFocus = useCallback(
|
|
3079
3061
|
(event) => {
|
|
3080
|
-
onFocus
|
|
3062
|
+
onFocus?.(event);
|
|
3081
3063
|
const rootElement = ref.current, target = document.activeElement;
|
|
3082
3064
|
!isTopLayer || !rootElement || !target || isHTMLElement(target) && containsOrEqualsElement(rootElement, target) && (lastFocusedRef.current = target);
|
|
3083
3065
|
},
|
|
@@ -3107,8 +3089,7 @@ function usePortal() {
|
|
|
3107
3089
|
return value;
|
|
3108
3090
|
}
|
|
3109
3091
|
function Portal(props) {
|
|
3110
|
-
|
|
3111
|
-
const { children, __unstable_name: name } = props, portal = usePortal(), portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || ((_a = portal.elements) == null ? void 0 : _a.default);
|
|
3092
|
+
const { children, __unstable_name: name } = props, portal = usePortal(), portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default;
|
|
3112
3093
|
return portalElement ? createPortal(children, portalElement) : null;
|
|
3113
3094
|
}
|
|
3114
3095
|
Portal.displayName = "Portal";
|
|
@@ -3248,7 +3229,7 @@ function calcMaxWidth(params) {
|
|
|
3248
3229
|
const { boundaryWidth, currentWidth } = params;
|
|
3249
3230
|
if (!(currentWidth === void 0 && boundaryWidth === void 0))
|
|
3250
3231
|
return Math.min(
|
|
3251
|
-
currentWidth
|
|
3232
|
+
currentWidth ?? 1 / 0,
|
|
3252
3233
|
(boundaryWidth || 1 / 0) - DEFAULT_POPOVER_PADDING * 2
|
|
3253
3234
|
);
|
|
3254
3235
|
}
|
|
@@ -3291,7 +3272,7 @@ const MotionCard$1 = styled(motion(Card))`
|
|
|
3291
3272
|
} = props, { zIndex } = useLayer(), margins = useMemo(
|
|
3292
3273
|
() => marginsProp || DEFAULT_POPOVER_MARGINS,
|
|
3293
3274
|
[marginsProp]
|
|
3294
|
-
), x = (xProp
|
|
3275
|
+
), x = (xProp ?? 0) + margins[3], y = (yProp ?? 0) + margins[0], rootStyle2 = useMemo(
|
|
3295
3276
|
() => ({
|
|
3296
3277
|
left: x,
|
|
3297
3278
|
originX,
|
|
@@ -3347,7 +3328,6 @@ const MotionCard$1 = styled(motion(Card))`
|
|
|
3347
3328
|
PopoverCard.displayName = "Memo(ForwardRef(PopoverCard))";
|
|
3348
3329
|
const Popover = memo(
|
|
3349
3330
|
forwardRef(function(props, forwardedRef) {
|
|
3350
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
|
|
3351
3331
|
const { container, layer } = useTheme_v2(), boundaryElementContext = useBoundaryElement(), {
|
|
3352
3332
|
__unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
|
|
3353
3333
|
animate: _animate = !1,
|
|
@@ -3357,9 +3337,9 @@ const Popover = memo(
|
|
|
3357
3337
|
constrainSize = !1,
|
|
3358
3338
|
content,
|
|
3359
3339
|
disabled,
|
|
3360
|
-
fallbackPlacements =
|
|
3340
|
+
fallbackPlacements = props.fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"],
|
|
3361
3341
|
matchReferenceWidth,
|
|
3362
|
-
floatingBoundary =
|
|
3342
|
+
floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
|
|
3363
3343
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
3364
3344
|
onActivate,
|
|
3365
3345
|
open,
|
|
@@ -3369,7 +3349,7 @@ const Popover = memo(
|
|
|
3369
3349
|
portal,
|
|
3370
3350
|
preventOverflow = !0,
|
|
3371
3351
|
radius: radiusProp = 3,
|
|
3372
|
-
referenceBoundary =
|
|
3352
|
+
referenceBoundary = props.boundaryElement ?? boundaryElementContext.element,
|
|
3373
3353
|
referenceElement,
|
|
3374
3354
|
scheme,
|
|
3375
3355
|
shadow: shadowProp = 3,
|
|
@@ -3378,12 +3358,12 @@ const Popover = memo(
|
|
|
3378
3358
|
zOffset: zOffsetProp = layer.popover.zOffset,
|
|
3379
3359
|
updateRef,
|
|
3380
3360
|
...restProps
|
|
3381
|
-
} = props, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize =
|
|
3361
|
+
} = props, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = useElementSize(boundaryElement)?.border, padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), widthArrayProp = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), ref = useRef(null), arrowRef = useRef(null), rootBoundary = "viewport";
|
|
3382
3362
|
useImperativeHandle(
|
|
3383
3363
|
forwardedRef,
|
|
3384
3364
|
() => ref.current
|
|
3385
3365
|
);
|
|
3386
|
-
const mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize
|
|
3366
|
+
const mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : void 0, width = calcCurrentWidth({
|
|
3387
3367
|
container,
|
|
3388
3368
|
mediaIndex,
|
|
3389
3369
|
width: widthArrayProp
|
|
@@ -3418,7 +3398,7 @@ const Popover = memo(
|
|
|
3418
3398
|
const _currentWidth = widthRef.current, _maxWidth = maxWidthRef.current;
|
|
3419
3399
|
matchReferenceWidth ? elements.floating.style.width = `${referenceWidth}px` : _currentWidth !== void 0 && (elements.floating.style.width = `${_currentWidth}px`), constrainSize && (elements.floating.style.maxWidth = `${Math.min(
|
|
3420
3400
|
availableWidth,
|
|
3421
|
-
_maxWidth
|
|
3401
|
+
_maxWidth ?? 1 / 0
|
|
3422
3402
|
)}px`, elements.floating.style.maxHeight = `${availableHeight}px`);
|
|
3423
3403
|
},
|
|
3424
3404
|
boundaryElement: floatingBoundary || void 0,
|
|
@@ -3459,7 +3439,7 @@ const Popover = memo(
|
|
|
3459
3439
|
middleware,
|
|
3460
3440
|
placement: placementProp,
|
|
3461
3441
|
whileElementsMounted: autoUpdate
|
|
3462
|
-
}), referenceHidden =
|
|
3442
|
+
}), referenceHidden = middlewareData.hide?.referenceHidden, arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, setArrow = useCallback((arrowEl) => {
|
|
3463
3443
|
arrowRef.current = arrowEl;
|
|
3464
3444
|
}, []), setFloating = useCallback(
|
|
3465
3445
|
(node) => {
|
|
@@ -3469,7 +3449,7 @@ const Popover = memo(
|
|
|
3469
3449
|
), setReference = useCallback(
|
|
3470
3450
|
(node) => {
|
|
3471
3451
|
refs.setReference(node);
|
|
3472
|
-
const childRef = childProp
|
|
3452
|
+
const childRef = childProp?.ref;
|
|
3473
3453
|
typeof childRef == "function" ? childRef(node) : childRef && (childRef.current = node);
|
|
3474
3454
|
},
|
|
3475
3455
|
[childProp, refs]
|
|
@@ -4164,8 +4144,7 @@ const CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Root$b = styled(Card).attrs({ forw
|
|
|
4164
4144
|
event.preventDefault(), event.stopPropagation();
|
|
4165
4145
|
}, []), handleClearClick = useCallback(
|
|
4166
4146
|
(event) => {
|
|
4167
|
-
|
|
4168
|
-
event.preventDefault(), event.stopPropagation(), onClear && onClear(), (_a = ref.current) == null || _a.focus();
|
|
4147
|
+
event.preventDefault(), event.stopPropagation(), onClear && onClear(), ref.current?.focus();
|
|
4169
4148
|
},
|
|
4170
4149
|
[onClear, ref]
|
|
4171
4150
|
), prefixNode = useMemo(
|
|
@@ -4393,7 +4372,7 @@ function useTooltipDelayGroup() {
|
|
|
4393
4372
|
return useContext(TooltipDelayGroupContext);
|
|
4394
4373
|
}
|
|
4395
4374
|
function TooltipDelayGroupProvider(props) {
|
|
4396
|
-
const { children, delay } = props, [isGroupActive, setIsGroupActive] = useDelayedState(!1), [openTooltipId, setOpenTooltipId] = useDelayedState(null), openDelay = typeof delay == "number" ? delay :
|
|
4375
|
+
const { children, delay } = props, [isGroupActive, setIsGroupActive] = useDelayedState(!1), [openTooltipId, setOpenTooltipId] = useDelayedState(null), openDelay = typeof delay == "number" ? delay : delay?.open || 0, closeDelay = typeof delay == "number" ? delay : delay?.close || 0, value = useMemo(
|
|
4397
4376
|
() => ({
|
|
4398
4377
|
isGroupActive,
|
|
4399
4378
|
setIsGroupActive,
|
|
@@ -4411,15 +4390,14 @@ TooltipDelayGroupProvider.displayName = "TooltipDelayGroupProvider";
|
|
|
4411
4390
|
const Root$a = styled(Layer)`
|
|
4412
4391
|
pointer-events: none;
|
|
4413
4392
|
`, Tooltip = forwardRef(function(props, forwardedRef) {
|
|
4414
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
4415
4393
|
const boundaryElementContext = useBoundaryElement(), { layer } = useTheme_v2(), {
|
|
4416
4394
|
animate: _animate = !1,
|
|
4417
4395
|
arrow: arrowProp = !1,
|
|
4418
|
-
boundaryElement = boundaryElementContext
|
|
4396
|
+
boundaryElement = boundaryElementContext?.element,
|
|
4419
4397
|
children: childProp,
|
|
4420
4398
|
content,
|
|
4421
4399
|
disabled,
|
|
4422
|
-
fallbackPlacements: fallbackPlacementsProp =
|
|
4400
|
+
fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"],
|
|
4423
4401
|
padding = 2,
|
|
4424
4402
|
placement: placementProp = "bottom",
|
|
4425
4403
|
portal: portalProp,
|
|
@@ -4431,7 +4409,7 @@ const Root$a = styled(Layer)`
|
|
|
4431
4409
|
...restProps
|
|
4432
4410
|
} = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), ref = useRef(null), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), rootBoundary = "viewport", [tooltipMaxWidth, setTooltipMaxWidth] = useState(0);
|
|
4433
4411
|
useImperativeHandle(forwardedRef, () => ref.current);
|
|
4434
|
-
const portal = usePortal(), portalElement = typeof portalProp == "string" ?
|
|
4412
|
+
const portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element, middleware = useMemo(() => {
|
|
4435
4413
|
const ret = [];
|
|
4436
4414
|
return ret.push(
|
|
4437
4415
|
flip({
|
|
@@ -4451,7 +4429,7 @@ const Root$a = styled(Layer)`
|
|
|
4451
4429
|
middleware,
|
|
4452
4430
|
placement: placementProp,
|
|
4453
4431
|
whileElementsMounted: autoUpdate
|
|
4454
|
-
}), arrowX =
|
|
4432
|
+
}), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup(), showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : delay?.open || 0, closeDelayProp = typeof delay == "number" ? delay : delay?.close || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp, handleIsOpenChange = useCallback(
|
|
4455
4433
|
(open, immediate) => {
|
|
4456
4434
|
if (isInsideGroup)
|
|
4457
4435
|
if (open) {
|
|
@@ -4467,40 +4445,34 @@ const Root$a = styled(Layer)`
|
|
|
4467
4445
|
[isInsideGroup, delayGroupContext, openDelay, tooltipId, closeDelay, setIsOpen]
|
|
4468
4446
|
), handleBlur = useCallback(
|
|
4469
4447
|
(e) => {
|
|
4470
|
-
|
|
4471
|
-
handleIsOpenChange(!1), (_b2 = (_a2 = childProp == null ? void 0 : childProp.props) == null ? void 0 : _a2.onBlur) == null || _b2.call(_a2, e);
|
|
4448
|
+
handleIsOpenChange(!1), childProp?.props?.onBlur?.(e);
|
|
4472
4449
|
},
|
|
4473
|
-
[childProp
|
|
4450
|
+
[childProp?.props, handleIsOpenChange]
|
|
4474
4451
|
), handleClick = useCallback(
|
|
4475
4452
|
(e) => {
|
|
4476
|
-
|
|
4477
|
-
handleIsOpenChange(!1, !0), (_b2 = childProp == null ? void 0 : (_a2 = childProp.props).onClick) == null || _b2.call(_a2, e);
|
|
4453
|
+
handleIsOpenChange(!1, !0), childProp?.props.onClick?.(e);
|
|
4478
4454
|
},
|
|
4479
|
-
[childProp
|
|
4455
|
+
[childProp?.props, handleIsOpenChange]
|
|
4480
4456
|
), handleContextMenu = useCallback(
|
|
4481
4457
|
(e) => {
|
|
4482
|
-
|
|
4483
|
-
handleIsOpenChange(!1, !0), (_b2 = childProp == null ? void 0 : (_a2 = childProp.props).onContextMenu) == null || _b2.call(_a2, e);
|
|
4458
|
+
handleIsOpenChange(!1, !0), childProp?.props.onContextMenu?.(e);
|
|
4484
4459
|
},
|
|
4485
|
-
[childProp
|
|
4460
|
+
[childProp?.props, handleIsOpenChange]
|
|
4486
4461
|
), handleFocus = useCallback(
|
|
4487
4462
|
(e) => {
|
|
4488
|
-
|
|
4489
|
-
handleIsOpenChange(!0), (_b2 = (_a2 = childProp == null ? void 0 : childProp.props) == null ? void 0 : _a2.onFocus) == null || _b2.call(_a2, e);
|
|
4463
|
+
handleIsOpenChange(!0), childProp?.props?.onFocus?.(e);
|
|
4490
4464
|
},
|
|
4491
|
-
[childProp
|
|
4465
|
+
[childProp?.props, handleIsOpenChange]
|
|
4492
4466
|
), handleMouseEnter = useCallback(
|
|
4493
4467
|
(e) => {
|
|
4494
|
-
|
|
4495
|
-
handleIsOpenChange(!0), (_b2 = (_a2 = childProp == null ? void 0 : childProp.props) == null ? void 0 : _a2.onMouseEnter) == null || _b2.call(_a2, e);
|
|
4468
|
+
handleIsOpenChange(!0), childProp?.props?.onMouseEnter?.(e);
|
|
4496
4469
|
},
|
|
4497
|
-
[childProp
|
|
4470
|
+
[childProp?.props, handleIsOpenChange]
|
|
4498
4471
|
), handleMouseLeave = useCallback(
|
|
4499
4472
|
(e) => {
|
|
4500
|
-
|
|
4501
|
-
handleIsOpenChange(!1), (_b2 = (_a2 = childProp == null ? void 0 : childProp.props) == null ? void 0 : _a2.onMouseLeave) == null || _b2.call(_a2, e);
|
|
4473
|
+
handleIsOpenChange(!1), childProp?.props?.onMouseLeave?.(e);
|
|
4502
4474
|
},
|
|
4503
|
-
[childProp
|
|
4475
|
+
[childProp?.props, handleIsOpenChange]
|
|
4504
4476
|
);
|
|
4505
4477
|
useCloseOnMouseLeave({ handleIsOpenChange, referenceElement, showTooltip }), useEffect(() => {
|
|
4506
4478
|
disabled && showTooltip && handleIsOpenChange(!1);
|
|
@@ -4517,7 +4489,7 @@ const Root$a = styled(Layer)`
|
|
|
4517
4489
|
}, [handleIsOpenChange, showTooltip]), useLayoutEffect(() => {
|
|
4518
4490
|
const availableWidths = [
|
|
4519
4491
|
...boundaryElement ? [boundaryElement.offsetWidth] : [],
|
|
4520
|
-
|
|
4492
|
+
portalElement?.offsetWidth || document.body.offsetWidth
|
|
4521
4493
|
];
|
|
4522
4494
|
setTooltipMaxWidth(Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2);
|
|
4523
4495
|
}, [boundaryElement, portalElement]);
|
|
@@ -4532,7 +4504,7 @@ const Root$a = styled(Layer)`
|
|
|
4532
4504
|
},
|
|
4533
4505
|
[refs]
|
|
4534
4506
|
), childRef = useRef(null);
|
|
4535
|
-
useImperativeHandle(childProp
|
|
4507
|
+
useImperativeHandle(childProp?.ref, () => childRef.current);
|
|
4536
4508
|
const child = useMemo(() => childProp ? cloneElement(childProp, {
|
|
4537
4509
|
onBlur: handleBlur,
|
|
4538
4510
|
onFocus: handleFocus,
|
|
@@ -4755,17 +4727,15 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
|
|
|
4755
4727
|
},
|
|
4756
4728
|
[onBlur, onQueryChange, relatedElements]
|
|
4757
4729
|
), handleRootFocus = useCallback((event) => {
|
|
4758
|
-
const listBoxElement = listBoxElementRef.current, focusedElement = event.target instanceof HTMLElement ? event.target : null, listFocused2 =
|
|
4730
|
+
const listBoxElement = listBoxElementRef.current, focusedElement = event.target instanceof HTMLElement ? event.target : null, listFocused2 = listBoxElement?.contains(focusedElement) || !1;
|
|
4759
4731
|
listFocused2 !== listFocusedRef.current && (listFocusedRef.current = listFocused2, dispatch({ type: "root/setListFocused", listFocused: listFocused2 }));
|
|
4760
4732
|
}, []), handleOptionSelect = useCallback(
|
|
4761
4733
|
(v) => {
|
|
4762
|
-
|
|
4763
|
-
dispatch({ type: "value/change", value: v }), popoverMouseWithinRef.current = !1, onSelect && onSelect(v), valueRef.current = v, onChange && onChange(v), onQueryChange && onQueryChange(null), (_a = inputElementRef.current) == null || _a.focus();
|
|
4734
|
+
dispatch({ type: "value/change", value: v }), popoverMouseWithinRef.current = !1, onSelect && onSelect(v), valueRef.current = v, onChange && onChange(v), onQueryChange && onQueryChange(null), inputElementRef.current?.focus();
|
|
4764
4735
|
},
|
|
4765
4736
|
[onChange, onSelect, onQueryChange]
|
|
4766
4737
|
), handleRootKeyDown = useCallback(
|
|
4767
4738
|
(event) => {
|
|
4768
|
-
var _a, _b;
|
|
4769
4739
|
if (event.key === "ArrowDown") {
|
|
4770
4740
|
if (event.preventDefault(), !filteredOptionsLen) return;
|
|
4771
4741
|
const activeOption = filteredOptions.find((o) => o.value === activeValue), activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1, nextActiveOption = filteredOptions[(activeIndex + 1) % filteredOptionsLen];
|
|
@@ -4779,12 +4749,12 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
|
|
|
4779
4749
|
return;
|
|
4780
4750
|
}
|
|
4781
4751
|
if (event.key === "Escape") {
|
|
4782
|
-
dispatch({ type: "root/escape" }), popoverMouseWithinRef.current = !1, onQueryChange && onQueryChange(null),
|
|
4752
|
+
dispatch({ type: "root/escape" }), popoverMouseWithinRef.current = !1, onQueryChange && onQueryChange(null), inputElementRef.current?.focus();
|
|
4783
4753
|
return;
|
|
4784
4754
|
}
|
|
4785
4755
|
const target = event.target, listEl = listBoxElementRef.current;
|
|
4786
|
-
if ((listEl === target || listEl
|
|
4787
|
-
|
|
4756
|
+
if ((listEl === target || listEl?.contains(target)) && !AUTOCOMPLETE_LISTBOX_IGNORE_KEYS.includes(event.key)) {
|
|
4757
|
+
inputElementRef.current?.focus();
|
|
4788
4758
|
return;
|
|
4789
4759
|
}
|
|
4790
4760
|
},
|
|
@@ -4810,8 +4780,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
|
|
|
4810
4780
|
}, []), handlePopoverMouseLeave = useCallback(() => {
|
|
4811
4781
|
popoverMouseWithinRef.current = !1;
|
|
4812
4782
|
}, []), handleClearButtonClick = useCallback(() => {
|
|
4813
|
-
|
|
4814
|
-
dispatch({ type: "root/clear" }), valueRef.current = "", onChange && onChange(""), onQueryChange && onQueryChange(null), (_a = inputElementRef.current) == null || _a.focus();
|
|
4783
|
+
dispatch({ type: "root/clear" }), valueRef.current = "", onChange && onChange(""), onQueryChange && onQueryChange(null), inputElementRef.current?.focus();
|
|
4815
4784
|
}, [onChange, onQueryChange]), handleClearButtonFocus = useCallback(() => {
|
|
4816
4785
|
dispatch({ type: "input/focus" });
|
|
4817
4786
|
}, []);
|
|
@@ -4850,10 +4819,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
|
|
|
4850
4819
|
[openButton]
|
|
4851
4820
|
), handleOpenClick = useCallback(
|
|
4852
4821
|
(event) => {
|
|
4853
|
-
dispatchOpen(), openButtonProps.onClick && openButtonProps.onClick(event), _raf(() =>
|
|
4854
|
-
var _a;
|
|
4855
|
-
return (_a = inputElementRef.current) == null ? void 0 : _a.focus();
|
|
4856
|
-
});
|
|
4822
|
+
dispatchOpen(), openButtonProps.onClick && openButtonProps.onClick(event), _raf(() => inputElementRef.current?.focus());
|
|
4857
4823
|
},
|
|
4858
4824
|
[openButtonProps, dispatchOpen]
|
|
4859
4825
|
), openButtonNode = useMemo(
|
|
@@ -4916,8 +4882,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
|
|
|
4916
4882
|
}
|
|
4917
4883
|
), handleListBoxKeyDown = useCallback(
|
|
4918
4884
|
(event) => {
|
|
4919
|
-
|
|
4920
|
-
event.key === "Tab" && listFocused && ((_a = inputElementRef.current) == null || _a.focus());
|
|
4885
|
+
event.key === "Tab" && listFocused && inputElementRef.current?.focus();
|
|
4921
4886
|
},
|
|
4922
4887
|
[listFocused]
|
|
4923
4888
|
), content = useMemo(() => filteredOptions.length === 0 ? null : /* @__PURE__ */ jsx(
|
|
@@ -5172,7 +5137,6 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
|
|
|
5172
5137
|
position: relative;
|
|
5173
5138
|
z-index: 3;
|
|
5174
5139
|
`, DialogCard = forwardRef(function(props, forwardedRef) {
|
|
5175
|
-
var _a;
|
|
5176
5140
|
const {
|
|
5177
5141
|
__unstable_autoFocus: autoFocus,
|
|
5178
5142
|
__unstable_hideCloseButton: hideCloseButton,
|
|
@@ -5188,7 +5152,7 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
|
|
|
5188
5152
|
scheme,
|
|
5189
5153
|
shadow: shadowProp,
|
|
5190
5154
|
width: widthProp
|
|
5191
|
-
} = props, portal = usePortal(), portalElement = portalProp ?
|
|
5155
|
+
} = props, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), width = useArrayProp(widthProp), ref = useRef(null), contentRef = useRef(null), layer = useLayer(), { isTopLayer } = layer, labelId = `${id}_label`, showCloseButton = !!onClose && hideCloseButton === !1, showHeader = !!header || showCloseButton;
|
|
5192
5156
|
return useImperativeHandle(forwardedRef, () => ref.current), useImperativeHandle(
|
|
5193
5157
|
forwardedContentRef,
|
|
5194
5158
|
() => contentRef.current
|
|
@@ -5230,7 +5194,6 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
|
|
|
5230
5194
|
});
|
|
5231
5195
|
DialogCard.displayName = "ForwardRef(DialogCard)";
|
|
5232
5196
|
const Dialog = forwardRef(function(props, ref) {
|
|
5233
|
-
var _a;
|
|
5234
5197
|
const dialog = useDialog(), { layer } = useTheme_v2(), {
|
|
5235
5198
|
__unstable_autoFocus: autoFocus = !0,
|
|
5236
5199
|
__unstable_hideCloseButton: hideCloseButton = !1,
|
|
@@ -5253,9 +5216,9 @@ const Dialog = forwardRef(function(props, ref) {
|
|
|
5253
5216
|
zOffset: zOffsetProp = dialog.zOffset || layer.dialog.zOffset,
|
|
5254
5217
|
animate: _animate = !1,
|
|
5255
5218
|
...restProps
|
|
5256
|
-
} = props, animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ?
|
|
5219
|
+
} = props, animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, cardRadius = useArrayProp(cardRadiusProp), padding = useArrayProp(paddingProp), position = useArrayProp(positionProp), width = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), preDivRef = useRef(null), postDivRef = useRef(null), cardRef = useRef(null), focusedElementRef = useRef(null), handleFocus = useCallback(
|
|
5257
5220
|
(event) => {
|
|
5258
|
-
onFocus
|
|
5221
|
+
onFocus?.(event);
|
|
5259
5222
|
const target = event.target, cardElement = cardRef.current;
|
|
5260
5223
|
if (cardElement && target === preDivRef.current) {
|
|
5261
5224
|
focusLastDescendant(cardElement);
|
|
@@ -5466,8 +5429,7 @@ function useMenuController(props) {
|
|
|
5466
5429
|
},
|
|
5467
5430
|
[setActiveIndex]
|
|
5468
5431
|
), handleItemMouseLeave = useCallback(() => {
|
|
5469
|
-
|
|
5470
|
-
setActiveIndex(-2), (_a = rootElementRef.current) == null || _a.focus();
|
|
5432
|
+
setActiveIndex(-2), rootElementRef.current?.focus();
|
|
5471
5433
|
}, [rootElementRef, setActiveIndex]);
|
|
5472
5434
|
return useEffect(() => {
|
|
5473
5435
|
if (!mounted) return;
|
|
@@ -5489,8 +5451,7 @@ function useMenuController(props) {
|
|
|
5489
5451
|
}
|
|
5490
5452
|
return;
|
|
5491
5453
|
}
|
|
5492
|
-
|
|
5493
|
-
element == null || element.focus();
|
|
5454
|
+
(elementsRef.current[activeIndex] || null)?.focus();
|
|
5494
5455
|
});
|
|
5495
5456
|
return () => cancelAnimationFrame(rafId);
|
|
5496
5457
|
}, [activeIndex, mounted, setActiveIndex, shouldFocus]), {
|
|
@@ -5678,20 +5639,17 @@ const MenuButton = forwardRef(function(props, forwardedRef) {
|
|
|
5678
5639
|
shouldFocus
|
|
5679
5640
|
]
|
|
5680
5641
|
), menu = menuProp && cloneElement(menuProp, menuProps), ref = useRef(null), button = useMemo(
|
|
5681
|
-
() => {
|
|
5682
|
-
|
|
5683
|
-
|
|
5684
|
-
|
|
5685
|
-
|
|
5686
|
-
|
|
5687
|
-
|
|
5688
|
-
|
|
5689
|
-
|
|
5690
|
-
|
|
5691
|
-
|
|
5692
|
-
selected: (_a = buttonProp.props.selected) != null ? _a : open
|
|
5693
|
-
});
|
|
5694
|
-
},
|
|
5642
|
+
() => buttonProp && cloneElement(buttonProp, {
|
|
5643
|
+
"data-ui": "MenuButton",
|
|
5644
|
+
id,
|
|
5645
|
+
onClick: handleButtonClick,
|
|
5646
|
+
onKeyDown: handleButtonKeyDown,
|
|
5647
|
+
onMouseDown: handleMouseDown,
|
|
5648
|
+
"aria-haspopup": !0,
|
|
5649
|
+
"aria-expanded": open,
|
|
5650
|
+
ref,
|
|
5651
|
+
selected: buttonProp.props.selected ?? open
|
|
5652
|
+
}),
|
|
5695
5653
|
[buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open]
|
|
5696
5654
|
);
|
|
5697
5655
|
useImperativeHandle(
|
|
@@ -5756,7 +5714,6 @@ function selectableBaseStyle() {
|
|
|
5756
5714
|
`;
|
|
5757
5715
|
}
|
|
5758
5716
|
function selectableColorStyle(props) {
|
|
5759
|
-
var _a;
|
|
5760
5717
|
const { $tone } = props, { color, style } = getTheme_v2(props.theme), tone = color.selectable[$tone];
|
|
5761
5718
|
return css`
|
|
5762
5719
|
${_cardColorStyle(color, tone.enabled)}
|
|
@@ -5825,7 +5782,7 @@ function selectableColorStyle(props) {
|
|
|
5825
5782
|
}
|
|
5826
5783
|
}
|
|
5827
5784
|
|
|
5828
|
-
${
|
|
5785
|
+
${style?.card?.root}
|
|
5829
5786
|
`;
|
|
5830
5787
|
}
|
|
5831
5788
|
const Selectable = styled(Box)(
|
|
@@ -5872,17 +5829,17 @@ function MenuGroup(props) {
|
|
|
5872
5829
|
), handleMenuKeyDown = useCallback(
|
|
5873
5830
|
(event) => {
|
|
5874
5831
|
event.key === "ArrowLeft" && (event.stopPropagation(), setOpen(!1), requestAnimationFrame(() => {
|
|
5875
|
-
rootElement
|
|
5832
|
+
rootElement?.focus();
|
|
5876
5833
|
}));
|
|
5877
5834
|
},
|
|
5878
5835
|
[rootElement]
|
|
5879
5836
|
), handleClick = useCallback(
|
|
5880
5837
|
(event) => {
|
|
5881
|
-
onClick
|
|
5838
|
+
onClick?.(event), setShouldFocus("first"), setOpen(!0);
|
|
5882
5839
|
},
|
|
5883
5840
|
[onClick]
|
|
5884
5841
|
), handleChildItemClick = useCallback(() => {
|
|
5885
|
-
setOpen(!1), onItemClick
|
|
5842
|
+
setOpen(!1), onItemClick?.();
|
|
5886
5843
|
}, [onItemClick]), handleMenuMouseEnter = useCallback(() => setWithinMenu(!0), []);
|
|
5887
5844
|
useEffect(() => mount(rootElement), [mount, rootElement]), useEffect(() => {
|
|
5888
5845
|
active || setOpen(!1);
|
|
@@ -6385,8 +6342,7 @@ function ToastProvider(props) {
|
|
|
6385
6342
|
[prefersReducedMotion]
|
|
6386
6343
|
), value = useMemo(() => ({ version: 0, push: (params) => {
|
|
6387
6344
|
const setState = (state2) => startTransition(() => _setState(state2)), id = params.id || String(toastId++), duration = params.duration || 5e3, dismiss = () => {
|
|
6388
|
-
|
|
6389
|
-
const timeoutId = (_a = toastsRef.current[id]) == null ? void 0 : _a.timeoutId;
|
|
6345
|
+
const timeoutId = toastsRef.current[id]?.timeoutId;
|
|
6390
6346
|
setState((prevState) => {
|
|
6391
6347
|
const idx = prevState.findIndex((t) => t.id === id);
|
|
6392
6348
|
if (idx > -1) {
|
|
@@ -6448,7 +6404,6 @@ function useToast() {
|
|
|
6448
6404
|
return value;
|
|
6449
6405
|
}
|
|
6450
6406
|
function _findPrevItemElement(state, itemElements, focusedElement) {
|
|
6451
|
-
var _a;
|
|
6452
6407
|
const idx = itemElements.indexOf(focusedElement), els = itemElements.slice(0, idx), len = els.length;
|
|
6453
6408
|
for (let i = len - 1; i >= 0; i -= 1) {
|
|
6454
6409
|
const itemKey = els[i].getAttribute("data-tree-key");
|
|
@@ -6461,7 +6416,7 @@ function _findPrevItemElement(state, itemElements, focusedElement) {
|
|
|
6461
6416
|
for (let j = 0; j < segments.length; j += 1) {
|
|
6462
6417
|
p.push(segments[j]);
|
|
6463
6418
|
const k = p.join("/");
|
|
6464
|
-
if (!
|
|
6419
|
+
if (!state[k]?.expanded) {
|
|
6465
6420
|
expanded = !1;
|
|
6466
6421
|
break;
|
|
6467
6422
|
}
|
|
@@ -6472,7 +6427,6 @@ function _findPrevItemElement(state, itemElements, focusedElement) {
|
|
|
6472
6427
|
return null;
|
|
6473
6428
|
}
|
|
6474
6429
|
function _findNextItemElement(state, itemElements, focusedElement) {
|
|
6475
|
-
var _a;
|
|
6476
6430
|
const idx = itemElements.indexOf(focusedElement), els = itemElements.slice(idx), len = itemElements.length;
|
|
6477
6431
|
for (let i = 1; i < len; i += 1) {
|
|
6478
6432
|
if (!els[i])
|
|
@@ -6487,7 +6441,7 @@ function _findNextItemElement(state, itemElements, focusedElement) {
|
|
|
6487
6441
|
for (let j = 0; j < segments.length; j += 1) {
|
|
6488
6442
|
p.push(segments[j]);
|
|
6489
6443
|
const k = p.join("/");
|
|
6490
|
-
if (!
|
|
6444
|
+
if (!state[k]?.expanded) {
|
|
6491
6445
|
expanded = !1;
|
|
6492
6446
|
break;
|
|
6493
6447
|
}
|
|
@@ -6545,7 +6499,6 @@ const TreeContext = createGlobalScopedContext(
|
|
|
6545
6499
|
[focusedElement, itemElements, path, registerItem, setExpanded, space, state]
|
|
6546
6500
|
), handleKeyDown = useCallback(
|
|
6547
6501
|
(event) => {
|
|
6548
|
-
var _a;
|
|
6549
6502
|
if (focusedElementRef.current) {
|
|
6550
6503
|
if (event.key === "ArrowDown") {
|
|
6551
6504
|
event.preventDefault();
|
|
@@ -6590,7 +6543,7 @@ const TreeContext = createGlobalScopedContext(
|
|
|
6590
6543
|
event.preventDefault();
|
|
6591
6544
|
const focusedKey = focusedElementRef.current.getAttribute("data-tree-key");
|
|
6592
6545
|
if (!focusedKey) return;
|
|
6593
|
-
|
|
6546
|
+
stateRef.current[focusedKey]?.expanded || setState((s) => {
|
|
6594
6547
|
const itemState = s[focusedKey];
|
|
6595
6548
|
return itemState ? { ...s, [focusedKey]: { ...itemState, expanded: !0 } } : s;
|
|
6596
6549
|
});
|
|
@@ -6601,7 +6554,7 @@ const TreeContext = createGlobalScopedContext(
|
|
|
6601
6554
|
[itemElements]
|
|
6602
6555
|
), handleFocus = useCallback(
|
|
6603
6556
|
(event) => {
|
|
6604
|
-
setFocusedElement(event.target), onFocus
|
|
6557
|
+
setFocusedElement(event.target), onFocus?.(event);
|
|
6605
6558
|
},
|
|
6606
6559
|
[onFocus]
|
|
6607
6560
|
);
|
|
@@ -6756,7 +6709,7 @@ const TreeGroup = memo(function(props) {
|
|
|
6756
6709
|
text,
|
|
6757
6710
|
weight,
|
|
6758
6711
|
...restProps
|
|
6759
|
-
} = props, rootRef = useRef(null), treeitemRef = useRef(null), tree = useTree(), { path, registerItem, setExpanded, setFocusedElement } = tree, _id = useId(), id = idProp || _id, itemPath = useMemo(() => path.concat([id || ""]), [id, path]), itemKey = itemPath.join("/"), itemState = tree.state[itemKey], focused = tree.focusedElement === rootRef.current, expanded =
|
|
6712
|
+
} = props, rootRef = useRef(null), treeitemRef = useRef(null), tree = useTree(), { path, registerItem, setExpanded, setFocusedElement } = tree, _id = useId(), id = idProp || _id, itemPath = useMemo(() => path.concat([id || ""]), [id, path]), itemKey = itemPath.join("/"), itemState = tree.state[itemKey], focused = tree.focusedElement === rootRef.current, expanded = itemState?.expanded === void 0 ? expandedProp : itemState?.expanded || !1, tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1, contextValue = useMemo(
|
|
6760
6713
|
() => ({ ...tree, level: tree.level + 1, path: itemPath }),
|
|
6761
6714
|
[itemPath, tree]
|
|
6762
6715
|
), handleClick = useCallback(
|
|
@@ -6768,10 +6721,7 @@ const TreeGroup = memo(function(props) {
|
|
|
6768
6721
|
[expanded, itemKey, onClick, setExpanded, setFocusedElement]
|
|
6769
6722
|
), handleKeyDown = useCallback(
|
|
6770
6723
|
(event) => {
|
|
6771
|
-
|
|
6772
|
-
const el = treeitemRef.current || rootRef.current;
|
|
6773
|
-
el == null || el.click();
|
|
6774
|
-
}
|
|
6724
|
+
focused && event.key === "Enter" && (treeitemRef.current || rootRef.current)?.click();
|
|
6775
6725
|
},
|
|
6776
6726
|
[focused]
|
|
6777
6727
|
);
|