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

package/dist/components/pagination/Pagination.js

@@ -0,0 +1,100 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "./Pagination.css";
+import classnames from "classnames";
+import { useEffect, useState } from "react";
+var Pagination_PaginationType = /*#__PURE__*/ function(PaginationType) {
+    PaginationType["Simple"] = "SIMPLE";
+    PaginationType["Numeric"] = "NUMERIC";
+    PaginationType["Dots"] = "DOTS";
+    return PaginationType;
+}({});
+function Pagination(props) {
+    const { pageMax, onChange, pageCurrent, defaultPageCurrent = 1, type = "NUMERIC", className } = props;
+    const controlled = void 0 !== pageCurrent;
+    const dotArray = Array.from(new Array(pageMax).keys());
+    const [innerPageCurrent, setInnerPageCurrent] = useState(controlled ? pageCurrent : defaultPageCurrent);
+    useEffect(()=>{
+        if (controlled) setInnerPageCurrent(pageCurrent);
+    }, [
+        pageCurrent,
+        controlled
+    ]);
+    function handleChange(newPage) {
+        if (!controlled) setInnerPageCurrent(newPage);
+        if (onChange) onChange(newPage);
+    }
+    function onBtnDown() {
+        if (innerPageCurrent > 1) {
+            const newPageCurrent = innerPageCurrent - 1;
+            handleChange(newPageCurrent);
+        }
+    }
+    function onBtnUp() {
+        if (innerPageCurrent < pageMax) {
+            const newPageCurrent = innerPageCurrent + 1;
+            handleChange(newPageCurrent);
+        }
+    }
+    function onDotClick(index) {
+        const newPageCurrent = index + 1;
+        handleChange(newPageCurrent);
+    }
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            "DOTS" !== type && /*#__PURE__*/ jsxs("div", {
+                className: classnames('fwe-pagination fwe-p-m', {
+                    'fwe-d-none': pageMax < 2
+                }, className),
+                children: [
+                    /*#__PURE__*/ jsx("button", {
+                        className: classnames('fwe-navigate-btn-down', {
+                            'fwe-disabled': innerPageCurrent <= 1
+                        }),
+                        onClick: onBtnDown,
+                        type: "button",
+                        "aria-label": "navigate-btn-down"
+                    }),
+                    "NUMERIC" === type && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "fwe-page-current",
+                                children: innerPageCurrent
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "fwe-page-max",
+                                children: pageMax
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        className: classnames('fwe-navigate-btn-up', {
+                            'fwe-disabled': innerPageCurrent >= pageMax,
+                            'fwe-ml-4': "SIMPLE" === type
+                        }),
+                        onClick: onBtnUp,
+                        type: "button",
+                        "aria-label": "navigate-btn-up"
+                    })
+                ]
+            }),
+            "DOTS" === type && /*#__PURE__*/ jsx("div", {
+                className: classnames('fwe-p-m', {
+                    'fwe-d-none': pageMax < 2
+                }, className),
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "fwe-pagination",
+                    children: dotArray.map((index)=>/*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            className: classnames('fwe-page-dot', {
+                                'fwe-selected': index + 1 === innerPageCurrent
+                            }),
+                            onClick: ()=>onDotClick(index),
+                            "aria-label": `Go to page ${index + 1}`,
+                            "aria-current": index + 1 === innerPageCurrent ? 'page' : void 0
+                        }, index))
+                })
+            })
+        ]
+    });
+}
+export { Pagination, Pagination_PaginationType as PaginationType };

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

@@ -0,0 +1,21 @@
+.fr-legend {
+  margin: 16px;
+  line-height: 24px;
+  display: table;
+}
+
+.fr-legend .fr-legend-content {
+  display: table-row;
+}
+
+.fr-legend .fr-legend-content dt {
+  margin: 0;
+  padding-right: 8px;
+  display: table-cell;
+}
+
+.fr-legend .fr-legend-content dd {
+  margin: 0;
+  display: table-cell;
+}
+

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

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

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

@@ -0,0 +1,56 @@
+#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/{lib → dist}/components/popovers/popover/Popover.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
-import { Placement } from "@popperjs/core";
-import { ClassNamePropsWithChildren } from "../../../helper/types";
-import "./Popover.scss";
+import type { Placement } from '@popperjs/core';
+import type React from 'react';
+import type { ClassNamePropsWithChildren } from '../../../utils/types';
+import './Popover.scss';
 export interface PopoverProps extends ClassNamePropsWithChildren {
     popoverContent: React.ReactNode;
     position?: Placement;
@@ -17,5 +17,4 @@ export interface PopoverProps extends ClassNamePropsWithChildren {
     arrow?: boolean;
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }
-declare function Popover({ popoverContent, children, position, fallbackPositions, openOnHover, defaultOpen, open, onStatusChange, wrapper, className, flip, containerClassName, stopPropagation, arrow, onClick, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
-export default Popover;
+export declare function Popover({ popoverContent, children, position, fallbackPositions, openOnHover, defaultOpen, open, onStatusChange, wrapper, className, flip, containerClassName, stopPropagation, arrow, onClick, }: PopoverProps): import("react/jsx-runtime").JSX.Element;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,35 @@
+.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/{lib → dist}/components/popovers/popover-menu-item/PopoverMenuItem.d.ts

@@ -1,11 +1,10 @@
-import "./PopoverMenuItem.scss";
+import './PopoverMenuItem.scss';
 export interface PopoverMenuItemProps {
     text: string;
     icon: React.ReactNode;
     action?: (data: unknown) => void;
     data?: unknown;
 }
-declare function PopoverMenuItem({ item }: Readonly<{
+export declare function PopoverMenuItem({ item, }: Readonly<{
     item: PopoverMenuItemProps;
 }>): import("react/jsx-runtime").JSX.Element | null;
-export default PopoverMenuItem;

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

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

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

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

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

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

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

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

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

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

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

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

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