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

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps } from "react";
+import { ComponentProps } from "react";
 import { ComponentPropsWithRef } from "react";
 import { ElementType } from "react";
 import { JSX } from "react";
@@ -641,6 +641,45 @@ export declare type MarginProps = {
   marginLeft?: Responsive<SpaceAutoNegative>;
 };
 
+/**
+ * @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 declare const Modal: typeof ModalRoot;
+
+declare function ModalContent(props: ComponentProps<"div">): JSX.Element;
+
+declare function ModalFooter(props: ComponentProps<"div">): JSX.Element;
+
+/** @beta */
+export declare 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;
+}
+
+declare function ModalRoot(props: ModalProps): JSX.Element;
+
+declare namespace ModalRoot {
+  var displayName: string;
+  var Content: typeof ModalContent;
+  var Footer: typeof ModalFooter;
+}
+
 declare const OVERFLOW: readonly [
   "visible",
   "hidden",

package/dist/index.js

@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import clsx from "clsx";
 import { isValidElement, useRef, useEffect, lazy, Suspense, Children, useId, useState, cloneElement } from "react";
-import { SpinnerIcon, RemoveIcon, CheckmarkIcon } from "@sanity/icons";
+import { SpinnerIcon, RemoveIcon, CheckmarkIcon, CloseIcon } from "@sanity/icons";
 const PREFIX = "sui", BREAKPOINTS_LENGTH = 6;
 function getProps(componentProps, propDefs) {
   const {
@@ -95,7 +95,7 @@ function getCompositeValue(propValue, propDef, key) {
     compositeValue = mapping?.[propValue];
   return compositeValue;
 }
-const HASH = "cfa475";
+const HASH = "024922";
 function suffixClassName(className) {
   return `${className}-${HASH}`;
 }
@@ -1647,6 +1647,83 @@ ListRoot.Item = ListItem;
 ListRoot.ButtonItem = ListButtonItem;
 ListRoot.ItemText = ListItemText;
 ListRoot.ItemImage = ListItemImage;
+const modalProps = {
+  header: {
+    type: "string"
+  },
+  open: {
+    type: "boolean"
+  }
+}, modalClassName = suffixClassName("sui-Modal"), modalContentClassName = suffixClassName("sui-ModalContent"), modalFooterClassName = suffixClassName("sui-ModalFooter");
+function ModalRoot(props) {
+  const $ = c(14), {
+    children,
+    className,
+    style,
+    header,
+    open: t0,
+    onClose,
+    ...rest
+  } = getProps(props, modalProps), open = t0 === void 0 ? !1 : t0, modalRef = useRef(null), headerId = useId(), 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 ? dialogElement.open || dialogElement.showModal() : dialogElement.open && dialogElement.close(), () => {
+        dialogElement.close();
+      };
+  }, [open]);
+  const t1 = "any", t2 = header ? headerId : void 0, t3 = clsx(modalClasses, className);
+  let t4;
+  $[0] !== header || $[1] !== headerId ? (t4 = header ? /* @__PURE__ */ jsx(Heading, { trim: !0, size: 1, id: headerId, children: header }) : /* @__PURE__ */ jsx("div", {}), $[0] = header, $[1] = headerId, $[2] = t4) : t4 = $[2];
+  let t5;
+  $[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t5 = /* @__PURE__ */ jsx(IconButton, { "aria-label": "Close", level: "tertiary", icon: CloseIcon, onClick: () => modalRef.current?.close() }), $[3] = t5) : t5 = $[3];
+  let t6;
+  $[4] !== t4 ? (t6 = /* @__PURE__ */ jsxs(Flex, { flexShrink: 0, justifyContent: "space-between", alignItems: "center", children: [
+    t4,
+    t5
+  ] }), $[4] = t4, $[5] = t6) : t6 = $[5];
+  let t7;
+  return $[6] !== children || $[7] !== onClose || $[8] !== rest || $[9] !== style || $[10] !== t2 || $[11] !== t3 || $[12] !== t6 ? (t7 = /* @__PURE__ */ jsxs("dialog", { ...rest, ref: modalRef, closedby: t1, "aria-labelledby": t2, onClose, className: t3, style, "data-ui": "Modal", children: [
+    t6,
+    children
+  ] }), $[6] = children, $[7] = onClose, $[8] = rest, $[9] = style, $[10] = t2, $[11] = t3, $[12] = t6, $[13] = t7) : t7 = $[13], t7;
+}
+function ModalContent(props) {
+  const $ = c(12);
+  let T0, children, style, t0, t1;
+  if ($[0] !== props) {
+    const {
+      children: t22,
+      className,
+      style: t3,
+      ...rest
+    } = getProps(props, {});
+    children = t22, style = t3, T0 = Box, t0 = rest, t1 = clsx(modalContentClassName, className), $[0] = props, $[1] = T0, $[2] = children, $[3] = style, $[4] = t0, $[5] = t1;
+  } else
+    T0 = $[1], children = $[2], style = $[3], t0 = $[4], t1 = $[5];
+  let t2;
+  return $[6] !== T0 || $[7] !== children || $[8] !== style || $[9] !== t0 || $[10] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, { ...t0, className: t1, style, "data-ui": "ModalContent", flexGrow: 1, overflowY: "auto", children }), $[6] = T0, $[7] = children, $[8] = style, $[9] = t0, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
+}
+function ModalFooter(props) {
+  const $ = c(12);
+  let T0, children, style, t0, t1;
+  if ($[0] !== props) {
+    const {
+      children: t22,
+      className,
+      style: t3,
+      ...rest
+    } = getProps(props, {});
+    children = t22, style = t3, T0 = Box, t0 = rest, t1 = clsx(modalFooterClassName, className), $[0] = props, $[1] = T0, $[2] = children, $[3] = style, $[4] = t0, $[5] = t1;
+  } else
+    T0 = $[1], children = $[2], style = $[3], t0 = $[4], t1 = $[5];
+  let t2;
+  return $[6] !== T0 || $[7] !== children || $[8] !== style || $[9] !== t0 || $[10] !== t1 ? (t2 = /* @__PURE__ */ jsx(T0, { ...t0, className: t1, style, "data-ui": "ModalFooter", flexShrink: 0, children }), $[6] = T0, $[7] = children, $[8] = style, $[9] = t0, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
+}
+ModalRoot.displayName = "Modal";
+const Modal = ModalRoot;
+ModalRoot.Content = ModalContent;
+ModalRoot.Footer = ModalFooter;
 const radioProps = {
   error: {
     type: "boolean"
@@ -1870,6 +1947,7 @@ export {
   Label,
   Link,
   List,
+  Modal,
   PressArea,
   Radio,
   SkipToContent,