@sanity/ui 5.0.0-alpha.6 → 5.0.0-alpha.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "5.0.0-alpha.6",
+  "version": "5.0.0-alpha.7",
   "description": "Sanity UI Library",
   "keywords": [
     "components",

package/src/components/{modal/Modal.tsx → dialog/Dialog.tsx}

@@ -8,28 +8,28 @@ import {Box} from '../box/Box'
 import {Flex} from '../flex/Flex'
 import {Heading} from '../heading/Heading'
 import {IconButton} from '../icon-button/IconButton'
-import {type ModalProps, modalProps} from './modal.props'
+import {type DialogProps, dialogProps} from './dialog.props'
 
-const modalClassName = suffixClassName('sui-Modal')
-const modalContentClassName = suffixClassName('sui-ModalContent')
-const modalFooterClassName = suffixClassName('sui-ModalFooter')
+const dialogClassName = suffixClassName('sui-Dialog')
+const dialogContentClassName = suffixClassName('sui-DialogContent')
+const dialogFooterClassName = suffixClassName('sui-DialogFooter')
 
-function ModalRoot({open = false, size = 0, ...props}: ModalProps) {
+function DialogRoot({open = false, size = 0, ...props}: DialogProps) {
   const {children, className, style, header, onClose, ...rest} = getProps(
     {size, ...props},
-    modalProps,
+    dialogProps,
   )
 
-  const modalRef = useRef<HTMLDialogElement>(null)
+  const dialogRef = useRef<HTMLDialogElement>(null)
   const headerId = useId()
 
-  const modalClasses = clsx(
-    modalClassName,
+  const dialogClasses = clsx(
+    dialogClassName,
     'sui-inset0 sui-m-auto sui-radius5 sui-shadow3 sui-p4 sui-flex-direction-column sui-gap4 sui-overflow-y-auto',
   )
 
   useEffect(() => {
-    const dialogElement = modalRef.current
+    const dialogElement = dialogRef.current
     if (!dialogElement) return
 
     // `open` = `open` prop
@@ -46,7 +46,7 @@ function ModalRoot({open = false, size = 0, ...props}: ModalProps) {
       }
     }
 
-    // Ensure the modal is closed (and thus its `open` attribute updated)
+    // Ensure the dialog is closed (and thus its `open` attribute updated)
     // when the component is unmounted.
     return () => {
       dialogElement.close()
@@ -56,13 +56,13 @@ function ModalRoot({open = false, size = 0, ...props}: ModalProps) {
   return (
     <dialog
       {...rest}
-      ref={modalRef}
+      ref={dialogRef}
       closedby="any"
       aria-labelledby={header ? headerId : undefined}
       onClose={onClose}
-      className={clsx(modalClasses, className)}
+      className={clsx(dialogClasses, className)}
       style={style}
-      data-ui="Modal"
+      data-ui="Dialog"
     >
       <Flex flexShrink={0} justifyContent="space-between" alignItems="center">
         {header ? (
@@ -76,7 +76,7 @@ function ModalRoot({open = false, size = 0, ...props}: ModalProps) {
           aria-label="Close"
           level="tertiary"
           icon={CloseIcon}
-          onClick={() => modalRef.current?.close()}
+          onClick={() => dialogRef.current?.close()}
         />
       </Flex>
       {children}
@@ -84,15 +84,15 @@ function ModalRoot({open = false, size = 0, ...props}: ModalProps) {
   )
 }
 
-function ModalContent(props: ComponentProps<'div'>) {
+function DialogContent(props: ComponentProps<'div'>) {
   const {children, className, style, ...rest} = getProps(props, {})
 
   return (
     <Box
       {...rest}
-      className={clsx(modalContentClassName, className)}
+      className={clsx(dialogContentClassName, className)}
       style={style}
-      data-ui="ModalContent"
+      data-ui="DialogContent"
       flexGrow={1}
       overflowY="auto"
     >
@@ -101,15 +101,15 @@ function ModalContent(props: ComponentProps<'div'>) {
   )
 }
 
-function ModalFooter(props: ComponentProps<'div'>) {
+function DialogFooter(props: ComponentProps<'div'>) {
   const {children, className, style, ...rest} = getProps(props, {})
 
   return (
     <Box
       {...rest}
-      className={clsx(modalFooterClassName, className)}
+      className={clsx(dialogFooterClassName, className)}
       style={style}
-      data-ui="ModalFooter"
+      data-ui="DialogFooter"
       flexShrink={0}
     >
       {children}
@@ -117,7 +117,7 @@ function ModalFooter(props: ComponentProps<'div'>) {
   )
 }
 
-ModalRoot.displayName = 'Modal'
+DialogRoot.displayName = 'Dialog'
 
 /**
  * @beta
@@ -126,14 +126,14 @@ ModalRoot.displayName = 'Modal'
  * Modal dialogs make their containing documents inert, and render on the topmost
  * layer within that containing document; they must be dimissed before the containing
  * document and its contents become unblocked. They also trap focus within the bounds
- * of the modal element and its descendants.
+ * of the dialog element and its descendants.
  *
  * For more on dialogs and modality, refer to the HTML specification for the dialog element:
  * https://html.spec.whatwg.org/dev/interactive-elements.html#the-dialog-element
  */
-export const Modal = ModalRoot
+export const Dialog = DialogRoot
 
-ModalRoot.Content = ModalContent
-ModalRoot.Footer = ModalFooter
+DialogRoot.Content = DialogContent
+DialogRoot.Footer = DialogFooter
 
-export type {ModalProps}
+export type {DialogProps}

package/src/components/{modal/modal.css → dialog/dialog.css}

@@ -1,5 +1,5 @@
-.sui-Modal {
-  /* Computed width is moderated by Modal's size prop, which controls max-width */
+.sui-Dialog {
+  /* Computed width is moderated by Dialog's size prop, which controls max-width */
   width: calc(100dvw - 2rem);
   max-height: calc(100dvh - 2rem);
   transition:
@@ -9,41 +9,41 @@
     scale 150ms var(--timing-curve);
 }
 
-.sui-Modal:not([open]) {
+.sui-Dialog:not([open]) {
   opacity: 0;
   scale: 0.9;
 }
 
-.sui-Modal[open] {
+.sui-Dialog[open] {
   display: flex;
   opacity: 1;
   scale: 1;
 }
 
-.sui-Modal::backdrop {
-  --modal-backdrop: hsl(from var(--separator-high) h s l / var(--overlay-opacity));
-  background-color: var(--modal-backdrop);
+.sui-Dialog::backdrop {
+  --dialog-backdrop: hsl(from var(--separator-high) h s l / var(--overlay-opacity));
+  background-color: var(--dialog-backdrop);
   transition:
     display 150ms allow-discrete,
     overlay 150ms allow-discrete,
     opacity 150ms var(--timing-linear);
 }
 
-.sui-Modal:not([open])::backdrop {
+.sui-Dialog:not([open])::backdrop {
   opacity: 0;
 }
 
-.sui-Modal[open]::backdrop {
+.sui-Dialog[open]::backdrop {
   opacity: 1;
 }
 
 @starting-style {
-  .sui-Modal[open] {
+  .sui-Dialog[open] {
     opacity: 0;
     scale: 0.9;
   }
 
-  .sui-Modal[open]::backdrop {
+  .sui-Dialog[open]::backdrop {
     opacity: 0;
   }
 }

package/src/components/{modal/modal.props.ts → dialog/dialog.props.ts}

@@ -3,18 +3,18 @@ import {type PropDef} from '../../types/PropDef'
 import type {Responsive} from '../../types/Responsive'
 
 /** @beta */
-export interface ModalProps extends Omit<React.ComponentProps<'dialog'>, 'open'> {
-  /** Text to be displayed as the modal's heading; optional but recommended for optimal accessibility and presentation */
+export interface DialogProps extends Omit<React.ComponentProps<'dialog'>, 'open'> {
+  /** Text to be displayed as the dialog's heading; optional but recommended for optimal accessibility and presentation */
   header?: string
-  /** Used to set the value of open to false. Fires whenever the modal is closed, either programmatically or by the user (via Esc key, clicking background, clicking the modal's close button, or any other means.)  */
+  /** Used to set the value of open to false. Fires whenever the dialog is closed, either programmatically or by the user (via Esc key, clicking background, clicking the dialog's close button, or any other means.)  */
   onClose: React.ReactEventHandler<HTMLDialogElement>
-  /** Whether the modal is open; defaults to false. */
+  /** Whether the dialog is open; defaults to false. */
   open?: boolean
-  /** Max width of the modal */
+  /** Max width of the dialog */
   size?: Responsive<ContainerSize>
 }
 
-export const modalProps: Record<string, PropDef> = {
+export const dialogProps: Record<string, PropDef> = {
   header: {
     type: 'string',
   },

package/src/components/index.css

@@ -4,6 +4,7 @@
 @import './checkbox/checkbox.css';
 @import './code/code.css';
 @import './container/container.css';
+@import './dialog/dialog.css';
 @import './eyebrow/eyebrow.css';
 @import './flex/flex.css';
 @import './grid/grid.css';
@@ -15,7 +16,6 @@
 @import './label/label.css';
 @import './link/link.css';
 @import './list/list.css';
-@import './modal/modal.css';
 @import './popover/popover.css';
 @import './press-area/press-area.css';
 @import './radio/radio.css';

package/src/index.ts

@@ -4,6 +4,7 @@ export * from './components/card/Card'
 export * from './components/checkbox/Checkbox'
 export * from './components/code/Code'
 export * from './components/container/Container'
+export * from './components/dialog/Dialog'
 export * from './components/divider/Divider'
 export * from './components/eyebrow/Eyebrow'
 export * from './components/flex/Flex'
@@ -18,7 +19,6 @@ export * from './components/inline/Inline'
 export * from './components/label/Label'
 export * from './components/link/Link'
 export * from './components/list/List'
-export * from './components/modal/Modal'
 export * from './components/popover/Popover'
 export * from './components/press-area/PressArea'
 export * from './components/radio/Radio'

package/src/version.ts

@@ -1,3 +1,3 @@
 // This file is generated by scripts/write-version.js. Do not edit.
-export const VERSION = '500alpha6'
-export const HASH = '71d7e5'
+export const VERSION = '500alpha7'
+export const HASH = '47d232'