@connectif/ui-components 5.3.0 → 5.4.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [5.4.1] - 2026-02-25
+
+### Fixed
+
+- Fixed selection in the `Select` component when is virtualized.
+- Fixed unnecessary renders in `DebouncedTextField` component when set value.
+
+## [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

@@ -19563,17 +19563,23 @@ var TextField_default = TextField;
 // src/components/input/DebouncedTextField.tsx
 import { jsx as jsx102 } from "react/jsx-runtime";
 var DebouncedTextField = React53.forwardRef(function DebouncedTextField2({ value, onChange, debounce = 100, ...rest }, ref) {
-  const [text, setText] = useState17(value);
+  const [text, setText] = useState17(value ?? "");
+  const expectedChangeRef = React53.useRef(void 0);
   const onChangeDebounced = useDebouncedCallback(
     (e) => {
       if (onChange) {
         onChange(e);
+        expectedChangeRef.current = e.target.value;
       }
     },
     debounce
   );
   useEffect12(() => {
-    setText(value);
+    if (expectedChangeRef.current === value) {
+      expectedChangeRef.current = void 0;
+    } else {
+      setText(value ?? "");
+    }
   }, [value]);
   return /* @__PURE__ */ jsx102(
     TextField_default,
@@ -21234,7 +21240,9 @@ import * as React60 from "react";
 import { styled as styled7 } from "@mui/material/styles";
 import MuiSelect from "@mui/material/Select";
 import InputBase from "@mui/material/InputBase";
-import { FixedSizeList as FixedSizeList2 } from "react-window";
+import {
+  FixedSizeList as FixedSizeList2
+} from "react-window";
 import AutoSizer4 from "react-virtualized-auto-sizer";
 import { jsx as jsx115 } from "react/jsx-runtime";
 var BootstrapInput = styled7(InputBase, {
@@ -21353,6 +21361,14 @@ var Select = function Select2({
   const valueIndex = options.findIndex(
     (op) => op.value === currentValue
   );
+  const listCallbackRef = React60.useCallback(
+    (list) => {
+      if (list && valueIndex >= 0) {
+        list.scrollToItem(valueIndex, "auto");
+      }
+    },
+    [valueIndex]
+  );
   const defaultVirtualizedProps = {
     width: 250,
     overscanCount: 3,
@@ -21388,7 +21404,7 @@ var Select = function Select2({
           ...style3
         },
         baseSx: {
-          backgroundColor: isSelected ? menuColors?.selectedColor : "transparent",
+          backgroundColor: isSelected ? menuColors?.selectedColor ?? primary50 : "transparent",
           color: menuColors?.color
         },
         ...rest2
@@ -21486,10 +21502,10 @@ var Select = function Select2({
       children: /* @__PURE__ */ jsx115(AutoSizer4, { disableWidth: true, children: ({ height: height2 }) => /* @__PURE__ */ jsx115(
         FixedSizeList2,
         {
+          ref: listCallbackRef,
           height: height2,
           itemCount: options.length,
           className: "Slim-Vertical-Scroll",
-          initialScrollOffset: valueIndex * itemSize,
           ...defaultVirtualizedProps,
           ...virtualizedProps,
           children: ListItemButtonWrapper
@@ -21597,7 +21613,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 +22397,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 +22434,8 @@ var CategorizedPicker = function CategorizedPicker2({
     setOpen(true);
     setSearch("");
     setSelectedCategory(getDefaultSelectedCategory());
-  }, [getDefaultSelectedCategory]);
+    onOpen?.();
+  }, [getDefaultSelectedCategory, onOpen]);
   const closePopover = React66.useCallback(() => {
     setOpen(false);
   }, []);
@@ -22471,6 +22492,9 @@ var CategorizedPicker = function CategorizedPicker2({
             height: "34px",
             lineHeight: "34px"
           },
+          "&.MuiInputBase-root.Mui-focused": {
+            background: white
+          },
           ...sx
         },
         value: value?.name || "",
@@ -22507,6 +22531,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"
@@ -22535,7 +22572,6 @@ var CategorizedPicker = function CategorizedPicker2({
                   placeholder: t(
                     "CATEGORIZED_PICKER.SEARCH_PLACEHOLDER"
                   ),
-                  value: "",
                   onChange: onTypeSearch,
                   startAdornment: /* @__PURE__ */ jsx126(Icon_default, { id: "magnify" }),
                   "data-testid": dataTestId ? dataTestId + "-search-input" : void 0
@@ -22555,6 +22591,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);
@@ -27201,7 +27240,7 @@ import MuiTabs from "@mui/material/Tabs";
 
 // src/components/layout/SwipeableViews.tsx
 import * as React90 from "react";
-import { useEffect as useEffect25, useRef as useRef29, useState as useState36 } from "react";
+import { useEffect as useEffect25, useRef as useRef30, useState as useState36 } from "react";
 import { jsx as jsx162 } from "react/jsx-runtime";
 var styles = {
   container: {
@@ -27235,11 +27274,11 @@ function SwipeableViews({
   disableScroll = false,
   ...rootProps
 }) {
-  const containerRef = useRef29(null);
-  const scrollTimeout = useRef29(null);
-  const scrollingMethod = useRef29("none");
+  const containerRef = useRef30(null);
+  const scrollTimeout = useRef30(null);
+  const scrollingMethod = useRef30("none");
   const [previousIndex, setPreviousIndex] = useState36(index);
-  const hideScrollAnimation = useRef29(true);
+  const hideScrollAnimation = useRef30(true);
   useEffect25(() => {
     if (containerRef.current) {
       if (scrollingMethod.current === "manual") {
@@ -28402,31 +28441,31 @@ var MinimizableWindow = React95.forwardRef(function MinimizableWindow2({
 var MinimizableWindow_default = MinimizableWindow;
 
 // src/hooks/useFormatters.ts
-import { useCallback as useCallback22, useContext as useContext16 } from "react";
+import { useCallback as useCallback23, useContext as useContext16 } from "react";
 var useFormatters = () => {
   const { locale, currency, timezone } = useContext16(IntlContext);
   return {
-    formatCompactNumber: useCallback22(
+    formatCompactNumber: useCallback23(
       (value) => formatCompactNumber(value, locale),
       [locale]
     ),
-    formatNumber: useCallback22(
+    formatNumber: useCallback23(
       (value, fractionSize) => formatNumber(value, locale, fractionSize),
       [locale]
     ),
-    formatPercentage: useCallback22(
+    formatPercentage: useCallback23(
       (value, fractionSize) => formatPercentage(value, locale, fractionSize),
       [locale]
     ),
-    formatCurrency: useCallback22(
+    formatCurrency: useCallback23(
       (value, notation) => formatCurrency(value, locale, currency, notation),
       [currency, locale]
     ),
-    formatDate: useCallback22(
+    formatDate: useCallback23(
       (date, format2) => formatDate(date, locale, timezone, format2),
       [locale, timezone]
     ),
-    formatPhone: useCallback22(
+    formatPhone: useCallback23(
       (phone, format2) => formatPhone(phone, format2),
       []
     )