@connectif/ui-components 9.0.1 → 9.0.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [9.0.3] - 2026-06-02
+
+### Added
+
+- Added `maxNavigablePage` prop to `PageSelector` to cap the navigable page range for both buttons and text input.
+- Added a tooltip on the `PageSelector` next button when it is disabled because the user has reached the last navigable page.
+
+### Changed
+
+- Changes the default icon for `success` and `warning` severities of the `Alert` component for the "outlined" versions.
+
+## [9.0.2] - 2026-05-29
+
+### Added
+
+- Added `calendar-star-outline`, `play-speed`, `timer-play-outline`, `timer-stop-outline` icons.
+
 ## [9.0.1] - 2026-05-28
 
 ### Added

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

@@ -312,6 +312,7 @@ export declare const icons: {
     'calendar-range': string;
     'calendar-remove': string;
     'calendar-search-outline': string;
+    'calendar-star-outline': string;
     'calendar-text': string;
     'calendar-today': string;
     'call-made': string;
@@ -1381,6 +1382,7 @@ export declare const icons: {
     'playlist-play': string;
     'playlist-plus': string;
     'playlist-remove': string;
+    'play-speed': string;
     playstation: string;
     plex: string;
     plus: string;
@@ -1752,8 +1754,10 @@ export declare const icons: {
     'timer-cancel': string;
     'timer-off': string;
     'timer-outline': string;
+    'timer-play-outline': string;
     'timer-sand': string;
     'timer-sand-empty': string;
+    'timer-stop-outline': string;
     timetable: string;
     'toggle-switch': string;
     'toggle-switch-off': string;

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

@@ -24,6 +24,12 @@ export type PageSelectorProps = {
      * @default false
      */
     hideText?: boolean;
+    /**
+     * Optional maximum navigable page. When provided, navigation (buttons and input)
+     * is capped to this value or the last page derived from totalItems/pageSize,
+     * whichever is lower.
+     */
+    maxNavigablePage?: number;
     /**
      * The function to call when the page is changed by the user.
      */

package/dist/i18n/en.d.ts

@@ -183,6 +183,7 @@ export declare const en: {
         START_HOUR: string;
     };
     PAGE_SELECTOR: {
+        LAST_PAGE_REACHED: string;
         SHOWING_ITEMS: string;
     };
     SELECT_POPOVER: {

package/dist/i18n/es.d.ts

@@ -183,6 +183,7 @@ export declare const es: {
         START_HOUR: string;
     };
     PAGE_SELECTOR: {
+        LAST_PAGE_REACHED: string;
         SHOWING_ITEMS: string;
     };
     SELECT_POPOVER: {

package/dist/i18n/fr.d.ts

@@ -183,6 +183,7 @@ export declare const fr: {
         START_HOUR: string;
     };
     PAGE_SELECTOR: {
+        LAST_PAGE_REACHED: string;
         SHOWING_ITEMS: string;
     };
     SELECT_POPOVER: {

package/dist/i18n/it.d.ts

@@ -183,6 +183,7 @@ export declare const it: {
         START_HOUR: string;
     };
     PAGE_SELECTOR: {
+        LAST_PAGE_REACHED: string;
         SHOWING_ITEMS: string;
     };
     SELECT_POPOVER: {

package/dist/i18n/pt.d.ts

@@ -183,6 +183,7 @@ export declare const pt: {
         START_HOUR: string;
     };
     PAGE_SELECTOR: {
+        LAST_PAGE_REACHED: string;
         SHOWING_ITEMS: string;
     };
     SELECT_POPOVER: {

package/dist/index.js

@@ -1200,6 +1200,7 @@ import {
   mdiCalendarRange,
   mdiCalendarRemove,
   mdiCalendarSearchOutline,
+  mdiCalendarStarOutline,
   mdiCalendarText,
   mdiCalendarToday,
   mdiCallMade,
@@ -2137,6 +2138,7 @@ import {
   mdiPlaylistPlay,
   mdiPlaylistPlus,
   mdiPlaylistRemove,
+  mdiPlaySpeed,
   mdiPlus,
   mdiPlusBox,
   mdiPlusBoxOutline,
@@ -2475,8 +2477,10 @@ import {
   mdiTimerCancel,
   mdiTimerOff,
   mdiTimerOutline,
+  mdiTimerPlayOutline,
   mdiTimerSand,
   mdiTimerSandEmpty,
+  mdiTimerStopOutline,
   mdiTimetable,
   mdiToggleSwitch,
   mdiToggleSwitchOff,
@@ -2955,6 +2959,7 @@ var icons = {
   "calendar-range": mdiCalendarRange,
   "calendar-remove": mdiCalendarRemove,
   "calendar-search-outline": mdiCalendarSearchOutline,
+  "calendar-star-outline": mdiCalendarStarOutline,
   "calendar-text": mdiCalendarText,
   "calendar-today": mdiCalendarToday,
   "call-made": mdiCallMade,
@@ -4047,6 +4052,7 @@ var icons = {
   "playlist-play": mdiPlaylistPlay,
   "playlist-plus": mdiPlaylistPlus,
   "playlist-remove": mdiPlaylistRemove,
+  "play-speed": mdiPlaySpeed,
   playstation: "M9.5,4.27C10.88,4.53 12.9,5.14 14,5.5C16.75,6.45 17.69,7.63 17.69,10.29C17.69,12.89 16.09,13.87 14.05,12.89V8.05C14.05,7.5 13.95,6.97 13.41,6.82C13,6.69 12.76,7.07 12.76,7.63V19.73L9.5,18.69V4.27M13.37,17.62L18.62,15.75C19.22,15.54 19.31,15.24 18.83,15.08C18.34,14.92 17.47,14.97 16.87,15.18L13.37,16.41V14.45L13.58,14.38C13.58,14.38 14.59,14 16,13.87C17.43,13.71 19.17,13.89 20.53,14.4C22.07,14.89 22.25,15.61 21.86,16.1C21.46,16.6 20.5,16.95 20.5,16.95L13.37,19.5V17.62M3.5,17.42C1.93,17 1.66,16.05 2.38,15.5C3.05,15 4.18,14.65 4.18,14.65L8.86,13V14.88L5.5,16.09C4.9,16.3 4.81,16.6 5.29,16.76C5.77,16.92 6.65,16.88 7.24,16.66L8.86,16.08V17.77L8.54,17.83C6.92,18.09 5.2,18 3.5,17.42Z",
   plex: "M4,2C2.89,2 2,2.89 2,4V20C2,21.11 2.89,22 4,22H20C21.11,22 22,21.11 22,20V4C22,2.89 21.11,2 20,2H4M8.56,6H12.06L15.5,12L12.06,18H8.56L12,12L8.56,6Z",
   plus: mdiPlus,
@@ -4430,8 +4436,10 @@ var icons = {
   "timer-cancel": mdiTimerCancel,
   "timer-off": mdiTimerOff,
   "timer-outline": mdiTimerOutline,
+  "timer-play-outline": mdiTimerPlayOutline,
   "timer-sand": mdiTimerSand,
   "timer-sand-empty": mdiTimerSandEmpty,
+  "timer-stop-outline": mdiTimerStopOutline,
   timetable: mdiTimetable,
   "toggle-switch": mdiToggleSwitch,
   "toggle-switch-off": mdiToggleSwitchOff,
@@ -7734,9 +7742,9 @@ var useCustomTheme = () => useTheme3();
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var icons2 = {
   info: "information-outline",
-  success: "check-circle",
+  success: "check-circle-outline",
   error: "alert-circle-outline",
-  warning: "alert"
+  warning: "alert-outline"
 };
 var getColor = (theme2, severity) => {
   switch (severity) {
@@ -14950,6 +14958,7 @@ var DATE_INTERVAL_PICKER = {
   START_HOUR: "Start hour"
 };
 var PAGE_SELECTOR = {
+  LAST_PAGE_REACHED: "You have reached the last page",
   SHOWING_ITEMS: "Showing <b>{from}-{to}</b> of {total}"
 };
 var SELECT_POPOVER = {
@@ -15241,6 +15250,7 @@ var DATE_INTERVAL_PICKER2 = {
   START_HOUR: "Hora de inicio"
 };
 var PAGE_SELECTOR2 = {
+  LAST_PAGE_REACHED: "Has llegado a la \xFAltima p\xE1gina",
   SHOWING_ITEMS: "Mostrando <b>{from}-{to}</b> de {total}"
 };
 var SELECT_POPOVER2 = {
@@ -15547,6 +15557,7 @@ var DATE_INTERVAL_PICKER3 = {
   START_HOUR: "Heure de d\xE9but"
 };
 var PAGE_SELECTOR3 = {
+  LAST_PAGE_REACHED: "Vous avez atteint la derni\xE8re page",
   SHOWING_ITEMS: "Montrer <b>{from}-{to}</b> de {total}"
 };
 var SELECT_POPOVER3 = {
@@ -15838,6 +15849,7 @@ var DATE_INTERVAL_PICKER4 = {
   START_HOUR: "Ora di inizio"
 };
 var PAGE_SELECTOR4 = {
+  LAST_PAGE_REACHED: "Hai raggiunto l'ultima pagina",
   SHOWING_ITEMS: "Mostra <b>{from}-{to}</b> di {total}"
 };
 var SELECT_POPOVER4 = {
@@ -16114,6 +16126,7 @@ var DATE_INTERVAL_PICKER5 = {
   START_HOUR: "Hora de in\xEDcio"
 };
 var PAGE_SELECTOR5 = {
+  LAST_PAGE_REACHED: "Voc\xEA chegou \xE0 \xFAltima p\xE1gina",
   SHOWING_ITEMS: "Exibindo <b>{from}-{to}</b> de {total}"
 };
 var SELECT_POPOVER5 = {
@@ -26407,18 +26420,24 @@ var PageSelector = ({
   totalItems,
   text,
   hideText = false,
+  maxNavigablePage,
   onPageChange
 }) => {
   const { t } = useTranslation();
   const totalPages = Math.ceil(totalItems / pageSize);
+  const effectiveMaxPage = Math.min(
+    maxNavigablePage ?? totalPages,
+    totalPages
+  );
   const handlePrevious = React86.useCallback(() => {
     if (currentPage > 1) {
       onPageChange(Math.max(1, currentPage - 1));
     }
   }, [currentPage, onPageChange]);
+  const isNextDisabled = currentPage >= effectiveMaxPage;
   const handleNext = React86.useCallback(() => {
-    onPageChange(Math.min(totalPages, currentPage + 1));
-  }, [currentPage, onPageChange, totalPages]);
+    onPageChange(Math.min(effectiveMaxPage, currentPage + 1));
+  }, [currentPage, effectiveMaxPage, onPageChange]);
   const displayText = hideText ? "" : text || t(
     "PAGE_SELECTOR.SHOWING_ITEMS",
     totalItems === 0 ? { from: 0, to: 0, total: 0 } : {
@@ -26462,7 +26481,7 @@ var PageSelector = ({
                 onPageChange(value || 1);
               },
               minValue: 1,
-              maxValue: totalPages,
+              maxValue: effectiveMaxPage,
               "data-testid": "page-selector-input",
               sx: {
                 width: "32px",
@@ -26476,12 +26495,19 @@ var PageSelector = ({
             }
           ),
           /* @__PURE__ */ jsx148(
-            IconButton_default,
+            Tooltip_default,
             {
-              iconId: "chevron-right",
-              onClick: handleNext,
-              disabled: currentPage >= totalPages,
-              "data-test": "page-selector-next"
+              title: isNextDisabled ? t("PAGE_SELECTOR.LAST_PAGE_REACHED") : "",
+              allowDisabled: true,
+              children: /* @__PURE__ */ jsx148(
+                IconButton_default,
+                {
+                  iconId: "chevron-right",
+                  onClick: handleNext,
+                  disabled: isNextDisabled,
+                  "data-test": "page-selector-next"
+                }
+              )
             }
           )
         ] })