@sanity/ui 2.0.0-alpha.29 → 2.0.0-alpha.30
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.esm.js +4 -29
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +4 -29
- package/dist/index.js.map +1 -1
- package/package.json +17 -17
- package/src/core/components/dialog/dialog.tsx +6 -80
- package/src/core/components/dialog/constants.ts +0 -4
package/dist/index.js
CHANGED
|
@@ -728,7 +728,7 @@ var ResizeObserverController = function () {
|
|
|
728
728
|
};
|
|
729
729
|
return ResizeObserverController;
|
|
730
730
|
}();
|
|
731
|
-
var ResizeObserver
|
|
731
|
+
var ResizeObserver = function () {
|
|
732
732
|
function ResizeObserver(callback) {
|
|
733
733
|
if (arguments.length === 0) {
|
|
734
734
|
throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");
|
|
@@ -764,7 +764,7 @@ var ResizeObserver$1 = function () {
|
|
|
764
764
|
};
|
|
765
765
|
return ResizeObserver;
|
|
766
766
|
}();
|
|
767
|
-
const _ResizeObserver = typeof document !== "undefined" && typeof window !== "undefined" && window.ResizeObserver ? window.ResizeObserver : ResizeObserver
|
|
767
|
+
const _ResizeObserver = typeof document !== "undefined" && typeof window !== "undefined" && window.ResizeObserver ? window.ResizeObserver : ResizeObserver;
|
|
768
768
|
const _elementSizeObserver = _createElementSizeObserver();
|
|
769
769
|
function _createElementRectValueListener() {
|
|
770
770
|
return {
|
|
@@ -5763,7 +5763,6 @@ const Breadcrumbs = react.forwardRef(function Breadcrumbs2(props, ref) {
|
|
|
5763
5763
|
}, itemIndex))
|
|
5764
5764
|
});
|
|
5765
5765
|
});
|
|
5766
|
-
const BORDER_OFFSET_X = 12;
|
|
5767
5766
|
var __freeze$c = Object.freeze;
|
|
5768
5767
|
var __defProp$c = Object.defineProperty;
|
|
5769
5768
|
var __template$c = (cooked, raw) => __freeze$c(__defProp$c(cooked, "raw", {
|
|
@@ -5828,9 +5827,9 @@ const Root$7 = styled__default.default(Layer)(responsivePaddingStyle, dialogStyl
|
|
|
5828
5827
|
const DialogContainer = styled__default.default(Container)(_a$b || (_a$b = __template$b(["\n &:not([hidden]) {\n display: flex;\n }\n width: 100%;\n height: 100%;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"])));
|
|
5829
5828
|
const DialogCardRoot = styled__default.default(Card)(_b$6 || (_b$6 = __template$b(["\n &:not([hidden]) {\n display: flex;\n }\n width: 100%;\n min-height: 0;\n max-height: 100%;\n overflow: hidden;\n overflow: clip;\n"])));
|
|
5830
5829
|
const DialogLayout = styled__default.default(Flex)(_c$2 || (_c$2 = __template$b(["\n flex: 1;\n min-height: 0;\n width: 100%;\n"])));
|
|
5831
|
-
const DialogHeader = styled__default.default(Box)(_d$1 || (_d$1 = __template$b(["\n position: relative;\n z-index: 2;\n
|
|
5830
|
+
const DialogHeader = styled__default.default(Box)(_d$1 || (_d$1 = __template$b(["\n position: relative;\n z-index: 2;\n"])));
|
|
5832
5831
|
const DialogContent = styled__default.default(Box)(_e || (_e = __template$b(["\n position: relative;\n z-index: 1;\n overflow: auto;\n outline: none;\n"])));
|
|
5833
|
-
const DialogFooter = styled__default.default(Box)(_f || (_f = __template$b(["\n position: relative;\n z-index: 3;\n
|
|
5832
|
+
const DialogFooter = styled__default.default(Box)(_f || (_f = __template$b(["\n position: relative;\n z-index: 3;\n"])));
|
|
5834
5833
|
const DialogCard = react.forwardRef(function DialogCard2(props, ref) {
|
|
5835
5834
|
var _a2;
|
|
5836
5835
|
const {
|
|
@@ -5865,9 +5864,6 @@ const DialogCard = react.forwardRef(function DialogCard2(props, ref) {
|
|
|
5865
5864
|
const labelId = "".concat(id, "_label");
|
|
5866
5865
|
const showCloseButton = Boolean(onClose) && hideCloseButton === false;
|
|
5867
5866
|
const showHeader = Boolean(header) || showCloseButton;
|
|
5868
|
-
const [isContentScrollable, setIsContentScrollable] = react.useState(false);
|
|
5869
|
-
const [hasScrolledFromTop, setHasScrolledFromTop] = react.useState(false);
|
|
5870
|
-
const [hasScrolledToBottom, setHasScrolledToBottom] = react.useState(false);
|
|
5871
5867
|
react.useEffect(() => {
|
|
5872
5868
|
if (!autoFocus) return;
|
|
5873
5869
|
if (forwardedRef.current) {
|
|
@@ -5902,22 +5898,6 @@ const DialogCard = react.forwardRef(function DialogCard2(props, ref) {
|
|
|
5902
5898
|
localContentRef.current = el;
|
|
5903
5899
|
if (typeof contentRef === "function") contentRef(el);else if (contentRef) contentRef.current = el;
|
|
5904
5900
|
}, [contentRef]);
|
|
5905
|
-
const handleContentUpdate = react.useCallback(() => {
|
|
5906
|
-
if (localContentRef.current) {
|
|
5907
|
-
setIsContentScrollable(localContentRef.current.clientHeight < localContentRef.current.scrollHeight);
|
|
5908
|
-
setHasScrolledFromTop(localContentRef.current.scrollTop > 0);
|
|
5909
|
-
setHasScrolledToBottom(localContentRef.current.scrollTop >= localContentRef.current.scrollHeight - localContentRef.current.clientHeight);
|
|
5910
|
-
}
|
|
5911
|
-
}, []);
|
|
5912
|
-
react.useEffect(() => {
|
|
5913
|
-
const resizeObserver = new ResizeObserver(handleContentUpdate);
|
|
5914
|
-
if (localContentRef.current) {
|
|
5915
|
-
resizeObserver.observe(localContentRef.current);
|
|
5916
|
-
}
|
|
5917
|
-
return () => {
|
|
5918
|
-
resizeObserver.disconnect();
|
|
5919
|
-
};
|
|
5920
|
-
}, [contentRef, handleContentUpdate]);
|
|
5921
5901
|
return /* @__PURE__ */jsxRuntime.jsx(DialogContainer, {
|
|
5922
5902
|
"data-ui": "DialogCard",
|
|
5923
5903
|
width,
|
|
@@ -5929,8 +5909,6 @@ const DialogCard = react.forwardRef(function DialogCard2(props, ref) {
|
|
|
5929
5909
|
children: /* @__PURE__ */jsxRuntime.jsxs(DialogLayout, {
|
|
5930
5910
|
direction: "column",
|
|
5931
5911
|
children: [showHeader && /* @__PURE__ */jsxRuntime.jsx(DialogHeader, {
|
|
5932
|
-
$isContentScrollable: isContentScrollable,
|
|
5933
|
-
$hasScrolledFromTop: hasScrolledFromTop,
|
|
5934
5912
|
children: /* @__PURE__ */jsxRuntime.jsxs(Flex, {
|
|
5935
5913
|
align: "center",
|
|
5936
5914
|
padding: 3,
|
|
@@ -5959,11 +5937,8 @@ const DialogCard = react.forwardRef(function DialogCard2(props, ref) {
|
|
|
5959
5937
|
flex: 1,
|
|
5960
5938
|
ref: setContentRef,
|
|
5961
5939
|
tabIndex: -1,
|
|
5962
|
-
onScroll: handleContentUpdate,
|
|
5963
5940
|
children
|
|
5964
5941
|
}), footer && /* @__PURE__ */jsxRuntime.jsx(DialogFooter, {
|
|
5965
|
-
$isContentScrollable: isContentScrollable,
|
|
5966
|
-
$hasScrolledToBottom: hasScrolledToBottom,
|
|
5967
5942
|
children: footer
|
|
5968
5943
|
})]
|
|
5969
5944
|
})
|