@cripty2001/utils 0.0.223 → 0.0.225

package/dist/react-ui/index.d.ts

@@ -3,7 +3,7 @@ import BaseCopiable, { type CopiableProps as BaseCopiableProps } from './copiabl
 import BaseForm, { type FormComponentProps as BaseFormProps } from './form';
 import BaseInput, { type InputComponentProps as BaseInputProps } from './input';
 import BaseLoader, { type LoaderProps as BaseLoaderProps } from './loader';
-import BaseModal, { type ModalComponentProps as BaseModalProps } from './modal';
+import BaseModal, { type ModalActions as BaseModalActions, type ModalContent as BaseModalContent, type ModalComponentProps as BaseModalProps } from './modal';
 import BaseTable, { type TableProps as BaseTableProps } from './table';
 import BaseTextButton, { type TextButtonProps as BaseTextButtonProps } from './textButton';
-export { BaseButton, BaseButtonProps, BaseCopiable, BaseCopiableProps, BaseForm, BaseFormProps, BaseInput, BaseInputProps, BaseLoader, BaseLoaderProps, BaseModal, BaseModalProps, BaseTable, BaseTableProps, BaseTextButton, BaseTextButtonProps };
+export { BaseButton, BaseButtonProps, BaseCopiable, BaseCopiableProps, BaseForm, BaseFormProps, BaseInput, BaseInputProps, BaseLoader, BaseLoaderProps, BaseModal, BaseModalActions, BaseModalContent, BaseModalProps, BaseTable, BaseTableProps, BaseTextButton, BaseTextButtonProps };

package/dist/react-ui/modal.d.ts

@@ -1,7 +1,13 @@
+import { type ReactNode } from "react";
+export type ModalActions = {
+    dismiss: () => void;
+};
+export type ModalContent = ReactNode | ((actions: ModalActions) => ReactNode);
 export type ModalComponentProps = {
-    children: React.ReactNode;
+    children: ModalContent;
     open: boolean;
     setOpen: (open: boolean) => void;
-    animate: boolean;
+    animate?: boolean;
+    panelClassName?: string;
 };
-export default function ModalComponent(props: ModalComponentProps): import("react/jsx-runtime").JSX.Element | null;
+export default function ModalComponent({ children, open, setOpen, animate, panelClassName, }: ModalComponentProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/react-ui/modal.js

@@ -24,11 +24,23 @@ if (typeof document !== 'undefined') {
     }
 }
 let modalCount = 0;
-function ModalComponent(props) {
+function ModalComponent({ children, open, setOpen, animate = false, panelClassName = "", }) {
     const zIndex = (0, react_1.useRef)(1000 + modalCount++).current;
     const id = (0, react_1.useRef)(`modal-${zIndex}`).current;
-    if (!props.open)
+    const dismiss = (0, react_1.useCallback)(() => setOpen(false), [setOpen]);
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        const onKey = (event) => {
+            if (event.key === "Escape")
+                dismiss();
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [open, dismiss]);
+    if (!open)
         return null;
+    const content = typeof children === "function" ? children({ dismiss }) : children;
     return ((0, jsx_runtime_1.jsx)("div", { id: id, style: {
             position: 'fixed',
             top: 0,
@@ -42,6 +54,6 @@ function ModalComponent(props) {
             padding: '1.5rem',
             height: '100vh',
             width: '100vw',
-            zIndex: zIndex
-        }, onClick: () => props.setOpen(false), children: (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: '100%', animation: props.animate ? 'slide-up 0.3s ease-out' : '' }, onClick: (e) => e.stopPropagation(), children: props.children }) }));
+            zIndex: zIndex,
+        }, onClick: dismiss, children: (0, jsx_runtime_1.jsx)("div", { role: "dialog", "aria-modal": "true", className: panelClassName, style: { maxWidth: '100%', animation: animate ? 'slide-up 0.3s ease-out' : undefined }, onClick: (e) => e.stopPropagation(), children: content }) }));
 }

package/llms/appserver.md

@@ -131,6 +131,29 @@ handler: async (input, auth) => {
 }
 ```
 
+### [Example] Recommended OIDC integration pattern (oidc-spa)
+
+`Client` deliberately doesn't fetch or refresh tokens — that's the OIDC library's job. To stay logged in indefinitely, **proactively** push fresh tokens into the Client whenever your OIDC library renews them, then bind a UI overlay to `client.loggedIn` for the unrecoverable case.
+
+Two-line proactive renewal (using `oidc-spa`):
+
+```ts
+const oidc = await createOidc({ /* … */ });
+
+if (oidc.isUserLoggedIn) {
+    const { idToken } = await oidc.getTokens();
+    await client.login(idToken);
+
+    // Re-push every time the underlying library refreshes the session.
+    oidc.subscribeToTokensChange(({ idToken }) => {
+        void client.login(idToken);
+    });
+}
+
+```
+
+This works because Client logged in status only changes when an api report an auth error, this mean that as long as the latest set token is valid, the api will never report an auth error.
+
 ---
 
 ## 7. Error handling

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cripty2001/utils",
-  "version": "0.0.223",
+  "version": "0.0.225",
   "description": "Internal Set of utils. If you need them use them, otherwise go to the next package ;)",
   "homepage": "https://github.com/cripty2001/utils#readme",
   "bugs": {