@ceed/cds 1.34.1 → 1.35.0

package/dist/components/feedback/Modal.md

@@ -6,23 +6,23 @@ The Modal component is a dialog overlay that appears on top of the main content,
 
 ```tsx
 <>
-  <Button onClick={() => setOpen(true)}>Open Modal</Button>
-  <Modal open={open} onClose={() => setOpen(false)}>
-    <ModalDialog>
-      <ModalClose />
-      <DialogTitle>Modal Title</DialogTitle>
-      <DialogContent>This is the modal content. You can place any content here.</DialogContent>
-      <DialogActions>
-        <Button variant="solid" onClick={() => setOpen(false)}>
-          Confirm
-        </Button>
-        <Button variant="plain" color="neutral" onClick={() => setOpen(false)}>
-          Cancel
-        </Button>
-      </DialogActions>
-    </ModalDialog>
-  </Modal>
-</>
+    <Button onClick={() => setOpen(true)}>Open Modal</Button>
+    <Modal open={open} onClose={() => setOpen(false)}>
+      <ModalDialog>
+        <ModalClose />
+        <DialogTitle>Modal Title</DialogTitle>
+        <DialogContent>This is the modal content. You can place any content here.</DialogContent>
+        <DialogActions>
+          <Button variant="solid" onClick={() => setOpen(false)}>
+            Confirm
+          </Button>
+          <Button variant="plain" color="neutral" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+        </DialogActions>
+      </ModalDialog>
+    </Modal>
+  </>
 ```
 
 | Field                        | Description | Default |
@@ -94,31 +94,50 @@ The basic modal with a simple Sheet for custom layouts.
 
 ```tsx
 <>
-  <Button onClick={() => setOpen(true)}>Open Basic Modal</Button>
-  <Modal aria-labelledby="modal-title" aria-describedby="modal-desc" open={open} onClose={() => setOpen(false)} sx={{
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center'
-  }}>
-  <Sheet variant="outlined" sx={{
-    maxWidth: 500,
-    borderRadius: 'md',
-    p: 3,
-    boxShadow: 'lg'
-  }}>
-  <ModalClose variant="plain" sx={{
-    m: 1
-  }} />
-  <Typography component="h2" id="modal-title" level="h4" textColor="inherit" fontWeight="lg" mb={2}>
-    This is the modal title
-  </Typography>
-  <Typography id="modal-desc" textColor="text.tertiary">
-    Make sure to use <code>aria-labelledby</code> on the modal dialog with an optional{' '}
-    <code>aria-describedby</code> attribute.
-  </Typography>
-</Sheet>
-</Modal>
-</>
+    <Button onClick={() => setOpen(true)}>Open Basic Modal</Button>
+    <Modal
+      aria-labelledby="modal-title"
+      aria-describedby="modal-desc"
+      open={open}
+      onClose={() => setOpen(false)}
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      }}
+    >
+      <Sheet
+        variant="outlined"
+        sx={{
+          maxWidth: 500,
+          borderRadius: "md",
+          p: 3,
+          boxShadow: "lg"
+        }}
+      >
+        <ModalClose
+          variant="plain"
+          sx={{
+            m: 1
+          }}
+        />
+        <Typography
+          component="h2"
+          id="modal-title"
+          level="h4"
+          textColor="inherit"
+          fontWeight="lg"
+          mb={2}
+        >
+          This is the modal title
+        </Typography>
+        <Typography id="modal-desc" textColor="text.tertiary">
+          Make sure to use <code>aria-labelledby</code> on the modal dialog with an optional{" "}
+          <code>aria-describedby</code> attribute.
+        </Typography>
+      </Sheet>
+    </Modal>
+  </>
 ```
 
 ### Modal Dialog
@@ -127,33 +146,35 @@ Use ModalDialog for structured dialogs with title, content, and actions.
 
 ```tsx
 <>
-  <Button onClick={() => setOpen(true)}>Open Form Modal</Button>
-  <Modal open={open} onClose={() => setOpen(false)}>
-    <ModalDialog>
-      <ModalClose />
-      <DialogTitle>Create new project</DialogTitle>
-      <DialogContent>
-        Fill in the information of the project.
-        <form onSubmit={(event: React.FormEvent<HTMLFormElement>) => {
-          event.preventDefault();
-          setOpen(false);
-        }}>
-        <Stack spacing={4}>
-          <FormControl>
-            <FormLabel>Name</FormLabel>
-            <Input required />
-          </FormControl>
-          <FormControl>
-            <FormLabel>Description</FormLabel>
-            <Input required />
-          </FormControl>
-          <Button type="submit">Submit</Button>
-        </Stack>
-      </form>
-    </DialogContent>
-  </ModalDialog>
-</Modal>
-</>
+    <Button onClick={() => setOpen(true)}>Open Form Modal</Button>
+    <Modal open={open} onClose={() => setOpen(false)}>
+      <ModalDialog>
+        <ModalClose />
+        <DialogTitle>Create new project</DialogTitle>
+        <DialogContent>
+          Fill in the information of the project.
+          <form
+            onSubmit={(event: React.FormEvent<HTMLFormElement>) => {
+              event.preventDefault();
+              setOpen(false);
+            }}
+          >
+            <Stack spacing={4}>
+              <FormControl>
+                <FormLabel>Name</FormLabel>
+                <Input required />
+              </FormControl>
+              <FormControl>
+                <FormLabel>Description</FormLabel>
+                <Input required />
+              </FormControl>
+              <Button type="submit">Submit</Button>
+            </Stack>
+          </form>
+        </DialogContent>
+      </ModalDialog>
+    </Modal>
+  </>
 ```
 
 ### Variants
@@ -164,60 +185,60 @@ Modal dialogs support different visual variants.
 
 ```tsx
 <>
-  <Button onClick={() => setOpen(true)}>Plain Variant</Button>
-  <Modal open={open} onClose={() => setOpen(false)}>
-    <ModalDialog variant="plain">
-      <ModalClose />
-      <DialogTitle>Modal Dialog</DialogTitle>
-      <DialogContent>This is a `plain` modal dialog.</DialogContent>
-    </ModalDialog>
-  </Modal>
-</>
+    <Button onClick={() => setOpen(true)}>Plain Variant</Button>
+    <Modal open={open} onClose={() => setOpen(false)}>
+      <ModalDialog variant="plain">
+        <ModalClose />
+        <DialogTitle>Modal Dialog</DialogTitle>
+        <DialogContent>This is a `plain` modal dialog.</DialogContent>
+      </ModalDialog>
+    </Modal>
+  </>
 ```
 
 #### Outlined Variant
 
 ```tsx
 <>
-  <Button onClick={() => setOpen(true)}>Outlined Variant</Button>
-  <Modal open={open} onClose={() => setOpen(false)}>
-    <ModalDialog variant="outlined">
-      <ModalClose />
-      <DialogTitle>Modal Dialog</DialogTitle>
-      <DialogContent>This is an `outlined` modal dialog.</DialogContent>
-    </ModalDialog>
-  </Modal>
-</>
+    <Button onClick={() => setOpen(true)}>Outlined Variant</Button>
+    <Modal open={open} onClose={() => setOpen(false)}>
+      <ModalDialog variant="outlined">
+        <ModalClose />
+        <DialogTitle>Modal Dialog</DialogTitle>
+        <DialogContent>This is an `outlined` modal dialog.</DialogContent>
+      </ModalDialog>
+    </Modal>
+  </>
 ```
 
 #### Soft Variant
 
 ```tsx
 <>
-  <Button onClick={() => setOpen(true)}>Soft Variant</Button>
-  <Modal open={open} onClose={() => setOpen(false)}>
-    <ModalDialog variant="soft">
-      <ModalClose />
-      <DialogTitle>Modal Dialog</DialogTitle>
-      <DialogContent>This is a `soft` modal dialog.</DialogContent>
-    </ModalDialog>
-  </Modal>
-</>
+    <Button onClick={() => setOpen(true)}>Soft Variant</Button>
+    <Modal open={open} onClose={() => setOpen(false)}>
+      <ModalDialog variant="soft">
+        <ModalClose />
+        <DialogTitle>Modal Dialog</DialogTitle>
+        <DialogContent>This is a `soft` modal dialog.</DialogContent>
+      </ModalDialog>
+    </Modal>
+  </>
 ```
 
 #### Solid Variant
 
 ```tsx
 <>
-  <Button onClick={() => setOpen(true)}>Solid Variant</Button>
-  <Modal open={open} onClose={() => setOpen(false)}>
-    <ModalDialog variant="solid">
-      <ModalClose />
-      <DialogTitle>Modal Dialog</DialogTitle>
-      <DialogContent>This is a `solid` modal dialog.</DialogContent>
-    </ModalDialog>
-  </Modal>
-</>
+    <Button onClick={() => setOpen(true)}>Solid Variant</Button>
+    <Modal open={open} onClose={() => setOpen(false)}>
+      <ModalDialog variant="solid">
+        <ModalClose />
+        <DialogTitle>Modal Dialog</DialogTitle>
+        <DialogContent>This is a `solid` modal dialog.</DialogContent>
+      </ModalDialog>
+    </Modal>
+  </>
 ```
 
 ### Alert Dialog
@@ -226,28 +247,28 @@ For critical confirmations that require explicit user decision.
 
 ```tsx
 <>
-  <Button color="danger" onClick={() => setOpen(true)}>
-    Delete Item
-  </Button>
-  <Modal open={open} onClose={() => setOpen(false)}>
-    <ModalDialog variant="outlined" role="alertdialog">
-      <DialogTitle>
-        <WarningRoundedIcon />
-        Confirmation
-      </DialogTitle>
-      <Divider />
-      <DialogContent>Are you sure you want to discard all of your notes?</DialogContent>
-      <DialogActions>
-        <Button variant="solid" color="danger" onClick={() => setOpen(false)}>
-          Discard notes
-        </Button>
-        <Button variant="plain" color="neutral" onClick={() => setOpen(false)}>
-          Cancel
-        </Button>
-      </DialogActions>
-    </ModalDialog>
-  </Modal>
-</>
+    <Button color="danger" onClick={() => setOpen(true)}>
+      Delete Item
+    </Button>
+    <Modal open={open} onClose={() => setOpen(false)}>
+      <ModalDialog variant="outlined" role="alertdialog">
+        <DialogTitle>
+          <WarningRoundedIcon />
+          Confirmation
+        </DialogTitle>
+        <Divider />
+        <DialogContent>Are you sure you want to discard all of your notes?</DialogContent>
+        <DialogActions>
+          <Button variant="solid" color="danger" onClick={() => setOpen(false)}>
+            Discard notes
+          </Button>
+          <Button variant="plain" color="neutral" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+        </DialogActions>
+      </ModalDialog>
+    </Modal>
+  </>
 ```
 
 ### Layouts
@@ -258,20 +279,20 @@ For complex content that requires maximum screen space.
 
 ```tsx
 <>
-  <Button onClick={() => setOpen(true)}>Open Fullscreen Modal</Button>
-  <Modal open={open} onClose={() => setOpen(false)}>
-    <ModalDialog layout="fullscreen">
-      <ModalClose />
-      <DialogTitle>Fullscreen Modal</DialogTitle>
-      <DialogContent>This modal takes up the entire screen.</DialogContent>
-      <DialogActions>
-        <Button variant="solid" onClick={() => setOpen(false)}>
-          Save
-        </Button>
-      </DialogActions>
-    </ModalDialog>
-  </Modal>
-</>
+    <Button onClick={() => setOpen(true)}>Open Fullscreen Modal</Button>
+    <Modal open={open} onClose={() => setOpen(false)}>
+      <ModalDialog layout="fullscreen">
+        <ModalClose />
+        <DialogTitle>Fullscreen Modal</DialogTitle>
+        <DialogContent>This modal takes up the entire screen.</DialogContent>
+        <DialogActions>
+          <Button variant="solid" onClick={() => setOpen(false)}>
+            Save
+          </Button>
+        </DialogActions>
+      </ModalDialog>
+    </Modal>
+  </>
 ```
 
 ### Nested Modals
@@ -280,28 +301,30 @@ Modals can be stacked on top of each other when necessary.
 
 ```tsx
 <>
-  <Button onClick={() => setFirstOpen(true)}>Open First Modal</Button>
-  <Modal open={firstOpen} onClose={() => setFirstOpen(false)}>
-    <ModalDialog>
-      <ModalClose />
-      <DialogTitle>First Modal</DialogTitle>
-      <DialogContent>This is the first modal. Click the button below to open a nested modal.</DialogContent>
-      <DialogActions>
-        <Button onClick={() => setSecondOpen(true)}>Open Nested Modal</Button>
-      </DialogActions>
-    </ModalDialog>
-  </Modal>
-  <Modal open={secondOpen} onClose={() => setSecondOpen(false)}>
-    <ModalDialog>
-      <ModalClose />
-      <DialogTitle>Nested Modal</DialogTitle>
-      <DialogContent>This is a nested modal on top of the first one.</DialogContent>
-      <DialogActions>
-        <Button onClick={() => setSecondOpen(false)}>Close</Button>
-      </DialogActions>
-    </ModalDialog>
-  </Modal>
-</>
+    <Button onClick={() => setFirstOpen(true)}>Open First Modal</Button>
+    <Modal open={firstOpen} onClose={() => setFirstOpen(false)}>
+      <ModalDialog>
+        <ModalClose />
+        <DialogTitle>First Modal</DialogTitle>
+        <DialogContent>
+          This is the first modal. Click the button below to open a nested modal.
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setSecondOpen(true)}>Open Nested Modal</Button>
+        </DialogActions>
+      </ModalDialog>
+    </Modal>
+    <Modal open={secondOpen} onClose={() => setSecondOpen(false)}>
+      <ModalDialog>
+        <ModalClose />
+        <DialogTitle>Nested Modal</DialogTitle>
+        <DialogContent>This is a nested modal on top of the first one.</DialogContent>
+        <DialogActions>
+          <Button onClick={() => setSecondOpen(false)}>Close</Button>
+        </DialogActions>
+      </ModalDialog>
+    </Modal>
+  </>
 ```
 
 ### ModalFrame
@@ -312,16 +335,16 @@ ModalFrame is a convenience component that automatically provides a title, close
 
 ```tsx
 <>
-  <Button onClick={() => setOpen(true)}>Open ModalFrame</Button>
-  <Modal open={open} onClose={() => setOpen(false)}>
-    <ModalFrame title="ModalFrame Title" onClose={() => setOpen(false)}>
-      <Typography>
-        ModalFrame automatically composes ModalDialog, ModalClose, DialogTitle, and DialogContent. You only need
-        to provide a title, onClose handler, and children.
-      </Typography>
-    </ModalFrame>
-  </Modal>
-</>
+    <Button onClick={() => setOpen(true)}>Open ModalFrame</Button>
+    <Modal open={open} onClose={() => setOpen(false)}>
+      <ModalFrame title="ModalFrame Title" onClose={() => setOpen(false)}>
+        <Typography>
+          ModalFrame automatically composes ModalDialog, ModalClose, DialogTitle, and DialogContent.
+          You only need to provide a title, onClose handler, and children.
+        </Typography>
+      </ModalFrame>
+    </Modal>
+  </>
 ```
 
 #### titleStartDecorator
@@ -330,15 +353,20 @@ Display an icon or decorative element before the title.
 
 ```tsx
 <>
-  <Button onClick={() => setOpen(true)}>With Decorator</Button>
-  <Modal open={open} onClose={() => setOpen(false)}>
-    <ModalFrame title="Details" titleStartDecorator={<InfoOutlinedIcon />} onClose={() => setOpen(false)}>
-      <Typography>
-        Use the <code>titleStartDecorator</code> prop to display an icon or element before the title.
-      </Typography>
-    </ModalFrame>
-  </Modal>
-</>
+    <Button onClick={() => setOpen(true)}>With Decorator</Button>
+    <Modal open={open} onClose={() => setOpen(false)}>
+      <ModalFrame
+        title="Details"
+        titleStartDecorator={<InfoOutlinedIcon />}
+        onClose={() => setOpen(false)}
+      >
+        <Typography>
+          Use the <code>titleStartDecorator</code> prop to display an icon or element before the
+          title.
+        </Typography>
+      </ModalFrame>
+    </Modal>
+  </>
 ```
 
 #### Form Content
@@ -347,28 +375,30 @@ An inline form pattern where the submit button lives inside the content area.
 
 ```tsx
 <>
-  <Button onClick={() => setOpen(true)}>Form in ModalFrame</Button>
-  <Modal open={open} onClose={() => setOpen(false)}>
-    <ModalFrame title="Create Project" onClose={() => setOpen(false)}>
-      <form onSubmit={(event: React.FormEvent<HTMLFormElement>) => {
-        event.preventDefault();
-        setOpen(false);
-      }}>
-      <Stack spacing={2}>
-        <FormControl>
-          <FormLabel>Name</FormLabel>
-          <Input required />
-        </FormControl>
-        <FormControl>
-          <FormLabel>Description</FormLabel>
-          <Input required />
-        </FormControl>
-        <Button type="submit">Submit</Button>
-      </Stack>
-    </form>
-  </ModalFrame>
-</Modal>
-</>
+    <Button onClick={() => setOpen(true)}>Form in ModalFrame</Button>
+    <Modal open={open} onClose={() => setOpen(false)}>
+      <ModalFrame title="Create Project" onClose={() => setOpen(false)}>
+        <form
+          onSubmit={(event: React.FormEvent<HTMLFormElement>) => {
+            event.preventDefault();
+            setOpen(false);
+          }}
+        >
+          <Stack spacing={2}>
+            <FormControl>
+              <FormLabel>Name</FormLabel>
+              <Input required />
+            </FormControl>
+            <FormControl>
+              <FormLabel>Description</FormLabel>
+              <Input required />
+            </FormControl>
+            <Button type="submit">Submit</Button>
+          </Stack>
+        </form>
+      </ModalFrame>
+    </Modal>
+  </>
 ```
 
 #### Sizes
@@ -377,31 +407,31 @@ Compare sm / md / lg sizes side by side.
 
 ```tsx
 <Stack direction="row" spacing={2}>
-  <Button size="sm" onClick={() => setOpenSm(true)}>
-    Small
-  </Button>
-  <Button size="md" onClick={() => setOpenMd(true)}>
-    Medium
-  </Button>
-  <Button size="lg" onClick={() => setOpenLg(true)}>
-    Large
-  </Button>
-  <Modal open={openSm} onClose={() => setOpenSm(false)}>
-    <ModalFrame title="Small ModalFrame" size="sm" onClose={() => setOpenSm(false)}>
-      <Typography>This is a small ModalFrame.</Typography>
-    </ModalFrame>
-  </Modal>
-  <Modal open={openMd} onClose={() => setOpenMd(false)}>
-    <ModalFrame title="Medium ModalFrame" size="md" onClose={() => setOpenMd(false)}>
-      <Typography>This is a medium ModalFrame.</Typography>
-    </ModalFrame>
-  </Modal>
-  <Modal open={openLg} onClose={() => setOpenLg(false)}>
-    <ModalFrame title="Large ModalFrame" size="lg" onClose={() => setOpenLg(false)}>
-      <Typography>This is a large ModalFrame.</Typography>
-    </ModalFrame>
-  </Modal>
-</Stack>
+    <Button size="sm" onClick={() => setOpenSm(true)}>
+      Small
+    </Button>
+    <Button size="md" onClick={() => setOpenMd(true)}>
+      Medium
+    </Button>
+    <Button size="lg" onClick={() => setOpenLg(true)}>
+      Large
+    </Button>
+    <Modal open={openSm} onClose={() => setOpenSm(false)}>
+      <ModalFrame title="Small ModalFrame" size="sm" onClose={() => setOpenSm(false)}>
+        <Typography>This is a small ModalFrame.</Typography>
+      </ModalFrame>
+    </Modal>
+    <Modal open={openMd} onClose={() => setOpenMd(false)}>
+      <ModalFrame title="Medium ModalFrame" size="md" onClose={() => setOpenMd(false)}>
+        <Typography>This is a medium ModalFrame.</Typography>
+      </ModalFrame>
+    </Modal>
+    <Modal open={openLg} onClose={() => setOpenLg(false)}>
+      <ModalFrame title="Large ModalFrame" size="lg" onClose={() => setOpenLg(false)}>
+        <Typography>This is a large ModalFrame.</Typography>
+      </ModalFrame>
+    </Modal>
+  </Stack>
 ```
 
 #### Custom Content
@@ -410,30 +440,30 @@ A layout example suited for displaying detailed information.
 
 ```tsx
 <>
-  <Button onClick={() => setOpen(true)}>Custom Content</Button>
-  <Modal open={open} onClose={() => setOpen(false)}>
-    <ModalFrame title="Order Details" onClose={() => setOpen(false)}>
-      <Stack spacing={2}>
-        <Box>
-          <Typography level="title-sm">Order ID</Typography>
-          <Typography level="body-sm">ORD-2024-00123</Typography>
-        </Box>
-        <Divider />
-        <Box>
-          <Typography level="title-sm">Customer</Typography>
-          <Typography level="body-sm">John Doe</Typography>
-        </Box>
-        <Divider />
-        <Box>
-          <Typography level="title-sm">Status</Typography>
-          <Typography level="body-sm" color="success">
-            Completed
-          </Typography>
-        </Box>
-      </Stack>
-    </ModalFrame>
-  </Modal>
-</>
+    <Button onClick={() => setOpen(true)}>Custom Content</Button>
+    <Modal open={open} onClose={() => setOpen(false)}>
+      <ModalFrame title="Order Details" onClose={() => setOpen(false)}>
+        <Stack spacing={2}>
+          <Box>
+            <Typography level="title-sm">Order ID</Typography>
+            <Typography level="body-sm">ORD-2024-00123</Typography>
+          </Box>
+          <Divider />
+          <Box>
+            <Typography level="title-sm">Customer</Typography>
+            <Typography level="body-sm">John Doe</Typography>
+          </Box>
+          <Divider />
+          <Box>
+            <Typography level="title-sm">Status</Typography>
+            <Typography level="body-sm" color="success">
+              Completed
+            </Typography>
+          </Box>
+        </Stack>
+      </ModalFrame>
+    </Modal>
+  </>
 ```
 
 #### Standalone
@@ -450,17 +480,19 @@ ModalFrame can be used without a Modal wrapper for embedding dialog-style layout
 > ModalFrame inherits its dimensions from `ModalDialog`, which normally receives sizing from the Modal overlay. Without these constraints, the component will not render with correct dimensions.
 
 ```tsx
-<Box sx={{
-  position: 'relative',
-  width: 480,
-  height: 300
-}}>
-<ModalFrame title="Standalone ModalFrame" onClose={() => console.log('close')}>
-  <Typography>
-    ModalFrame used without Modal. The parent container must provide explicit width and height.
-  </Typography>
-</ModalFrame>
-</Box>
+<Box
+    sx={{
+      position: "relative",
+      width: 480,
+      height: 300
+    }}
+  >
+    <ModalFrame title="Standalone ModalFrame" onClose={() => console.log("close")}>
+      <Typography>
+        ModalFrame used without Modal. The parent container must provide explicit width and height.
+      </Typography>
+    </ModalFrame>
+  </Box>
 ```
 
 ## When to Use