@festo-ui/react 9.0.1-dev.763 → 9.0.1-dev.764

package/dist/forms/combobox/ComboBox.css

@@ -119,11 +119,15 @@
   position: relative;
 }
 
-.fr-combobox-option:hover, .fr-combobox-option:focus {
+.fr-combobox-option:hover, .fr-combobox-option.fr-focus {
   background-color: var(--fwe-gray-100);
   outline: none;
 }
 
+.fr-combobox-option.fr-selected {
+  background-color: var(--fwe-gray-200);
+}
+
 .fr-combobox-option:last-child {
   border-bottom: none;
 }
@@ -133,6 +137,10 @@
   cursor: default;
 }
 
+.fr-combobox-option.fr-disabled:hover, .fr-combobox-option.fr-disabled:focus, .fr-combobox-option.fr-disabled.fr-focus {
+  background-color: #0000;
+}
+
 .fr-combobox-option-content {
   white-space: nowrap;
   text-overflow: ellipsis;

package/dist/forms/combobox/ComboBox.d.ts

@@ -1,15 +1,16 @@
 import './ComboBox.scss';
-import { type ComponentPropsWithoutRef, type Ref } from 'react';
-export interface ComboBoxOptionType<T> {
+import { type Ref } from 'react';
+import type { ComponentBase } from '../../utils/types';
+export interface ComboBoxOptionProps<T> {
     readonly label: string;
     readonly data: T;
     readonly disabled?: boolean;
 }
-export interface ComboBoxProps<T> extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue'> {
+export interface ComboBoxProps<T> extends ComponentBase {
     readonly defaultValue?: T;
     readonly value?: T;
     readonly label?: string;
-    readonly options?: ComboBoxOptionType<T>[];
+    readonly options?: ComboBoxOptionProps<T>[];
     readonly required?: boolean;
     readonly onChange?: (value: T) => void;
     readonly disabled?: boolean;

package/dist/forms/combobox/ComboBox.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import "./ComboBox.css";
 import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions } from "@headlessui/react";
 import classnames from "classnames";
-import { forwardRef, useMemo, useState } from "react";
+import { forwardRef, useMemo, useRef, useState } from "react";
 import { useControlled } from "../../utils/useControlled.js";
 import { useId } from "../../utils/useId.js";
 function getHighlightedLabel(label, query) {
@@ -39,6 +39,7 @@ function getHighlightedLabel(label, query) {
 }
 function ComboBoxComponent({ defaultValue = '', value: controlled, label, options = [], onChange, required = false, disabled, name, id: idProp, hint, error, placeholder, onInputChange, emptyMessage = 'No results found', className, ...props }, ref) {
     const id = useId(idProp);
+    const controlRef = useRef(null);
     const [value, setValue] = useControlled({
         controlled,
         default: defaultValue,
@@ -57,7 +58,7 @@ function ComboBoxComponent({ defaultValue = '', value: controlled, label, option
         options,
         query
     ]);
-    function handleSelect(option) {
+    function handleChange(option) {
         if (!option) return;
         setValue(option.data);
         setQuery('');
@@ -74,7 +75,7 @@ function ComboBoxComponent({ defaultValue = '', value: controlled, label, option
     });
     return /*#__PURE__*/ jsx(Combobox, {
         value: selectedOption ?? null,
-        onChange: handleSelect,
+        onChange: handleChange,
         disabled: disabled,
         immediate: true,
         children: /*#__PURE__*/ jsxs("div", {
@@ -93,6 +94,7 @@ function ComboBoxComponent({ defaultValue = '', value: controlled, label, option
                 }),
                 /*#__PURE__*/ jsxs("div", {
                     className: "fr-combobox-control",
+                    ref: controlRef,
                     children: [
                         /*#__PURE__*/ jsx(ComboboxInput, {
                             className: inputClasses,
@@ -114,6 +116,7 @@ function ComboBoxComponent({ defaultValue = '', value: controlled, label, option
                 /*#__PURE__*/ jsxs(ComboboxOptions, {
                     className: classnames('fr-combobox-options-container', 'fr-combobox-options'),
                     as: "ul",
+                    portal: false,
                     anchor: {
                         to: 'bottom start',
                         gap: 20,
@@ -133,7 +136,7 @@ function ComboBoxComponent({ defaultValue = '', value: controlled, label, option
                                 as: "li",
                                 className: ({ focus, selected, disabled: isDisabled })=>classnames('fr-combobox-option', {
                                         'fr-selected': selected,
-                                        'fr-active': focus,
+                                        'fr-focus': focus,
                                         'fr-disabled': isDisabled
                                     }),
                                 children: /*#__PURE__*/ jsx("span", {

package/dist/index.d.ts

@@ -45,8 +45,8 @@ export { type TabItemAppearance, Tabs, type TabsConfiguration, type TabsProps, t
 export { TabPane, type TabPaneProps } from './components/tab/tab-pane/TabPane';
 export { TableHeaderCell, type TableHeaderCellProps, } from './components/table-header-cell/TableHeaderCell';
 export { Checkbox, type CheckboxProps } from './forms/checkbox/Checkbox';
-export { ComboBox, type ComboBoxOptionType, type ComboBoxProps, } from './forms/combobox/ComboBox';
-export { RadioButton, type RadioButtonProps as RadioProps, } from './forms/radio/RadioButton';
+export { ComboBox, type ComboBoxOptionProps, type ComboBoxProps, } from './forms/combobox/ComboBox';
+export { RadioButton, type RadioButtonProps, } from './forms/radio/RadioButton';
 export { RadioGroup, type RadioGroupProps } from './forms/radio/RadioGroup';
 export { Segment, type SegmentConfiguration, type SegmentProps, } from './forms/segment/Segment';
 export { SegmentControl, type SegmentControlProps, } from './forms/segment/segment-control/SegmentControl';

package/dist/utils/types.d.ts

@@ -1,3 +1,10 @@
+import type { CSSProperties } from 'react';
+export interface ComponentBase {
+    className?: string;
+    style?: CSSProperties;
+    'data-testid'?: string;
+    id?: string;
+}
 export interface ClassNameProps {
     className?: string;
 }

package/package.json

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