@sanity/ui 2.0.0-alpha.3 → 2.0.0-alpha.4

package/dist/index.esm.js

@@ -721,7 +721,7 @@ var ResizeObserverController = function () {
   };
   return ResizeObserverController;
 }();
-var ResizeObserver = function () {
+var ResizeObserver$1 = function () {
   function ResizeObserver(callback) {
     if (arguments.length === 0) {
       throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");
@@ -757,7 +757,7 @@ var ResizeObserver = function () {
   };
   return ResizeObserver;
 }();
-const _ResizeObserver = typeof document !== "undefined" && typeof window !== "undefined" && window.ResizeObserver ? window.ResizeObserver : ResizeObserver;
+const _ResizeObserver = typeof document !== "undefined" && typeof window !== "undefined" && window.ResizeObserver ? window.ResizeObserver : ResizeObserver$1;
 const _elementSizeObserver = _createElementSizeObserver();
 function _createElementRectValueListener() {
   return {
@@ -7953,6 +7953,7 @@ const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
     }, itemIndex))
   });
 });
+const BORDER_OFFSET_X = 12;
 function dialogStyle(_ref24) {
   let {
     theme
@@ -8007,9 +8008,9 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
 const DialogContainer = styled(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"])));
 const DialogCardRoot = styled(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"])));
 const DialogLayout = styled(Flex)(_c$2 || (_c$2 = __template$b(["\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n"])));
-const DialogHeader = styled(Card)(_d$1 || (_d$1 = __template$b(["\n  position: relative;\n  z-index: 2;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -1px;\n    border-bottom: 1px solid var(--card-hairline-soft-color);\n  }\n"])));
+const DialogHeader = styled(Card)(_d$1 || (_d$1 = __template$b(["\n  position: relative;\n  z-index: 2;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: ", "px;\n    right: ", "px;\n    bottom: -1px;\n    border-bottom: 1px solid var(--card-border-color);\n    width: auto;\n    opacity: ", ";\n    transition: opacity 200ms ease-in;\n  }\n"])), BORDER_OFFSET_X, BORDER_OFFSET_X, props => props.$isContentScrollable && props.$hasScrolledFromTop ? 1 : 0);
 const DialogContent = styled(Box)(_e || (_e = __template$b(["\n  position: relative;\n  z-index: 1;\n  overflow: auto;\n  outline: none;\n"])));
-const DialogFooter = styled(Box)(_f || (_f = __template$b(["\n  position: relative;\n  z-index: 3;\n  border-top: 1px solid var(--card-hairline-soft-color);\n"])));
+const DialogFooter = styled(Box)(_f || (_f = __template$b(["\n  position: relative;\n  z-index: 3;\n\n  &:before {\n    content: '';\n    display: block;\n    position: absolute;\n    left: ", "px;\n    right: ", "px;\n    top: -1px;\n    border-top: 1px solid var(--card-border-color);\n    width: auto;\n    opacity: ", ";\n    transition: opacity 200ms ease-in;\n  }\n"])), BORDER_OFFSET_X, BORDER_OFFSET_X, props => props.$isContentScrollable && !props.$hasScrolledToBottom ? 1 : 0);
 const DialogCard = forwardRef(function DialogCard2(props, ref) {
   var _a2;
   const {
@@ -8044,6 +8045,9 @@ const DialogCard = forwardRef(function DialogCard2(props, ref) {
   const labelId = "".concat(id, "_label");
   const showCloseButton = Boolean(onClose) && hideCloseButton === false;
   const showHeader = Boolean(header) || showCloseButton;
+  const [isContentScrollable, setIsContentScrollable] = useState(false);
+  const [hasScrolledFromTop, setHasScrolledFromTop] = useState(false);
+  const [hasScrolledToBottom, setHasScrolledToBottom] = useState(false);
   useEffect(() => {
     if (!autoFocus) return;
     if (forwardedRef.current) {
@@ -8078,6 +8082,22 @@ const DialogCard = forwardRef(function DialogCard2(props, ref) {
     localContentRef.current = el;
     if (typeof contentRef === "function") contentRef(el);else if (contentRef) contentRef.current = el;
   }, [contentRef]);
+  const handleContentUpdate = useCallback(() => {
+    if (localContentRef.current) {
+      setIsContentScrollable(localContentRef.current.clientHeight < localContentRef.current.scrollHeight);
+      setHasScrolledFromTop(localContentRef.current.scrollTop > 0);
+      setHasScrolledToBottom(localContentRef.current.scrollTop >= localContentRef.current.scrollHeight - localContentRef.current.clientHeight);
+    }
+  }, []);
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(handleContentUpdate);
+    if (localContentRef.current) {
+      resizeObserver.observe(localContentRef.current);
+    }
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [contentRef, handleContentUpdate]);
   return /* @__PURE__ */jsx(DialogContainer, {
     "data-ui": "DialogCard",
     width,
@@ -8089,13 +8109,16 @@ const DialogCard = forwardRef(function DialogCard2(props, ref) {
       children: /* @__PURE__ */jsxs(DialogLayout, {
         direction: "column",
         children: [showHeader && /* @__PURE__ */jsx(DialogHeader, {
+          $isContentScrollable: isContentScrollable,
+          $hasScrolledFromTop: hasScrolledFromTop,
           children: /* @__PURE__ */jsxs(Flex, {
             children: [/* @__PURE__ */jsx(Box, {
               flex: 1,
               padding: 4,
               children: header && /* @__PURE__ */jsx(Text, {
                 id: labelId,
-                weight: "semibold",
+                size: 1,
+                weight: "medium",
                 children: header
               })
             }), showCloseButton && /* @__PURE__ */jsx(Box, {
@@ -8114,8 +8137,11 @@ const DialogCard = forwardRef(function DialogCard2(props, ref) {
           flex: 1,
           ref: setContentRef,
           tabIndex: -1,
+          onScroll: handleContentUpdate,
           children
         }), footer && /* @__PURE__ */jsx(DialogFooter, {
+          $isContentScrollable: isContentScrollable,
+          $hasScrolledToBottom: hasScrolledToBottom,
           children: footer
         })]
       })