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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/forms/combobox/ComboBox.css +11 -9
  2. package/dist/forms/combobox/ComboBox.d.ts +2 -2
  3. package/dist/forms/combobox/ComboBox.js +6 -5
  4. package/dist/index.d.ts +1 -1
  5. package/package.json +3 -3
package/dist/forms/combobox/ComboBox.css CHANGED
@@ -46,7 +46,7 @@
46
46
 
47
47
  .fr-combobox-button {
48
48
  cursor: pointer;
49
- background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTUuNjM2IDkuMTcyIDEyIDE1LjUzNmw2LjM2NC02LjM2NC0uNzA3LS43MDhMMTIgMTQuMTIxIDYuMzQzIDguNDY0bC0uNzA3LjcwOHoiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==) center / 24px 24px no-repeat;
49
+ background-color: var(--fwe-text);
50
50
  border: none;
51
51
  width: 24px;
52
52
  height: 24px;
@@ -55,10 +55,11 @@
55
55
  top: 50%;
56
56
  right: 0;
57
57
  transform: translateY(-50%);
58
+ mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTUuNjM2IDkuMTcyIDEyIDE1LjUzNmw2LjM2NC02LjM2NC0uNzA3LS43MDhMMTIgMTQuMTIxIDYuMzQzIDguNDY0bC0uNzA3LjcwOHoiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==) center / 24px 24px no-repeat;
58
59
  }
59
60
 
60
- .fr-combobox-button:hover {
61
- background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzAwOTFkYyIgZD0iTTUuNjM2IDkuMTcyIDEyIDE1LjUzNmw2LjM2NC02LjM2NC0uNzA3LS43MDhMMTIgMTQuMTIxIDYuMzQzIDguNDY0bC0uNzA3LjcwOHoiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==) center / 24px 24px no-repeat;
61
+ .fr-combobox-button[aria-expanded="true"] {
62
+ transform: translateY(-50%)rotate(180deg);
62
63
  }
63
64
 
64
65
  .fr-combobox-description, .fr-combobox-invalid {
@@ -88,6 +89,11 @@
88
89
  color: var(--fwe-text-disabled);
89
90
  }
90
91
 
92
+ .fr-combobox-wrapper.fr-disabled .fr-combobox-button {
93
+ background-color: var(--fwe-text-disabled);
94
+ cursor: default;
95
+ }
96
+
91
97
  .fr-combobox-wrapper.fr-invalid .fr-combobox-input {
92
98
  border-color: var(--fwe-red);
93
99
  }
@@ -101,10 +107,10 @@
101
107
  }
102
108
 
103
109
  .fr-combobox-options-container {
104
- min-width: var(--input-width, 100%);
105
110
  background-color: var(--fwe-white);
106
111
  border: 1px solid var(--fwe-gray-200);
107
112
  border-radius: 4px;
113
+ max-width: 100%;
108
114
  margin: 0;
109
115
  padding: 8px;
110
116
  list-style: none;
@@ -119,15 +125,11 @@
119
125
  position: relative;
120
126
  }
121
127
 
122
- .fr-combobox-option:hover, .fr-combobox-option.fr-focus {
128
+ .fr-combobox-option:hover, .fr-combobox-option.fr-focus, .fr-combobox-option.fr-selected {
123
129
  background-color: var(--fwe-gray-100);
124
130
  outline: none;
125
131
  }
126
132
 
127
- .fr-combobox-option.fr-selected {
128
- background-color: var(--fwe-gray-200);
129
- }
130
-
131
133
  .fr-combobox-option:last-child {
132
134
  border-bottom: none;
133
135
  }
package/dist/forms/combobox/ComboBox.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import './ComboBox.scss';
2
2
  import { type Ref } from 'react';
3
3
  import type { ComponentBase } from '../../utils/types';
4
- export interface ComboBoxOptionProps<T> {
4
+ export interface ComboBoxOption<T> {
5
5
  readonly label: string;
6
6
  readonly data: T;
7
7
  readonly disabled?: boolean;
@@ -10,7 +10,7 @@ export interface ComboBoxProps<T> extends ComponentBase {
10
10
  readonly defaultValue?: T;
11
11
  readonly value?: T;
12
12
  readonly label?: string;
13
- readonly options?: ComboBoxOptionProps<T>[];
13
+ readonly options?: ComboBoxOption<T>[];
14
14
  readonly required?: boolean;
15
15
  readonly onChange?: (value: T) => void;
16
16
  readonly disabled?: boolean;
package/dist/forms/combobox/ComboBox.js CHANGED
@@ -46,7 +46,7 @@ function ComboBoxComponent({ defaultValue = '', value: controlled, label, option
46
46
  onChange
47
47
  });
48
48
  const [query, setQuery] = useState('');
49
- const selectedOption = useMemo(()=>options.find((option)=>option.data === value), [
49
+ const selectedOption = useMemo(()=>options.find((option)=>option.data === value && !option.disabled), [
50
50
  options,
51
51
  value
52
52
  ]);
@@ -59,7 +59,7 @@ function ComboBoxComponent({ defaultValue = '', value: controlled, label, option
59
59
  query
60
60
  ]);
61
61
  function handleChange(option) {
62
- if (!option) return;
62
+ if (!option || option.disabled) return;
63
63
  setValue(option.data);
64
64
  setQuery('');
65
65
  }
@@ -79,11 +79,11 @@ function ComboBoxComponent({ defaultValue = '', value: controlled, label, option
79
79
  disabled: disabled,
80
80
  immediate: true,
81
81
  children: /*#__PURE__*/ jsxs("div", {
82
- className: classnames('fr-combobox-wrapper', {
82
+ className: classnames(className, 'fr-combobox-wrapper', {
83
83
  'fr-disabled': disabled,
84
84
  'fr-invalid': error,
85
85
  'fr-required': required
86
- }, className),
86
+ }),
87
87
  ref: ref,
88
88
  ...props,
89
89
  children: [
@@ -109,12 +109,13 @@ function ComboBoxComponent({ defaultValue = '', value: controlled, label, option
109
109
  }),
110
110
  /*#__PURE__*/ jsx(ComboboxButton, {
111
111
  className: "fr-combobox-button",
112
+ disabled: disabled,
112
113
  "aria-label": "Optionen anzeigen"
113
114
  })
114
115
  ]
115
116
  }),
116
117
  /*#__PURE__*/ jsxs(ComboboxOptions, {
117
- className: classnames('fr-combobox-options-container', 'fr-combobox-options'),
118
+ className: "fr-combobox-options-container",
118
119
  as: "ul",
119
120
  portal: false,
120
121
  anchor: {
package/dist/index.d.ts CHANGED
@@ -45,7 +45,7 @@ export { type TabItemAppearance, Tabs, type TabsConfiguration, type TabsProps, t
45
45
  export { TabPane, type TabPaneProps } from './components/tab/tab-pane/TabPane';
46
46
  export { TableHeaderCell, type TableHeaderCellProps, } from './components/table-header-cell/TableHeaderCell';
47
47
  export { Checkbox, type CheckboxProps } from './forms/checkbox/Checkbox';
48
- export { ComboBox, type ComboBoxOptionProps, type ComboBoxProps, } from './forms/combobox/ComboBox';
48
+ export { ComboBox, type ComboBoxOption, type ComboBoxProps, } from './forms/combobox/ComboBox';
49
49
  export { RadioButton, type RadioButtonProps, } from './forms/radio/RadioButton';
50
50
  export { RadioGroup, type RadioGroupProps } from './forms/radio/RadioGroup';
51
51
  export { Segment, type SegmentConfiguration, type SegmentProps, } from './forms/segment/Segment';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@festo-ui/react",
3
- "version": "9.0.1-dev.764",
3
+ "version": "9.0.1-dev.767",
4
4
  "author": "Festo UI (styleguide@festo.com)",
5
5
  "copyright": "Copyright (c) 2025 Festo SE & Co. KG. All rights reserved.",
6
6
  "license": "apache-2.0",
@@ -84,7 +84,7 @@
84
84
  },
85
85
  "peerDependencies": {
86
86
  "@festo-ui/web-essentials": "*",
87
- "react": ">=17.0.0",
88
- "react-dom": ">=17.0.0"
87
+ "react": ">=18.0.0",
88
+ "react-dom": ">=18.0.0"
89
89
  }
90
90
  }