@festo-ui/react 10.1.0 → 10.1.1-dev.918

package/dist/components/pagination/Pagination.d.ts

@@ -1,9 +1,5 @@
 import './Pagination.scss';
-export declare enum PaginationType {
-    Simple = "SIMPLE",
-    Numeric = "NUMERIC",
-    Dots = "DOTS"
-}
+export type PaginationType = 'SIMPLE' | 'NUMERIC' | 'DOTS';
 export interface PaginationProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'> {
     readonly type?: PaginationType;
     readonly onChange?: (page: number, event: React.MouseEvent<HTMLButtonElement>) => void;

package/dist/components/pagination/Pagination.js

@@ -2,13 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "./Pagination.css";
 import classnames from "classnames";
 import { forwardRef, useEffect, useState } from "react";
-var Pagination_PaginationType = /*#__PURE__*/ function(PaginationType) {
-    PaginationType["Simple"] = "SIMPLE";
-    PaginationType["Numeric"] = "NUMERIC";
-    PaginationType["Dots"] = "DOTS";
-    return PaginationType;
-}({});
-const Pagination = /*#__PURE__*/ forwardRef(({ pageMax, onChange, pageCurrent, defaultPageCurrent = 1, type = "NUMERIC", className, ...props }, ref)=>{
+const Pagination = /*#__PURE__*/ forwardRef(({ pageMax, onChange, pageCurrent, defaultPageCurrent = 1, type = 'NUMERIC', className, ...props }, ref)=>{
     const controlled = void 0 !== pageCurrent;
     const dotArray = Array.from(new Array(pageMax).keys());
     const [innerPageCurrent, setInnerPageCurrent] = useState(controlled ? pageCurrent : defaultPageCurrent);
@@ -40,7 +34,7 @@ const Pagination = /*#__PURE__*/ forwardRef(({ pageMax, onChange, pageCurrent, d
     }
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            "DOTS" !== type && /*#__PURE__*/ jsxs("div", {
+            'DOTS' !== type && /*#__PURE__*/ jsxs("div", {
                 ...props,
                 className: classnames('fwe-pagination', {
                     'fwe-d-none': pageMax < 2
@@ -55,7 +49,7 @@ const Pagination = /*#__PURE__*/ forwardRef(({ pageMax, onChange, pageCurrent, d
                         type: "button",
                         "aria-label": "navigate-btn-down"
                     }),
-                    "NUMERIC" === type && /*#__PURE__*/ jsxs(Fragment, {
+                    'NUMERIC' === type && /*#__PURE__*/ jsxs(Fragment, {
                         children: [
                             /*#__PURE__*/ jsx("span", {
                                 className: "fwe-page-current",
@@ -70,7 +64,7 @@ const Pagination = /*#__PURE__*/ forwardRef(({ pageMax, onChange, pageCurrent, d
                     /*#__PURE__*/ jsx("button", {
                         className: classnames('fwe-navigate-btn-up', {
                             'fwe-disabled': innerPageCurrent >= pageMax,
-                            'fwe-ml-4': "SIMPLE" === type
+                            'fwe-ml-4': 'SIMPLE' === type
                         }),
                         onClick: onBtnUp,
                         type: "button",
@@ -78,7 +72,7 @@ const Pagination = /*#__PURE__*/ forwardRef(({ pageMax, onChange, pageCurrent, d
                     })
                 ]
             }),
-            "DOTS" === type && /*#__PURE__*/ jsx("div", {
+            'DOTS' === type && /*#__PURE__*/ jsx("div", {
                 ...props,
                 className: classnames({
                     'fwe-d-none': pageMax < 2
@@ -101,4 +95,4 @@ const Pagination = /*#__PURE__*/ forwardRef(({ pageMax, onChange, pageCurrent, d
     });
 });
 Pagination.displayName = 'Pagination';
-export { Pagination, Pagination_PaginationType as PaginationType };
+export { Pagination };

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

@@ -54,16 +54,23 @@ const Popover = /*#__PURE__*/ forwardRef(({ children, className, style, containe
         children: [
             /*#__PURE__*/ jsx("div", {
                 className: className,
-                style: style,
+                style: {
+                    width: 'fit-content',
+                    height: 'fit-content',
+                    ...style
+                },
                 ref: (node)=>{
                     refs.setReference(node);
                     if ('function' == typeof handleRef) handleRef(node);
                 },
                 ...getReferenceProps({
                     ...props,
-                    onClick: (event)=>{
-                        if (stopPropagation) event.stopPropagation();
-                        onTriggerClick?.(event);
+                    onClick: (e)=>{
+                        if (stopPropagation) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }
+                        onTriggerClick?.(e);
                     }
                 }),
                 children: children

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

@@ -2,6 +2,13 @@
   height: 40px;
 }
 
+.fwe-search-suggestions {
+  top: unset;
+  left: unset;
+  right: unset;
+  position: static;
+}
+
 .fr-search-input-clear-button {
   background: none;
   border: none;
@@ -11,3 +18,8 @@
   display: flex;
 }
 
+.fr-search-result-highlight {
+  font-weight: unset;
+  color: var(--fwe-hero, #0091dc);
+}
+

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

@@ -1,13 +1,25 @@
 import './SearchInput.scss';
-import { type ComponentPropsWithoutRef } from 'react';
-import type { SearchSuggestion } from './SearchSuggestion';
-export interface SearchInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'onChange' | 'value' | 'defaultValue'> {
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export interface SearchInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'onChange' | 'value' | 'defaultValue' | 'children'> {
+    /** Placeholder text shown in the input. */
     readonly label?: string;
-    readonly defaultValue?: string;
+    /** Controlled value. */
     readonly value?: string;
-    readonly suggestions?: SearchSuggestion[];
+    /** Initial value for uncontrolled usage. */
+    readonly defaultValue?: string;
+    /** Debounce time in milliseconds before `onChange` fires. Default: 300. */
+    readonly debounceTime?: number;
+    /**
+     * Called after the debounce interval when the user types.
+     * Use this to trigger a search and update the children (suggestions).
+     */
     readonly onChange?: (value: string) => void;
-    readonly onKeyboardNavigate?: (value: string) => void;
+    /** Called when the user presses Enter or selects a suggestion. */
     readonly onSearch?: (value: string) => void;
+    /**
+     * Render search suggestions as children.
+     * Use `<SearchInputOption>` for each item.
+     */
+    readonly children?: ReactNode;
 }
 export declare const SearchInput: (props: SearchInputProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

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

@@ -1,64 +1,88 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "./SearchInput.css";
+import { Combobox, ComboboxButton, ComboboxInput, ComboboxOptions } from "@headlessui/react";
 import classnames from "classnames";
-import { forwardRef, useRef } from "react";
-import { useForkRef } from "../../utils/useForkRef.js";
-import { useOnClickOutside } from "../../utils/useOnClickOutside.js";
-import { ClearButton } from "./ClearButton.js";
-import { useSearchInput } from "./useSearchInput.js";
-const SearchInput = /*#__PURE__*/ forwardRef(({ defaultValue, disabled, label, value, suggestions, onChange, onSearch, onKeyboardNavigate, className, ...props }, ref)=>{
-    const inputRef = useRef(null);
-    const containerRef = useRef(null);
-    const handleRef = useForkRef(ref, containerRef);
-    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: handleRef,
-        children: [
-            /*#__PURE__*/ jsx("input", {
-                ref: inputRef,
-                disabled: disabled,
-                placeholder: label,
-                onFocus: handleFocus,
-                type: "search",
-                "aria-label": "Search",
-                onInput: handleInput,
-                onKeyDown: handleKeyDown,
-                value: innerValue,
-                ...props
-            }),
-            /*#__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: "..."
-                    })
-                ]
-            })
-        ]
+import { Children, forwardRef, useCallback, useRef } from "react";
+import { useControlled } from "../../utils/useControlled.js";
+const SearchInput = /*#__PURE__*/ forwardRef(({ defaultValue, disabled, label, value: controlledValue, debounceTime = 0, onChange, onSearch, children, className, ...props }, ref)=>{
+    const [innerValue, setInnerValue] = useControlled({
+        controlled: controlledValue,
+        default: defaultValue ?? ''
+    });
+    const debounceRef = useRef(null);
+    const debouncedOnChange = useCallback((val)=>{
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(()=>{
+            onChange?.(val);
+        }, debounceTime);
+    }, [
+        onChange,
+        debounceTime
+    ]);
+    function handleInputChange(event) {
+        const val = event.target.value;
+        setInnerValue(val);
+        debouncedOnChange(val);
+    }
+    function handleSelect(val) {
+        if (null == val) return;
+        setInnerValue(val);
+        onSearch?.(val);
+    }
+    function handleClear() {
+        setInnerValue('');
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+        onChange?.('');
+        onSearch?.('');
+    }
+    function handleKeyDown(event) {
+        if ('Enter' === event.key && innerValue) onSearch?.(innerValue);
+        if ('Escape' === event.key) handleClear();
+    }
+    const hasChildren = Children.count(children) > 0;
+    return /*#__PURE__*/ jsx(Combobox, {
+        value: innerValue,
+        onChange: handleSelect,
+        disabled: disabled,
+        immediate: true,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: classnames('fwe-search-input', className),
+            ref: ref,
+            children: [
+                /*#__PURE__*/ jsx(ComboboxInput, {
+                    disabled: disabled,
+                    placeholder: label,
+                    type: "search",
+                    "aria-label": label ?? 'Search',
+                    value: innerValue,
+                    onChange: handleInputChange,
+                    onKeyDown: handleKeyDown,
+                    autoComplete: "off",
+                    ...props
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: "fwe-search-icon"
+                }),
+                /*#__PURE__*/ jsx(ComboboxButton, {
+                    className: "fwe-clear-icon fr-search-input-clear-button",
+                    "aria-label": "Clear",
+                    onClick: handleClear
+                }),
+                hasChildren && /*#__PURE__*/ jsx(ComboboxOptions, {
+                    className: "fwe-search-suggestions",
+                    as: "div",
+                    portal: false,
+                    anchor: {
+                        to: 'bottom start',
+                        gap: 4
+                    },
+                    style: {
+                        minWidth: 'var(--input-width)'
+                    },
+                    children: children
+                })
+            ]
+        })
     });
 });
 SearchInput.displayName = 'SearchInput';

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

@@ -0,0 +1,5 @@
+import { type ComboboxOptionProps } from '@headlessui/react';
+export interface SearchInputOptionProps extends Omit<ComboboxOptionProps, 'as'> {
+    readonly value: string;
+}
+export declare const SearchInputOption: (props: SearchInputOptionProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

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

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { ComboboxOption } from "@headlessui/react";
+import classnames from "classnames";
+import { forwardRef } from "react";
+function SearchInputOptionComponent({ children, className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ComboboxOption, {
+        ref: ref,
+        as: "div",
+        className: ({ focus, selected })=>classnames('fwe-search-suggestion', className, {
+                'fwe-selected': focus || selected
+            }),
+        ...props,
+        children: children
+    });
+}
+const SearchInputOption = /*#__PURE__*/ forwardRef(SearchInputOptionComponent);
+SearchInputOption.displayName = 'SearchInputOption';
+export { SearchInputOption };

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

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export interface SearchResultProps extends ComponentPropsWithoutRef<'span'> {
+    /** The full label text to display. */
+    readonly label: string;
+    /** The current search query — matching parts will be highlighted. */
+    readonly query?: string;
+}
+export declare const SearchResult: (props: SearchResultProps & import("react").RefAttributes<HTMLSpanElement>) => React.ReactElement | null;

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

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef } from "react";
+function getHighlightedParts(label, query) {
+    if (!query) return [
+        {
+            text: label,
+            highlighted: false
+        }
+    ];
+    const parts = [];
+    const lowerLabel = label.toLowerCase();
+    const lowerQuery = query.toLowerCase();
+    let currentIndex = 0;
+    while(currentIndex < label.length){
+        const matchIndex = lowerLabel.indexOf(lowerQuery, currentIndex);
+        if (-1 === matchIndex) {
+            parts.push({
+                text: label.slice(currentIndex),
+                highlighted: false
+            });
+            break;
+        }
+        if (matchIndex > currentIndex) parts.push({
+            text: label.slice(currentIndex, matchIndex),
+            highlighted: false
+        });
+        parts.push({
+            text: label.slice(matchIndex, matchIndex + query.length),
+            highlighted: true
+        });
+        currentIndex = matchIndex + query.length;
+    }
+    return parts;
+}
+const SearchResult = /*#__PURE__*/ forwardRef(({ label, query = '', className, ...props }, ref)=>/*#__PURE__*/ jsx("span", {
+        ref: ref,
+        className: classnames('fr-search-result', className),
+        ...props,
+        children: getHighlightedParts(label, query).map((part, index)=>/*#__PURE__*/ jsx("span", {
+                className: classnames({
+                    'fr-search-result-highlight': part.highlighted
+                }),
+                children: part.text
+            }, `${part.text}-${index}`))
+    }));
+SearchResult.displayName = 'SearchResult';
+export { SearchResult };

package/dist/index.d.ts

@@ -34,7 +34,8 @@ export { PopoverMenuItem, type PopoverMenuItemProps, } from './components/popove
 export { Tooltip, type TooltipProps, } from './components/popovers/tooltip/Tooltip';
 export { Progress, type ProgressProps } from './components/progress/Progress';
 export { SearchInput, type SearchInputProps, } from './components/search-input/SearchInput';
-export { SearchSuggestion } from './components/search-input/SearchSuggestion';
+export { SearchInputOption, type SearchInputOptionProps, } from './components/search-input/SearchInputOption';
+export { SearchResult, type SearchResultProps, } from './components/search-input/SearchResult';
 export { Snackbar, type SnackbarConfig, type SnackbarData, type SnackbarProps, } from './components/snackbar/Snackbar';
 export { addSnackbar, SnackbarProvider, type SnackbarProviderProps, } from './components/snackbar/SnackbarProvider';
 export { useSnackbar } from './components/snackbar/useSnackbar';

package/dist/index.js

@@ -33,7 +33,8 @@ import { PopoverMenuItem } from "./components/popovers/popover-menu/popover-menu
 import { Tooltip } from "./components/popovers/tooltip/Tooltip.js";
 import { Progress } from "./components/progress/Progress.js";
 import { SearchInput } from "./components/search-input/SearchInput.js";
-import { SearchSuggestion } from "./components/search-input/SearchSuggestion.js";
+import { SearchInputOption } from "./components/search-input/SearchInputOption.js";
+import { SearchResult } from "./components/search-input/SearchResult.js";
 import { Snackbar } from "./components/snackbar/Snackbar.js";
 import { SnackbarProvider, addSnackbar } from "./components/snackbar/SnackbarProvider.js";
 import { useSnackbar } from "./components/snackbar/useSnackbar.js";
@@ -57,4 +58,4 @@ import { Switch } from "./forms/switch/Switch.js";
 import { TextArea } from "./forms/text-area/TextArea.js";
 import { TextInput } from "./forms/text-input/TextInput.js";
 import { TimePicker } from "./forms/time-picker/TimePicker.js";
-export { Accordion, AccordionHeader, AccordionItem, AccordionItemBody, AccordionItemHeader, AlertModal, BottomSheet, Breadcrumb, Button, Card, CardBody, CardHeader, CardNotification, Checkbox, Chip, ChipContainer, ChipType, ComboBox, ConfirmModal, CustomModal, ImageGallery, ImageGalleryContent, ImageGallerySwiper, ImageGalleryThumbsSwiper, Legend, LoadingIndicator, MobileFlyout, MobileFlyoutItem, MobileFlyoutPage, MultiSelect, Pagination, Popover, PopoverMenu, PopoverMenuContext, PopoverMenuItem, Progress, Prompt, RadioButton, RadioGroup, SearchInput, SearchSuggestion, Segment, SegmentControl, Select, Slider, Snackbar, SnackbarProvider, StepHorizontal, StepVertical, StepperHorizontal, StepperVertical, Switch, TabPane, TableHeaderCell, Tabs, TextArea, TextInput, TimePicker, Tooltip, addSnackbar, useSnackbar };
+export { Accordion, AccordionHeader, AccordionItem, AccordionItemBody, AccordionItemHeader, AlertModal, BottomSheet, Breadcrumb, Button, Card, CardBody, CardHeader, CardNotification, Checkbox, Chip, ChipContainer, ChipType, ComboBox, ConfirmModal, CustomModal, ImageGallery, ImageGalleryContent, ImageGallerySwiper, ImageGalleryThumbsSwiper, Legend, LoadingIndicator, MobileFlyout, MobileFlyoutItem, MobileFlyoutPage, MultiSelect, Pagination, Popover, PopoverMenu, PopoverMenuContext, PopoverMenuItem, Progress, Prompt, RadioButton, RadioGroup, SearchInput, SearchInputOption, SearchResult, Segment, SegmentControl, Select, Slider, Snackbar, SnackbarProvider, StepHorizontal, StepVertical, StepperHorizontal, StepperVertical, Switch, TabPane, TableHeaderCell, Tabs, TextArea, TextInput, TimePicker, Tooltip, addSnackbar, useSnackbar };

package/llm-doc/README.md

@@ -0,0 +1,20 @@
+# @festo-ui/react — AI Agent Documentation
+
+This documentation describes the React component library `@festo-ui/react` of the Festo Design System. It is optimized for AI agents that should use this library in projects.
+
+## Overview
+
+| File | Content |
+|------|--------|
+| [installation.md](./installation.md) | Installation, setup, imports |
+| [components.md](./components.md) | All UI components (Accordion, Button, Card, Modal, etc.) |
+| [forms.md](./forms.md) | All form components (TextInput, Select, Checkbox, etc.) |
+| [patterns.md](./patterns.md) | Common patterns: Controlled/Uncontrolled, FormData, Styling |
+
+## Quick Reference
+
+**Package:** `@festo-ui/react`  
+**CSS:** `@festo-ui/react/index.css`  
+**License:** Apache-2.0  
+**Peer Dependencies:** React 18+  
+**CSS Prefix:** `fwe-` (Festo Web Essentials)