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

package/dist/components/popovers/legend/Legend.d.ts

@@ -1,11 +0,0 @@
-import { type PopoverProps } from '../popover/Popover';
-import './Legend.scss';
-interface PopoverLegendItem {
-    name: string;
-    text: string;
-}
-export interface LegendProps extends Omit<PopoverProps, 'popoverContent'> {
-    items: PopoverLegendItem[];
-}
-export declare function Legend({ items, ...props }: Readonly<LegendProps>): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/popovers/legend/Legend.js

@@ -1,24 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Popover } from "../popover/Popover.js";
-import "./Legend.css";
-function Legend({ items, ...props }) {
-    const content = items.length > 0 ? /*#__PURE__*/ jsx("dl", {
-        className: "fr-legend",
-        children: items.map((item)=>/*#__PURE__*/ jsxs("div", {
-                className: "fr-legend-content",
-                children: [
-                    /*#__PURE__*/ jsx("dt", {
-                        children: item.name
-                    }),
-                    /*#__PURE__*/ jsx("dt", {
-                        children: item.text
-                    })
-                ]
-            }, item.name))
-    }) : null;
-    return /*#__PURE__*/ jsx(Popover, {
-        popoverContent: content,
-        ...props
-    });
-}
-export { Legend };

package/dist/components/popovers/popover/Popover.css

@@ -1,56 +0,0 @@
-#arrow, #arrow:after {
-  width: 12px;
-  height: 12px;
-  position: absolute;
-  transform: rotate(45deg);
-}
-
-#arrow {
-  width: 17px;
-  height: 17px;
-  overflow: hidden;
-}
-
-#arrow:after {
-  content: "";
-  z-index: -1;
-  background: #fff;
-  box-shadow: 0 1px 4px #3333;
-}
-
-.fwe-popover-container[data-popper-placement^="top"] > #arrow {
-  top: 100%;
-}
-
-.fwe-popover-container[data-popper-placement^="top"] > #arrow:after {
-  top: -6px;
-  left: 3px;
-}
-
-.fwe-popover-container[data-popper-placement^="bottom"] > #arrow {
-  top: -17px;
-}
-
-.fwe-popover-container[data-popper-placement^="bottom"] > #arrow:after {
-  top: 11px;
-  left: 3px;
-}
-
-.fwe-popover-container[data-popper-placement^="left"] > #arrow {
-  left: 100%;
-}
-
-.fwe-popover-container[data-popper-placement^="left"] > #arrow:after {
-  top: 2px;
-  left: -6px;
-}
-
-.fwe-popover-container[data-popper-placement^="right"] > #arrow {
-  left: -17px;
-}
-
-.fwe-popover-container[data-popper-placement^="right"] > #arrow:after {
-  top: 2px;
-  left: 11px;
-}
-

package/dist/components/popovers/popover/Popover.js

@@ -1,107 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
-import { useRef, useState } from "react";
-import { usePopper } from "react-popper";
-import "./Popover.css";
-import { useControlled } from "../../../utils/useControlled.js";
-import { useForkRef } from "../../../utils/useForkRef.js";
-import { useOnClickOutside } from "../../../utils/useOnClickOutside.js";
-function Popover({ popoverContent, children, position, fallbackPositions, openOnHover = false, defaultOpen = false, open, onStatusChange, wrapper, className, flip = true, containerClassName, stopPropagation, arrow = true, onClick }) {
-    const [showPopper, setShowPopper] = useControlled({
-        controlled: open,
-        default: defaultOpen
-    });
-    const [popperElement, setPopperElement] = useState(null);
-    const [arrowElement, setArrowElement] = useState(null);
-    const referenceElement = useRef(null);
-    const popperElRef = useRef(null);
-    const combinedRef = useForkRef(popperElRef, setPopperElement);
-    const classes = classnames(className);
-    const { styles, attributes } = usePopper(referenceElement.current, popperElement, {
-        placement: position,
-        modifiers: [
-            {
-                name: 'arrow',
-                options: {
-                    element: arrowElement
-                }
-            },
-            {
-                name: 'offset',
-                options: {
-                    offset: [
-                        0,
-                        24
-                    ]
-                }
-            },
-            {
-                name: 'flip',
-                options: {
-                    fallbackPlacements: flip ? fallbackPositions : [
-                        position || 'auto'
-                    ]
-                }
-            }
-        ]
-    });
-    const handleChange = (e, status)=>{
-        if (stopPropagation) {
-            e?.stopPropagation();
-            e?.preventDefault();
-        }
-        setShowPopper(status);
-        onStatusChange?.(status);
-    };
-    function closePopover(event) {
-        handleChange(event, false);
-    }
-    useOnClickOutside(popperElRef, closePopover, referenceElement);
-    function handleKeyDown(event) {
-        if ('Enter' === event.key) handleChange(void 0, true);
-        if ('Escape' === event.key) handleChange(void 0, false);
-    }
-    function handleKeyUp(event) {
-        if (' ' === event.key) handleChange(void 0, true);
-    }
-    function handleTriggerClick(event) {
-        onClick?.(event);
-        if (event.defaultPrevented) setShowPopper(!showPopper);
-        else handleChange(event, !showPopper);
-    }
-    const childrenWrapper = /*#__PURE__*/ jsx("div", {
-        tabIndex: 0,
-        role: "button",
-        className: classes,
-        ref: referenceElement,
-        onKeyDown: handleKeyDown,
-        onKeyUp: handleKeyUp,
-        onClick: handleTriggerClick,
-        onMouseEnter: openOnHover ? (e)=>handleChange(e, true) : void 0,
-        onMouseLeave: openOnHover ? (e)=>handleChange(e, false) : void 0,
-        children: children
-    });
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            wrapper ? wrapper(childrenWrapper) : childrenWrapper,
-            showPopper && /*#__PURE__*/ jsxs("div", {
-                className: classnames('fwe-popover-container', containerClassName),
-                ref: combinedRef,
-                style: styles.popper,
-                ...attributes.popper,
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: "fwe-popover",
-                        children: popoverContent
-                    }),
-                    arrow && /*#__PURE__*/ jsx("div", {
-                        ref: setArrowElement,
-                        style: styles.arrow,
-                        id: "arrow"
-                    })
-                ]
-            })
-        ]
-    });
-}
-export { Popover };

package/dist/components/popovers/popover-menu/PopoverMenu.css

@@ -1,20 +0,0 @@
-.fwe-popover-menu .fwe-popover-menu-button {
-  cursor: pointer;
-  background: none;
-  border: none;
-  margin: 0;
-  padding: 0;
-  line-height: 0;
-  display: block;
-}
-
-.fwe-popover-menu .fwe-popover-menu-button:hover {
-  color: var(--fwe-hero);
-}
-
-.fwe-popover-menu .fwe-popover {
-  font-size: var(--fwe-font-size-base);
-  padding: 16px;
-  line-height: 1.5rem;
-}
-

package/dist/components/popovers/popover-menu/PopoverMenu.d.ts

@@ -1,8 +0,0 @@
-import { type ReactNode } from 'react';
-import { type PopoverProps } from '../popover/Popover';
-import './PopoverMenu.scss';
-import { type PopoverMenuItemProps } from '../popover-menu-item/PopoverMenuItem';
-export interface PopoverMenuProps extends Omit<PopoverProps, 'popoverContent' | 'open' | 'onStatusChange'> {
-    menu: PopoverMenuItemProps[] | ReactNode[];
-}
-export declare function PopoverMenu({ menu, ...props }: Readonly<PopoverMenuProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/popovers/popover-menu/PopoverMenu.js

@@ -1,37 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
-import { useMemo, useState } from "react";
-import { Popover } from "../popover/Popover.js";
-import "./PopoverMenu.css";
-import { PopoverMenuItem } from "../popover-menu-item/PopoverMenuItem.js";
-import { PopoverMenuContext } from "./PopoverMenuContext.js";
-function PopoverMenu({ menu, ...props }) {
-    const [showPopper, setShowPopper] = useState(false);
-    const isPopoverMenuItemPropsArray = (items)=>Array.isArray(items) && items.length > 0 && 'text' in items[0];
-    let content = null;
-    content = isPopoverMenuItemPropsArray(menu) ? menu.map((item)=>/*#__PURE__*/ jsx(PopoverMenuItem, {
-            item: item
-        }, item.text)) : menu;
-    const popoverMenuContext = useMemo(()=>({
-            setShowPopper
-        }), []);
-    return /*#__PURE__*/ jsx("div", {
-        className: classnames('fwe-popover-menu', props.className),
-        children: /*#__PURE__*/ jsx(PopoverMenuContext.Provider, {
-            value: popoverMenuContext,
-            children: /*#__PURE__*/ jsx(Popover, {
-                popoverContent: content,
-                position: "right",
-                open: showPopper,
-                onStatusChange: setShowPopper,
-                ...props,
-                children: /*#__PURE__*/ jsx("div", {
-                    "data-testid": "fwe-popover-menu-button",
-                    className: "fwe-popover-menu-button",
-                    children: props.children
-                })
-            })
-        })
-    });
-}
-export { PopoverMenu };

package/dist/components/popovers/popover-menu/PopoverMenuContext.d.ts

@@ -1,3 +0,0 @@
-export declare const PopoverMenuContext: import("react").Context<{
-    setShowPopper: React.Dispatch<React.SetStateAction<boolean>>;
-}>;

package/dist/components/popovers/popover-menu/PopoverMenuContext.js

@@ -1,5 +0,0 @@
-import { createContext } from "react";
-const PopoverMenuContext = createContext({
-    setShowPopper: ()=>{}
-});
-export { PopoverMenuContext };

package/dist/components/popovers/popover-menu-item/PopoverMenuItem.css

@@ -1,35 +0,0 @@
-.fr-popover-item {
-  width: 100%;
-  height: 36px;
-  color: var(--fwe-text);
-  align-items: center;
-  display: flex;
-}
-
-.fr-popover-item .fwe-svg-icon {
-  margin-left: 8px;
-  margin-right: 8px;
-}
-
-.fr-popover-item i {
-  flex-wrap: nowrap;
-  justify-content: center;
-  align-items: center;
-  width: 32px;
-  height: 24px;
-  margin-right: 0;
-  display: inline-flex;
-}
-
-.fr-popover-item i:before, .fr-popover-item span {
-  display: inline-flex;
-}
-
-.fr-popover-item:hover {
-  background-color: #3333331a;
-}
-
-.fr-popover-item:active {
-  background-color: #3333;
-}
-

package/dist/components/popovers/popover-menu-item/PopoverMenuItem.js

@@ -1,30 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import "./PopoverMenuItem.css";
-import { useContext } from "react";
-import { IconWrapper } from "../../icon-wrapper/IconWrapper.js";
-import { PopoverMenuContext } from "../popover-menu/PopoverMenuContext.js";
-function PopoverMenuItem({ item }) {
-    const { setShowPopper } = useContext(PopoverMenuContext);
-    function handleClick(e) {
-        e?.stopPropagation();
-        e?.preventDefault();
-        if (setShowPopper) setShowPopper(false);
-        if (item.action) item.action(item.data);
-    }
-    if (!item) return null;
-    return /*#__PURE__*/ jsxs("button", {
-        type: "button",
-        className: "fwe-btn-unstyled fr-popover-item",
-        onClick: (e)=>handleClick(e),
-        children: [
-            /*#__PURE__*/ jsx(IconWrapper, {
-                icon: item.icon
-            }),
-            /*#__PURE__*/ jsx("span", {
-                className: "fwe-mr-xxs",
-                children: item.text
-            })
-        ]
-    });
-}
-export { PopoverMenuItem };

package/dist/components/popovers/tooltip/Tooltip.d.ts

@@ -1,5 +0,0 @@
-import type { PopoverProps } from '../popover/Popover';
-export interface TooltipProps extends Omit<PopoverProps, 'popoverContent' | 'openOnHover'> {
-    title: React.ReactNode;
-}
-export declare function Tooltip({ title, ...props }: Readonly<TooltipProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/popovers/tooltip/Tooltip.js

@@ -1,12 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Popover } from "../popover/Popover.js";
-function Tooltip({ title, ...props }) {
-    return /*#__PURE__*/ jsx(Popover, {
-        position: "bottom",
-        popoverContent: title,
-        openOnHover: true,
-        ...props,
-        children: props.children
-    });
-}
-export { Tooltip };

package/dist/components/progress/Progress.d.ts

@@ -1,7 +0,0 @@
-import type { ClassNameProps } from '../../utils/types';
-export interface ProgressProps extends ClassNameProps {
-    progress: number;
-    background?: 'white' | 'black' | 'background';
-    error?: boolean;
-}
-export declare function Progress({ background, error, progress, className, }: ProgressProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/progress/Progress.js

@@ -1,26 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
-function Progress({ background = 'white', error = false, progress, className }) {
-    const classes = classnames('fwe-progress-bar', {
-        'fwe-bg-red': error
-    }, {
-        'fwe-progress-bar-black': 'black' === background
-    }, {
-        'fwe-progress-bar-background': 'background' === background
-    });
-    return /*#__PURE__*/ jsx("div", {
-        className: classnames('fwe-progress', className),
-        children: /*#__PURE__*/ jsx("div", {
-            className: classes,
-            role: "progressbar",
-            style: {
-                width: `${progress}%`
-            },
-            "aria-valuenow": progress,
-            "aria-valuemin": 0,
-            "aria-valuemax": 100,
-            "aria-label": "progressbar"
-        })
-    });
-}
-export { Progress };

package/dist/components/scroll-area/ScrollArea.d.ts

@@ -1,4 +0,0 @@
-export interface ScrollAreaProps extends React.ComponentPropsWithoutRef<'div'> {
-    readonly scrollbarMinSize?: number;
-}
-export declare function ScrollArea({ children, scrollbarMinSize, ...props }: ScrollAreaProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/scroll-area/ScrollArea.js

@@ -1,10 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import simplebar_react from "simplebar-react";
-function ScrollArea({ children, scrollbarMinSize = 25, ...props }) {
-    return /*#__PURE__*/ jsx(simplebar_react, {
-        ...props,
-        scrollbarMinSize: scrollbarMinSize,
-        children: children
-    });
-}
-export { ScrollArea };

package/dist/components/scroll-area/ScrollArea.stories.css

@@ -1,9 +0,0 @@
-.scroll-test {
-  width: 400px;
-  max-width: 400px;
-  height: 300px;
-  padding-right: 8px;
-  display: block;
-  overflow: hidden auto;
-}
-

package/dist/components/search-input/ClearButton.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentPropsWithoutRef } from 'react';
-export declare function ClearButton(props: ComponentPropsWithoutRef<'button'>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-function ClearButton(props) {
-    return /*#__PURE__*/ jsx("button", {
-        type: "button",
-        className: "fwe-clear-icon fr-search-input-clear-button",
-        "aria-label": "Clear",
-        ...props
-    });
-}
-export { ClearButton };

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

@@ -1,13 +0,0 @@
-.fwe-search-suggestion {
-  height: 40px;
-}
-
-.fr-search-input-clear-button {
-  background: none;
-  border: none;
-  justify-content: center;
-  align-items: center;
-  padding: 0;
-  display: flex;
-}
-

package/dist/components/search-input/SearchInput.d.ts

@@ -1,14 +0,0 @@
-import './SearchInput.scss';
-import type { SearchSuggestion } from './SearchSuggestion';
-export interface SearchInputProps {
-    readonly disabled?: boolean;
-    readonly label?: string;
-    readonly defaultValue?: string;
-    readonly value?: string;
-    readonly suggestions?: SearchSuggestion[];
-    readonly onChange?: (value: string) => void;
-    readonly onKeyboardNavigate?: (value: string) => void;
-    readonly onSearch?: (value: string) => void;
-    readonly className?: string;
-}
-export declare function SearchInput({ defaultValue, disabled, label, value, suggestions, onChange, onSearch, onKeyboardNavigate, className, }: SearchInputProps): import("react/jsx-runtime").JSX.Element;

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.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.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 };