@tribepad/themis 1.9.2 → 1.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tribepad/themis",
-  "version": "1.9.2",
+  "version": "1.9.3",
   "description": "Accessible React component library built on React Aria primitives",
   "author": "Tribepad <mbasford@tribepad.com>",
   "license": "MIT",

package/src/elements/Modal/Modal.stories.tsx

@@ -229,6 +229,76 @@ export const TabbedModal: Story = {
   ),
 };
 
+/**
+ * Tabbed Modal — Long Content
+ *
+ * A tabbed modal whose active panel far exceeds the 85vh box cap. The header
+ * and full-width tab strip stay pinned while only `Modal.Body` scrolls — the
+ * canonical "header tabs + tall form" layout. This is the scenario that
+ * regresses if the dialog wrapper drops out of the flex column: without
+ * `flex-1 min-h-0 flex-col` on the dialog, `Modal.Body`'s `flex-1
+ * overflow-y-auto` has no flex parent and the content is clipped with no
+ * scrollbar instead of scrolling.
+ */
+export const TabbedModalLongContent: Story = {
+  render: () => (
+    <Modal>
+      <Modal.Trigger>
+        <Button>Edit field</Button>
+      </Modal.Trigger>
+      <Modal.Content size="lg">
+        <Modal.Header>
+          <Modal.Title>Edit field</Modal.Title>
+          <Modal.Description>
+            The body scrolls; the title, tab strip, and footer stay pinned.
+          </Modal.Description>
+        </Modal.Header>
+        <Tabs
+          defaultSelectedKey="content"
+          className="flex min-h-0 flex-1 flex-col"
+        >
+          <Modal.Tabs>
+            <TabList aria-label="Field sections">
+              <Tab id="content">Content</Tab>
+              <Tab id="settings">Settings</Tab>
+              <Tab id="validation">Validation</Tab>
+            </TabList>
+          </Modal.Tabs>
+          <Modal.Body>
+            <TabPanel id="content">
+              <div className="space-y-6">
+                {Array.from({ length: 20 }, (_, i) => (
+                  <div key={i} className="space-y-2">
+                    <p className="text-sm font-medium">Field {i + 1}</p>
+                    <p className="text-sm text-[var(--muted-foreground)]">
+                      A row of configuration that pushes the panel well beyond
+                      the modal&apos;s 85vh cap so the body has to scroll.
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </TabPanel>
+            <TabPanel id="settings">
+              <p className="text-sm">Settings for this field.</p>
+            </TabPanel>
+            <TabPanel id="validation">
+              <p className="text-sm">Validation rules for this field.</p>
+            </TabPanel>
+          </Modal.Body>
+        </Tabs>
+        <Modal.Footer>
+          <Modal.Close>
+            <Button variant="outline">Cancel</Button>
+          </Modal.Close>
+          <Modal.Close>
+            <Button>Save changes</Button>
+          </Modal.Close>
+        </Modal.Footer>
+      </Modal.Content>
+    </Modal>
+  ),
+};
+
 /**
  * Long Content
  * Modal with scrolling content