@connectif/ui-components 5.3.0 → 5.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [5.4.0] - 2026-02-20
+
+### Fixed
+
+- Fixed a bug in the `Select` component when options had no label.
+- Added scroll to the selected category in `CategorizedPicker`.
+- Removed the background color in the `CategorizedPicker` component when it was focused.
+
+### Added
+
+- Extended the `CategorizedPicker` component options to include an optional `onOpen` method that is triggered when the picker opens.
+
 ## [5.3.0] - 2026-02-18
 
 ### Added

package/dist/components/input/categorized-picker/CategorizedPicker.d.ts

@@ -8,7 +8,8 @@ export type CategorizedPickerProps<T extends CategorizedPickerBaseOption> = {
     disabled?: boolean;
     sx?: SxProps;
     dataTestId?: string;
+    onOpen?: () => void;
     onChange: (value: T, groupDataId?: string) => void;
 };
-declare const CategorizedPicker: <T extends CategorizedPickerBaseOption>({ value, options, categories, placeholder, disabled, sx, dataTestId, onChange }: CategorizedPickerProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const CategorizedPicker: <T extends CategorizedPickerBaseOption>({ value, options, categories, placeholder, disabled, sx, dataTestId, onOpen, onChange }: CategorizedPickerProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default CategorizedPicker;

package/dist/index.js

@@ -21597,7 +21597,7 @@ var Select = function Select2({
         return /* @__PURE__ */ jsx115(
           SelectOption,
           {
-            label: label ?? value?.toString() ?? "",
+            label: label ?? optionValue?.toString() ?? "",
             value: optionValue,
             id: optionValue,
             colors: !menuColors?.selectedColor ? {
@@ -22381,9 +22381,13 @@ var CategorizedPicker = function CategorizedPicker2({
   disabled = false,
   sx,
   dataTestId,
+  onOpen,
   onChange
 }) {
   const { t } = useTranslation();
+  const categoryRefs = React66.useRef(
+    {}
+  );
   const anchorRef = React66.useRef(null);
   const [open, setOpen] = React66.useState(false);
   const [search, setSearch] = React66.useState("");
@@ -22414,7 +22418,8 @@ var CategorizedPicker = function CategorizedPicker2({
     setOpen(true);
     setSearch("");
     setSelectedCategory(getDefaultSelectedCategory());
-  }, [getDefaultSelectedCategory]);
+    onOpen?.();
+  }, [getDefaultSelectedCategory, onOpen]);
   const closePopover = React66.useCallback(() => {
     setOpen(false);
   }, []);
@@ -22471,6 +22476,9 @@ var CategorizedPicker = function CategorizedPicker2({
             height: "34px",
             lineHeight: "34px"
           },
+          "&.MuiInputBase-root.Mui-focused": {
+            background: white
+          },
           ...sx
         },
         value: value?.name || "",
@@ -22507,6 +22515,19 @@ var CategorizedPicker = function CategorizedPicker2({
           vertical: "top",
           horizontal: "left"
         },
+        slotProps: {
+          transition: {
+            onEntered: () => {
+              if (!selectedCategory) {
+                return;
+              }
+              const el = categoryRefs.current[selectedCategory.name];
+              el?.scrollIntoView({
+                behavior: "smooth"
+              });
+            }
+          }
+        },
         transformOrigin: {
           vertical: "top",
           horizontal: "left"
@@ -22555,6 +22576,9 @@ var CategorizedPicker = function CategorizedPicker2({
               children: /* @__PURE__ */ jsx126(Stack11, { children: filteredCategories.map((category, idx) => /* @__PURE__ */ jsx126(
                 ListItemButton_default,
                 {
+                  ref: (el) => {
+                    categoryRefs.current[category.name] = el;
+                  },
                   selected: selectedCategory === category,
                   onClick: () => {
                     setSelectedCategory(category);