@sanity/ui 2.0.0-alpha.29 → 2.0.0-alpha.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-alpha.29",
+  "version": "2.0.0-alpha.30",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./exports/index.ts",
@@ -89,20 +89,20 @@
     "@sanity/pkg-utils": "^2.4.8",
     "@sanity/semantic-release-preset": "^4.1.4",
     "@sanity/ui-workshop": "^2.0.2",
-    "@storybook/addon-a11y": "^7.4.5",
-    "@storybook/addon-docs": "^7.4.5",
-    "@storybook/addon-essentials": "^7.4.5",
-    "@storybook/addon-interactions": "^7.4.5",
-    "@storybook/addon-links": "^7.4.5",
-    "@storybook/addon-storysource": "^7.4.5",
-    "@storybook/addon-themes": "^7.4.5",
-    "@storybook/blocks": "^7.4.5",
-    "@storybook/jest": "^0.2.2",
-    "@storybook/manager-api": "^7.4.5",
-    "@storybook/react": "^7.4.5",
-    "@storybook/react-vite": "^7.4.5",
-    "@storybook/testing-library": "^0.2.1",
-    "@storybook/theming": "^7.4.5",
+    "@storybook/addon-a11y": "^7.6.1",
+    "@storybook/addon-docs": "^7.6.1",
+    "@storybook/addon-essentials": "^7.6.1",
+    "@storybook/addon-interactions": "^7.6.1",
+    "@storybook/addon-links": "^7.6.1",
+    "@storybook/addon-storysource": "^7.6.1",
+    "@storybook/addon-themes": "^7.6.1",
+    "@storybook/blocks": "^7.6.1",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/manager-api": "^7.6.1",
+    "@storybook/react": "^7.6.1",
+    "@storybook/react-vite": "^7.6.1",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.6.1",
     "@testing-library/dom": "^9.3.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
@@ -128,7 +128,7 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.14",
+    "eslint-plugin-storybook": "^0.6.15",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
     "jest": "^29.6.4",
@@ -145,7 +145,7 @@
     "rimraf": "^5.0.1",
     "semantic-release": "^21.1.1",
     "start-server-and-test": "^2.0.0",
-    "storybook": "^7.5.2",
+    "storybook": "^7.6.1",
     "styled-components": "^6.0.7",
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.2.2",

package/src/core/components/dialog/dialog.tsx

@@ -9,13 +9,12 @@ import {
   isHTMLElement,
 } from '../../helpers'
 import {useArrayProp, useClickOutside, useForwardedRef, useGlobalKeyDown} from '../../hooks'
-import {Box, Button, Card, CardProps, Container, Flex, Text} from '../../primitives'
+import {Box, Button, Card, Container, Flex, Text} from '../../primitives'
 import {ResponsivePaddingProps, ResponsiveWidthProps} from '../../primitives/types'
 import {responsivePaddingStyle, ResponsivePaddingStyleProps} from '../../styles/internal'
 import {useTheme} from '../../theme'
 import {DialogPosition, Radius} from '../../types'
 import {Layer, LayerProps, Portal, useBoundaryElement, useLayer, usePortal} from '../../utils'
-import {BORDER_OFFSET_X} from './constants'
 import {
   animationDialogStyle,
   AnimationDialogStyleProps,
@@ -82,15 +81,6 @@ interface DialogCardProps extends ResponsiveWidthProps {
   shadow: number | number[]
 }
 
-interface DialogHeaderProps extends CardProps {
-  $hasScrolledFromTop: boolean
-  $isContentScrollable: boolean
-}
-interface DialogFooterProps extends CardProps {
-  $hasScrolledToBottom: boolean
-  $isContentScrollable: boolean
-}
-
 function isTargetWithinScope(
   boundaryElement: HTMLElement | null,
   portalElement: HTMLElement | null,
@@ -136,22 +126,9 @@ const DialogLayout = styled(Flex)`
   width: 100%;
 `
 
-const DialogHeader = styled(Box)<DialogHeaderProps>`
+const DialogHeader = styled(Box)`
   position: relative;
   z-index: 2;
-
-  &:after {
-    content: '';
-    display: block;
-    position: absolute;
-    left: ${BORDER_OFFSET_X}px;
-    right: ${BORDER_OFFSET_X}px;
-    bottom: -1px;
-    border-bottom: 1px solid var(--card-border-color);
-    width: auto;
-    opacity: ${(props) => (props.$isContentScrollable && props.$hasScrolledFromTop ? 1 : 0)};
-    transition: opacity 200ms ease-in;
-  }
 `
 
 const DialogContent = styled(Box)`
@@ -161,22 +138,9 @@ const DialogContent = styled(Box)`
   outline: none;
 `
 
-const DialogFooter = styled(Box)<DialogFooterProps>`
+const DialogFooter = styled(Box)`
   position: relative;
   z-index: 3;
-
-  &:before {
-    content: '';
-    display: block;
-    position: absolute;
-    left: ${BORDER_OFFSET_X}px;
-    right: ${BORDER_OFFSET_X}px;
-    top: -1px;
-    border-top: 1px solid var(--card-border-color);
-    width: auto;
-    opacity: ${(props) => (props.$isContentScrollable && !props.$hasScrolledToBottom ? 1 : 0)};
-    transition: opacity 200ms ease-in;
-  }
 `
 
 const DialogCard = forwardRef(function DialogCard(
@@ -213,9 +177,6 @@ const DialogCard = forwardRef(function DialogCard(
   const labelId = `${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
@@ -284,40 +245,12 @@ const DialogCard = forwardRef(function DialogCard(
     [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 (
     <DialogContainer data-ui="DialogCard" width={width}>
       <DialogCardRoot radius={radius} ref={setRef} scheme={scheme} shadow={shadow}>
         <DialogLayout direction="column">
           {showHeader && (
-            <DialogHeader
-              $isContentScrollable={isContentScrollable}
-              $hasScrolledFromTop={hasScrolledFromTop}
-            >
+            <DialogHeader>
               <Flex align="center" padding={3}>
                 <Box flex={1} padding={2}>
                   {header && (
@@ -342,18 +275,11 @@ const DialogCard = forwardRef(function DialogCard(
             </DialogHeader>
           )}
 
-          <DialogContent flex={1} ref={setContentRef} tabIndex={-1} onScroll={handleContentUpdate}>
+          <DialogContent flex={1} ref={setContentRef} tabIndex={-1}>
             {children}
           </DialogContent>
 
-          {footer && (
-            <DialogFooter
-              $isContentScrollable={isContentScrollable}
-              $hasScrolledToBottom={hasScrolledToBottom}
-            >
-              {footer}
-            </DialogFooter>
-          )}
+          {footer && <DialogFooter>{footer}</DialogFooter>}
         </DialogLayout>
       </DialogCardRoot>
     </DialogContainer>

package/src/core/components/dialog/constants.ts

@@ -1,4 +0,0 @@
-/**
- * Left/right border offsets for header + footer components (in px).
- */
-export const BORDER_OFFSET_X: number = 12