@sanity/ui 5.0.0-alpha.3 → 5.0.0-alpha.5

package/package.json

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

package/src/components/index.css

@@ -15,6 +15,7 @@
 @import './label/label.css';
 @import './link/link.css';
 @import './list/list.css';
+@import './modal/modal.css';
 @import './press-area/press-area.css';
 @import './radio/radio.css';
 @import './spinner/spinner.css';

package/src/components/modal/Modal.tsx

@@ -0,0 +1,144 @@
+import {CloseIcon} from '@sanity/icons'
+import clsx from 'clsx'
+import {type ComponentProps, useEffect, useId, useRef} from 'react'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+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'
+
+const modalClassName = suffixClassName('sui-Modal')
+const modalContentClassName = suffixClassName('sui-ModalContent')
+const modalFooterClassName = suffixClassName('sui-ModalFooter')
+
+function ModalRoot(props: ModalProps) {
+  const {
+    children,
+    className,
+    style,
+    header,
+    open = false,
+    onClose,
+    ...rest
+  } = getProps(props, modalProps)
+
+  const modalRef = useRef<HTMLDialogElement>(null)
+  const headerId = useId()
+
+  const modalClasses = clsx(
+    modalClassName,
+    '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
+    if (!dialogElement) return
+
+    // `open` = `open` prop
+    // dialogElement.open = the `open` attribute on the HTML dialog element
+    // The prop and the attribute are manipulated independently, thus they
+    // can get out of sync if not handled within this effect.
+    if (open) {
+      if (!dialogElement.open) {
+        dialogElement.showModal()
+      }
+    } else {
+      if (dialogElement.open) {
+        dialogElement.close()
+      }
+    }
+
+    // Ensure the modal is closed (and thus its `open` attribute updated)
+    // when the component is unmounted.
+    return () => {
+      dialogElement.close()
+    }
+  }, [open])
+
+  return (
+    <dialog
+      {...rest}
+      ref={modalRef}
+      closedby="any"
+      aria-labelledby={header ? headerId : undefined}
+      onClose={onClose}
+      className={clsx(modalClasses, className)}
+      style={style}
+      data-ui="Modal"
+    >
+      <Flex flexShrink={0} justifyContent="space-between" alignItems="center">
+        {header ? (
+          <Heading trim size={1} id={headerId}>
+            {header}
+          </Heading>
+        ) : (
+          <div />
+        )}
+        <IconButton
+          aria-label="Close"
+          level="tertiary"
+          icon={CloseIcon}
+          onClick={() => modalRef.current?.close()}
+        />
+      </Flex>
+      {children}
+    </dialog>
+  )
+}
+
+function ModalContent(props: ComponentProps<'div'>) {
+  const {children, className, style, ...rest} = getProps(props, {})
+
+  return (
+    <Box
+      {...rest}
+      className={clsx(modalContentClassName, className)}
+      style={style}
+      data-ui="ModalContent"
+      flexGrow={1}
+      overflowY="auto"
+    >
+      {children}
+    </Box>
+  )
+}
+
+function ModalFooter(props: ComponentProps<'div'>) {
+  const {children, className, style, ...rest} = getProps(props, {})
+
+  return (
+    <Box
+      {...rest}
+      className={clsx(modalFooterClassName, className)}
+      style={style}
+      data-ui="ModalFooter"
+      flexShrink={0}
+    >
+      {children}
+    </Box>
+  )
+}
+
+ModalRoot.displayName = 'Modal'
+
+/**
+ * @beta
+ *
+ * Renders a modal dialog element — should not be used for nonmodal dialogs.
+ * 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.
+ *
+ * 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
+
+ModalRoot.Content = ModalContent
+ModalRoot.Footer = ModalFooter
+
+export type {ModalProps}

package/src/components/modal/modal.css

@@ -0,0 +1,49 @@
+.sui-Modal {
+  min-width: 320px;
+  max-width: 80dvw;
+  max-height: 80dvh;
+  transition:
+    display 150ms allow-discrete,
+    overlay 150ms allow-discrete,
+    opacity 150ms var(--timing-linear),
+    scale 150ms var(--timing-curve);
+}
+
+.sui-Modal:not([open]) {
+  opacity: 0;
+  scale: 0.9;
+}
+
+.sui-Modal[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);
+  transition:
+    display 150ms allow-discrete,
+    overlay 150ms allow-discrete,
+    opacity 150ms var(--timing-linear);
+}
+
+.sui-Modal:not([open])::backdrop {
+  opacity: 0;
+}
+
+.sui-Modal[open]::backdrop {
+  opacity: 1;
+}
+
+@starting-style {
+  .sui-Modal[open] {
+    opacity: 0;
+    scale: 0.9;
+  }
+
+  .sui-Modal[open]::backdrop {
+    opacity: 0;
+  }
+}

package/src/components/modal/modal.props.ts

@@ -0,0 +1,20 @@
+import {type PropDef} from '../../types/PropDef'
+
+/** @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 */
+  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.)  */
+  onClose: React.ReactEventHandler<HTMLDialogElement>
+  /** Whether the modal is open; defaults to false. */
+  open?: boolean
+}
+
+export const modalProps: Record<string, PropDef> = {
+  header: {
+    type: 'string',
+  },
+  open: {
+    type: 'boolean',
+  },
+}

package/src/css/classes/generic/display.css

@@ -1,10 +1,10 @@
 @breakpoints {
-  .sui-display-block { display: block; }
-  .sui-display-inline-block { display: inline-block; }
-  .sui-display-inline { display: inline; }
-  .sui-display-flex { display: flex; }
-  .sui-display-inline-flex { display: inline-flex; }
-  .sui-display-grid { display: grid; }
-  .sui-display-inline-grid { display: inline-grid; }
-  .sui-display-none { display: none; }
+  .sui-display-block:not([hidden]) { display: block; }
+  .sui-display-inline-block:not([hidden]) { display: inline-block; }
+  .sui-display-inline:not([hidden]) { display: inline; }
+  .sui-display-flex:not([hidden]) { display: flex; }
+  .sui-display-inline-flex:not([hidden]) { display: inline-flex; }
+  .sui-display-grid:not([hidden]) { display: grid; }
+  .sui-display-inline-grid:not([hidden]) { display: inline-grid; }
+  .sui-display-none:not([hidden]) { display: none; }
 }

package/src/css/classes/local/animation.css

@@ -0,0 +1,4 @@
+:root {
+  --timing-linear: linear;
+  --timing-curve: cubic-bezier(0.34, 1.2, 0.64, 1);
+}

package/src/css/classes/local/index.css

@@ -1,3 +1,4 @@
+@import './animation.css';
 @import './border.css';
 @import './text-overflow.css';
 @import './text-trim.css';

package/src/index.ts

@@ -18,6 +18,7 @@ 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/press-area/PressArea'
 export * from './components/radio/Radio'
 export * from './components/skip-to-content/SkipToContent'

package/src/version.ts

@@ -1,3 +1,3 @@
 // This file is generated by scripts/write-version.js. Do not edit.
-export const VERSION = '500alpha3'
-export const HASH = 'cfa475'
+export const VERSION = '500alpha5'
+export const HASH = '024922'