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

package/dist/forms/combobox/ComboBox.css

@@ -46,7 +46,7 @@
 
 .fr-combobox-button {
   cursor: pointer;
-  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTUuNjM2IDkuMTcyIDEyIDE1LjUzNmw2LjM2NC02LjM2NC0uNzA3LS43MDhMMTIgMTQuMTIxIDYuMzQzIDguNDY0bC0uNzA3LjcwOHoiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==) center / 24px 24px no-repeat;
+  background-color: var(--fwe-text);
   border: none;
   width: 24px;
   height: 24px;
@@ -55,10 +55,11 @@
   top: 50%;
   right: 0;
   transform: translateY(-50%);
+  mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTUuNjM2IDkuMTcyIDEyIDE1LjUzNmw2LjM2NC02LjM2NC0uNzA3LS43MDhMMTIgMTQuMTIxIDYuMzQzIDguNDY0bC0uNzA3LjcwOHoiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==) center / 24px 24px no-repeat;
 }
 
-.fr-combobox-button:hover {
-  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzAwOTFkYyIgZD0iTTUuNjM2IDkuMTcyIDEyIDE1LjUzNmw2LjM2NC02LjM2NC0uNzA3LS43MDhMMTIgMTQuMTIxIDYuMzQzIDguNDY0bC0uNzA3LjcwOHoiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==) center / 24px 24px no-repeat;
+.fr-combobox-button[aria-expanded="true"] {
+  transform: translateY(-50%)rotate(180deg);
 }
 
 .fr-combobox-description, .fr-combobox-invalid {
@@ -88,6 +89,11 @@
   color: var(--fwe-text-disabled);
 }
 
+.fr-combobox-wrapper.fr-disabled .fr-combobox-button {
+  background-color: var(--fwe-text-disabled);
+  cursor: default;
+}
+
 .fr-combobox-wrapper.fr-invalid .fr-combobox-input {
   border-color: var(--fwe-red);
 }
@@ -101,10 +107,10 @@
 }
 
 .fr-combobox-options-container {
-  min-width: var(--input-width, 100%);
   background-color: var(--fwe-white);
   border: 1px solid var(--fwe-gray-200);
   border-radius: 4px;
+  max-width: 100%;
   margin: 0;
   padding: 8px;
   list-style: none;
@@ -119,7 +125,7 @@
   position: relative;
 }
 
-.fr-combobox-option:hover, .fr-combobox-option:focus {
+.fr-combobox-option:hover, .fr-combobox-option.fr-focus, .fr-combobox-option.fr-selected {
   background-color: var(--fwe-gray-100);
   outline: none;
 }
@@ -133,6 +139,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 ComboBoxOption<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?: ComboBoxOption<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,13 +39,14 @@ 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,
         onChange
     });
     const [query, setQuery] = useState('');
-    const selectedOption = useMemo(()=>options.find((option)=>option.data === value), [
+    const selectedOption = useMemo(()=>options.find((option)=>option.data === value && !option.disabled), [
         options,
         value
     ]);
@@ -57,8 +58,8 @@ function ComboBoxComponent({ defaultValue = '', value: controlled, label, option
         options,
         query
     ]);
-    function handleSelect(option) {
-        if (!option) return;
+    function handleChange(option) {
+        if (!option || option.disabled) return;
         setValue(option.data);
         setQuery('');
     }
@@ -74,15 +75,15 @@ 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", {
-            className: classnames('fr-combobox-wrapper', {
+            className: classnames(className, 'fr-combobox-wrapper', {
                 'fr-disabled': disabled,
                 'fr-invalid': error,
                 'fr-required': required
-            }, className),
+            }),
             ref: ref,
             ...props,
             children: [
@@ -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,
@@ -107,13 +109,15 @@ function ComboBoxComponent({ defaultValue = '', value: controlled, label, option
                         }),
                         /*#__PURE__*/ jsx(ComboboxButton, {
                             className: "fr-combobox-button",
+                            disabled: disabled,
                             "aria-label": "Optionen anzeigen"
                         })
                     ]
                 }),
                 /*#__PURE__*/ jsxs(ComboboxOptions, {
-                    className: classnames('fr-combobox-options-container', 'fr-combobox-options'),
+                    className: "fr-combobox-options-container",
                     as: "ul",
+                    portal: false,
                     anchor: {
                         to: 'bottom start',
                         gap: 20,
@@ -133,7 +137,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 ComboBoxOption, 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.766",
   "author": "Festo UI (styleguide@festo.com)",
   "copyright": "Copyright (c) 2025 Festo SE & Co. KG. All rights reserved.",
   "license": "apache-2.0",
@@ -84,7 +84,7 @@
   },
   "peerDependencies": {
     "@festo-ui/web-essentials": "*",
-    "react": ">=17.0.0",
-    "react-dom": ">=17.0.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   }
 }