@domicile-desktop/component-library 0.0.0-alpha-3ee3ca09c591 → 0.0.0-alpha-14e607160f4e

package/package.json

@@ -2,8 +2,8 @@
   "dependencies": {
     "@base-ui/react": "^1.8.0",
     "@cprussin/option-result": "^2.0.1",
-    "@domicile-desktop/sdk": "0.0.0-alpha-3ee3ca09c591",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-3ee3ca09c591",
+    "@domicile-desktop/sdk": "0.0.0-alpha-14e607160f4e",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-14e607160f4e",
     "@pandacss/dev": "^1.12.1",
     "@phosphor-icons/react": "^2.1.10"
   },
@@ -89,6 +89,7 @@
   "files": [
     "src/**",
     "styled-system/**",
+    "!styled-system/styles.css",
     "!src/**/*.test.ts",
     "!src/**/*.test.tsx",
     "!src/**/*.stories.tsx",
@@ -111,12 +112,12 @@
   },
   "scripts": {
     "build:storybook": "storybook build",
-    "prepare": "panda codegen --silent",
+    "prepare": "panda codegen --silent && panda cssgen --silent",
     "start:dev": "storybook dev -p 4000",
     "start:prod": "http-server storybook-static -p 4000",
     "test:types": "tsc --noEmit",
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-3ee3ca09c591"
+  "version": "0.0.0-alpha-14e607160f4e"
 }

package/src/PortalDialogs/FileChooserDialog.tsx

@@ -9,12 +9,10 @@ import {
 } from "@domicile-desktop/sdk/portal";
 import { useState } from "react";
 import { css } from "../../styled-system/css";
-import { focusOnAttach } from "../_control/focusOnAttach";
-import { FilePicker } from "../FilePicker/FilePicker";
 import { ChooserMode } from "../FilePicker/file-request";
 import type { Folders } from "../FilePicker/folders";
-import { useScreenRegion } from "../Screen/DisplayProvider";
 import { Select } from "../Select/Select";
+import { ModalFilePicker } from "./ModalFilePicker";
 
 /** A boolean choice's answers, as the portal spells them. */
 const YES_NO = [
@@ -35,55 +33,50 @@ type Props = {
  * takes the keyboard on open.
  */
 export const FileChooserDialog = ({ answer, body, folders, screen }: Props) => {
-  const region = useScreenRegion(screen);
   const [choices, setChoices] = useState<ReadonlyMap<string, string>>(
     () => new Map(body.choices.map((choice) => [choice.id, choice.initial])),
   );
   return (
-    <div className={regionStyles} style={region}>
-      <FilePicker
-        ref={focusOnAttach}
-        request={{
-          accept: [],
-          acceptLabel: body.acceptLabel ?? acceptOf(body.mode),
-          cancel: () => {
-            answer(Answer.Canceled());
-          },
-          choose: (paths, filter) => {
-            answer(
-              Answer.FileChooser({ choices, currentFilter: filter, paths }),
-            );
-          },
-          controls: (
-            <>
-              {body.mode === FileChooserMode.SaveFiles && (
-                <span
-                  className={savesStyles}
-                >{`Saves ${body.files.join(", ")}`}</span>
-              )}
-              {body.choices.map((choice) => (
-                <Choice
-                  choice={choice}
-                  key={choice.id}
-                  onChange={(value) => {
-                    setChoices(new Map(choices).set(choice.id, value));
-                  }}
-                  value={choices.get(choice.id)}
-                />
-              ))}
-            </>
-          ),
-          currentFilter: body.currentFilter,
-          currentFolder: body.currentFolder,
-          filters: body.filters.length === 0 ? undefined : body.filters,
-          folders,
-          home: body.home,
-          mode: chooserModeOf(body),
-          suggestedName: body.currentName ?? "",
-          title: body.title,
-        }}
-      />
-    </div>
+    <ModalFilePicker
+      request={{
+        accept: [],
+        acceptLabel: body.acceptLabel ?? acceptOf(body.mode),
+        cancel: () => {
+          answer(Answer.Canceled());
+        },
+        choose: (paths, filter) => {
+          answer(Answer.FileChooser({ choices, currentFilter: filter, paths }));
+        },
+        controls: (
+          <>
+            {body.mode === FileChooserMode.SaveFiles && (
+              <span
+                className={savesStyles}
+              >{`Saves ${body.files.join(", ")}`}</span>
+            )}
+            {body.choices.map((choice) => (
+              <Choice
+                choice={choice}
+                key={choice.id}
+                onChange={(value) => {
+                  setChoices(new Map(choices).set(choice.id, value));
+                }}
+                value={choices.get(choice.id)}
+              />
+            ))}
+          </>
+        ),
+        currentFilter: body.currentFilter,
+        currentFolder: body.currentFolder,
+        filters: body.filters.length === 0 ? undefined : body.filters,
+        folders,
+        home: body.home,
+        mode: chooserModeOf(body),
+        suggestedName: body.currentName ?? "",
+        title: body.title,
+      }}
+      screen={screen}
+    />
   );
 };
 
@@ -116,11 +109,6 @@ const Choice = ({
   />
 );
 
-const regionStyles = css({
-  inset: 0,
-  position: "fixed",
-});
-
 const savesStyles = css({ color: "muted", fontSize: "sm" });
 
 /** The picker's mode for what the application asked. */

package/src/PortalDialogs/ModalFilePicker.tsx

@@ -0,0 +1,52 @@
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { useRef } from "react";
+import { css } from "../../styled-system/css";
+import { FilePicker } from "../FilePicker/FilePicker";
+import type { FileRequest } from "../FilePicker/file-request";
+import { useScreenRegion } from "../Screen/DisplayProvider";
+
+type Props = {
+  request: FileRequest;
+  /** The display to cover. Without it, the whole page. */
+  screen: string | undefined;
+};
+
+/**
+ * A `FilePicker` over `screen`, modal like `ModalDialog`: in a portal at the
+ * dialogs' depth, with the rest of the page inert. Its box takes the keyboard
+ * on open.
+ *
+ * The picker answers every key and press itself, Escape included, so the
+ * dialog never closes on its own.
+ */
+export const ModalFilePicker = ({ request, screen }: Props) => {
+  const region = useScreenRegion(screen);
+  const box = useRef<HTMLInputElement>(null);
+  return (
+    <BaseDialog.Root onOpenChange={stayOpen} open>
+      <BaseDialog.Portal>
+        {/* The picker is the dialog; this box only places it. */}
+        <BaseDialog.Popup
+          className={regionStyles}
+          initialFocus={box}
+          role="presentation"
+          style={region}
+        >
+          <FilePicker ref={box} request={request} />
+        </BaseDialog.Popup>
+      </BaseDialog.Portal>
+    </BaseDialog.Root>
+  );
+};
+
+/** Ignores base-ui's requests to close; see {@link ModalFilePicker}. */
+const stayOpen = () => {
+  // The picker cancels through its request.
+};
+
+// At the other dialogs' depth, over every window.
+const regionStyles = css({
+  inset: 0,
+  position: "fixed",
+  zIndex: "modal",
+});

package/src/PortalDialogs/PrintDialog.tsx

@@ -17,16 +17,14 @@ import { PrinterIcon } from "@phosphor-icons/react/dist/ssr/Printer";
 import { useState } from "react";
 import { css } from "../../styled-system/css";
 import { grid } from "../../styled-system/patterns";
-import { focusOnAttach } from "../_control/focusOnAttach";
 import { Button } from "../Button/Button";
 import { Field } from "../Field/Field";
-import { FilePicker } from "../FilePicker/FilePicker";
 import { ChooserMode } from "../FilePicker/file-request";
 import type { Folders } from "../FilePicker/folders";
 import { Input } from "../Input/Input";
 import { ModalDialog } from "../ModalDialog/ModalDialog";
-import { useScreenRegion } from "../Screen/DisplayProvider";
 import { Select } from "../Select/Select";
+import { ModalFilePicker } from "./ModalFilePicker";
 import { pageRanges } from "./page-ranges";
 
 const SIDES = {
@@ -351,33 +349,28 @@ const PdfPicker = ({
   folders: Folders;
   options: PrintOptions;
   screen: string | undefined;
-}) => {
-  const region = useScreenRegion(screen);
-  return (
-    <div className={regionStyles} style={region}>
-      <FilePicker
-        ref={focusOnAttach}
-        request={{
-          accept: ["pdf"],
-          acceptLabel: "Save",
-          cancel: back,
-          choose: ([path]) => {
-            if (path === undefined) {
-              throw new Error("a save chose no file");
-            } else {
-              answer(Answer.SaveToPdf(path, options));
-            }
-          },
-          folders,
-          home: body.home,
-          mode: ChooserMode.Save,
-          suggestedName: pdfName(body.title),
-          title: "Save as PDF",
-        }}
-      />
-    </div>
-  );
-};
+}) => (
+  <ModalFilePicker
+    request={{
+      accept: ["pdf"],
+      acceptLabel: "Save",
+      cancel: back,
+      choose: ([path]) => {
+        if (path === undefined) {
+          throw new Error("a save chose no file");
+        } else {
+          answer(Answer.SaveToPdf(path, options));
+        }
+      },
+      folders,
+      home: body.home,
+      mode: ChooserMode.Save,
+      suggestedName: pdfName(body.title),
+      title: "Save as PDF",
+    }}
+    screen={screen}
+  />
+);
 
 const askerStyles = css({ color: "muted", fontSize: "sm", margin: 0 });
 
@@ -403,11 +396,6 @@ const pagesStyles = grid({
   gridColumn: "1 / -1",
 });
 
-const regionStyles = css({
-  inset: 0,
-  position: "fixed",
-});
-
 /** `printer` for people. */
 const nameOf = (printer: Printer): string =>
   printer.description ?? printer.name;