@sanity/ui 2.8.6 → 2.8.8
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 +48 -0
- package/dist/index.d.ts +48 -0
- package/dist/index.esm.js +121 -32
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +121 -32
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +121 -32
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
- package/src/core/components/autocomplete/autocomplete.tsx +2 -0
- package/src/core/components/breadcrumbs/breadcrumbs.tsx +1 -0
- package/src/core/components/dialog/dialog.tsx +3 -0
- package/src/core/components/dialog/dialogProvider.tsx +2 -0
- package/src/core/components/hotkeys/hotkeys.tsx +1 -0
- package/src/core/components/menu/menu.tsx +1 -0
- package/src/core/components/menu/menuButton.tsx +1 -0
- package/src/core/components/menu/menuDivider.ts +1 -0
- package/src/core/components/menu/menuGroup.tsx +2 -0
- package/src/core/components/menu/menuItem.tsx +1 -0
- package/src/core/components/skeleton/skeleton.tsx +1 -0
- package/src/core/components/skeleton/textSkeleton.tsx +4 -0
- package/src/core/components/tab/tab.tsx +1 -0
- package/src/core/components/tab/tabList.tsx +1 -0
- package/src/core/components/tab/tabPanel.tsx +1 -0
- package/src/core/components/toast/toast.tsx +2 -0
- package/src/core/components/toast/toastProvider.tsx +2 -0
- package/src/core/components/tree/tree.tsx +1 -2
- package/src/core/components/tree/treeItem.tsx +1 -0
- package/src/core/primitives/_selectable/selectable.tsx +1 -0
- package/src/core/primitives/avatar/avatar.tsx +1 -0
- package/src/core/primitives/avatar/avatarCounter.tsx +1 -0
- package/src/core/primitives/avatar/avatarStack.tsx +1 -0
- package/src/core/primitives/badge/badge.tsx +1 -0
- package/src/core/primitives/box/box.tsx +1 -0
- package/src/core/primitives/button/button.tsx +1 -0
- package/src/core/primitives/card/card.tsx +1 -0
- package/src/core/primitives/checkbox/checkbox.tsx +1 -0
- package/src/core/primitives/code/code.tsx +1 -0
- package/src/core/primitives/container/container.tsx +1 -0
- package/src/core/primitives/flex/flex.tsx +1 -0
- package/src/core/primitives/grid/grid.tsx +1 -0
- package/src/core/primitives/heading/heading.tsx +1 -0
- package/src/core/primitives/inline/inline.tsx +1 -0
- package/src/core/primitives/kbd/kbd.tsx +1 -0
- package/src/core/primitives/label/label.tsx +1 -0
- package/src/core/primitives/popover/popover.tsx +1 -2
- package/src/core/primitives/popover/popoverCard.tsx +1 -2
- package/src/core/primitives/radio/radio.tsx +1 -0
- package/src/core/primitives/select/select.tsx +1 -0
- package/src/core/primitives/spinner/spinner.tsx +1 -0
- package/src/core/primitives/stack/stack.tsx +1 -0
- package/src/core/primitives/switch/switch.tsx +1 -0
- package/src/core/primitives/text/text.tsx +1 -0
- package/src/core/primitives/textArea/textArea.tsx +1 -0
- package/src/core/primitives/textInput/textInput.tsx +1 -0
- package/src/core/primitives/tooltip/tooltip.tsx +1 -0
- package/src/core/primitives/tooltip/tooltipCard.tsx +1 -2
- package/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx +2 -0
- package/src/core/theme/themeColorProvider.tsx +2 -0
- package/src/core/theme/themeProvider.tsx +2 -0
- package/src/core/utils/arrow/arrow.tsx +1 -0
- package/src/core/utils/boundaryElement/boundaryElementProvider.tsx +2 -0
- package/src/core/utils/conditionalWrapper/conditionalWrapper.tsx +2 -0
- package/src/core/utils/elementQuery/elementQuery.tsx +1 -0
- package/src/core/utils/layer/layer.tsx +1 -0
- package/src/core/utils/layer/layerProvider.tsx +2 -0
- package/src/core/utils/portal/portal.ts +2 -0
- package/src/core/utils/portal/portalProvider.tsx +2 -0
- package/src/core/utils/srOnly/srOnly.tsx +1 -0
- package/src/core/utils/virtualList/virtualList.tsx +1 -0
package/dist/index.js
CHANGED
|
@@ -580,6 +580,7 @@ function ThemeProvider(props) {
|
|
|
580
580
|
} : null, [rootTheme, scheme, tone]), theme$1 = react.useMemo(() => rootTheme ? theme.getScopedTheme(rootTheme, scheme, tone) : null, [scheme, rootTheme, tone]);
|
|
581
581
|
return theme$1 ? /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: themeContext, children: /* @__PURE__ */ jsxRuntime.jsx(styledComponents.ThemeProvider, { theme: theme$1, children }) }) : /* @__PURE__ */ jsxRuntime.jsx("pre", { children: 'ThemeProvider: no "theme" property provided' });
|
|
582
582
|
}
|
|
583
|
+
ThemeProvider.displayName = "ThemeProvider";
|
|
583
584
|
function useRootTheme() {
|
|
584
585
|
const value = react.useContext(ThemeContext);
|
|
585
586
|
if (!value)
|
|
@@ -590,6 +591,7 @@ function ThemeColorProvider(props) {
|
|
|
590
591
|
const { children, scheme, tone } = props, root = useRootTheme();
|
|
591
592
|
return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { scheme: scheme || root.scheme, theme: root.theme, tone, children });
|
|
592
593
|
}
|
|
594
|
+
ThemeColorProvider.displayName = "ThemeColorProvider";
|
|
593
595
|
function useTheme() {
|
|
594
596
|
return styledComponents.useTheme();
|
|
595
597
|
}
|
|
@@ -1269,7 +1271,9 @@ const Root$C = styledComponents.styled.div(responsiveLabelFont, responsiveTextAl
|
|
|
1269
1271
|
children
|
|
1270
1272
|
}
|
|
1271
1273
|
);
|
|
1272
|
-
})
|
|
1274
|
+
});
|
|
1275
|
+
Label.displayName = "ForwardRef(Label)";
|
|
1276
|
+
const avatarStyle = {
|
|
1273
1277
|
root: avatarRootStyle,
|
|
1274
1278
|
arrow: avatarArrowStyle,
|
|
1275
1279
|
bgStroke: avatarBgStrokeStyle,
|
|
@@ -1497,6 +1501,7 @@ const Root$B = styledComponents.styled.div(
|
|
|
1497
1501
|
}
|
|
1498
1502
|
);
|
|
1499
1503
|
});
|
|
1504
|
+
Avatar.displayName = "ForwardRef(Avatar)";
|
|
1500
1505
|
function _responsiveAvatarCounterSizeStyle(props) {
|
|
1501
1506
|
const { avatar, media } = theme.getTheme_v2(props.theme);
|
|
1502
1507
|
return _responsive(media, props.$size, (size2) => {
|
|
@@ -1537,7 +1542,9 @@ const Root$A = styledComponents.styled.div(
|
|
|
1537
1542
|
[size2]
|
|
1538
1543
|
);
|
|
1539
1544
|
return /* @__PURE__ */ jsxRuntime.jsx(Root$A, { $size: size2, "data-ui": "AvatarCounter", ref, children: /* @__PURE__ */ jsxRuntime.jsx(Label, { as: "span", size: fontSize2, weight: "medium", children: count }) });
|
|
1540
|
-
})
|
|
1545
|
+
});
|
|
1546
|
+
AvatarCounter.displayName = "ForwardRef(AvatarCounter)";
|
|
1547
|
+
const BASE_STYLES = styledComponents.css`
|
|
1541
1548
|
white-space: nowrap;
|
|
1542
1549
|
|
|
1543
1550
|
& > div {
|
|
@@ -1577,7 +1584,9 @@ const Root$z = styledComponents.styled.div(responsiveAvatarStackSizeStyle, avata
|
|
|
1577
1584
|
len !== 0 && extraCount > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: extraCount, size: size2 }) }),
|
|
1578
1585
|
visibleChildren.map((child, childIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: react.cloneElement(child, { size: size2 }) }, String(childIndex)))
|
|
1579
1586
|
] });
|
|
1580
|
-
})
|
|
1587
|
+
});
|
|
1588
|
+
AvatarStack.displayName = "ForwardRef(AvatarStack)";
|
|
1589
|
+
const Root$y = styledComponents.styled.div(
|
|
1581
1590
|
boxStyle,
|
|
1582
1591
|
flexItemStyle,
|
|
1583
1592
|
responsiveBoxStyle,
|
|
@@ -1651,6 +1660,7 @@ const Root$z = styledComponents.styled.div(responsiveAvatarStackSizeStyle, avata
|
|
|
1651
1660
|
}
|
|
1652
1661
|
);
|
|
1653
1662
|
});
|
|
1663
|
+
Box.displayName = "ForwardRef(Box)";
|
|
1654
1664
|
function textBaseStyle(props) {
|
|
1655
1665
|
const { $accent, $muted } = props, { font } = theme.getTheme_v2(props.theme);
|
|
1656
1666
|
return styledComponents.css`
|
|
@@ -1751,6 +1761,7 @@ const Root$x = styledComponents.styled.div(
|
|
|
1751
1761
|
}
|
|
1752
1762
|
);
|
|
1753
1763
|
});
|
|
1764
|
+
Text.displayName = "ForwardRef(Text)";
|
|
1754
1765
|
function badgeStyle(props) {
|
|
1755
1766
|
const { $tone } = props;
|
|
1756
1767
|
return {
|
|
@@ -1790,7 +1801,9 @@ const Root$w = styledComponents.styled(Box)(
|
|
|
1790
1801
|
children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children })
|
|
1791
1802
|
}
|
|
1792
1803
|
);
|
|
1793
|
-
})
|
|
1804
|
+
});
|
|
1805
|
+
Badge.displayName = "ForwardRef(Badge)";
|
|
1806
|
+
const Root$v = styledComponents.styled(Box)(
|
|
1794
1807
|
flexItemStyle,
|
|
1795
1808
|
responsiveFlexStyle
|
|
1796
1809
|
), Flex = react.forwardRef(function(props, ref) {
|
|
@@ -1809,7 +1822,9 @@ const Root$w = styledComponents.styled(Box)(
|
|
|
1809
1822
|
ref
|
|
1810
1823
|
}
|
|
1811
1824
|
);
|
|
1812
|
-
})
|
|
1825
|
+
});
|
|
1826
|
+
Flex.displayName = "ForwardRef(Flex)";
|
|
1827
|
+
const rotate$1 = styledComponents.keyframes`
|
|
1813
1828
|
from {
|
|
1814
1829
|
transform: rotate(0deg);
|
|
1815
1830
|
}
|
|
@@ -1824,6 +1839,7 @@ const Root$w = styledComponents.styled(Box)(
|
|
|
1824
1839
|
`, Spinner = react.forwardRef(function(props, ref) {
|
|
1825
1840
|
return /* @__PURE__ */ jsxRuntime.jsx(Root$u, { "data-ui": "Spinner", ...props, ref, children: /* @__PURE__ */ jsxRuntime.jsx(icons.SpinnerIcon, {}) });
|
|
1826
1841
|
});
|
|
1842
|
+
Spinner.displayName = "ForwardRef(Spinner)";
|
|
1827
1843
|
function _cardColorStyle(base, color, checkered = !1) {
|
|
1828
1844
|
return {
|
|
1829
1845
|
// from base
|
|
@@ -2077,6 +2093,7 @@ const Root$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseS
|
|
|
2077
2093
|
}
|
|
2078
2094
|
);
|
|
2079
2095
|
});
|
|
2096
|
+
Button.displayName = "ForwardRef(Button)";
|
|
2080
2097
|
function cardStyle(props) {
|
|
2081
2098
|
return [cardBaseStyle(props), cardColorStyle(props)];
|
|
2082
2099
|
}
|
|
@@ -2250,6 +2267,7 @@ const Root$s = styledComponents.styled(Box)(responsiveBorderStyle, responsiveRad
|
|
|
2250
2267
|
}
|
|
2251
2268
|
) });
|
|
2252
2269
|
});
|
|
2270
|
+
Card.displayName = "ForwardRef(Card)";
|
|
2253
2271
|
function checkboxBaseStyles() {
|
|
2254
2272
|
return styledComponents.css`
|
|
2255
2273
|
position: relative;
|
|
@@ -2405,6 +2423,7 @@ const Root$r = styledComponents.styled.div(checkboxBaseStyles), Input$5 = styled
|
|
|
2405
2423
|
] })
|
|
2406
2424
|
] });
|
|
2407
2425
|
});
|
|
2426
|
+
Checkbox.displayName = "ForwardRef(Checkbox)";
|
|
2408
2427
|
function codeSyntaxHighlightingStyle({ theme: theme$1 }) {
|
|
2409
2428
|
const {
|
|
2410
2429
|
color: { syntax: color }
|
|
@@ -2483,7 +2502,9 @@ const Root$q = styledComponents.styled.pre(codeBaseStyle, responsiveCodeFontStyl
|
|
|
2483
2502
|
!(language && registered) && /* @__PURE__ */ jsxRuntime.jsx("code", { children }),
|
|
2484
2503
|
language && registered && /* @__PURE__ */ jsxRuntime.jsx(Refractor__default.default, { inline: !0, language, value: String(children) })
|
|
2485
2504
|
] });
|
|
2486
|
-
})
|
|
2505
|
+
});
|
|
2506
|
+
Code.displayName = "ForwardRef(Code)";
|
|
2507
|
+
const BASE_STYLE$1 = {
|
|
2487
2508
|
width: "100%",
|
|
2488
2509
|
margin: "0 auto"
|
|
2489
2510
|
};
|
|
@@ -2511,7 +2532,9 @@ const Root$p = styledComponents.styled(Box)(
|
|
|
2511
2532
|
ref
|
|
2512
2533
|
}
|
|
2513
2534
|
);
|
|
2514
|
-
})
|
|
2535
|
+
});
|
|
2536
|
+
Container.displayName = "ForwardRef(Container)";
|
|
2537
|
+
const Root$o = styledComponents.styled(Box)(responsiveGridStyle), Grid = react.forwardRef(function(props, ref) {
|
|
2515
2538
|
const { as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, children, ...restProps } = props;
|
|
2516
2539
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2517
2540
|
Root$o,
|
|
@@ -2533,6 +2556,7 @@ const Root$p = styledComponents.styled(Box)(
|
|
|
2533
2556
|
}
|
|
2534
2557
|
);
|
|
2535
2558
|
});
|
|
2559
|
+
Grid.displayName = "ForwardRef(Grid)";
|
|
2536
2560
|
function headingBaseStyle(props) {
|
|
2537
2561
|
const { $accent, $muted } = props, { font } = theme.getTheme_v2(props.theme);
|
|
2538
2562
|
return styledComponents.css`
|
|
@@ -2620,6 +2644,7 @@ const Root$n = styledComponents.styled.div(headingBaseStyle, responsiveTextAlign
|
|
|
2620
2644
|
}
|
|
2621
2645
|
);
|
|
2622
2646
|
});
|
|
2647
|
+
Heading.displayName = "ForwardRef(Heading)";
|
|
2623
2648
|
function inlineBaseStyle() {
|
|
2624
2649
|
return {
|
|
2625
2650
|
lineHeight: 0,
|
|
@@ -2659,6 +2684,7 @@ const Root$m = styledComponents.styled(Box)(inlineBaseStyle, inlineSpaceStyle),
|
|
|
2659
2684
|
}
|
|
2660
2685
|
);
|
|
2661
2686
|
});
|
|
2687
|
+
Inline.displayName = "ForwardRef(Inline)";
|
|
2662
2688
|
function kbdStyle() {
|
|
2663
2689
|
return styledComponents.css`
|
|
2664
2690
|
--card-bg-color: var(--card-kbd-bg-color);
|
|
@@ -2679,7 +2705,9 @@ function kbdStyle() {
|
|
|
2679
2705
|
const Root$l = styledComponents.styled.kbd(responsiveRadiusStyle, kbdStyle), KBD = react.forwardRef(function(props, ref) {
|
|
2680
2706
|
const { children, fontSize: fontSize2 = 0, padding = 1, radius = 2, ...restProps } = props;
|
|
2681
2707
|
return /* @__PURE__ */ jsxRuntime.jsx(Root$l, { "data-ui": "KBD", ...restProps, $radius: useArrayProp(radius), ref, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", padding, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "span", size: fontSize2, weight: "semibold", children }) }) });
|
|
2682
|
-
})
|
|
2708
|
+
});
|
|
2709
|
+
KBD.displayName = "ForwardRef(KBD)";
|
|
2710
|
+
const origin = {
|
|
2683
2711
|
name: "@sanity/ui/origin",
|
|
2684
2712
|
fn({ middlewareData, placement, rects }) {
|
|
2685
2713
|
var _a, _b;
|
|
@@ -2820,7 +2848,9 @@ const Root$k = styledComponents.styled.div(
|
|
|
2820
2848
|
/* @__PURE__ */ jsxRuntime.jsx(StrokePath, { d: strokePath, mask: "url(#stroke-mask)", strokeWidth: strokeWidth * 2 }),
|
|
2821
2849
|
/* @__PURE__ */ jsxRuntime.jsx(ShapePath, { d: fillPath })
|
|
2822
2850
|
] }) });
|
|
2823
|
-
})
|
|
2851
|
+
});
|
|
2852
|
+
Arrow.displayName = "ForwardRef(Arrow)";
|
|
2853
|
+
const BoundaryElementContext = createGlobalScopedContext(
|
|
2824
2854
|
"@sanity/ui/context/boundaryElement",
|
|
2825
2855
|
null
|
|
2826
2856
|
);
|
|
@@ -2828,6 +2858,7 @@ function BoundaryElementProvider(props) {
|
|
|
2828
2858
|
const { children, element } = props, value = react.useMemo(() => ({ version: 0, element }), [element]);
|
|
2829
2859
|
return /* @__PURE__ */ jsxRuntime.jsx(BoundaryElementContext.Provider, { value, children });
|
|
2830
2860
|
}
|
|
2861
|
+
BoundaryElementProvider.displayName = "BoundaryElementProvider";
|
|
2831
2862
|
function isRecord(value) {
|
|
2832
2863
|
return !!(value && typeof value == "object" && !Array.isArray(value));
|
|
2833
2864
|
}
|
|
@@ -2848,6 +2879,7 @@ function ConditionalWrapper({
|
|
|
2848
2879
|
}) {
|
|
2849
2880
|
return condition ? wrapper(children) : children;
|
|
2850
2881
|
}
|
|
2882
|
+
ConditionalWrapper.displayName = "ConditionalWrapper";
|
|
2851
2883
|
function findMaxBreakpoints(media, width) {
|
|
2852
2884
|
const ret = [];
|
|
2853
2885
|
for (let i = 0; i < media.length; i += 1)
|
|
@@ -2881,6 +2913,7 @@ const ElementQuery = react.forwardRef(function(props, forwardedRef) {
|
|
|
2881
2913
|
}
|
|
2882
2914
|
);
|
|
2883
2915
|
});
|
|
2916
|
+
ElementQuery.displayName = "ForwardRef(ElementQuery)";
|
|
2884
2917
|
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);
|
|
2885
2918
|
class ErrorBoundary extends react.Component {
|
|
2886
2919
|
constructor() {
|
|
@@ -3031,6 +3064,7 @@ function LayerProvider(props) {
|
|
|
3031
3064
|
);
|
|
3032
3065
|
return /* @__PURE__ */ jsxRuntime.jsx(LayerContext.Provider, { value, children });
|
|
3033
3066
|
}
|
|
3067
|
+
LayerProvider.displayName = "LayerProvider";
|
|
3034
3068
|
const Root$j = styledComponents.styled.div({ position: "relative" }), LayerChildren = react.forwardRef(function(props, forwardedRef) {
|
|
3035
3069
|
const { children, onActivate, onFocus, style = EMPTY_RECORD, ...restProps } = props, { zIndex, isTopLayer } = useLayer(), lastFocusedRef = react.useRef(null), ref = react.useRef(null), isTopLayerRef = react.useRef(isTopLayer);
|
|
3036
3070
|
react.useImperativeHandle(forwardedRef, () => ref.current), react.useEffect(() => {
|
|
@@ -3048,7 +3082,9 @@ const Root$j = styledComponents.styled.div({ position: "relative" }), LayerChild
|
|
|
3048
3082
|
}), Layer = react.forwardRef(function(props, ref) {
|
|
3049
3083
|
const { children, zOffset = 1, ...restProps } = props;
|
|
3050
3084
|
return /* @__PURE__ */ jsxRuntime.jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsxRuntime.jsx(LayerChildren, { ...restProps, ref, children }) });
|
|
3051
|
-
})
|
|
3085
|
+
});
|
|
3086
|
+
Layer.displayName = "ForwardRef(Layer)";
|
|
3087
|
+
const key = "@sanity/ui/context/portal", elementKey = Symbol.for(`${key}/element`);
|
|
3052
3088
|
globalScope[elementKey] = null;
|
|
3053
3089
|
const defaultContextValue = {
|
|
3054
3090
|
version: 0,
|
|
@@ -3070,6 +3106,7 @@ function Portal(props) {
|
|
|
3070
3106
|
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);
|
|
3071
3107
|
return portalElement ? reactDom.createPortal(children, portalElement) : null;
|
|
3072
3108
|
}
|
|
3109
|
+
Portal.displayName = "Portal";
|
|
3073
3110
|
function PortalProvider(props) {
|
|
3074
3111
|
const { boundaryElement, children, element, __unstable_elements: elementsProp } = props, elements = useUnique(elementsProp), fallbackElement = react.useSyncExternalStore(
|
|
3075
3112
|
emptySubscribe,
|
|
@@ -3083,6 +3120,7 @@ function PortalProvider(props) {
|
|
|
3083
3120
|
}), [boundaryElement, element, elements, fallbackElement]);
|
|
3084
3121
|
return /* @__PURE__ */ jsxRuntime.jsx(PortalContext.Provider, { value, children });
|
|
3085
3122
|
}
|
|
3123
|
+
PortalProvider.displayName = "PortalProvider";
|
|
3086
3124
|
const emptySubscribe = () => () => {
|
|
3087
3125
|
};
|
|
3088
3126
|
function useUnique(value) {
|
|
@@ -3105,7 +3143,9 @@ const Root$i = styledComponents.styled.div`
|
|
|
3105
3143
|
`, SrOnly = react.forwardRef(function(props, ref) {
|
|
3106
3144
|
const { as, children } = props;
|
|
3107
3145
|
return /* @__PURE__ */ jsxRuntime.jsx(Root$i, { "aria-hidden": !0, as, "data-ui": "SrOnly", ref, children });
|
|
3108
|
-
})
|
|
3146
|
+
});
|
|
3147
|
+
SrOnly.displayName = "ForwardRef(SrOnly)";
|
|
3148
|
+
const Root$h = styledComponents.styled.div`
|
|
3109
3149
|
position: relative;
|
|
3110
3150
|
`, ItemWrapper = styledComponents.styled.div`
|
|
3111
3151
|
position: absolute;
|
|
@@ -3154,7 +3194,9 @@ const Root$i = styledComponents.styled.div`
|
|
|
3154
3194
|
return /* @__PURE__ */ jsxRuntime.jsx(ItemWrapper, { style: { top: itemIndex * (itemHeight + space[gap]) }, children: node }, key2);
|
|
3155
3195
|
}), [fromIndex, gap, getItemKey, itemHeight, items, renderItem, space, toIndex]), wrapperStyle = react.useMemo(() => ({ height }), [height]);
|
|
3156
3196
|
return /* @__PURE__ */ jsxRuntime.jsx(Root$h, { as, "data-ui": "VirtualList", ...restProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, style: wrapperStyle, children }) });
|
|
3157
|
-
})
|
|
3197
|
+
});
|
|
3198
|
+
VirtualList.displayName = "ForwardRef(VirtualList)";
|
|
3199
|
+
const DEFAULT_POPOVER_DISTANCE = 4, DEFAULT_POPOVER_PADDING = 4, DEFAULT_POPOVER_ARROW_WIDTH = 19, DEFAULT_POPOVER_ARROW_HEIGHT = 8, DEFAULT_POPOVER_ARROW_RADIUS = 2, DEFAULT_POPOVER_MARGINS = [0, 0, 0, 0], DEFAULT_FALLBACK_PLACEMENTS$1 = {
|
|
3158
3200
|
top: ["bottom", "left", "right"],
|
|
3159
3201
|
"top-start": ["bottom-start", "left-start", "right-start"],
|
|
3160
3202
|
"top-end": ["bottom-end", "left-end", "right-end"],
|
|
@@ -3297,7 +3339,7 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion(Card))`
|
|
|
3297
3339
|
);
|
|
3298
3340
|
})
|
|
3299
3341
|
);
|
|
3300
|
-
PopoverCard.displayName = "PopoverCard";
|
|
3342
|
+
PopoverCard.displayName = "Memo(ForwardRef(PopoverCard))";
|
|
3301
3343
|
const Popover = react.memo(
|
|
3302
3344
|
react.forwardRef(function(props, forwardedRef) {
|
|
3303
3345
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
|
|
@@ -3481,7 +3523,7 @@ const Popover = react.memo(
|
|
|
3481
3523
|
] });
|
|
3482
3524
|
})
|
|
3483
3525
|
);
|
|
3484
|
-
Popover.displayName = "Popover";
|
|
3526
|
+
Popover.displayName = "Memo(ForwardRef(Popover))";
|
|
3485
3527
|
function radioBaseStyle() {
|
|
3486
3528
|
return styledComponents.css`
|
|
3487
3529
|
position: relative;
|
|
@@ -3611,6 +3653,7 @@ const Root$g = styledComponents.styled.div(radioBaseStyle), Input$4 = styledComp
|
|
|
3611
3653
|
/* @__PURE__ */ jsxRuntime.jsx("span", {})
|
|
3612
3654
|
] });
|
|
3613
3655
|
});
|
|
3656
|
+
Radio.displayName = "ForwardRef(Radio)";
|
|
3614
3657
|
function rootStyle() {
|
|
3615
3658
|
return styledComponents.css`
|
|
3616
3659
|
position: relative;
|
|
@@ -3778,7 +3821,9 @@ const selectStyle = {
|
|
|
3778
3821
|
),
|
|
3779
3822
|
/* @__PURE__ */ jsxRuntime.jsx(IconBox, { padding, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {}) }) })
|
|
3780
3823
|
] });
|
|
3781
|
-
})
|
|
3824
|
+
});
|
|
3825
|
+
Select.displayName = "ForwardRef(Select)";
|
|
3826
|
+
const BASE_STYLE = {
|
|
3782
3827
|
"&&:not([hidden])": {
|
|
3783
3828
|
display: "grid"
|
|
3784
3829
|
},
|
|
@@ -3811,6 +3856,7 @@ const Root$e = styledComponents.styled(Box)(stackBaseStyle, responsiveStackSpace
|
|
|
3811
3856
|
}
|
|
3812
3857
|
);
|
|
3813
3858
|
});
|
|
3859
|
+
Stack.displayName = "ForwardRef(Stack)";
|
|
3814
3860
|
function switchBaseStyles() {
|
|
3815
3861
|
return styledComponents.css`
|
|
3816
3862
|
position: relative;
|
|
@@ -3977,7 +4023,9 @@ const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledC
|
|
|
3977
4023
|
/* @__PURE__ */ jsxRuntime.jsx(Thumb, { $checked: checked, $indeterminate: indeterminate })
|
|
3978
4024
|
] })
|
|
3979
4025
|
] });
|
|
3980
|
-
})
|
|
4026
|
+
});
|
|
4027
|
+
Switch.displayName = "ForwardRef(Switch)";
|
|
4028
|
+
const Root$c = styledComponents.styled.span(textInputRootStyle), InputRoot$1 = styledComponents.styled.span`
|
|
3981
4029
|
flex: 1;
|
|
3982
4030
|
min-width: 0;
|
|
3983
4031
|
display: block;
|
|
@@ -4035,7 +4083,9 @@ const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledC
|
|
|
4035
4083
|
}
|
|
4036
4084
|
)
|
|
4037
4085
|
] }) });
|
|
4038
|
-
})
|
|
4086
|
+
});
|
|
4087
|
+
TextArea.displayName = "ForwardRef(TextArea)";
|
|
4088
|
+
const CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Root$b = styledComponents.styled(Card).attrs({ forwardedAs: "span" })(textInputRootStyle), InputRoot = styledComponents.styled.span`
|
|
4039
4089
|
flex: 1;
|
|
4040
4090
|
min-width: 0;
|
|
4041
4091
|
display: block;
|
|
@@ -4235,6 +4285,7 @@ const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledC
|
|
|
4235
4285
|
suffixNode
|
|
4236
4286
|
] });
|
|
4237
4287
|
});
|
|
4288
|
+
TextInput.displayName = "ForwardRef(TextInput)";
|
|
4238
4289
|
function useDelayedState(initialState) {
|
|
4239
4290
|
const [state, setState] = react.useState(initialState), delayedAction = react.useRef(), onStateChange = react.useCallback((nextState, delay) => {
|
|
4240
4291
|
const action = () => {
|
|
@@ -4328,7 +4379,7 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
|
|
|
4328
4379
|
);
|
|
4329
4380
|
})
|
|
4330
4381
|
);
|
|
4331
|
-
TooltipCard.displayName = "TooltipCard";
|
|
4382
|
+
TooltipCard.displayName = "Memo(ForwardRef(TooltipCard))";
|
|
4332
4383
|
const TooltipDelayGroupContext = createGlobalScopedContext(
|
|
4333
4384
|
"@sanity/ui/context/tooltipDelayGroup",
|
|
4334
4385
|
null
|
|
@@ -4351,6 +4402,7 @@ function TooltipDelayGroupProvider(props) {
|
|
|
4351
4402
|
);
|
|
4352
4403
|
return /* @__PURE__ */ jsxRuntime.jsx(TooltipDelayGroupContext.Provider, { value, children });
|
|
4353
4404
|
}
|
|
4405
|
+
TooltipDelayGroupProvider.displayName = "TooltipDelayGroupProvider";
|
|
4354
4406
|
const Root$a = styledComponents.styled(Layer)`
|
|
4355
4407
|
pointer-events: none;
|
|
4356
4408
|
`, Tooltip = react.forwardRef(function(props, forwardedRef) {
|
|
@@ -4550,6 +4602,7 @@ const Root$a = styledComponents.styled(Layer)`
|
|
|
4550
4602
|
child
|
|
4551
4603
|
] });
|
|
4552
4604
|
});
|
|
4605
|
+
Tooltip.displayName = "ForwardRef(Tooltip)";
|
|
4553
4606
|
function useCloseOnMouseLeave({
|
|
4554
4607
|
handleIsOpenChange,
|
|
4555
4608
|
referenceElement,
|
|
@@ -4965,7 +5018,9 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
|
|
|
4965
5018
|
]
|
|
4966
5019
|
}
|
|
4967
5020
|
);
|
|
4968
|
-
})
|
|
5021
|
+
});
|
|
5022
|
+
InnerAutocomplete.displayName = "ForwardRef(Autocomplete)";
|
|
5023
|
+
const Autocomplete = InnerAutocomplete, Root$8 = styledComponents.styled.ol`
|
|
4969
5024
|
margin: 0;
|
|
4970
5025
|
padding: 0;
|
|
4971
5026
|
display: flex;
|
|
@@ -5019,6 +5074,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
|
|
|
5019
5074
|
/* @__PURE__ */ jsxRuntime.jsx(Box, { as: "li", children: item })
|
|
5020
5075
|
] }, itemIndex)) });
|
|
5021
5076
|
});
|
|
5077
|
+
Breadcrumbs.displayName = "ForwardRef(Breadcrumbs)";
|
|
5022
5078
|
function dialogStyle({ theme: theme$1 }) {
|
|
5023
5079
|
const { color } = theme.getTheme_v2(theme$1);
|
|
5024
5080
|
return {
|
|
@@ -5166,7 +5222,9 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
|
|
|
5166
5222
|
/* @__PURE__ */ jsxRuntime.jsx(DialogContent, { flex: 1, ref: contentRef, tabIndex: -1, children }),
|
|
5167
5223
|
footer && /* @__PURE__ */ jsxRuntime.jsx(DialogFooter, { children: footer })
|
|
5168
5224
|
] }) }) });
|
|
5169
|
-
})
|
|
5225
|
+
});
|
|
5226
|
+
DialogCard.displayName = "ForwardRef(DialogCard)";
|
|
5227
|
+
const Dialog = react.forwardRef(function(props, ref) {
|
|
5170
5228
|
var _a;
|
|
5171
5229
|
const dialog = useDialog(), { layer } = useTheme_v2(), {
|
|
5172
5230
|
__unstable_autoFocus: autoFocus = !0,
|
|
@@ -5263,6 +5321,7 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
|
|
|
5263
5321
|
}
|
|
5264
5322
|
) });
|
|
5265
5323
|
});
|
|
5324
|
+
Dialog.displayName = "ForwardRef(Dialog)";
|
|
5266
5325
|
function DialogProvider(props) {
|
|
5267
5326
|
const { children, position, zOffset } = props, contextValue = react.useMemo(
|
|
5268
5327
|
() => ({
|
|
@@ -5274,6 +5333,7 @@ function DialogProvider(props) {
|
|
|
5274
5333
|
);
|
|
5275
5334
|
return /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: contextValue, children });
|
|
5276
5335
|
}
|
|
5336
|
+
DialogProvider.displayName = "DialogProvider";
|
|
5277
5337
|
const Root$6 = styledComponents.styled.kbd`
|
|
5278
5338
|
font: inherit;
|
|
5279
5339
|
padding: 1px;
|
|
@@ -5288,7 +5348,9 @@ const Root$6 = styledComponents.styled.kbd`
|
|
|
5288
5348
|
`, Hotkeys = react.forwardRef(function(props, ref) {
|
|
5289
5349
|
const { fontSize: fontSize2, keys, padding, radius, space: spaceProp = 0.5, ...restProps } = props, space = useArrayProp(spaceProp);
|
|
5290
5350
|
return !keys || keys.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) : /* @__PURE__ */ jsxRuntime.jsx(Root$6, { "data-ui": "Hotkeys", ...restProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Inline, { as: "span", space, children: keys.map((key2, i) => /* @__PURE__ */ jsxRuntime.jsx(Key, { fontSize: fontSize2, padding, radius, children: key2 }, i)) }) });
|
|
5291
|
-
})
|
|
5351
|
+
});
|
|
5352
|
+
Hotkeys.displayName = "ForwardRef(Hotkeys)";
|
|
5353
|
+
const MenuContext = createGlobalScopedContext(
|
|
5292
5354
|
"@sanity/ui/context/menu",
|
|
5293
5355
|
null
|
|
5294
5356
|
);
|
|
@@ -5522,7 +5584,9 @@ const Root$5 = styledComponents.styled(Box)`
|
|
|
5522
5584
|
children: /* @__PURE__ */ jsxRuntime.jsx(Stack, { space, children })
|
|
5523
5585
|
}
|
|
5524
5586
|
) });
|
|
5525
|
-
})
|
|
5587
|
+
});
|
|
5588
|
+
Menu.displayName = "ForwardRef(Menu)";
|
|
5589
|
+
const MenuButton = react.forwardRef(function(props, forwardedRef) {
|
|
5526
5590
|
const {
|
|
5527
5591
|
__unstable_disableRestoreFocusOnClose: disableRestoreFocusOnClose = !1,
|
|
5528
5592
|
boundaryElement: deprecated_boundaryElement,
|
|
@@ -5654,12 +5718,15 @@ const Root$5 = styledComponents.styled(Box)`
|
|
|
5654
5718
|
]
|
|
5655
5719
|
);
|
|
5656
5720
|
return /* @__PURE__ */ jsxRuntime.jsx(Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu, open, children: button || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) });
|
|
5657
|
-
})
|
|
5721
|
+
});
|
|
5722
|
+
MenuButton.displayName = "ForwardRef(MenuButton)";
|
|
5723
|
+
const MenuDivider = styledComponents.styled.hr`
|
|
5658
5724
|
height: 1px;
|
|
5659
5725
|
border: 0;
|
|
5660
5726
|
background: var(--card-hairline-soft-color);
|
|
5661
5727
|
margin: 0;
|
|
5662
5728
|
`;
|
|
5729
|
+
MenuDivider.displayName = "MenuDivider";
|
|
5663
5730
|
function selectableBaseStyle() {
|
|
5664
5731
|
return styledComponents.css`
|
|
5665
5732
|
background-color: inherit;
|
|
@@ -5761,6 +5828,7 @@ const Selectable = styledComponents.styled(Box)(
|
|
|
5761
5828
|
selectableBaseStyle,
|
|
5762
5829
|
selectableColorStyle
|
|
5763
5830
|
);
|
|
5831
|
+
Selectable.displayName = "Selectable";
|
|
5764
5832
|
function useMenu() {
|
|
5765
5833
|
const value = react.useContext(MenuContext);
|
|
5766
5834
|
if (!value)
|
|
@@ -5869,6 +5937,7 @@ function MenuGroup(props) {
|
|
|
5869
5937
|
}
|
|
5870
5938
|
) });
|
|
5871
5939
|
}
|
|
5940
|
+
MenuGroup.displayName = "MenuGroup";
|
|
5872
5941
|
const MenuItem = react.forwardRef(function(props, forwardedRef) {
|
|
5873
5942
|
const {
|
|
5874
5943
|
as = "button",
|
|
@@ -5966,7 +6035,9 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
|
|
|
5966
6035
|
]
|
|
5967
6036
|
}
|
|
5968
6037
|
);
|
|
5969
|
-
})
|
|
6038
|
+
});
|
|
6039
|
+
MenuItem.displayName = "ForwardRef(MenuItem)";
|
|
6040
|
+
const keyframe = styledComponents.keyframes`
|
|
5970
6041
|
0% {
|
|
5971
6042
|
background-position: 100%;
|
|
5972
6043
|
}
|
|
@@ -6026,7 +6097,9 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
|
|
|
6026
6097
|
ref
|
|
6027
6098
|
}
|
|
6028
6099
|
);
|
|
6029
|
-
})
|
|
6100
|
+
});
|
|
6101
|
+
Skeleton.displayName = "ForwardRef(Skeleton)";
|
|
6102
|
+
const Root$3 = styledComponents.styled(Skeleton)((props) => {
|
|
6030
6103
|
const { $size, $style } = props, { font, media } = theme.getTheme_v2(props.theme), fontStyle = font[$style];
|
|
6031
6104
|
return _responsive(media, $size, (sizeIndex) => {
|
|
6032
6105
|
const fontSize2 = fontStyle.sizes[sizeIndex];
|
|
@@ -6035,16 +6108,24 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
|
|
|
6035
6108
|
}), TextSkeleton = react.forwardRef(function(props, ref) {
|
|
6036
6109
|
const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
|
|
6037
6110
|
return /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "text" });
|
|
6038
|
-
})
|
|
6111
|
+
});
|
|
6112
|
+
TextSkeleton.displayName = "ForwardRef(TextSkeleton)";
|
|
6113
|
+
const LabelSkeleton = react.forwardRef(function(props, ref) {
|
|
6039
6114
|
const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
|
|
6040
6115
|
return /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "label" });
|
|
6041
|
-
})
|
|
6116
|
+
});
|
|
6117
|
+
LabelSkeleton.displayName = "ForwardRef(LabelSkeleton)";
|
|
6118
|
+
const HeadingSkeleton = react.forwardRef(function(props, ref) {
|
|
6042
6119
|
const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
|
|
6043
6120
|
return /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "heading" });
|
|
6044
|
-
})
|
|
6121
|
+
});
|
|
6122
|
+
HeadingSkeleton.displayName = "ForwardRef(HeadingSkeleton)";
|
|
6123
|
+
const CodeSkeleton = react.forwardRef(function(props, ref) {
|
|
6045
6124
|
const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
|
|
6046
6125
|
return /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "code" });
|
|
6047
|
-
})
|
|
6126
|
+
});
|
|
6127
|
+
CodeSkeleton.displayName = "ForwardRef(CodeSkeleton)";
|
|
6128
|
+
const CustomButton = styledComponents.styled(Button)`
|
|
6048
6129
|
max-width: 100%;
|
|
6049
6130
|
`, Tab = react.forwardRef(function(props, forwardedRef) {
|
|
6050
6131
|
const {
|
|
@@ -6096,6 +6177,7 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
|
|
|
6096
6177
|
}
|
|
6097
6178
|
);
|
|
6098
6179
|
});
|
|
6180
|
+
Tab.displayName = "ForwardRef(Tab)";
|
|
6099
6181
|
function _isReactElement(node) {
|
|
6100
6182
|
return !!node;
|
|
6101
6183
|
}
|
|
@@ -6132,7 +6214,9 @@ const CustomInline = styledComponents.styled(Inline)`
|
|
|
6132
6214
|
children: tabs
|
|
6133
6215
|
}
|
|
6134
6216
|
);
|
|
6135
|
-
})
|
|
6217
|
+
});
|
|
6218
|
+
TabList.displayName = "ForwardRef(TabList)";
|
|
6219
|
+
const TabPanel = react.forwardRef(function(props, ref) {
|
|
6136
6220
|
const { flex, ...restProps } = props;
|
|
6137
6221
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
6138
6222
|
Box,
|
|
@@ -6146,7 +6230,9 @@ const CustomInline = styledComponents.styled(Inline)`
|
|
|
6146
6230
|
children: props.children
|
|
6147
6231
|
}
|
|
6148
6232
|
);
|
|
6149
|
-
})
|
|
6233
|
+
});
|
|
6234
|
+
TabPanel.displayName = "ForwardRef(TabPanel)";
|
|
6235
|
+
const TextBox = styledComponents.styled(Flex)`
|
|
6150
6236
|
overflow-x: auto;
|
|
6151
6237
|
`, loadingAnimation = styledComponents.keyframes`
|
|
6152
6238
|
0% {
|
|
@@ -6240,6 +6326,7 @@ function Toast(props) {
|
|
|
6240
6326
|
}
|
|
6241
6327
|
);
|
|
6242
6328
|
}
|
|
6329
|
+
Toast.displayName = "Toast";
|
|
6243
6330
|
function useMounted() {
|
|
6244
6331
|
return react.useSyncExternalStore(
|
|
6245
6332
|
subscribe,
|
|
@@ -6346,6 +6433,7 @@ function ToastProvider(props) {
|
|
|
6346
6433
|
)) }) }) }) })
|
|
6347
6434
|
] });
|
|
6348
6435
|
}
|
|
6436
|
+
ToastProvider.displayName = "ToastProvider";
|
|
6349
6437
|
function useToast() {
|
|
6350
6438
|
const value = react.useContext(ToastContext);
|
|
6351
6439
|
if (!value)
|
|
@@ -6534,7 +6622,7 @@ const TreeContext = createGlobalScopedContext(
|
|
|
6534
6622
|
) });
|
|
6535
6623
|
})
|
|
6536
6624
|
);
|
|
6537
|
-
Tree.displayName = "Tree";
|
|
6625
|
+
Tree.displayName = "Memo(ForwardRef(Tree))";
|
|
6538
6626
|
function treeItemRootStyle() {
|
|
6539
6627
|
return styledComponents.css`
|
|
6540
6628
|
&[role='none'] > [role='treeitem'] {
|
|
@@ -6753,6 +6841,7 @@ const TreeGroup = react.memo(function(props) {
|
|
|
6753
6841
|
}
|
|
6754
6842
|
);
|
|
6755
6843
|
});
|
|
6844
|
+
TreeItem.displayName = "Memo(TreeItem)";
|
|
6756
6845
|
exports.Arrow = Arrow;
|
|
6757
6846
|
exports.Autocomplete = Autocomplete;
|
|
6758
6847
|
exports.Avatar = Avatar;
|