@connectif/ui-components 6.0.0 → 6.0.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [6.0.2] - 2026-03-24
+
+### Fixed
+
+- Fixed an issue with style in `input` variant on `DateIntervalPicker` component.
+
+### Added
+
+- Added optional `onEntered` prop to the `CollapsiblePanel` component.
+- Added optional `size` prop to the `Autocomplete` component.
+
+## [6.0.1] - 2026-03-24
+
+### Added
+
+- Added optional `rightActions` prop to the `MinimizableWindow` component.
+
 ## [6.0.0] - 2026-03-20
 
 ### Added

package/dist/components/input/autocomplete/Autocomplete.d.ts

@@ -105,6 +105,10 @@ export type AutocompleteProps<T extends string, Multiple extends boolean | undef
      * start icon in autocomplete
      */
     startIconId?: IconId;
+    /**
+     * Define min with that autocomplete can have. S => 328px. XS => 248px. @default 'S'
+     */
+    size?: 'S' | 'XS';
     /**
      * Ref to the inner HTMLInputElement
      */
@@ -113,5 +117,5 @@ export type AutocompleteProps<T extends string, Multiple extends boolean | undef
 /**
  * Powered TextField with the ability to select from a predefined list of options, allowing to select one or multiple values.
  */
-declare const Autocomplete: <T extends string, Multiple extends boolean | undefined = undefined, Value = AutocompleteValue<T, Multiple>>({ variant, value, multiple, textFieldProps, options, disabled, mode, isCaseSensitive, isDiacriticSensitive, onChange, renderLabel, isLoading, onSearch, loadingText, noOptionsText, allowFreeText, addNewValueText, closeOnSelect, maxValueLength, maxValues, maxValuesText, startIconId, onClose, onOpen, disableClear }: AutocompleteProps<T, Multiple, Value>) => import("react/jsx-runtime").JSX.Element;
+declare const Autocomplete: <T extends string, Multiple extends boolean | undefined = undefined, Value = AutocompleteValue<T, Multiple>>({ variant, value, multiple, textFieldProps, options, disabled, mode, isCaseSensitive, isDiacriticSensitive, onChange, renderLabel, isLoading, onSearch, loadingText, noOptionsText, allowFreeText, addNewValueText, closeOnSelect, maxValueLength, maxValues, maxValuesText, startIconId, onClose, onOpen, disableClear, size }: AutocompleteProps<T, Multiple, Value>) => import("react/jsx-runtime").JSX.Element;
 export default Autocomplete;

package/dist/components/input/autocomplete/AutocompleteInput.d.ts

@@ -61,6 +61,7 @@ export type AutocompleteInputProps<T extends string, Multiple extends boolean |
     inputValue: string;
     setInputValue: (value: string) => void;
     placeholder: string;
+    size: 'S' | 'XS';
     onClosePopover: () => void;
     onOpenPopover: () => void;
     onSearchValueChange: (event: React.SyntheticEvent, searchValue: string) => void;
@@ -70,5 +71,5 @@ export type AutocompleteInputProps<T extends string, Multiple extends boolean |
 /**
  * Powered TextField Input.
  */
-declare const AutocompleteInput: <T extends string, Multiple extends boolean | undefined = undefined, Value = AutocompleteValue<T, Multiple>>({ variant, value, multiple, textFieldProps, hasFilteredOptions, disabled, renderLabel, maxValueLength, canAddValues, maxValuesText, disableClear, containerRef, inputRef, onClosePopover, onOpenPopover, isOpenPopover, inputValue, setInputValue, placeholder, startIconId, onSearchValueChange, onPressEnter, onRemoveValue }: AutocompleteInputProps<T, Multiple, Value>) => import("react/jsx-runtime").JSX.Element;
+declare const AutocompleteInput: <T extends string, Multiple extends boolean | undefined = undefined, Value = AutocompleteValue<T, Multiple>>({ variant, value, multiple, textFieldProps, hasFilteredOptions, disabled, renderLabel, maxValueLength, canAddValues, maxValuesText, disableClear, containerRef, inputRef, onClosePopover, onOpenPopover, isOpenPopover, inputValue, setInputValue, placeholder, startIconId, size, onSearchValueChange, onPressEnter, onRemoveValue }: AutocompleteInputProps<T, Multiple, Value>) => import("react/jsx-runtime").JSX.Element;
 export default AutocompleteInput;

package/dist/components/layout/CollapsiblePanel.d.ts

@@ -43,6 +43,10 @@ export type CollapsiblePanelProps = React.PropsWithChildren<{
      * Props for divider
      */
     dividerProps?: DividerProps;
+    /**
+     * Method to call when transition end
+     */
+    onEntered?: () => void;
 }> & Pick<ListItemButtonProps, 'disabled'>;
-declare const CollapsiblePanel: ({ sx, children, isCollapsed, onToggle, header, headerText, headerBaseSx, collapseDirection, disabled, withDivider, dividerProps }: CollapsiblePanelProps) => import("react/jsx-runtime").JSX.Element;
+declare const CollapsiblePanel: ({ sx, children, isCollapsed, onToggle, header, headerText, headerBaseSx, collapseDirection, disabled, withDivider, dividerProps, onEntered }: CollapsiblePanelProps) => import("react/jsx-runtime").JSX.Element;
 export default CollapsiblePanel;

package/dist/components/window/MinimizableWindow.d.ts

@@ -53,6 +53,10 @@ export type MinimizableWindowProps = React.PropsWithChildren<{
      * The icon ID for the back button.
      */
     backIconId?: IconButtonProps['iconId'];
+    /**
+     * Custom actions to display on the right side of the header, next to the minimize and close buttons.
+     */
+    rightActions?: React.ReactNode;
     /**
      * Callback fired when the component requests to be minimized.
      */
@@ -119,6 +123,10 @@ declare const MinimizableWindow: React.ForwardRefExoticComponent<{
      * The icon ID for the back button.
      */
     backIconId?: IconButtonProps["iconId"];
+    /**
+     * Custom actions to display on the right side of the header, next to the minimize and close buttons.
+     */
+    rightActions?: React.ReactNode;
     /**
      * Callback fired when the component requests to be minimized.
      */

package/dist/index.js

@@ -8330,7 +8330,8 @@ var CollapsiblePanel = ({
   collapseDirection = "down",
   disabled,
   withDivider = false,
-  dividerProps
+  dividerProps,
+  onEntered
 }) => /* @__PURE__ */ jsxs3(
   Box_default2,
   {
@@ -8351,7 +8352,7 @@ var CollapsiblePanel = ({
         }
       ),
       withDivider && !isCollapsed && /* @__PURE__ */ jsx10(Divider_default, { ...dividerProps }),
-      /* @__PURE__ */ jsx10(Collapse, { in: !isCollapsed, children })
+      /* @__PURE__ */ jsx10(Collapse, { in: !isCollapsed, onEntered, children })
     ]
   }
 );
@@ -21341,7 +21342,6 @@ var DateIntervalPickerInputButton = ({
         {
           ref: inputRef,
           placeholder: dateInputFormatPlaceholder,
-          readOnly: true,
           endAdornment: /* @__PURE__ */ jsx115(
             Icon_default,
             {
@@ -22567,21 +22567,26 @@ var CategorizedPickerGroupItem = function CategorizedPickerGroupItem2({
   onSelect,
   onScrollToItem
 }) {
+  const itemRef = React68.useRef(null);
+  const shouldScrollRef = React68.useRef(false);
   const [isCollapsed, setCollapsed] = React68.useState(
     !searchText && !option.options.some(
       (opt) => opt.categorizedPickerItemType === "option" && opt.id === selectedId
     )
   );
+  const handleClick = () => {
+    setCollapsed(!isCollapsed);
+    shouldScrollRef.current = isCollapsed;
+  };
   return /* @__PURE__ */ jsx125(
     CollapsiblePanel_default,
     {
       header: /* @__PURE__ */ jsx125(
         ListItemButton_default,
         {
+          ref: itemRef,
           selected: selectedId === option.id,
-          onClick: () => {
-            setCollapsed(!isCollapsed);
-          },
+          onClick: handleClick,
           baseSx: {
             height: "auto",
             minHeight: "44px",
@@ -22609,6 +22614,14 @@ var CategorizedPickerGroupItem = function CategorizedPickerGroupItem2({
       ),
       isCollapsed,
       onToggle: () => setCollapsed(!isCollapsed),
+      onEntered: () => {
+        if (shouldScrollRef.current && itemRef.current) {
+          itemRef.current.scrollIntoView({
+            behavior: "smooth"
+          });
+          shouldScrollRef.current = false;
+        }
+      },
       children: /* @__PURE__ */ jsx125(List_default, { disablePadding: true, children: option.options.map((opt, idx) => /* @__PURE__ */ jsx125(
         CategorizedPickerItem_default,
         {
@@ -23832,8 +23845,17 @@ var AutocompleteInputSelection_default = AutocompleteInputSelection;
 
 // src/components/input/autocomplete/AutocompleteInput.tsx
 import { Fragment as Fragment31, jsx as jsx133, jsxs as jsxs63 } from "react/jsx-runtime";
-var INPUT_MIN_WIDTH = 80;
 var CLEAR_BUTTON_WIDTH = 36;
+var sizes6 = {
+  XS: {
+    inputMinWidth: 32,
+    minWidth: 248
+  },
+  S: {
+    inputMinWidth: 80,
+    minWidth: 328
+  }
+};
 var AutocompleteInput = function AutocompleteInput2({
   variant = "default",
   value,
@@ -23855,6 +23877,7 @@ var AutocompleteInput = function AutocompleteInput2({
   setInputValue,
   placeholder,
   startIconId,
+  size,
   onSearchValueChange,
   onPressEnter,
   onRemoveValue
@@ -23871,7 +23894,7 @@ var AutocompleteInput = function AutocompleteInput2({
       ...textFieldProps,
       sx: {
         ...textFieldProps?.sx,
-        minWidth: "328px",
+        minWidth: `${sizes6[size].minWidth}px`,
         padding: "1px 1px 1px 6px",
         ...variant === "text" && {
           border: "none",
@@ -23890,7 +23913,7 @@ var AutocompleteInput = function AutocompleteInput2({
       inputSx: {
         ...textFieldProps?.inputSx,
         flex: "1 1 auto",
-        minWidth: showClearButton ? `${INPUT_MIN_WIDTH}px` : `${INPUT_MIN_WIDTH + CLEAR_BUTTON_WIDTH}px`,
+        minWidth: showClearButton ? `${sizes6[size].inputMinWidth}px` : `${sizes6[size].inputMinWidth + CLEAR_BUTTON_WIDTH}px`,
         ...disabled && {
           color: palette2.grey[500]
         },
@@ -24223,7 +24246,8 @@ var Autocomplete = function Autocomplete2({
   startIconId,
   onClose = () => ({}),
   onOpen = () => ({}),
-  disableClear
+  disableClear,
+  size = "S"
 }) {
   const anchorRef = React75.useRef(null);
   const inputRef = React75.useRef(null);
@@ -24544,6 +24568,7 @@ var Autocomplete = function Autocomplete2({
         inputValue,
         setInputValue,
         placeholder,
+        size,
         onRemoveValue: onRemoveInputValue
       }
     ),
@@ -27680,7 +27705,7 @@ import MuiTabs from "@mui/material/Tabs";
 
 // src/components/layout/SwipeableViews.tsx
 import * as React93 from "react";
-import { useEffect as useEffect26, useRef as useRef31, useState as useState38 } from "react";
+import { useEffect as useEffect26, useRef as useRef32, useState as useState38 } from "react";
 import { jsx as jsx165 } from "react/jsx-runtime";
 var styles = {
   container: {
@@ -27714,11 +27739,11 @@ function SwipeableViews({
   disableScroll = false,
   ...rootProps
 }) {
-  const containerRef = useRef31(null);
-  const scrollTimeout = useRef31(null);
-  const scrollingMethod = useRef31("none");
+  const containerRef = useRef32(null);
+  const scrollTimeout = useRef32(null);
+  const scrollingMethod = useRef32("none");
   const [previousIndex, setPreviousIndex] = useState38(index);
-  const hideScrollAnimation = useRef31(true);
+  const hideScrollAnimation = useRef32(true);
   useEffect26(() => {
     if (containerRef.current) {
       if (scrollingMethod.current === "manual") {
@@ -28599,7 +28624,7 @@ var WidgetTitle_default = WidgetTitle;
 // src/components/window/MinimizableWindow.tsx
 import * as React98 from "react";
 import { Fragment as Fragment43, jsx as jsx185, jsxs as jsxs89 } from "react/jsx-runtime";
-var sizes6 = {
+var sizes7 = {
   M: 400,
   L: 500,
   XL: 640
@@ -28638,6 +28663,7 @@ var MinimizableWindow = React98.forwardRef(function MinimizableWindow2({
   minimizeIconId = "minus",
   closeIconId = "close",
   backIconId = "arrow-left",
+  rightActions,
   onMinimize,
   onClose,
   onBack
@@ -28740,7 +28766,7 @@ var MinimizableWindow = React98.forwardRef(function MinimizableWindow2({
           position: "absolute",
           zIndex: 999998,
           bottom: "8px",
-          left: window.innerWidth / 2 - sizes6[size] / 2,
+          left: window.innerWidth / 2 - sizes7[size] / 2,
           height: "fit-content",
           background: `linear-gradient(to left, ${cornflowerBlue}, ${electricLavender})`,
           borderRadius: "16px",
@@ -28757,7 +28783,7 @@ var MinimizableWindow = React98.forwardRef(function MinimizableWindow2({
               ...sx
             },
             ref: windowRef,
-            width: `${sizes6[size]}px`,
+            width: `${sizes7[size]}px`,
             height: contentHeight !== void 0 && headerRef.current ? `${contentHeight + contentPadding + headerRef.current.scrollHeight}px` : void 0,
             children: [
               /* @__PURE__ */ jsxs89(
@@ -28817,6 +28843,7 @@ var MinimizableWindow = React98.forwardRef(function MinimizableWindow2({
                         alignItems: "center",
                         onMouseDown: (ev) => ev.stopPropagation(),
                         children: [
+                          rightActions,
                           /* @__PURE__ */ jsx185(Box_default2, { children: /* @__PURE__ */ jsx185(
                             Tooltip_default,
                             {