@connectif/ui-components 5.4.0 → 5.4.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # 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

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
@@ -22556,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
@@ -27225,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: {
@@ -27259,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") {
@@ -28426,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),
       []
     )