@festo-ui/react 9.0.0-dev.707 → 9.0.0-dev.710

package/dist/components/search-input/SearchInput.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./SearchInput.css";
+import classnames from "classnames";
+import { useRef } from "react";
+import { useOnClickOutside } from "../../utils/useOnClickOutside.js";
+import { ClearButton } from "./ClearButton.js";
+import { useSearchInput } from "./useSearchInput.js";
+function SearchInput({ defaultValue, disabled, label, value, suggestions, onChange, onSearch, onKeyboardNavigate, className }) {
+    const inputRef = useRef(null);
+    const containerRef = useRef(null);
+    const cappedSuggestions = suggestions?.slice(0, 10) ?? [];
+    const { handleFocus, handleInput, handleClearQuery, handleSuggestionClick, handleOutsideClick, handleKeyDown, hideSuggestionList, selectedSuggestionIndex, innerValue } = useSearchInput(inputRef, cappedSuggestions, value, defaultValue, onChange, onSearch, onKeyboardNavigate);
+    useOnClickOutside(containerRef, handleOutsideClick);
+    return /*#__PURE__*/ jsxs("div", {
+        className: classnames('fwe-search-input', className),
+        ref: containerRef,
+        children: [
+            /*#__PURE__*/ jsx("input", {
+                ref: inputRef,
+                disabled: disabled,
+                placeholder: label,
+                onFocus: handleFocus,
+                type: "search",
+                "aria-label": "Search",
+                onInput: handleInput,
+                onKeyDown: handleKeyDown,
+                value: innerValue
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "fwe-search-icon"
+            }),
+            /*#__PURE__*/ jsx(ClearButton, {
+                onClick: handleClearQuery
+            }),
+            Boolean(suggestions?.length) && !hideSuggestionList && /*#__PURE__*/ jsxs("div", {
+                className: "fwe-search-suggestions",
+                role: "listbox",
+                children: [
+                    cappedSuggestions.map((suggestion, i)=>/*#__PURE__*/ jsx("div", {
+                            role: "option",
+                            tabIndex: -1,
+                            "aria-label": suggestion.value,
+                            "aria-selected": selectedSuggestionIndex === i,
+                            onClick: ()=>handleSuggestionClick(suggestion),
+                            className: `fwe-search-suggestion ${selectedSuggestionIndex === i ? 'fwe-selected' : ''}`,
+                            children: /*#__PURE__*/ jsx("div", {
+                                dangerouslySetInnerHTML: {
+                                    __html: suggestion.template
+                                }
+                            })
+                        }, suggestion.value)),
+                    suggestions && suggestions.length > 10 && /*#__PURE__*/ jsx("div", {
+                        className: "fwe-ml-xxs",
+                        children: "..."
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { SearchInput };

package/{lib → dist}/components/search-input/SearchSuggestion.d.ts

@@ -1,4 +1,4 @@
-export default class SearchSuggestion {
+export declare class SearchSuggestion {
     /**
      * a html-string. e.g.: '<b> hello </b>'
      */

package/dist/components/search-input/SearchSuggestion.js

@@ -0,0 +1,21 @@
+class SearchSuggestion {
+    template;
+    value;
+    static basicSuggestion(suggestionString, query) {
+        const i = suggestionString.toLocaleLowerCase().indexOf(query.toLocaleLowerCase());
+        let template = suggestionString;
+        if (-1 !== i) {
+            const boldStart = i;
+            const boldEnd = i + query.length;
+            const part1 = suggestionString.substring(0, boldStart);
+            const part2 = suggestionString.substring(boldStart, boldEnd);
+            const part3 = suggestionString.substring(boldEnd, suggestionString.length);
+            template = `${part1}<strong>${part2}</strong>${part3}`;
+        }
+        return {
+            value: suggestionString,
+            template
+        };
+    }
+}
+export { SearchSuggestion };

package/{lib → dist}/components/search-input/useSearchInput.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
-import SearchSuggestion from "./SearchSuggestion";
-export default function useSearchInput(inputRef: React.MutableRefObject<HTMLInputElement | null>, cappedSuggestions: SearchSuggestion[], value?: string, defaultValue?: string, onChange?: (value: string) => void, onSearch?: (value: string) => void, onKeyboardNavigate?: (value: string) => void): {
+import type React from 'react';
+import type { SearchSuggestion } from './SearchSuggestion';
+export declare function useSearchInput(inputRef: React.MutableRefObject<HTMLInputElement | null>, cappedSuggestions: SearchSuggestion[], value?: string, defaultValue?: string, onChange?: (value: string) => void, onSearch?: (value: string) => void, onKeyboardNavigate?: (value: string) => void): {
     innerValue: string | undefined;
     hideSuggestionList: boolean;
     selectedSuggestionIndex: number;

package/dist/components/search-input/useSearchInput.js

@@ -0,0 +1,85 @@
+import { useState } from "react";
+import { useControlled } from "../../utils/useControlled.js";
+function useSearchInput(inputRef, cappedSuggestions, value, defaultValue = '', onChange, onSearch, onKeyboardNavigate) {
+    const [innerValue, setValue] = useControlled({
+        controlled: value,
+        default: defaultValue
+    });
+    const [hideSuggestionList, setHideSuggestionList] = useState(false);
+    const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1);
+    function blurInput() {
+        if (inputRef.current) inputRef.current.blur();
+    }
+    function reset() {
+        setSelectedSuggestionIndex(-1);
+        setHideSuggestionList(true);
+        blurInput();
+    }
+    function handleSearch() {
+        reset();
+        if (void 0 !== innerValue) onSearch?.(innerValue);
+    }
+    function updateValue(newValue) {
+        setValue(newValue);
+        onChange?.(newValue);
+        onSearch?.(newValue);
+    }
+    function handleClearQuery() {
+        reset();
+        updateValue('');
+    }
+    function handleArrowKey(newSuggestionIndex) {
+        if (!cappedSuggestions || !cappedSuggestions.length) return;
+        const selectedSuggestion = cappedSuggestions[newSuggestionIndex];
+        setSelectedSuggestionIndex(newSuggestionIndex);
+        setValue(selectedSuggestion.value);
+        onKeyboardNavigate?.(selectedSuggestion.value);
+    }
+    function handleUpArrowKey() {
+        handleArrowKey(selectedSuggestionIndex > 0 ? selectedSuggestionIndex - 1 : cappedSuggestions.length - 1);
+    }
+    function handleDownArrowKey() {
+        handleArrowKey(selectedSuggestionIndex >= cappedSuggestions.length - 1 ? 0 : selectedSuggestionIndex + 1);
+    }
+    function handleKeyDown(event) {
+        switch(event.key){
+            case 'Enter':
+                handleSearch();
+                break;
+            case 'Escape':
+                handleClearQuery();
+                break;
+            case 'ArrowUp':
+                handleUpArrowKey();
+                break;
+            case 'ArrowDown':
+                handleDownArrowKey();
+                break;
+            default:
+                break;
+        }
+    }
+    const handleFocus = ()=>setHideSuggestionList(false);
+    const handleOutsideClick = ()=>setHideSuggestionList(true);
+    function handleSuggestionClick(suggestion) {
+        reset();
+        updateValue(suggestion.value);
+    }
+    function handleInput(event) {
+        setSelectedSuggestionIndex(-1);
+        setValue(event.target.value);
+        onChange?.(event.target.value);
+    }
+    return {
+        innerValue,
+        hideSuggestionList,
+        selectedSuggestionIndex,
+        handleClearQuery,
+        handleFocus,
+        handleInput,
+        handleSuggestionClick,
+        handleOutsideClick,
+        handleKeyDown
+    };
+}
+export { useSearchInput };

package/dist/components/snackbar/Snackbar.css

@@ -0,0 +1,55 @@
+.fr-snackbar-wrapper {
+  opacity: 0;
+  opacity: 1;
+  margin-bottom: 24px;
+}
+
+.fr-snackbar-wrapper-enter-done {
+  opacity: 1;
+  transition: opacity .6s ease-out;
+}
+
+.fr-snackbar-wrapper-exit {
+  opacity: 1;
+  height: 48px;
+}
+
+.fr-snackbar-wrapper-exit-active {
+  opacity: 0;
+  height: 0;
+  margin-bottom: 0;
+  transition: height .3s ease-out .3s, opacity .3s ease-out, margin-bottom .3s ease-out .3s;
+}
+
+.fr-snackbar-wrapper--first {
+  opacity: 1;
+  margin-bottom: 24px;
+  transform: translateY(100px);
+}
+
+.fr-snackbar-wrapper--first-enter-done {
+  opacity: 1;
+  transition: opacity .6s ease-out;
+}
+
+.fr-snackbar-wrapper--first-exit {
+  opacity: 1;
+  height: 48px;
+}
+
+.fr-snackbar-wrapper--first-exit-active {
+  opacity: 0;
+  height: 0;
+  margin-bottom: 0;
+  transition: height .3s ease-out .3s, opacity .3s ease-out, margin-bottom .3s ease-out .3s;
+}
+
+.fr-snackbar-wrapper--first-enter-done {
+  transition: transform .6s ease-out;
+  transform: translateY(0);
+}
+
+.fr-snackbar-wrapper--first-exit-active {
+  transform: translateY(0);
+}
+

package/{lib → dist}/components/snackbar/Snackbar.d.ts

@@ -1,8 +1,8 @@
-import { ClassNameProps } from "../../helper/types";
-import "./Snackbar.scss";
+import type { ClassNameProps } from '../../utils/types';
+import './Snackbar.scss';
 export interface SnackbarConfig extends ClassNameProps {
-    type?: "info" | "warning" | "error";
-    variant?: "a" | "b" | "c";
+    type?: 'info' | 'warning' | 'error';
+    variant?: 'a' | 'b' | 'c';
     darkBackground?: boolean;
     showClose?: boolean;
     action?: string;
@@ -18,5 +18,4 @@ export interface SnackbarProps {
     onClose?: () => void;
     first?: boolean;
 }
-declare function Snackbar(props: SnackbarProps): import("react/jsx-runtime").JSX.Element;
-export default Snackbar;
+export declare function Snackbar(props: SnackbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/snackbar/Snackbar.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { useEffect, useRef, useState } from "react";
+import { CSSTransition } from "react-transition-group";
+import "./Snackbar.css";
+function Snackbar(props) {
+    const { data, onAction, onClose, first = false } = props;
+    const [show, setShow] = useState(true);
+    const nodeRef = useRef(null);
+    useEffect(()=>{
+        let disappearAfter = 5000;
+        if (data?.disappearAfter !== null) {
+            if (data?.disappearAfter && data?.disappearAfter > 0) disappearAfter = data?.disappearAfter;
+            const timer = setTimeout(()=>setShow(false), disappearAfter);
+            return ()=>{
+                clearTimeout(timer);
+            };
+        }
+    }, [
+        data
+    ]);
+    function handleClose() {
+        setShow(false);
+    }
+    const classes = first ? 'fr-snackbar-wrapper--first' : 'fr-snackbar-wrapper';
+    return /*#__PURE__*/ jsx(CSSTransition, {
+        nodeRef: nodeRef,
+        onExited: ()=>onClose ? onClose() : void 0,
+        unmountOnExit: true,
+        timeout: {
+            exit: 600
+        },
+        in: show,
+        classNames: classes,
+        appear: true,
+        children: /*#__PURE__*/ jsx("div", {
+            ref: nodeRef,
+            className: classes,
+            children: /*#__PURE__*/ jsxs("div", {
+                className: classnames({
+                    'fwe-snackbar': true,
+                    'fwe-snackbar-b': data?.variant === 'b',
+                    'fwe-snackbar-c': data?.variant === 'c',
+                    'fwe-snackbar-info': data?.type === 'info',
+                    'fwe-snackbar-warning': data?.type === 'warning',
+                    'fwe-snackbar-error': data?.type === 'error',
+                    'fwe-snackbar-shadow': data?.darkBackground
+                }, data?.className),
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        children: data?.text
+                    }),
+                    data?.action && /*#__PURE__*/ jsx("button", {
+                        "aria-label": "UserAction",
+                        type: "button",
+                        className: "fwe-snackbar-link-btn",
+                        onClick: ()=>onAction ? onAction() : void 0,
+                        children: data?.action
+                    }),
+                    data?.action && data?.showClose && /*#__PURE__*/ jsx("div", {
+                        className: "fwe-snackbar-separator"
+                    }),
+                    data?.showClose && /*#__PURE__*/ jsx("button", {
+                        "aria-label": "Close",
+                        type: "button",
+                        className: "fwe-snackbar-close-btn",
+                        onClick: handleClose,
+                        children: /*#__PURE__*/ jsx("span", {
+                            className: "fwe-sr-only",
+                            children: "Close"
+                        })
+                    })
+                ]
+            })
+        })
+    });
+}
+export { Snackbar };

package/{lib → dist}/components/snackbar/SnackbarContext.d.ts

@@ -1,8 +1,7 @@
-import React from "react";
-import { SnackbarData } from "./Snackbar";
+import React from 'react';
+import type { SnackbarData } from './Snackbar';
 export interface ProviderContext {
     addSnackbar: (data: SnackbarData, onAction?: () => void, onClose?: () => void) => void;
     closeSnackbar: (key: number | string) => void;
 }
-declare const _default: React.Context<ProviderContext>;
-export default _default;
+export declare const SnackbarContext: React.Context<ProviderContext>;

package/dist/components/snackbar/SnackbarContext.js

@@ -0,0 +1,3 @@
+import react from "react";
+const SnackbarContext = react.createContext(null);
+export { SnackbarContext };

package/dist/components/snackbar/SnackbarProvider.d.ts

@@ -0,0 +1,8 @@
+import type { ClassNamePropsWithChildren } from '../../utils/types';
+import { type SnackbarConfig, type SnackbarData } from './Snackbar';
+interface SnackbarProviderProps extends ClassNamePropsWithChildren {
+    config?: SnackbarConfig;
+}
+export declare function SnackbarProvider(props: SnackbarProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare const addSnackbar: (snackData: SnackbarData, onAction?: () => void, onClose?: () => void) => string | number;
+export {};

package/dist/components/snackbar/SnackbarProvider.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { useCallback, useMemo, useState } from "react";
+import { Snackbar } from "./Snackbar.js";
+import { SnackbarContext } from "./SnackbarContext.js";
+let addSnackbarFunction;
+function SnackbarProvider(props) {
+    const { config = {
+        darkBackground: true
+    }, children, className } = props;
+    const [snacks, setSnacks] = useState([]);
+    const addSnackbar = useCallback((snackData, onAction, onClose)=>{
+        const key = snackData.key ?? Date.now() + Math.random();
+        setSnacks((prevSnacks)=>[
+                {
+                    data: {
+                        ...config,
+                        ...snackData
+                    },
+                    onAction,
+                    onClose,
+                    key,
+                    first: 0 === prevSnacks.length
+                },
+                ...prevSnacks
+            ]);
+        return key;
+    }, [
+        config
+    ]);
+    addSnackbarFunction = addSnackbar;
+    const closeSnackbar = useCallback((key)=>{
+        if (void 0 !== key) setSnacks((prevSnacks)=>prevSnacks.filter((snack)=>snack.key !== key));
+    }, []);
+    function handleClose(snack) {
+        closeSnackbar(snack.key);
+        if (snack.onClose) snack.onClose();
+    }
+    const contextValue = useMemo(()=>({
+            addSnackbar,
+            closeSnackbar
+        }), [
+        addSnackbar,
+        closeSnackbar
+    ]);
+    return /*#__PURE__*/ jsxs(SnackbarContext.Provider, {
+        value: contextValue,
+        children: [
+            children,
+            /*#__PURE__*/ jsx("div", {
+                className: classnames('fwe-snackbar-container', className),
+                children: snacks.map((snack)=>/*#__PURE__*/ jsx(Snackbar, {
+                        data: snack.data,
+                        onAction: ()=>snack.onAction ? snack.onAction() : void 0,
+                        onClose: ()=>handleClose(snack),
+                        first: snack.first
+                    }, snack.key))
+            })
+        ]
+    });
+}
+const SnackbarProvider_addSnackbar = (snackData, onAction, onClose)=>{
+    if (!addSnackbarFunction) throw new Error('SnackbarProvider is not mounted.');
+    return addSnackbarFunction(snackData, onAction, onClose);
+};
+export { SnackbarProvider, SnackbarProvider_addSnackbar as addSnackbar };

package/dist/components/snackbar/useSnackbar.d.ts

@@ -0,0 +1,2 @@
+import { type ProviderContext } from './SnackbarContext';
+export declare const useSnackbar: () => ProviderContext;

package/dist/components/snackbar/useSnackbar.js

@@ -0,0 +1,4 @@
+import { useContext } from "react";
+import { SnackbarContext } from "./SnackbarContext.js";
+const useSnackbar = ()=>useContext(SnackbarContext);
+export { useSnackbar };

package/dist/components/stepper-horizontal/StepperHorizontal.css

@@ -0,0 +1,6 @@
+.fr-step-container {
+  background: none;
+  border: none;
+  padding: 0;
+}
+

package/dist/components/stepper-horizontal/StepperHorizontal.d.ts

@@ -0,0 +1,7 @@
+import './StepperHorizontal.scss';
+import React, { type ComponentPropsWithoutRef } from 'react';
+export interface StepperHorizontalProps extends Omit<ComponentPropsWithoutRef<'button'>, 'onChange'> {
+    stepIndex?: number;
+    onChange?: (stepIndex: number) => void;
+}
+export declare const StepperHorizontal: (props: StepperHorizontalProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;

package/dist/components/stepper-horizontal/StepperHorizontal.js

@@ -0,0 +1,48 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "./StepperHorizontal.css";
+import classnames from "classnames";
+import react, { forwardRef } from "react";
+const StepperHorizontal = /*#__PURE__*/ forwardRef(({ children, className, stepIndex = 0, onChange, ...props }, ref)=>{
+    const stepComponents = react.Children.map(children, (child, i)=>/*#__PURE__*/ react.isValidElement(child) ? /*#__PURE__*/ react.cloneElement(child, {
+            ...child.props,
+            isActive: i === stepIndex
+        }) : null);
+    function handleStepClick(index) {
+        if (stepIndex > index && onChange) onChange(index);
+    }
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "fwe-stepper-horizontal",
+                children: stepComponents?.map((step, i)=>/*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        ref: ref,
+                        className: classnames('fwe-step-container fr-step-container', {
+                            'fwe-step-done': stepIndex > i,
+                            'fwe-step-active': i === stepIndex
+                        }),
+                        onClick: ()=>handleStepClick(i),
+                        disabled: stepIndex <= i,
+                        "aria-label": `Step ${i + 1}: ${step.props.title}`,
+                        "aria-current": i === stepIndex ? 'step' : void 0,
+                        ...props,
+                        children: /*#__PURE__*/ jsxs("div", {
+                            className: "fwe-step",
+                            children: [
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "fwe-step-no",
+                                    children: i + 1
+                                }),
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "fwe-step-name",
+                                    children: step.props.title
+                                })
+                            ]
+                        })
+                    }, step.props.title))
+            }),
+            stepComponents
+        ]
+    });
+});
+export { StepperHorizontal };

package/dist/components/stepper-horizontal/step-horizontal/StepHorizontal.css

@@ -0,0 +1,24 @@
+.overflow-hidden {
+  overflow: hidden;
+}
+
+@keyframes stepperAnimation {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0%);
+  }
+}
+
+.fr-moving-container {
+  animation-name: stepperAnimation;
+  animation-duration: .3s;
+  animation-timing-function: ease;
+}
+
+.hidden {
+  display: none;
+}
+

package/dist/components/stepper-horizontal/step-horizontal/StepHorizontal.d.ts

@@ -0,0 +1,6 @@
+import './StepHorizontal.scss';
+import { type ComponentPropsWithoutRef } from 'react';
+export interface StepHorizontalProps extends ComponentPropsWithoutRef<'div'> {
+    isActive?: boolean;
+}
+export declare const StepHorizontal: (props: StepHorizontalProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/stepper-horizontal/step-horizontal/StepHorizontal.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import "./StepHorizontal.css";
+import classnames from "classnames";
+import { forwardRef } from "react";
+const StepHorizontal = /*#__PURE__*/ forwardRef(({ children, className, isActive, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: classnames('overflow-hidden', {
+            hidden: !isActive
+        }),
+        ...props,
+        children: /*#__PURE__*/ jsx("div", {
+            className: "fr-moving-container",
+            children: children
+        })
+    }));
+export { StepHorizontal };

package/dist/components/stepper-vertical/StepperVertical.d.ts

@@ -0,0 +1,6 @@
+import React, { type ComponentPropsWithoutRef } from 'react';
+export interface StepperVerticalProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+    stepIndex?: number;
+    onChange?: (stepIndex: number) => void;
+}
+export declare const StepperVertical: (props: StepperVerticalProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/stepper-vertical/StepperVertical.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import react, { forwardRef } from "react";
+const StepperVertical = /*#__PURE__*/ forwardRef(({ children, className, stepIndex = 0, onChange, ...props }, ref)=>{
+    function handleStepClick(index) {
+        if (stepIndex > index && onChange) onChange(index);
+    }
+    const stepComponents = react.Children.map(children, (child, i)=>{
+        if (/*#__PURE__*/ react.isValidElement(child)) return /*#__PURE__*/ react.cloneElement(child, {
+            ...child.props,
+            isActive: i === stepIndex,
+            index: i,
+            isDone: i < stepIndex,
+            isLastElement: i === react.Children.count(children) - 1,
+            onStepClick: ()=>handleStepClick(i)
+        });
+        return null;
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: classnames('fwe-stepper-vertical', className),
+        ...props,
+        children: stepComponents
+    });
+});
+export { StepperVertical };

package/dist/components/stepper-vertical/step-vertical/StepVertical.css

@@ -0,0 +1,10 @@
+.fwe-stepper-vertical .fwe-step-container.fwe-step-active .fwe-step-content-container {
+  height: 20px;
+}
+
+.fr-stepper-vertical-step {
+  background: none;
+  border: none;
+  padding: 0;
+}
+

package/dist/components/stepper-vertical/step-vertical/StepVertical.d.ts

@@ -0,0 +1,11 @@
+import './StepVertical.scss';
+import { type ComponentPropsWithoutRef } from 'react';
+export interface StepVerticalProps extends ComponentPropsWithoutRef<'div'> {
+    isActive?: boolean;
+    isLastElement?: boolean;
+    isDone?: boolean;
+    index?: number;
+    title?: string;
+    onStepClick?: () => void;
+}
+export declare const StepVertical: (props: StepVerticalProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;