@connectif/ui-components 6.0.7 → 7.0.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [7.0.1] - 2026-04-24
+
+### Added
+
+- Added picker to select base or custom theme in storybook.
+- Added optional `disableCloseOnClickAway` prop to the `Autocomplete` component.
+
+## [7.0.0] - 2026-04-10
+
+### Removed
+
+- Removed `minimizeIconId` and `onMinimize` props in the `MinimizableWindow` component.
+
 ## [6.0.7] - 2026-04-09
 
 ### Fixed

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

@@ -101,6 +101,11 @@ export type AutocompleteProps<T extends string, Multiple extends boolean | undef
      * Disables clear button at the end of the component when field is dirty.
      */
     disableClear?: boolean;
+    /**
+     * Prevents the popover from closing when clicking outside of the autocomplete.
+     * @default false
+     */
+    disableCloseOnClickAway?: boolean;
     /**
      * start icon in autocomplete
      */
@@ -117,5 +122,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, size }: 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, disableCloseOnClickAway, size }: AutocompleteProps<T, Multiple, Value>) => import("react/jsx-runtime").JSX.Element;
 export default Autocomplete;

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

@@ -27,7 +27,7 @@ export type MinimizableWindowProps = React.PropsWithChildren<{
      */
     backButton?: React.ReactNode;
     /**
-     * Coords to the element to minimize window
+     * Coords to the element to close window
      */
     targetElement: {
         x: number;
@@ -41,10 +41,6 @@ export type MinimizableWindowProps = React.PropsWithChildren<{
      * To change icon sizes. Default S
      */
     iconSizes?: IconButtonProps['size'];
-    /**
-     * The icon ID for the minimize button.
-     */
-    minimizeIconId?: IconButtonProps['iconId'];
     /**
      * The icon ID for the close button.
      */
@@ -54,13 +50,9 @@ export type MinimizableWindowProps = React.PropsWithChildren<{
      */
     backIconId?: IconButtonProps['iconId'];
     /**
-     * Custom actions to display on the right side of the header, next to the minimize and close buttons.
+     * Custom actions to display on the right side of the header, next to the close button.
      */
     rightActions?: React.ReactNode;
-    /**
-     * Callback fired when the component requests to be minimized.
-     */
-    onMinimize: () => void;
     /**
      * Callback fired when the component requests to be closed.
      */
@@ -71,8 +63,8 @@ export type MinimizableWindowProps = React.PropsWithChildren<{
     onBack?: () => void;
 } & Pick<StackProps, 'sx'>>;
 /**
- * A component that displays a window with a title, a minimize button, and a close button.
- * The window can be minimized and closed.
+ * A component that displays a window with a title and a close button.
+ * The window closes by shrinking towards a target element.
  * The window can have a back button.
  * The ref object exposes the window and header elements.
  */
@@ -97,7 +89,7 @@ declare const MinimizableWindow: React.ForwardRefExoticComponent<{
      */
     backButton?: React.ReactNode;
     /**
-     * Coords to the element to minimize window
+     * Coords to the element to close window
      */
     targetElement: {
         x: number;
@@ -111,10 +103,6 @@ declare const MinimizableWindow: React.ForwardRefExoticComponent<{
      * To change icon sizes. Default S
      */
     iconSizes?: IconButtonProps["size"];
-    /**
-     * The icon ID for the minimize button.
-     */
-    minimizeIconId?: IconButtonProps["iconId"];
     /**
      * The icon ID for the close button.
      */
@@ -124,13 +112,9 @@ declare const MinimizableWindow: React.ForwardRefExoticComponent<{
      */
     backIconId?: IconButtonProps["iconId"];
     /**
-     * Custom actions to display on the right side of the header, next to the minimize and close buttons.
+     * Custom actions to display on the right side of the header, next to the close button.
      */
     rightActions?: React.ReactNode;
-    /**
-     * Callback fired when the component requests to be minimized.
-     */
-    onMinimize: () => void;
     /**
      * Callback fired when the component requests to be closed.
      */

package/dist/i18n/en.d.ts

@@ -2,7 +2,6 @@ export declare const en: {
     MINIMIZABLE_WINDOW: {
         CLOSE: string;
         GO_BACK: string;
-        MINIMIZE: string;
     };
     IMAGE_EDITOR: {
         ACTUAL_SIZE: string;

package/dist/i18n/es.d.ts

@@ -2,7 +2,6 @@ export declare const es: {
     MINIMIZABLE_WINDOW: {
         CLOSE: string;
         GO_BACK: string;
-        MINIMIZE: string;
     };
     IMAGE_EDITOR: {
         ACTUAL_SIZE: string;

package/dist/i18n/fr.d.ts

@@ -2,7 +2,6 @@ export declare const fr: {
     MINIMIZABLE_WINDOW: {
         CLOSE: string;
         GO_BACK: string;
-        MINIMIZE: string;
     };
     IMAGE_EDITOR: {
         ACTUAL_SIZE: string;

package/dist/i18n/it.d.ts

@@ -2,7 +2,6 @@ export declare const it: {
     MINIMIZABLE_WINDOW: {
         CLOSE: string;
         GO_BACK: string;
-        MINIMIZE: string;
     };
     IMAGE_EDITOR: {
         ACTUAL_SIZE: string;

package/dist/i18n/pt.d.ts

@@ -2,7 +2,6 @@ export declare const pt: {
     MINIMIZABLE_WINDOW: {
         CLOSE: string;
         GO_BACK: string;
-        MINIMIZE: string;
     };
     IMAGE_EDITOR: {
         ACTUAL_SIZE: string;

package/dist/index.js

@@ -15103,8 +15103,7 @@ __export(en_exports6, {
 });
 var MINIMIZABLE_WINDOW = {
   CLOSE: "Close",
-  GO_BACK: "Go back",
-  MINIMIZE: "Minimize"
+  GO_BACK: "Go back"
 };
 var en_default6 = {
   MINIMIZABLE_WINDOW
@@ -15390,8 +15389,7 @@ __export(es_exports6, {
 });
 var MINIMIZABLE_WINDOW2 = {
   CLOSE: "Cerrar",
-  GO_BACK: "Ir atr\xE1s",
-  MINIMIZE: "Minimizar"
+  GO_BACK: "Ir atr\xE1s"
 };
 var es_default6 = {
   MINIMIZABLE_WINDOW: MINIMIZABLE_WINDOW2
@@ -15677,8 +15675,7 @@ __export(fr_exports6, {
 });
 var MINIMIZABLE_WINDOW3 = {
   CLOSE: "Fermer",
-  GO_BACK: "Retourner en arri\xE8re",
-  MINIMIZE: "R\xE9duire"
+  GO_BACK: "Retourner en arri\xE8re"
 };
 var fr_default6 = {
   MINIMIZABLE_WINDOW: MINIMIZABLE_WINDOW3
@@ -15964,8 +15961,7 @@ __export(it_exports6, {
 });
 var MINIMIZABLE_WINDOW4 = {
   CLOSE: "Chiudere",
-  GO_BACK: "Torna indietro",
-  MINIMIZE: "Ridurre al minimo"
+  GO_BACK: "Torna indietro"
 };
 var it_default6 = {
   MINIMIZABLE_WINDOW: MINIMIZABLE_WINDOW4
@@ -16251,8 +16247,7 @@ __export(pt_exports6, {
 });
 var MINIMIZABLE_WINDOW5 = {
   CLOSE: "Fechar",
-  GO_BACK: "Voltar atr\xE1s",
-  MINIMIZE: "Minimizar"
+  GO_BACK: "Voltar atr\xE1s"
 };
 var pt_default6 = {
   MINIMIZABLE_WINDOW: MINIMIZABLE_WINDOW5
@@ -24320,6 +24315,7 @@ var Autocomplete = function Autocomplete2({
   onClose = () => ({}),
   onOpen = () => ({}),
   disableClear,
+  disableCloseOnClickAway = false,
   size = "S"
 }) {
   const anchorRef = React75.useRef(null);
@@ -24594,6 +24590,9 @@ var Autocomplete = function Autocomplete2({
     onSelectValue(option, event);
   };
   const onClickAwayPopover = (event) => {
+    if (disableCloseOnClickAway) {
+      return;
+    }
     if (!elementIsDescendantOrEqual(
       anchorRef.current,
       event.target
@@ -28734,11 +28733,9 @@ var MinimizableWindow = React98.forwardRef(function MinimizableWindow2({
   targetElement,
   contentHeight,
   iconSizes: iconSizes4 = "S",
-  minimizeIconId = "minus",
   closeIconId = "close",
   backIconId = "arrow-left",
   rightActions,
-  onMinimize,
   onClose,
   onBack
 }, ref) {
@@ -28795,26 +28792,6 @@ var MinimizableWindow = React98.forwardRef(function MinimizableWindow2({
       overlayRef.current.style.opacity = "0";
     }
   };
-  const onCloseModal = (ev) => {
-    ev.preventDefault();
-    ev.stopPropagation();
-    setTimeout(() => {
-      onClose && onClose();
-    }, 200);
-    setTimeout(() => {
-      if (overlayRef.current) {
-        overlayRef.current.style.display = "none";
-      }
-    }, 500);
-    setTimeout(() => {
-      if (overlayRef.current) {
-        overlayRef.current.style.removeProperty("left");
-        overlayRef.current.style.removeProperty("top");
-        overlayRef.current.style.removeProperty("display");
-        overlayRef.current.style.removeProperty("transition");
-      }
-    }, 750);
-  };
   return /* @__PURE__ */ jsxs89(Fragment44, { children: [
     isDraggingState && /* @__PURE__ */ jsx185(
       Box_default2,
@@ -28918,44 +28895,27 @@ var MinimizableWindow = React98.forwardRef(function MinimizableWindow2({
                         onMouseDown: (ev) => ev.stopPropagation(),
                         children: [
                           rightActions,
-                          /* @__PURE__ */ jsx185(Box_default2, { children: /* @__PURE__ */ jsx185(
+                          closeable && /* @__PURE__ */ jsx185(Box_default2, { children: /* @__PURE__ */ jsx185(
                             Tooltip_default,
                             {
-                              title: t("MINIMIZABLE_WINDOW.MINIMIZE"),
+                              title: t("MINIMIZABLE_WINDOW.CLOSE"),
                               zIndex: 999999,
                               placement: "top",
                               children: /* @__PURE__ */ jsx185(
                                 IconButton_default,
                                 {
                                   size: iconSizes4,
-                                  iconId: minimizeIconId,
+                                  iconId: closeIconId,
                                   onClick: () => {
                                     applyMinimizeTransition();
                                     setTimeout(() => {
-                                      onMinimize();
+                                      onClose && onClose();
                                     }, 500);
                                   },
                                   sx: iconButtonsStyles
                                 }
                               )
                             }
-                          ) }),
-                          closeable && /* @__PURE__ */ jsx185(Box_default2, { sx: { padding: "0 8px" }, children: /* @__PURE__ */ jsx185(
-                            Tooltip_default,
-                            {
-                              title: t("MINIMIZABLE_WINDOW.CLOSE"),
-                              zIndex: 999999,
-                              placement: "top",
-                              children: /* @__PURE__ */ jsx185(
-                                IconButton_default,
-                                {
-                                  size: iconSizes4,
-                                  iconId: closeIconId,
-                                  onClick: onCloseModal,
-                                  sx: iconButtonsStyles
-                                }
-                              )
-                            }
                           ) })
                         ]
                       }