@festo-ui/react 10.0.1-dev.852 → 10.1.0-dev.860

package/dist/components/modals/ConfirmModal.js

@@ -0,0 +1,47 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef } from "react";
+import { Modal } from "./Modal.js";
+import { ModalFooter } from "./ModalFooter.js";
+const ConfirmModal = /*#__PURE__*/ forwardRef(({ title, subtitle, cancel, ok, onCancel, onOk, large, body, className, ...props }, ref)=>/*#__PURE__*/ jsx(Modal, {
+        className: classnames({
+            'fwe-modal--large': large
+        }, className),
+        head: /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                subtitle && /*#__PURE__*/ jsx("h2", {
+                    className: "fwe-modal-h2",
+                    children: subtitle
+                }),
+                /*#__PURE__*/ jsx("h1", {
+                    className: "fwe-modal-h1",
+                    children: title
+                })
+            ]
+        }),
+        body: 'string' == typeof body ? /*#__PURE__*/ jsx("p", {
+            children: body
+        }) : body,
+        ref: ref,
+        ...props,
+        children: (cancel || ok) && /*#__PURE__*/ jsxs(ModalFooter, {
+            children: [
+                cancel && /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    "aria-label": "Cancel",
+                    className: "fwe-btn fwe-btn-lg",
+                    onClick: onCancel,
+                    children: cancel
+                }),
+                ok && /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    "aria-label": "Ok",
+                    className: "fwe-btn fwe-btn-hero fwe-btn-lg",
+                    onClick: onOk,
+                    children: ok
+                })
+            ]
+        })
+    }));
+ConfirmModal.displayName = 'ConfirmModal';
+export { ConfirmModal };

package/dist/components/modals/CustomModal.d.ts

@@ -0,0 +1,8 @@
+import { type ModalBaseProps } from './ModalBase';
+export interface CustomModalProps extends ModalBaseProps {
+    readonly large?: boolean;
+    readonly title?: string;
+    readonly subtitle?: string;
+    readonly onCloseDone?: () => void;
+}
+export declare const CustomModal: (props: CustomModalProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/modals/CustomModal.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef } from "react";
+import { ModalBase } from "./ModalBase.js";
+const CustomModal = /*#__PURE__*/ forwardRef(({ large, title, subtitle, className, children, ...props }, ref)=>/*#__PURE__*/ jsxs(ModalBase, {
+        className: classnames({
+            'fwe-modal--large': large
+        }, className),
+        ref: ref,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("button", {
+                className: "fwe-modal-close-btn",
+                type: "button",
+                "aria-label": "Close",
+                onClick: props.onClose,
+                children: /*#__PURE__*/ jsx("span", {
+                    className: "fwe-sr-only",
+                    children: "Close"
+                })
+            }),
+            title && /*#__PURE__*/ jsxs("div", {
+                className: "fwe-modal-header",
+                children: [
+                    subtitle && /*#__PURE__*/ jsx("h2", {
+                        className: "fwe-modal-h2",
+                        children: subtitle
+                    }),
+                    /*#__PURE__*/ jsx("h1", {
+                        className: "fwe-modal-h1",
+                        children: title
+                    })
+                ]
+            }),
+            children
+        ]
+    }));
+CustomModal.displayName = 'CustomModal';
+export { CustomModal };

package/dist/components/modals/Modal.css

@@ -0,0 +1,39 @@
+.fr-modal {
+  opacity: 0;
+}
+
+.fr-modal-enter-done {
+  opacity: 1;
+  transition: opacity .1s ease-out;
+}
+
+.fr-modal-backdrop {
+  opacity: 0;
+}
+
+.fr-modal-backdrop-enter-done {
+  opacity: 1;
+  transition: opacity .25s ease-out;
+}
+
+.fr-modal-backdrop-exit {
+  opacity: 1;
+}
+
+.fr-modal-backdrop-exit-active {
+  opacity: 0;
+  transition: opacity .4s;
+}
+
+.fr-modal-overlay-wrapper {
+  width: 100%;
+  height: 100%;
+  z-index: var(--fwe-z-index-modal);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+

package/dist/components/modals/Modal.d.ts

@@ -0,0 +1,8 @@
+import './Modal.scss';
+import type React from 'react';
+import { type ModalBaseProps } from './ModalBase';
+export interface ModalProps extends Omit<ModalBaseProps, 'onCloseDone'> {
+    head?: React.ReactNode;
+    body: React.ReactNode;
+}
+export declare const Modal: (props: ModalProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/modals/Modal.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./Modal.css";
+import { forwardRef } from "react";
+import { ModalBase } from "./ModalBase.js";
+const Modal = /*#__PURE__*/ forwardRef(({ head, body, className, children, ...props }, ref)=>/*#__PURE__*/ jsxs(ModalBase, {
+        className: className,
+        ref: ref,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("button", {
+                className: "fwe-modal-close-btn",
+                type: "button",
+                "aria-label": "Close",
+                onClick: props.onClose,
+                children: /*#__PURE__*/ jsx("span", {
+                    className: "fwe-sr-only",
+                    children: "Close"
+                })
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "fwe-modal-header",
+                children: head
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "fwe-modal-body",
+                children: body
+            }),
+            children
+        ]
+    }));
+Modal.displayName = 'Modal';
+export { Modal };

package/dist/components/modals/ModalBase.d.ts

@@ -0,0 +1,10 @@
+import './Modal.scss';
+import { type ComponentPropsWithoutRef } from 'react';
+export interface ModalBaseProps extends ComponentPropsWithoutRef<'div'> {
+    isOpen: boolean;
+    isLoading?: boolean;
+    closeOnBackdrop?: boolean;
+    onClose?: () => void;
+    onCloseDone?: () => void;
+}
+export declare const ModalBase: (props: ModalBaseProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/modals/ModalBase.js

@@ -0,0 +1,125 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "./Modal.css";
+import classnames from "classnames";
+import { forwardRef, useCallback, useEffect, useRef } from "react";
+import react_dom from "react-dom";
+import { RemoveScroll } from "react-remove-scroll";
+import { CSSTransition } from "react-transition-group";
+import { useForkRef } from "../../utils/useForkRef.js";
+import { LoadingIndicator } from "../loading-indicator/LoadingIndicator.js";
+const ModalBase = /*#__PURE__*/ forwardRef(({ isOpen, isLoading, closeOnBackdrop = true, onClose, onCloseDone, className, children, ...props }, ref)=>{
+    const modalRef = useRef(null);
+    const backdropRef = useRef(null);
+    const mouseDownOnBackdropActive = useRef(false);
+    const allRefs = useForkRef(ref, modalRef);
+    const container = modalRef?.current?.ownerDocument || document;
+    useEffect(()=>{
+        const handleKeyDown = (event)=>{
+            if ('Escape' === event.key && isOpen) onClose?.();
+        };
+        container.addEventListener('keydown', handleKeyDown);
+        return ()=>container.removeEventListener('keydown', handleKeyDown);
+    }, [
+        onClose,
+        isOpen,
+        container
+    ]);
+    const handleTabKey = useCallback((e)=>{
+        if ('Tab' === e.key && modalRef.current && isOpen) {
+            const focusableElements = modalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+            const firstElement = focusableElements[0];
+            const lastElement = focusableElements[focusableElements.length - 1];
+            if (e.shiftKey && document.activeElement === firstElement) {
+                e.preventDefault();
+                lastElement?.focus();
+            } else if (!e.shiftKey && document.activeElement === lastElement) {
+                e.preventDefault();
+                firstElement?.focus();
+            }
+        }
+    }, [
+        isOpen
+    ]);
+    useEffect(()=>{
+        if (isOpen) {
+            container.addEventListener('keydown', handleTabKey);
+            setTimeout(()=>{
+                if (modalRef.current) {
+                    const focusableElements = modalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+                    const firstInput = Array.from(focusableElements).find((el)=>'input' === el.tagName.toLowerCase());
+                    if (firstInput) firstInput.focus();
+                    else if (focusableElements.length > 0) focusableElements[0].focus();
+                }
+            }, 100);
+        }
+        return ()=>{
+            container.removeEventListener('keydown', handleTabKey);
+        };
+    }, [
+        isOpen,
+        handleTabKey,
+        container
+    ]);
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ react_dom.createPortal(/*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(CSSTransition, {
+                    classNames: "fr-modal-backdrop",
+                    in: isOpen,
+                    timeout: {
+                        exit: 300
+                    },
+                    appear: true,
+                    unmountOnExit: true,
+                    nodeRef: backdropRef,
+                    component: null,
+                    children: /*#__PURE__*/ jsx("div", {
+                        ref: backdropRef,
+                        className: "fr-modal-backdrop fwe-modal-backdrop"
+                    })
+                }),
+                /*#__PURE__*/ jsx(CSSTransition, {
+                    classNames: "fr-modal",
+                    in: isOpen && !isLoading,
+                    onExited: onCloseDone,
+                    timeout: {
+                        exit: 300,
+                        enter: 100
+                    },
+                    appear: true,
+                    unmountOnExit: true,
+                    nodeRef: modalRef,
+                    component: null,
+                    children: /*#__PURE__*/ jsx("div", {
+                        role: "none",
+                        className: "fr-modal-overlay-wrapper",
+                        onClick: (e)=>e.stopPropagation(),
+                        onMouseDown: (e)=>{
+                            mouseDownOnBackdropActive.current = e.target === e.currentTarget;
+                        },
+                        onMouseUp: (e)=>{
+                            const closeModal = mouseDownOnBackdropActive.current && e.target === e.currentTarget;
+                            mouseDownOnBackdropActive.current = false;
+                            if (closeModal && closeOnBackdrop) onClose?.();
+                        },
+                        children: /*#__PURE__*/ jsx(RemoveScroll, {
+                            ref: allRefs,
+                            enabled: isOpen,
+                            className: classnames('fr-modal fwe-modal', className),
+                            ...props,
+                            children: children
+                        })
+                    })
+                }),
+                isOpen && isLoading && /*#__PURE__*/ jsx("div", {
+                    className: "fr-modal-overlay-wrapper",
+                    children: /*#__PURE__*/ jsx(LoadingIndicator, {
+                        size: "large"
+                    })
+                })
+            ]
+        }), container.body)
+    });
+});
+ModalBase.displayName = 'ModalBase';
+export { ModalBase };

package/dist/components/modals/ModalFooter.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const ModalFooter: (props: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/modals/ModalFooter.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef } from "react";
+const ModalFooter = /*#__PURE__*/ forwardRef(({ children, className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: classnames('fwe-modal-footer', className),
+        ...props,
+        children: /*#__PURE__*/ jsx("div", {
+            className: classnames('fwe-modal-buttons'),
+            children: children
+        })
+    }));
+ModalFooter.displayName = 'ModalFooter';
+export { ModalFooter };

package/dist/components/modals/Prompt.d.ts

@@ -0,0 +1,15 @@
+import type React from 'react';
+import { type ModalProps } from './Modal';
+export interface PromptProps extends Omit<ModalProps, 'head' | 'body' | 'children' | 'onChange'> {
+    readonly title: string;
+    readonly subtitle?: string;
+    readonly hint?: string;
+    readonly label?: string;
+    readonly value?: string;
+    readonly onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    readonly cancel?: string;
+    readonly ok?: string;
+    readonly onCancel?: () => void;
+    readonly onOk: (value: string | undefined) => void;
+}
+export declare const Prompt: (props: PromptProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/modals/Prompt.js

@@ -0,0 +1,61 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from "react";
+import { TextInput } from "../../forms/text-input/TextInput.js";
+import { Modal } from "./Modal.js";
+import { ModalFooter } from "./ModalFooter.js";
+const Prompt = /*#__PURE__*/ forwardRef(({ title, subtitle, hint, label, value, onChange, onOk, onCancel, cancel, ok, className, ...props }, ref)=>{
+    const [innerValue, setInnerValue] = useState(value ?? '');
+    useEffect(()=>{
+        setInnerValue(value ?? '');
+    }, [
+        value
+    ]);
+    function handleChange(newValue, e) {
+        setInnerValue(newValue);
+        if (onChange) onChange(newValue, e);
+    }
+    return /*#__PURE__*/ jsx(Modal, {
+        className: className,
+        head: /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                subtitle && /*#__PURE__*/ jsx("h2", {
+                    className: "fwe-modal-h2",
+                    children: subtitle
+                }),
+                /*#__PURE__*/ jsx("h1", {
+                    className: "fwe-modal-h1",
+                    children: title
+                })
+            ]
+        }),
+        body: /*#__PURE__*/ jsx(TextInput, {
+            onChange: handleChange,
+            label: label,
+            hint: hint,
+            value: innerValue,
+            autoFocus: true
+        }),
+        ref: ref,
+        ...props,
+        children: (cancel || ok) && /*#__PURE__*/ jsxs(ModalFooter, {
+            children: [
+                cancel && /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    "aria-label": "Cancel",
+                    className: "fwe-btn fwe-btn-lg",
+                    onClick: onCancel,
+                    children: cancel
+                }),
+                ok && /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    "aria-label": "Ok",
+                    className: "fwe-btn fwe-btn-hero fwe-btn-lg",
+                    onClick: ()=>onOk(innerValue),
+                    children: ok
+                })
+            ]
+        })
+    });
+});
+Prompt.displayName = 'Prompt';
+export { Prompt };