@festo-ui/react 9.0.0-dev.714 → 9.0.0-dev.716

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

@@ -1,61 +0,0 @@
-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/dist/components/search-input/SearchSuggestion.d.ts

@@ -1,17 +0,0 @@
-export declare class SearchSuggestion {
-    /**
-     * a html-string. e.g.: '<b> hello </b>'
-     */
-    template: string;
-    /**
-     * This Value will be used as new query when the user selects the suggestion.
-     */
-    value: string;
-    /**
-     * Creates a basic Suggestion from a string. The first query match is highlighted by bold tags.
-     * @param suggestionString The suggested string (should contain the whole query)
-     * @param query The current query. This string will be highlighted.
-     * @returns a html-string.
-     */
-    static basicSuggestion(suggestionString: string, query: string): SearchSuggestion;
-}

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

@@ -1,21 +0,0 @@
-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/dist/components/search-input/useSearchInput.d.ts

@@ -1,13 +0,0 @@
-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;
-    handleClearQuery: () => void;
-    handleFocus: () => void;
-    handleInput: (event: any) => void;
-    handleSuggestionClick: (suggestion: SearchSuggestion) => void;
-    handleOutsideClick: () => void;
-    handleKeyDown: (event: React.KeyboardEvent) => void;
-};

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

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

@@ -1,55 +0,0 @@
-.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/dist/components/snackbar/Snackbar.d.ts

@@ -1,21 +0,0 @@
-import type { ClassNameProps } from '../../utils/types';
-import './Snackbar.scss';
-export interface SnackbarConfig extends ClassNameProps {
-    type?: 'info' | 'warning' | 'error';
-    variant?: 'a' | 'b' | 'c';
-    darkBackground?: boolean;
-    showClose?: boolean;
-    action?: string;
-    disappearAfter?: number | null;
-    key?: string | number;
-}
-export interface SnackbarData extends SnackbarConfig {
-    text: string;
-}
-export interface SnackbarProps {
-    data?: SnackbarData;
-    onAction?: () => void;
-    onClose?: () => void;
-    first?: boolean;
-}
-export declare function Snackbar(props: SnackbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/snackbar/Snackbar.js

@@ -1,78 +0,0 @@
-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/dist/components/snackbar/SnackbarContext.d.ts

@@ -1,7 +0,0 @@
-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;
-}
-export declare const SnackbarContext: React.Context<ProviderContext>;

package/dist/components/snackbar/SnackbarContext.js

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

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

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

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

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

package/dist/components/snackbar/useSnackbar.js

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

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

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

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

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

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

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

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

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

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

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

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

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