@faybl/react-utils 2.0.1 → 2.1.0

package/README.md

@@ -94,6 +94,16 @@ dark app has to declare it, with MUI through `<CssBaseline enableColorScheme />`
   page the user left, which asks the user to sign in again. `signOutUrl` on the
   provider sends it somewhere else instead.
 
+`dialogComponent` replaces the dialog with one of the app's own, which gets
+`open`, `onSignIn` and `labels`. An MUI app passes the one from
+`@faybl/react-utils/mui`, which takes the app's theme:
+
+```jsx
+import { MuiSessionExpiredDialog } from '@faybl/react-utils/mui';
+
+<SessionProvider client={client} dialogComponent={MuiSessionExpiredDialog}>
+```
+
 An app that handles the expiry itself can still use the dialog:
 
 ```jsx

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@faybl/react-utils",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "React hooks for Faybl web apps",
   "license": "TBD",
   "author": "Arcturitech",
   "type": "module",
   "exports": {
-    ".": "./src/index.js"
+    ".": "./src/index.js",
+    "./mui": "./src/mui/index.js"
   },
   "files": [
     "src"
@@ -22,15 +23,19 @@
   },
   "peerDependencies": {
     "@faybl/client": "^4.1.0",
+    "@mui/material": "^9.0.0",
     "react": "^19.2.0"
   },
   "peerDependenciesMeta": {
     "@faybl/client": {
       "optional": true
+    },
+    "@mui/material": {
+      "optional": true
     }
   },
   "dependencies": {
-    "@faybl/utils": "^2.0.1"
+    "@faybl/utils": "^2.1.0"
   },
   "engines": {
     "node": ">=22"

package/src/SessionExpiredDialog.js

@@ -1,6 +1,6 @@
 import { createElement, useEffect, useId, useRef } from 'react';
 
-const DEFAULT_LABELS = { title: 'You have been signed out', action: 'Sign in again' };
+import { DEFAULT_SESSION_DIALOG_LABELS } from './sessionDialogLabels.js';
 
 // Its colours are the browser's for the page's CSS color-scheme, which a dark
 // app sets on the root element (MUI: CssBaseline enableColorScheme).
@@ -40,7 +40,7 @@ const useModal = (open) => {
 export const SessionExpiredDialog = ({ open, onSignIn, labels }) => {
   const ref = useModal(open);
   const titleId = useId();
-  const { title, action } = { ...DEFAULT_LABELS, ...labels };
+  const { title, action } = { ...DEFAULT_SESSION_DIALOG_LABELS, ...labels };
   return createElement(
     'dialog',
     { ref, 'aria-labelledby': titleId, onCancel: keepOpen, style: dialogStyle },

package/src/SessionProvider.js

@@ -61,6 +61,7 @@ const useAutomaticReload = (reaction) =>
  * @param {number} [params.reloadCooldownMs] Default 30 000
  * @param {string} [params.signOutUrl] Where signOut goes; through the login proxy by default
  * @param {{ title?: string, action?: string }} [params.dialogLabels]
+ * @param {import('react').ComponentType} [params.dialogComponent] Drawn for `dialog`; gets `open`, `onSignIn` and `labels`
  * @param {import('react').ReactNode} params.children
  */
 export const SessionProvider = ({
@@ -70,6 +71,7 @@ export const SessionProvider = ({
   reloadCooldownMs = DEFAULT_RELOAD_COOLDOWN_MS,
   signOutUrl,
   dialogLabels,
+  dialogComponent = SessionExpiredDialog,
   children,
 }) => {
   const reactions = useMemo(
@@ -108,7 +110,7 @@ export const SessionProvider = ({
     SessionContext,
     { value },
     children,
-    createElement(SessionExpiredDialog, {
+    createElement(dialogComponent, {
       open: reaction === REACTION.DIALOG,
       onSignIn: reloadPage,
       labels: dialogLabels,

package/src/mui/MuiSessionExpiredDialog.js

@@ -0,0 +1,28 @@
+import { Button, Dialog, DialogActions, DialogTitle } from '@mui/material';
+import { createElement, useId } from 'react';
+
+import { DEFAULT_SESSION_DIALOG_LABELS } from '../sessionDialogLabels.js';
+
+/**
+ * SessionExpiredDialog drawn with MUI, so it takes the app's theme. Pass it to
+ * SessionProvider as `dialogComponent`. It has no onClose: neither Escape nor
+ * the backdrop closes it, since the only way on is to sign in again.
+ * @param {object} params
+ * @param {boolean} params.open
+ * @param {() => void} params.onSignIn
+ * @param {{ title?: string, action?: string }} [params.labels]
+ */
+export const MuiSessionExpiredDialog = ({ open, onSignIn, labels }) => {
+  const titleId = useId();
+  const { title, action } = { ...DEFAULT_SESSION_DIALOG_LABELS, ...labels };
+  return createElement(
+    Dialog,
+    { open, 'aria-labelledby': titleId },
+    createElement(DialogTitle, { id: titleId }, title),
+    createElement(
+      DialogActions,
+      undefined,
+      createElement(Button, { variant: 'contained', onClick: onSignIn, autoFocus: true }, action),
+    ),
+  );
+};

package/src/mui/index.js

@@ -0,0 +1 @@
+export { MuiSessionExpiredDialog } from './MuiSessionExpiredDialog.js';

package/src/sessionDialogLabels.js

@@ -0,0 +1,4 @@
+export const DEFAULT_SESSION_DIALOG_LABELS = {
+  title: 'You have been signed out',
+  action: 'Sign in again',
+};