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

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

@@ -1,5 +1,9 @@
 import './Pagination.scss';
-export type PaginationType = 'SIMPLE' | 'NUMERIC' | 'DOTS';
+export declare enum PaginationType {
+    Simple = "SIMPLE",
+    Numeric = "NUMERIC",
+    Dots = "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,7 +2,13 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "./Pagination.css";
 import classnames from "classnames";
 import { forwardRef, useEffect, useState } from "react";
-const Pagination = /*#__PURE__*/ forwardRef(({ pageMax, onChange, pageCurrent, defaultPageCurrent = 1, type = 'NUMERIC', className, ...props }, ref)=>{
+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 controlled = void 0 !== pageCurrent;
     const dotArray = Array.from(new Array(pageMax).keys());
     const [innerPageCurrent, setInnerPageCurrent] = useState(controlled ? pageCurrent : defaultPageCurrent);
@@ -34,7 +40,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
@@ -49,7 +55,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",
@@ -64,7 +70,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",
@@ -72,7 +78,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
@@ -95,4 +101,4 @@ const Pagination = /*#__PURE__*/ forwardRef(({ pageMax, onChange, pageCurrent, d
     });
 });
 Pagination.displayName = 'Pagination';
-export { Pagination };
+export { Pagination, Pagination_PaginationType as PaginationType };

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

@@ -61,12 +61,9 @@ const Popover = /*#__PURE__*/ forwardRef(({ children, className, style, containe
                 },
                 ...getReferenceProps({
                     ...props,
-                    onClick: (e)=>{
-                        if (stopPropagation) {
-                            e.preventDefault();
-                            e.stopPropagation();
-                        }
-                        onTriggerClick?.(e);
+                    onClick: (event)=>{
+                        if (stopPropagation) event.stopPropagation();
+                        onTriggerClick?.(event);
                     }
                 }),
                 children: children

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

@@ -0,0 +1 @@
+export declare const ClearButton: (props: Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;

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

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const ClearButton = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx("button", {
+        type: "button",
+        className: "fwe-clear-icon fr-search-input-clear-button",
+        "aria-label": "Clear",
+        ref: ref,
+        ...props
+    }));
+ClearButton.displayName = 'ClearButton';
+export { ClearButton };

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

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

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

@@ -1,25 +1,13 @@
 import './SearchInput.scss';
-import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
-export interface SearchInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'onChange' | 'value' | 'defaultValue' | 'children'> {
-    /** Placeholder text shown in the input. */
+import { type ComponentPropsWithoutRef } from 'react';
+import type { SearchSuggestion } from './SearchSuggestion';
+export interface SearchInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'onChange' | 'value' | 'defaultValue'> {
     readonly label?: string;
-    /** Controlled value. */
-    readonly value?: string;
-    /** 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 value?: string;
+    readonly suggestions?: SearchSuggestion[];
     readonly onChange?: (value: string) => void;
-    /** Called when the user presses Enter or selects a suggestion. */
+    readonly onKeyboardNavigate?: (value: string) => void;
     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,88 +1,64 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "./SearchInput.css";
-import { Combobox, ComboboxButton, ComboboxInput, ComboboxOptions } from "@headlessui/react";
 import classnames from "classnames";
-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
-                })
-            ]
-        })
+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: "..."
+                    })
+                ]
+            })
+        ]
     });
 });
 SearchInput.displayName = 'SearchInput';

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

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

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

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

@@ -0,0 +1,13 @@
+import type React from 'react';
+import type { SearchSuggestion } from './SearchSuggestion';
+export declare function useSearchInput(inputRef: React.RefObject<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

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

package/dist/index.d.ts

@@ -34,8 +34,7 @@ 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 { SearchInputOption, type SearchInputOptionProps, } from './components/search-input/SearchInputOption';
-export { SearchResult, type SearchResultProps, } from './components/search-input/SearchResult';
+export { SearchSuggestion } from './components/search-input/SearchSuggestion';
 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,8 +33,7 @@ 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 { SearchInputOption } from "./components/search-input/SearchInputOption.js";
-import { SearchResult } from "./components/search-input/SearchResult.js";
+import { SearchSuggestion } from "./components/search-input/SearchSuggestion.js";
 import { Snackbar } from "./components/snackbar/Snackbar.js";
 import { SnackbarProvider, addSnackbar } from "./components/snackbar/SnackbarProvider.js";
 import { useSnackbar } from "./components/snackbar/useSnackbar.js";
@@ -58,4 +57,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, SearchInputOption, SearchResult, 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, SearchSuggestion, Segment, SegmentControl, Select, Slider, Snackbar, SnackbarProvider, StepHorizontal, StepVertical, StepperHorizontal, StepperVertical, Switch, TabPane, TableHeaderCell, Tabs, TextArea, TextInput, TimePicker, Tooltip, addSnackbar, useSnackbar };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/react",
-  "version": "10.1.0-dev.875",
+  "version": "10.1.1",
   "author": "Festo UI (styleguide@festo.com)",
   "copyright": "Copyright (c) 2025 Festo SE & Co. KG. All rights reserved.",
   "license": "apache-2.0",

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

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

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

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

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