@festo-ui/react 9.0.0-dev.711 → 9.0.0-dev.713

package/dist/components/mobile-flyout/mobile-flyout-page/MobileFlyoutPage.d.ts

@@ -1,8 +0,0 @@
-import './MobileFlyoutPage.scss';
-import { type ComponentPropsWithoutRef } from 'react';
-export interface MobileFlyoutPageProps extends ComponentPropsWithoutRef<'div'> {
-    back?: string;
-    name?: string;
-    root?: boolean;
-}
-export declare const MobileFlyoutPage: (props: MobileFlyoutPageProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/mobile-flyout/mobile-flyout-page/MobileFlyoutPage.js

@@ -1,35 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import "./MobileFlyoutPage.css";
-import classnames from "classnames";
-import { forwardRef, useContext } from "react";
-import { MobileFlyoutContext } from "../MobileFlyoutContext.js";
-const MobileFlyoutPage = /*#__PURE__*/ forwardRef(({ back, children, name, root, ...props }, ref)=>{
-    const { visible, setVisible, back: backContext } = useContext(MobileFlyoutContext);
-    const innerVisible = root || name && visible.includes(name);
-    const innerBack = back ?? backContext ?? 'Back';
-    function handleChange() {
-        if (name) setVisible(name);
-    }
-    return /*#__PURE__*/ jsxs("div", {
-        className: classnames('fwe-mobile-flyout-page', {
-            'fwe-opened': innerVisible
-        }),
-        ref: ref,
-        ...props,
-        children: [
-            !root && /*#__PURE__*/ jsx("button", {
-                type: "button",
-                className: "fwe-page-back fr-mobile-flyout-page-back",
-                onClick: handleChange,
-                children: /*#__PURE__*/ jsx("div", {
-                    children: innerBack
-                })
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: "fwe-mobile-flyout-item-container",
-                children: children
-            })
-        ]
-    });
-});
-export { MobileFlyoutPage };

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

@@ -1,12 +0,0 @@
-import { type ModalProps } from './Modal';
-export interface AlertModalProps extends Omit<ModalProps, 'head' | 'children'> {
-    title: string;
-    subtitle?: string;
-    alertType: 'info' | 'warning' | 'error';
-    strong?: boolean;
-    cancel?: string;
-    ok?: string;
-    onCancel?: () => void;
-    onOk?: () => void;
-}
-export declare function AlertModal({ title, subtitle, alertType, strong, cancel, ok, onCancel, onOk, className, body, ...props }: AlertModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/modals/AlertModal.js

@@ -1,53 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
-import { Modal } from "./Modal.js";
-import { ModalFooter } from "./ModalFooter.js";
-function AlertModal({ title, subtitle, alertType, strong, cancel, ok, onCancel, onOk, className, body, ...props }) {
-    return /*#__PURE__*/ jsx(Modal, {
-        className: classnames({
-            'fwe-modal--with-indicator-bar': strong,
-            'fwe-modal--warning': 'warning' === alertType,
-            'fwe-modal--error': 'error' === alertType,
-            'fwe-modal--info': 'info' === alertType
-        }, 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,
-        ...props,
-        children: (cancel || ok) && /*#__PURE__*/ jsxs(ModalFooter, {
-            children: [
-                cancel && /*#__PURE__*/ jsx("button", {
-                    type: "button",
-                    "aria-label": "Cancel",
-                    className: classnames('fwe-btn fwe-btn-lg', {
-                        'fwe-btn-link': strong
-                    }),
-                    onClick: onCancel,
-                    children: cancel
-                }),
-                ok && /*#__PURE__*/ jsx("button", {
-                    type: "button",
-                    "aria-label": "Ok",
-                    className: classnames('fwe-btn fwe-btn-lg', {
-                        'fwe-btn-hero': !strong
-                    }),
-                    onClick: onOk,
-                    children: ok
-                })
-            ]
-        })
-    });
-}
-export { AlertModal };

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

@@ -1,11 +0,0 @@
-import { type ModalProps } from './Modal';
-export interface ConfirmModalProps extends Omit<ModalProps, 'head' | 'children'> {
-    title: string;
-    subtitle?: string;
-    cancel?: string;
-    ok?: string;
-    onCancel?: () => void;
-    onOk?: () => void;
-    large?: boolean;
-}
-export declare function ConfirmModal({ title, subtitle, cancel, ok, onCancel, onOk, large, body, className, ...props }: ConfirmModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/modals/ConfirmModal.js

@@ -1,46 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
-import { Modal } from "./Modal.js";
-import { ModalFooter } from "./ModalFooter.js";
-function ConfirmModal({ title, subtitle, cancel, ok, onCancel, onOk, large, body, className, ...props }) {
-    return /*#__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,
-        ...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
-                })
-            ]
-        })
-    });
-}
-export { ConfirmModal };

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

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

package/dist/components/modals/CustomModal.js

@@ -1,38 +0,0 @@
-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
-        ]
-    }));
-export { CustomModal };

package/dist/components/modals/Modal.css

@@ -1,39 +0,0 @@
-.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

@@ -1,8 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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
-        ]
-    }));
-export { Modal };

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

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

package/dist/components/modals/ModalBase.js

@@ -1,124 +0,0 @@
-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, 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", {
-                        "aria-hidden": true,
-                        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) 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)
-    });
-});
-export { ModalBase };

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

@@ -1,2 +0,0 @@
-import type { ClassNamePropsWithChildren } from '../../utils/types';
-export declare const ModalFooter: (props: ClassNamePropsWithChildren & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/modals/ModalFooter.js

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

package/dist/components/modals/Prompt.js

@@ -1,58 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { TextInput } from "../../forms/text-input/TextInput.js";
-import { Modal } from "./Modal.js";
-import { ModalFooter } from "./ModalFooter.js";
-function Prompt({ title, subtitle, hint, label, value, onChange, onOk, onCancel, cancel, ok, ...props }) {
-    const [innerValue, setInnerValue] = useState(value);
-    useEffect(()=>{
-        setInnerValue(value);
-    }, [
-        value
-    ]);
-    function handleChange(e) {
-        setInnerValue(e.target.value);
-        if (onChange) onChange(e);
-    }
-    return /*#__PURE__*/ jsx(Modal, {
-        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
-        }),
-        ...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
-                })
-            ]
-        })
-    });
-}
-export { Prompt };