@connectif/ui-components 7.0.1 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## [8.0.0] - 2026-04-29
+
+### Added
+
+- Added a picker to select the base or custom theme in Storybook.
+- Added an optional `slotProps` prop to the `ChipViewer` component to configure chip styles and typography.
+
+### Changed
+
+- Renamed the `chips` prop to `chipLabels` in the `CardChips` component.
+
+### Deprecated
+
+- Deprecated the `ChipList` component.
+
+### Fixed
+
+- Fixed the incorrect background color in the active + hover state when using the custom theme.
+
+### Removed
+
+- Removed the `typographyVariant`, `chipSx`, `chipSize`, and `chipVariant` props from the `ChipViewer` component.
+
 ## [7.0.1] - 2026-04-24
 
 ### Added

package/dist/components/card/CardChips.d.ts

@@ -2,15 +2,12 @@ export type CardChipsProps = {
     /**
      * The list of chip labels to display.
      */
-    chips: {
-        label: string;
-        tooltip?: string;
-    }[];
+    chipLabels: string[];
 };
 /**
  * A component that displays a list of chips within a Card.
  * The chips are displayed as a list with a margin between each chip.
  * It should be placed after the CardTitle and before the CardDescription.
  */
-declare const CardChips: ({ chips }: CardChipsProps) => import("react/jsx-runtime").JSX.Element;
+declare const CardChips: ({ chipLabels }: CardChipsProps) => import("react/jsx-runtime").JSX.Element;
 export default CardChips;

package/dist/components/chip/ChipList.d.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
 import { ChipProps } from './Chip';
+/**
+ * @deprecated Use `ChipViewer` instead.
+ */
 export type ChipListProps = React.PropsWithChildren<{
     /**
      * The chips to display.
@@ -7,6 +10,8 @@ export type ChipListProps = React.PropsWithChildren<{
     chips: ChipProps[];
 }>;
 /**
+ * @deprecated Use `ChipViewer` instead.
+ *
  * Shows a list of chips, in a horizontal layout.
  * If chips doesn't fit in the available space, they will be overflow to multiline.
  */

package/dist/components/chip/ChipViewer.d.ts

@@ -1,33 +1,30 @@
 import * as React from 'react';
-import { ThemeTypography } from '../../theme';
 import { ChipProps } from './Chip';
-import { SxProps } from '@mui/material';
+import { TypographyProps } from '../typography';
 export declare const CHIP_DATA_TEST_ID = "chip-viewer-chip";
 export declare const CHIP_VIEWER_ROOT_ID = "chip-viewer-root";
 declare const chipViewerStyle: {
     circle: {
         borderRadius: string;
-        backgroundColor: string;
-        color: string;
+        chipVariant: string;
     };
     square: {
         borderRadius: string;
-        backgroundColor: string;
-        color: string;
+        chipVariant: string;
     };
 };
 export type ChipViewerProps = {
     values: string[];
-    chipSx?: SxProps;
-    chipSize?: ChipProps['size'];
-    chipVariant?: ChipProps['variant'];
     placeholder?: string;
     numberLines?: number;
     reserveHeight?: true;
     variant?: keyof typeof chipViewerStyle;
-    typographyVariant?: ThemeTypography.TypographyVariant;
-    preventHiddenChipsTooltip?: true;
+    preventHiddenChipsTooltip?: boolean;
     forceRecalculate?: boolean;
+    slotProps?: {
+        chip?: Partial<Pick<ChipProps, 'variant' | 'size' | 'sx'>>;
+        typography?: Partial<Pick<TypographyProps, 'variant'>>;
+    };
     /**
      * Function to set custom chip name
      * @param id
@@ -42,5 +39,5 @@ export type ChipViewerProps = {
     onRemoveChip?: (event: React.SyntheticEvent, id: string) => void;
     onHasHiddenChipsChange?: (hasHiddenChips: boolean) => void;
 };
-declare const ChipViewer: ({ values, chipSx, chipSize, chipVariant, placeholder, numberLines, reserveHeight, variant, preventHiddenChipsTooltip, typographyVariant, forceRecalculate, renderChipLabel, onRemoveChip, onClickChip, onHasHiddenChipsChange, getWarningTooltip }: ChipViewerProps) => import("react/jsx-runtime").JSX.Element;
+declare const ChipViewer: ({ values, placeholder, numberLines, reserveHeight, variant, preventHiddenChipsTooltip, forceRecalculate, slotProps, renderChipLabel, onRemoveChip, onClickChip, onHasHiddenChipsChange, getWarningTooltip }: ChipViewerProps) => import("react/jsx-runtime").JSX.Element;
 export default ChipViewer;

package/dist/index.js

@@ -11254,133 +11254,10 @@ var ChipList = ({ chips }) => /* @__PURE__ */ jsx56(
 );
 var ChipList_default = ChipList;
 
-// src/components/card/CardChips.tsx
-import { jsx as jsx57 } from "react/jsx-runtime";
-var CardChips = ({ chips }) => /* @__PURE__ */ jsx57(
-  MuiCardContent2,
-  {
-    sx: {
-      p: "0 16px",
-      margin: "16px 0"
-    },
-    children: /* @__PURE__ */ jsx57(ChipList_default, { chips })
-  }
-);
-var CardChips_default = CardChips;
-
-// src/components/card/CardImage.tsx
-import MuiCardMedia from "@mui/material/CardMedia";
-import { jsx as jsx58 } from "react/jsx-runtime";
-var imageHeights = {
-  sm: "104px",
-  md: "130px"
-};
-var CardImage = ({ imageUrl, size = "md" }) => /* @__PURE__ */ jsx58(
-  MuiCardMedia,
-  {
-    component: "img",
-    image: imageUrl,
-    height: imageHeights[size]
-  }
-);
-var CardImage_default = CardImage;
-
-// src/theme/Animations.ts
-var Animations_exports = {};
-__export(Animations_exports, {
-  backgroundMovingBars: () => backgroundMovingBars,
-  littleBeating: () => littleBeating
-});
-var barSize = 20;
-var barAlpha = 0.15;
-var backgroundMovingBarsAnimation = keyframes`
-  from {
-    background-position: 0 0;
-  }
-  to {
-    background-position: -${barSize / Math.sqrt(2)}px -${barSize / Math.sqrt(2)}px;
-`;
-var backgroundMovingBars = {
-  backgroundImage: `repeating-linear-gradient(-45deg, rgba(255, 255, 255, ${barAlpha}), rgba(255, 255, 255, ${barAlpha}) ${barSize / 2}px, rgba(0, 0, 0, ${barAlpha}) ${barSize / 2}px, rgba(0, 0, 0, ${barAlpha}) ${barSize}px)`,
-  animation: `${backgroundMovingBarsAnimation} 1s linear infinite`,
-  backgroundSize: "200% 200%"
-};
-var littleBeatingAnimation = keyframes`
-  0% {
-    transform: scale(1);
-  }
-  50%{
-    transform: scale(1.1);
-  }
-  100% {
-    transform: scale(1);
-  }
-`;
-var littleBeating = {
-  animation: `${littleBeatingAnimation} 2s linear infinite`
-};
-
-// src/components/card/CardStatus.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
-var CardStatus = ({
-  text,
-  animated = false,
-  backgroundColor: backgroundColor2 = "primary.main"
-}) => /* @__PURE__ */ jsx59(
-  Box_default2,
-  {
-    sx: {
-      display: "flex",
-      justifyContent: "right",
-      p: "5px 16px",
-      backgroundColor: backgroundColor2,
-      ...animated && backgroundMovingBars
-    },
-    children: /* @__PURE__ */ jsx59(
-      Typography_default,
-      {
-        sx: { textTransform: "uppercase" },
-        component: "div",
-        color: "white",
-        noWrap: true,
-        children: text
-      }
-    )
-  }
-);
-var CardStatus_default = CardStatus;
-
-// src/components/card/CardTable.tsx
-import { jsx as jsx60, jsxs as jsxs22 } from "react/jsx-runtime";
-var CardTable = ({ rows }) => /* @__PURE__ */ jsx60(Box_default2, { sx: { p: "0 16px" }, children: rows.map((row) => /* @__PURE__ */ jsxs22(
-  Box_default2,
-  {
-    sx: {
-      display: "flex",
-      justifyContent: "space-between",
-      overflow: "hidden",
-      p: "5px 0",
-      borderTopStyle: "solid",
-      borderTopWidth: "1px",
-      borderTopColor: "grey.300"
-    },
-    children: [
-      /* @__PURE__ */ jsx60(Typography_default, { children: row.label }),
-      /* @__PURE__ */ jsx60(Typography_default, { sx: { textAlign: "right", fontWeight: "bold" }, children: row.value })
-    ]
-  },
-  row.label
-)) });
-var CardTable_default = CardTable;
-
-// src/components/card/EnhancedCard.tsx
-import { Stack as Stack5 } from "@mui/material";
-import * as React32 from "react";
-
 // src/components/chip/MenuChip.tsx
 import * as React29 from "react";
 import MuiMenu4 from "@mui/material/Menu";
-import { Fragment as Fragment7, jsx as jsx61, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx57, jsxs as jsxs22 } from "react/jsx-runtime";
 var MenuChip = React29.forwardRef(function MenuChip2({
   children,
   isOpen: managedIsOpen,
@@ -11422,8 +11299,8 @@ var MenuChip = React29.forwardRef(function MenuChip2({
     setAnchorEl(element);
   };
   const isOpen = typeof managedIsOpen === "boolean" ? managedIsOpen : internalIsOpen;
-  return /* @__PURE__ */ jsxs23(Fragment7, { children: [
-    /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsxs22(Fragment7, { children: [
+    /* @__PURE__ */ jsx57(
       Chip_default,
       {
         ...iconChipProps,
@@ -11437,7 +11314,7 @@ var MenuChip = React29.forwardRef(function MenuChip2({
         onClick: handleClick
       }
     ),
-    /* @__PURE__ */ jsx61(
+    /* @__PURE__ */ jsx57(
       MuiMenu4,
       {
         id: menuId,
@@ -11470,6 +11347,41 @@ var MenuChip_default = MenuChip;
 // src/components/chip/ChipViewer.tsx
 import * as React31 from "react";
 
+// src/theme/Animations.ts
+var Animations_exports = {};
+__export(Animations_exports, {
+  backgroundMovingBars: () => backgroundMovingBars,
+  littleBeating: () => littleBeating
+});
+var barSize = 20;
+var barAlpha = 0.15;
+var backgroundMovingBarsAnimation = keyframes`
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: -${barSize / Math.sqrt(2)}px -${barSize / Math.sqrt(2)}px;
+`;
+var backgroundMovingBars = {
+  backgroundImage: `repeating-linear-gradient(-45deg, rgba(255, 255, 255, ${barAlpha}), rgba(255, 255, 255, ${barAlpha}) ${barSize / 2}px, rgba(0, 0, 0, ${barAlpha}) ${barSize / 2}px, rgba(0, 0, 0, ${barAlpha}) ${barSize}px)`,
+  animation: `${backgroundMovingBarsAnimation} 1s linear infinite`,
+  backgroundSize: "200% 200%"
+};
+var littleBeatingAnimation = keyframes`
+  0% {
+    transform: scale(1);
+  }
+  50%{
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+`;
+var littleBeating = {
+  animation: `${littleBeatingAnimation} 2s linear infinite`
+};
+
 // src/theme/GlobalStyles.ts
 var GlobalStyles_exports = {};
 __export(GlobalStyles_exports, {
@@ -11583,7 +11495,7 @@ var GlobalStyles_default = globalStyles;
 // src/components/chip/ChipHiddenCounter.tsx
 import * as React30 from "react";
 import { Popper } from "@mui/material";
-import { Fragment as Fragment8, jsx as jsx62, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx58, jsxs as jsxs23 } from "react/jsx-runtime";
 var TOOLTIP_DATA_TEST_ID = "chip-container-tooltip";
 var COUNTER_LABEL_DATA_TEST_ID = "chip-counter-label";
 var MAX_TOOLTIP_WIDTH = 362;
@@ -11617,8 +11529,8 @@ var ChipHiddenCounter = ({
     const alertButtonWidth = !warningTooltip ? 0 : WIDTH_ALERT_BUTTON;
     return !isDeletable ? `${MAX_TOOLTIP_WIDTH - alertButtonWidth}px` : `${MAX_TOOLTIP_WIDTH - WIDTH_DELETABLE_BUTTON - alertButtonWidth}px`;
   };
-  return /* @__PURE__ */ jsx62(Fragment8, { children: hiddenChips.length > 0 && /* @__PURE__ */ jsxs24(Fragment8, { children: [
-    /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx58(Fragment8, { children: hiddenChips.length > 0 && /* @__PURE__ */ jsxs23(Fragment8, { children: [
+    /* @__PURE__ */ jsx58(
       Box_default2,
       {
         ref: counterRef,
@@ -11632,7 +11544,7 @@ var ChipHiddenCounter = ({
         })
       }
     ),
-    !preventHiddenChipsTooltip && /* @__PURE__ */ jsx62(
+    !preventHiddenChipsTooltip && /* @__PURE__ */ jsx58(
       Popper,
       {
         ref: popperRef,
@@ -11669,7 +11581,7 @@ var ChipHiddenCounter = ({
           borderRadius: "8px"
         },
         "data-testid": TOOLTIP_DATA_TEST_ID,
-        children: /* @__PURE__ */ jsx62(
+        children: /* @__PURE__ */ jsx58(
           Paper_default,
           {
             sx: {
@@ -11679,7 +11591,7 @@ var ChipHiddenCounter = ({
               border: `1px solid ${grey200}`,
               cursor: "default"
             },
-            children: /* @__PURE__ */ jsx62(
+            children: /* @__PURE__ */ jsx58(
               Stack_default,
               {
                 direction: "row",
@@ -11708,7 +11620,7 @@ var ChipHiddenCounter = ({
 var ChipHiddenCounter_default = ChipHiddenCounter;
 
 // src/components/chip/ChipContainer.tsx
-import { jsx as jsx63, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs24 } from "react/jsx-runtime";
 var DEFAULT_DATA_TEST_ID = "chip-container";
 var PLACEHOLDER_DATA_TEST_ID = "chip-container-placeholder";
 var ChipContainer = ({
@@ -11726,7 +11638,7 @@ var ChipContainer = ({
   dataTestId = DEFAULT_DATA_TEST_ID,
   renderChip,
   getWarningTooltip
-}) => /* @__PURE__ */ jsxs25(
+}) => /* @__PURE__ */ jsxs24(
   Stack_default,
   {
     ref: containerRef,
@@ -11746,7 +11658,7 @@ var ChipContainer = ({
     },
     "data-testid": dataTestId,
     children: [
-      visibleChips.length === 0 && placeholder && /* @__PURE__ */ jsx63(
+      visibleChips.length === 0 && placeholder && /* @__PURE__ */ jsx59(
         Typography_default,
         {
           variant: typographyVariant,
@@ -11758,7 +11670,7 @@ var ChipContainer = ({
       visibleChips.map(
         (value, index) => renderChip({ chipName: value, index })
       ),
-      /* @__PURE__ */ jsx63(
+      /* @__PURE__ */ jsx59(
         ChipHiddenCounter_default,
         {
           hiddenChips,
@@ -11775,7 +11687,7 @@ var ChipContainer_default = ChipContainer;
 
 // src/components/chip/ChipViewer.tsx
 import { Stack as Stack4 } from "@mui/material";
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var CHIP_DATA_TEST_ID = "chip-viewer-chip";
 var CHIP_VIEWER_ROOT_ID = "chip-viewer-root";
 var CHIPS_GAP = 4;
@@ -11783,33 +11695,29 @@ var ROW_HEIGHT = 24;
 var chipViewerStyle = {
   circle: {
     borderRadius: "50px",
-    backgroundColor: Colors_exports.grey200,
-    color: Colors_exports.grey900
+    chipVariant: "darker"
   },
   square: {
     borderRadius: "4px",
-    backgroundColor: Colors_exports.grey100,
-    color: Colors_exports.grey600
+    chipVariant: "dark"
   }
 };
 var ChipViewer = ({
   values: values2 = [],
-  chipSx,
-  chipSize = "S",
-  chipVariant = "default",
   placeholder = "",
   numberLines = 0,
   reserveHeight,
   variant = "circle",
   preventHiddenChipsTooltip,
-  typographyVariant = "body2",
   forceRecalculate = false,
+  slotProps,
   renderChipLabel,
   onRemoveChip,
   onClickChip,
   onHasHiddenChipsChange,
   getWarningTooltip
 }) => {
+  const theme2 = useCustomTheme();
   const rootNodeRef = React31.useRef(null);
   const containerRef = React31.useRef(null);
   const lastDataCalculated = React31.useRef(null);
@@ -12005,6 +11913,7 @@ var ChipViewer = ({
       window.removeEventListener("resize", onWindowResize);
     };
   }, [calculateVisibleChips]);
+  const typographyVariant = slotProps?.typography?.variant ?? "body2";
   const getRenderChip = ({
     chipName,
     index,
@@ -12012,10 +11921,11 @@ var ChipViewer = ({
     isCounterLabel
   }) => {
     const warningTooltip = getWarningTooltip && getWarningTooltip(chipName);
-    return /* @__PURE__ */ jsx64(
+    return /* @__PURE__ */ jsx60(
       Chip_default,
       {
-        variant: chipVariant,
+        ...slotProps?.chip,
+        variant: slotProps?.chip?.variant ?? chipViewerStyle[variant].chipVariant,
         ...!!warningTooltip && {
           iconId: "alert",
           iconColor: complementary600,
@@ -12027,21 +11937,21 @@ var ChipViewer = ({
           "& > span": {
             padding: "8px"
           },
-          border: "none",
+          border: !slotProps?.chip?.variant ? "none" : void 0,
           cursor: onClickChip ? "pointer" : "default",
-          ...chipViewerStyle[variant],
+          borderRadius: chipViewerStyle[variant].borderRadius,
           paddingRight: "8px",
           "& .MuiChip-label": {
             paddingRight: !warningTooltip ? "4px" : "8px"
           },
           "& .MuiChip-deleteIcon > button": {
             padding: 0,
-            color: Colors_exports.grey800
+            color: theme2.palette.grey[800]
           },
-          ...chipSx && { ...chipSx }
+          ...slotProps?.chip?.sx && { ...slotProps.chip.sx }
         },
-        size: chipSize,
-        label: /* @__PURE__ */ jsx64(
+        size: slotProps?.chip?.size ?? "S",
+        label: /* @__PURE__ */ jsx60(
           TextEllipsis_default,
           {
             lines: 1,
@@ -12061,7 +11971,7 @@ var ChipViewer = ({
       `chip-${index}`
     );
   };
-  return /* @__PURE__ */ jsx64(Stack4, { ref: rootNodeRef, "data-testid": CHIP_VIEWER_ROOT_ID, children: /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx60(Stack4, { ref: rootNodeRef, "data-testid": CHIP_VIEWER_ROOT_ID, children: /* @__PURE__ */ jsx60(
     ChipContainer_default,
     {
       containerRef,
@@ -12082,7 +11992,106 @@ var ChipViewer = ({
 };
 var ChipViewer_default = ChipViewer;
 
+// src/components/card/CardChips.tsx
+import { jsx as jsx61 } from "react/jsx-runtime";
+var CardChips = ({ chipLabels }) => /* @__PURE__ */ jsx61(
+  MuiCardContent2,
+  {
+    sx: {
+      p: "0 16px",
+      margin: "16px 0"
+    },
+    children: /* @__PURE__ */ jsx61(
+      ChipViewer_default,
+      {
+        values: chipLabels,
+        slotProps: {
+          chip: {
+            variant: "default",
+            sx: {
+              margin: "5px 5px 0 0"
+            }
+          }
+        }
+      }
+    )
+  }
+);
+var CardChips_default = CardChips;
+
+// src/components/card/CardImage.tsx
+import MuiCardMedia from "@mui/material/CardMedia";
+import { jsx as jsx62 } from "react/jsx-runtime";
+var imageHeights = {
+  sm: "104px",
+  md: "130px"
+};
+var CardImage = ({ imageUrl, size = "md" }) => /* @__PURE__ */ jsx62(
+  MuiCardMedia,
+  {
+    component: "img",
+    image: imageUrl,
+    height: imageHeights[size]
+  }
+);
+var CardImage_default = CardImage;
+
+// src/components/card/CardStatus.tsx
+import { jsx as jsx63 } from "react/jsx-runtime";
+var CardStatus = ({
+  text,
+  animated = false,
+  backgroundColor: backgroundColor2 = "primary.main"
+}) => /* @__PURE__ */ jsx63(
+  Box_default2,
+  {
+    sx: {
+      display: "flex",
+      justifyContent: "right",
+      p: "5px 16px",
+      backgroundColor: backgroundColor2,
+      ...animated && backgroundMovingBars
+    },
+    children: /* @__PURE__ */ jsx63(
+      Typography_default,
+      {
+        sx: { textTransform: "uppercase" },
+        component: "div",
+        color: "white",
+        noWrap: true,
+        children: text
+      }
+    )
+  }
+);
+var CardStatus_default = CardStatus;
+
+// src/components/card/CardTable.tsx
+import { jsx as jsx64, jsxs as jsxs25 } from "react/jsx-runtime";
+var CardTable = ({ rows }) => /* @__PURE__ */ jsx64(Box_default2, { sx: { p: "0 16px" }, children: rows.map((row) => /* @__PURE__ */ jsxs25(
+  Box_default2,
+  {
+    sx: {
+      display: "flex",
+      justifyContent: "space-between",
+      overflow: "hidden",
+      p: "5px 0",
+      borderTopStyle: "solid",
+      borderTopWidth: "1px",
+      borderTopColor: "grey.300"
+    },
+    children: [
+      /* @__PURE__ */ jsx64(Typography_default, { children: row.label }),
+      /* @__PURE__ */ jsx64(Typography_default, { sx: { textAlign: "right", fontWeight: "bold" }, children: row.value })
+    ]
+  },
+  row.label
+)) });
+var CardTable_default = CardTable;
+
 // src/components/card/EnhancedCard.tsx
+import { Stack as Stack5 } from "@mui/material";
+import * as React32 from "react";
 import { Fragment as Fragment9, jsx as jsx65, jsxs as jsxs26 } from "react/jsx-runtime";
 var cardWidthBySize = {
   S: 110,
@@ -23661,10 +23670,13 @@ var ItemSelector = function ItemSelector2({
                   /* @__PURE__ */ jsx131(Stack_default, { flex: 1, minWidth: 0, children: /* @__PURE__ */ jsx131(
                     ChipViewer_default,
                     {
-                      chipSx: {
-                        alignSelf: "center"
+                      slotProps: {
+                        chip: {
+                          sx: {
+                            alignSelf: "center"
+                          }
+                        }
                       },
-                      chipVariant: "dark",
                       values: value,
                       ...!disabled && {
                         onRemoveChip: (event, id) => {
@@ -26867,7 +26879,7 @@ var NavbarButton = React87.forwardRef(
                   color: isActive ? palette2.primary.main : palette2.grey[700],
                   borderRadius: "50%",
                   overflow: "visible",
-                  backgroundColor: isActive ? palette2.primary.opacity32 : "transparent"
+                  backgroundColor: isActive ? palette2.grey[100] : "transparent"
                 }
               }
             )