@onerjs/shared-ui-components 8.51.3 → 8.51.5

package/fluent/primitives/dialog.d.ts

@@ -0,0 +1,49 @@
+import { type ReactNode, type FC } from "react";
+/**
+ * Props for an action button in the dialog footer.
+ */
+export type DialogActionProps = {
+    /** Button label text. */
+    label: string;
+    /** Click handler. */
+    onClick: () => void;
+    /** Button appearance. Defaults to "secondary". */
+    appearance?: "primary" | "secondary";
+};
+/**
+ * Props for the shared Dialog primitive.
+ */
+export type DialogProps = {
+    /** Whether the dialog is open. */
+    open: boolean;
+    /** Dialog title. */
+    title: string;
+    /** Dialog content (body). */
+    children: ReactNode;
+    /** Action buttons rendered in the footer. */
+    actions?: DialogActionProps[];
+    /** Called when the dialog is dismissed via the close button. */
+    onDismiss?: () => void;
+};
+/**
+ * A shared dialog component wrapping Fluent UI Dialog with Babylon conventions.
+ *
+ * @example
+ * ```tsx
+ * <Dialog
+ *     open={isOpen}
+ *     title="Confirm Action"
+ *     onDismiss={() => setIsOpen(false)}
+ *     actions={[
+ *         { label: "Cancel", onClick: () => setIsOpen(false) },
+ *         { label: "Confirm", onClick: handleConfirm, appearance: "primary" },
+ *     ]}
+ * >
+ *     <Text>Are you sure you want to proceed?</Text>
+ * </Dialog>
+ * ```
+ *
+ * @param props - The dialog props.
+ * @returns The dialog element.
+ */
+export declare const Dialog: FC<DialogProps>;

package/fluent/primitives/dialog.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog as FluentDialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, DialogTrigger } from "@fluentui/react-components";
+import { DismissRegular } from "@fluentui/react-icons";
+import { Button } from "./button.js";
+/**
+ * A shared dialog component wrapping Fluent UI Dialog with Babylon conventions.
+ *
+ * @example
+ * ```tsx
+ * <Dialog
+ *     open={isOpen}
+ *     title="Confirm Action"
+ *     onDismiss={() => setIsOpen(false)}
+ *     actions={[
+ *         { label: "Cancel", onClick: () => setIsOpen(false) },
+ *         { label: "Confirm", onClick: handleConfirm, appearance: "primary" },
+ *     ]}
+ * >
+ *     <Text>Are you sure you want to proceed?</Text>
+ * </Dialog>
+ * ```
+ *
+ * @param props - The dialog props.
+ * @returns The dialog element.
+ */
+export const Dialog = (props) => {
+    const { open, title, children, actions, onDismiss } = props;
+    return (_jsx(FluentDialog, { open: open, modalType: "modal", onOpenChange: (_, data) => {
+            if (!data.open && onDismiss) {
+                onDismiss();
+            }
+        }, children: _jsx(DialogSurface, { children: _jsxs(DialogBody, { children: [_jsx(DialogTitle, { action: onDismiss ? (_jsx(DialogTrigger, { action: "close", children: _jsx(Button, { appearance: "subtle", "aria-label": "close", icon: DismissRegular }) })) : undefined, children: title }), _jsx(DialogContent, { children: children }), actions && actions.length > 0 && (_jsx(DialogActions, { children: actions.map((action, index) => (_jsx(Button, { appearance: action.appearance ?? "secondary", onClick: action.onClick, label: action.label }, index))) }))] }) }) }));
+};
+//# sourceMappingURL=dialog.js.map

package/fluent/primitives/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACzJ,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AA8BlC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC7C,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAE5D,OAAO,CACH,KAAC,YAAY,IACT,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,OAAO,EACjB,YAAY,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;YACtB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,SAAS,EAAE,CAAC;gBAC1B,SAAS,EAAE,CAAC;YAChB,CAAC;QACL,CAAC,YAED,KAAC,aAAa,cACV,MAAC,UAAU,eACP,KAAC,WAAW,IACR,MAAM,EACF,SAAS,CAAC,CAAC,CAAC,CACR,KAAC,aAAa,IAAC,MAAM,EAAC,OAAO,YACzB,KAAC,MAAM,IAAC,UAAU,EAAC,QAAQ,gBAAY,OAAO,EAAC,IAAI,EAAE,cAAc,GAAI,GAC3D,CACnB,CAAC,CAAC,CAAC,SAAS,YAGhB,KAAK,GACI,EACd,KAAC,aAAa,cAAE,QAAQ,GAAiB,EACxC,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAC9B,KAAC,aAAa,cACT,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,KAAC,MAAM,IAAa,UAAU,EAAE,MAAM,CAAC,UAAU,IAAI,WAAW,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,IAAjG,KAAK,CAAgG,CACrH,CAAC,GACU,CACnB,IACQ,GACD,GACL,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Dialog as FluentDialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, DialogTrigger } from \"@fluentui/react-components\";\nimport { DismissRegular } from \"@fluentui/react-icons\";\nimport { type ReactNode, type FC } from \"react\";\nimport { Button } from \"./button\";\n\n/**\n * Props for an action button in the dialog footer.\n */\nexport type DialogActionProps = {\n    /** Button label text. */\n    label: string;\n    /** Click handler. */\n    onClick: () => void;\n    /** Button appearance. Defaults to \"secondary\". */\n    appearance?: \"primary\" | \"secondary\";\n};\n\n/**\n * Props for the shared Dialog primitive.\n */\nexport type DialogProps = {\n    /** Whether the dialog is open. */\n    open: boolean;\n    /** Dialog title. */\n    title: string;\n    /** Dialog content (body). */\n    children: ReactNode;\n    /** Action buttons rendered in the footer. */\n    actions?: DialogActionProps[];\n    /** Called when the dialog is dismissed via the close button. */\n    onDismiss?: () => void;\n};\n\n/**\n * A shared dialog component wrapping Fluent UI Dialog with Babylon conventions.\n *\n * @example\n * ```tsx\n * <Dialog\n *     open={isOpen}\n *     title=\"Confirm Action\"\n *     onDismiss={() => setIsOpen(false)}\n *     actions={[\n *         { label: \"Cancel\", onClick: () => setIsOpen(false) },\n *         { label: \"Confirm\", onClick: handleConfirm, appearance: \"primary\" },\n *     ]}\n * >\n *     <Text>Are you sure you want to proceed?</Text>\n * </Dialog>\n * ```\n *\n * @param props - The dialog props.\n * @returns The dialog element.\n */\nexport const Dialog: FC<DialogProps> = (props) => {\n    const { open, title, children, actions, onDismiss } = props;\n\n    return (\n        <FluentDialog\n            open={open}\n            modalType=\"modal\"\n            onOpenChange={(_, data) => {\n                if (!data.open && onDismiss) {\n                    onDismiss();\n                }\n            }}\n        >\n            <DialogSurface>\n                <DialogBody>\n                    <DialogTitle\n                        action={\n                            onDismiss ? (\n                                <DialogTrigger action=\"close\">\n                                    <Button appearance=\"subtle\" aria-label=\"close\" icon={DismissRegular} />\n                                </DialogTrigger>\n                            ) : undefined\n                        }\n                    >\n                        {title}\n                    </DialogTitle>\n                    <DialogContent>{children}</DialogContent>\n                    {actions && actions.length > 0 && (\n                        <DialogActions>\n                            {actions.map((action, index) => (\n                                <Button key={index} appearance={action.appearance ?? \"secondary\"} onClick={action.onClick} label={action.label} />\n                            ))}\n                        </DialogActions>\n                    )}\n                </DialogBody>\n            </DialogSurface>\n        </FluentDialog>\n    );\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@onerjs/shared-ui-components",
-    "version": "8.51.3",
+    "version": "8.51.5",
     "main": "index.js",
     "module": "index.js",
     "types": "index.d.ts",