@connectif/ui-components 9.0.0 → 9.0.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [9.0.1] - 2026-05-28
+
+### Added
+
+- Added `minMenuWidth` prop to `Select` component to set a minimum width for the dropdown menu.
+- Added `maxMenuWidth` prop to `Select` component to cap the dropdown menu's natural width.
+- Added `view-week-outline` icon.
+
+### Changed
+
+- `Select` dropdown menu no longer matches the trigger element's width. The menu now sizes to its content, constrained by `minMenuWidth` and `maxMenuWidth`
+
 ## [9.0.0] - 2026-05-21
 
 ### Added

package/dist/components/icon/icons.d.ts

@@ -1860,6 +1860,7 @@ export declare const icons: {
     'view-sequential': string;
     'view-stream': string;
     'view-week': string;
+    'view-week-outline': string;
     vimeo: string;
     vine: string;
     violin: string;

package/dist/components/input/Select.d.ts

@@ -75,6 +75,17 @@ export type SelectProps<T extends string | number | undefined, Multiple extends
      * The max height of the menu when open
      */
     menuMaxHeight?: string;
+    /**
+     * The minimum width (in px) of the dropdown menu.
+     * Defaults to 200.
+     */
+    minMenuWidth?: number;
+    /**
+     * The maximum width (in px) of the dropdown menu. Defaults to 400.
+     * When `virtualized=true`, the menu width is fixed to `minMenuWidth` by default,
+     * but `maxMenuWidth` still acts as an upper cap if `virtualizedProps.width` exceeds it.
+     */
+    maxMenuWidth?: number;
     /**
      * Ref to inner HTMLSelectElement
      */

package/dist/index.js

@@ -2638,7 +2638,8 @@ import {
   mdiDatabaseExport,
   mdiBrain,
   mdiTools,
-  mdiSitemapOutline
+  mdiSitemapOutline,
+  mdiViewWeekOutline
 } from "@mdi/js";
 var icons = {
   "abx-testing": "M 18.00108644,11.0000004 L 18.00108644,8.00000044 L 22.00108644,12.0000004 L 18.00108644,16.0000004 L 18.00108644,13.0000004 L 13.57108644,13.0000004 C 13.1110864,12.2500004 12.5410864,11.5800004 11.8810864,11.0000004 L 18.00108644,11.0000004 Z M 12.0010864,22.0000004 L 16.00108644,18.0000004 L 13.0010864,18.0000004 C 13.1510864,14.3900004 10.4310864,11.3100004 6.8310864,11.0000004 C 6.2810864,9.44000044 4.5610864,8.62000044 3.0010864,9.17000044 C 1.4410864,9.72000044 0.6210864,11.4400004 1.1710864,13.0000004 C 1.7310864,14.5600004 3.4410864,15.3800004 5.0010864,14.8300004 C 5.8610864,14.5300004 6.5310864,13.8500004 6.8310864,13.0000004 C 10.8310864,13.4700004 11.0310864,17.4700004 11.0310864,17.9500004 L 8.0310864,17.9500004 L 12.0010864,22.0000004 Z M 11.4110864,10.6300004 C 12.4310864,9.30000044 13.0010864,7.67000044 13.0010864,6.00000044 L 16.00108644,6.00000044 L 12.0010864,2.00000044 L 8.0010864,6.00000044 L 11.0010864,6.00000044 C 10.9710864,7.34000044 10.5010864,8.63000044 9.6010864,9.64000044 C 10.2410864,9.89000044 10.8510864,10.22000044 11.4110864,10.6300004 Z",
@@ -4542,6 +4543,7 @@ var icons = {
   "view-sequential": mdiViewSequential,
   "view-stream": mdiViewStream,
   "view-week": mdiViewWeek,
+  "view-week-outline": mdiViewWeekOutline,
   vimeo: "M22,7.42C21.91,9.37 20.55,12.04 17.92,15.44C15.2,19 12.9,20.75 11,20.75C9.85,20.75 8.86,19.67 8.05,17.5C7.5,15.54 7,13.56 6.44,11.58C5.84,9.42 5.2,8.34 4.5,8.34C4.36,8.34 3.84,8.66 2.94,9.29L2,8.07C3,7.2 3.96,6.33 4.92,5.46C6.24,4.32 7.23,3.72 7.88,3.66C9.44,3.5 10.4,4.58 10.76,6.86C11.15,9.33 11.42,10.86 11.57,11.46C12,13.5 12.5,14.5 13.05,14.5C13.47,14.5 14.1,13.86 14.94,12.53C15.78,11.21 16.23,10.2 16.29,9.5C16.41,8.36 15.96,7.79 14.94,7.79C14.46,7.79 13.97,7.9 13.46,8.12C14.44,4.89 16.32,3.32 19.09,3.41C21.15,3.47 22.12,4.81 22,7.42Z",
   vine: "M19.89,11.95C19.43,12.06 19,12.1 18.57,12.1C16.3,12.1 14.55,10.5 14.55,7.76C14.55,6.41 15.08,5.7 15.82,5.7C16.5,5.7 17,6.33 17,7.61C17,8.34 16.79,9.14 16.65,9.61C16.65,9.61 17.35,10.83 19.26,10.46C19.67,9.56 19.89,8.39 19.89,7.36C19.89,4.6 18.5,3 15.91,3C13.26,3 11.71,5.04 11.71,7.72C11.71,10.38 12.95,12.67 15,13.71C14.14,15.43 13.04,16.95 11.9,18.1C9.82,15.59 7.94,12.24 7.17,5.7H4.11C5.53,16.59 9.74,20.05 10.86,20.72C11.5,21.1 12.03,21.08 12.61,20.75C13.5,20.24 16.23,17.5 17.74,14.34C18.37,14.33 19.13,14.26 19.89,14.09V11.95Z",
   violin: mdiViolin,
@@ -22051,6 +22053,8 @@ var Select = function Select2({
   menuZIndex,
   menuColors,
   menuMaxHeight,
+  minMenuWidth = 200,
+  maxMenuWidth = 400,
   "data-testid": dataTestId,
   open,
   onOpen,
@@ -22063,9 +22067,6 @@ var Select = function Select2({
   const paperRef = React64.useRef(null);
   const selectRef = React64.useRef(null);
   const [measuredPaperHeight, setMeasuredPaperHeight] = React64.useState(void 0);
-  const [selectWidth, setSelectWidth] = React64.useState(
-    void 0
-  );
   const [highlightedIndex, setHighlightedIndex] = React64.useState(-1);
   const currentValue = React64.useMemo(
     () => value ?? (multiple ? [] : ""),
@@ -22121,7 +22122,7 @@ var Select = function Select2({
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, virtualized, highlightedIndex, options, onChange, onClose]);
   const defaultVirtualizedProps = {
-    width: selectWidth ?? 250,
+    width: minMenuWidth,
     overscanCount: 3,
     itemSize: 44
   };
@@ -22216,7 +22217,6 @@ var Select = function Select2({
       IconComponent: () => /* @__PURE__ */ jsx120(ChevronIcon, { disabled: rest.disabled, isOpen }),
       input: /* @__PURE__ */ jsx120(BootstrapInput, { ref: selectRef, placeholder }),
       onOpen: () => {
-        setSelectWidth(selectRef.current?.clientWidth);
         setOpen(true);
         onOpen && onOpen();
       },
@@ -22254,7 +22254,8 @@ var Select = function Select2({
               border: `1px solid ${menuColors.borderColor}`
             },
             maxHeight: menuMaxHeight,
-            maxWidth: selectWidth
+            minWidth: minMenuWidth,
+            maxWidth: maxMenuWidth
           },
           className: paperClassName
         },
@@ -22272,7 +22273,7 @@ var Select = function Select2({
           style: {
             maxHeight: measuredPaperHeight ? measuredPaperHeight - 16 : menuMaxHeight ? `calc(${menuMaxHeight} - 16px)` : "90vh",
             height: options.length * itemSize,
-            maxWidth: selectWidth ?? "90vw",
+            maxWidth: maxMenuWidth,
             flex: "1 1 auto"
           }
         }
@@ -22340,7 +22341,6 @@ var Select = function Select2({
       open,
       input: /* @__PURE__ */ jsx120(BootstrapInput, { ref: selectRef, placeholder }),
       onOpen: () => {
-        setSelectWidth(selectRef.current?.clientWidth);
         setOpen(true);
         onOpen && onOpen();
       },
@@ -22384,7 +22384,8 @@ var Select = function Select2({
               border: `1px solid ${menuColors.borderColor}`
             },
             maxHeight: menuMaxHeight,
-            maxWidth: selectWidth
+            minWidth: minMenuWidth,
+            maxWidth: maxMenuWidth
           },
           className: `${paperClassName} Slim-Vertical-Scroll`
         }