@groupeactual/ui-kit 0.4.26 → 0.4.27

package/dist/cjs/components/Chip/Chip.d.ts

@@ -1,4 +1,16 @@
 /// <reference types="react" />
 import { ChipProps as ChipPropsMUI } from '@mui/material/Chip';
-declare const Chip: (props: ChipPropsMUI) => JSX.Element;
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+interface Props extends Omit<ChipPropsMUI, 'suffix' | 'prefix' | 'onDelete' | 'onDeleteIcon'> {
+    label: string;
+    size?: 'small';
+    prefixIcon?: IconDefinition;
+    suffixIcon?: IconDefinition;
+    suffixAction?: (e: any) => void;
+    suffixTooltip?: string;
+    tooltip?: string;
+    maxWidth?: number;
+    maxLength?: number;
+}
+declare const Chip: ({ label, prefixIcon, suffixIcon, suffixTooltip, suffixAction, tooltip, size, maxWidth, maxLength, ...props }: Props) => JSX.Element;
 export default Chip;

package/dist/cjs/components/Icon/Icon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactElement } from 'react';
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { BoxProps } from '@mui/material/Box';
 declare const FontSizes: {
@@ -16,5 +16,5 @@ interface Props {
     color?: string;
     size?: number | keyof typeof FontSizes;
 }
-declare const IconProvider: ({ variant, icon, color, size, ...props }: Props & BoxProps) => JSX.Element;
+declare const IconProvider: ({ variant, icon, color, size, ...props }: Props & BoxProps) => ReactElement;
 export default IconProvider;

package/dist/cjs/index.js

@@ -55699,6 +55699,7 @@ var faCircleXmark = {
   iconName: 'circle-xmark',
   icon: [512, 512, [61532, "times-circle", "xmark-circle"], "f057", "M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"]
 };
+var faTimesCircle = faCircleXmark;
 
 var FontSizes = {
     xs: 8,
@@ -55726,7 +55727,9 @@ var FontAwesomeSvgIcon = React.forwardRef(function (_a, ref) {
     svgPathData.map(function (d, i) { return (React__default["default"].createElement("path", { style: { opacity: i === 0 ? 0.4 : 1 }, d: d, key: i })); }))));
 });
 var IconProvider = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? 'none' : _b, icon = _a.icon, _c = _a.color, color = _c === void 0 ? '#136cac' : _c, _d = _a.size, size = _d === void 0 ? 16 : _d, props = __rest(_a, ["variant", "icon", "color", "size"]);
+    var _b = _a.variant, variant = _b === void 0 ? 'none' : _b, icon = _a.icon, _c = _a.color, color = _c === void 0 ? '#136cac' : _c, // blueClickable
+    _d = _a.size, // blueClickable
+    size = _d === void 0 ? 16 : _d, props = __rest(_a, ["variant", "icon", "color", "size"]);
     var getStyles = function () {
         var theme = useTheme$1();
         var usedColor = theme.palette[color]
@@ -55839,8 +55842,56 @@ var Select = function (_a) {
             (error || helperText) && (React__default["default"].createElement(FormHelperText$1, { component: "span", className: error ? 'Mui-error' : '' }, error || helperText)))));
 };
 
-var Chip = function (props) {
-    return React__default["default"].createElement(ChipMUI, __assign$1({}, props));
+var Chip = function (_a) {
+    var _b, _c;
+    var label = _a.label, prefixIcon = _a.prefixIcon, suffixIcon = _a.suffixIcon, suffixTooltip = _a.suffixTooltip, suffixAction = _a.suffixAction, tooltip = _a.tooltip, _d = _a.size, size = _d === void 0 ? 'small' : _d, _e = _a.maxWidth, maxWidth = _e === void 0 ? 300 : _e, _f = _a.maxLength, maxLength = _f === void 0 ? 17 : _f, props = __rest(_a, ["label", "prefixIcon", "suffixIcon", "suffixTooltip", "suffixAction", "tooltip", "size", "maxWidth", "maxLength"]);
+    var theme = useTheme$1();
+    var _g = React.useState(label), currentLabel = _g[0], setCurrentLabel = _g[1];
+    var _h = React.useState(false), isOpen = _h[0], setIsOpen = _h[1];
+    var ref = React.useRef(null);
+    var backgroundColor = props.color && theme.palette[props.color]
+        ? typeof theme.palette[props.color] === 'object'
+            ? theme.palette[props.color]['main']
+            : theme.palette[props.color]
+        : (_b = props.color) !== null && _b !== void 0 ? _b : 'white';
+    if (props.variant === 'filled') {
+        // opacity 0.08
+        backgroundColor = "".concat(backgroundColor, "14");
+    }
+    else {
+        backgroundColor = 'white';
+    }
+    var emptyOnDelete = function () {
+        return null;
+    };
+    // use maxwidth props to set the max width of the chip based on the column width
+    // if a chip is in a table, the width should match the width of the column.
+    React.useEffect(function () {
+        var _a, _b, _c, _d;
+        if (((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) &&
+            ((_b = ref === null || ref === void 0 ? void 0 : ref.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) > maxWidth &&
+            "".concat(label.substring(0, maxLength), "...") !== currentLabel) {
+            setCurrentLabel("".concat(label.substring(0, maxLength), "..."));
+        }
+        else if (((_c = ref === null || ref === void 0 ? void 0 : ref.current) === null || _c === void 0 ? void 0 : _c.offsetWidth) &&
+            ((_d = ref === null || ref === void 0 ? void 0 : ref.current) === null || _d === void 0 ? void 0 : _d.offsetWidth) <= maxWidth &&
+            label === "".concat(label.substring(0, maxLength), "...")) {
+            setCurrentLabel(label);
+        }
+    }, [(_c = ref === null || ref === void 0 ? void 0 : ref.current) === null || _c === void 0 ? void 0 : _c.offsetWidth]);
+    return (React__default["default"].createElement(TooltipMui, { title: tooltip, placement: "right-start" },
+        React__default["default"].createElement(TooltipMui, { title: suffixTooltip, open: isOpen, placement: "bottom-end", sx: { cursor: suffixAction ? 'pointer !important' : 'default' } },
+            React__default["default"].createElement(ChipMUI, __assign$1({ label: currentLabel, ref: ref, size: size, sx: {
+                    backgroundColor: backgroundColor,
+                    '&.MuiChip-colorSecondary:hover': suffixIcon &&
+                        suffixAction && {
+                        backgroundColor: '#004f88 !important'
+                    },
+                    '&.MuiChip-deleteIconColorPrimary:hover': suffixIcon &&
+                        suffixAction && {
+                        backgroundColor: '#004f88 !important'
+                    }
+                }, avatar: prefixIcon ? React__default["default"].createElement(IconProvider, { icon: prefixIcon, size: "sm" }) : React__default["default"].createElement(React__default["default"].Fragment, null), deleteIcon: suffixIcon ? (React__default["default"].createElement(IconProvider, { icon: suffixIcon, onMouseEnter: function () { return suffixTooltip && setIsOpen(true); }, onMouseLeave: function () { return suffixTooltip && setIsOpen(false); }, size: "sm" })) : (React__default["default"].createElement(React__default["default"].Fragment, null)), onDelete: suffixAction !== null && suffixAction !== void 0 ? suffixAction : emptyOnDelete }, props)))));
 };
 
 var MultiSelect = function (_a) {
@@ -55888,7 +55939,7 @@ var MultiSelect = function (_a) {
                         : {}
                 }, multiple: true, label: label, placeholder: label === placeholder ? '' : placeholder, notched: 
                 /* eslint-disable-next-line no-undefined */
-                label === placeholder ? undefined : true, value: values, error: !!error, onChange: handleChange, onBlur: onBlur, renderValue: function (selected) { return (React__default["default"].createElement(Box$1, { sx: { display: 'flex', flexWrap: 'nowrap', gap: 0.5 } }, selected === null || selected === void 0 ? void 0 : selected.map(function (selectedOption, i) { return (React__default["default"].createElement(Chip, { key: i, label: getOptionLabel(selectedOption), onDelete: function () {
+                label === placeholder ? undefined : true, value: values, error: !!error, onChange: handleChange, onBlur: onBlur, renderValue: function (selected) { return (React__default["default"].createElement(Box$1, { sx: { display: 'flex', flexWrap: 'nowrap', gap: 0.5 } }, selected === null || selected === void 0 ? void 0 : selected.map(function (selectedOption, i) { return (React__default["default"].createElement(Chip, { key: i, disabled: props.disabled, variant: "filled", color: "default", label: getOptionLabel(selectedOption), suffixIcon: faTimesCircle, suffixAction: function () {
                         return !props.disabled && handleDeleteChip(selectedOption);
                     }, onMouseDown: function (event) {
                         event.stopPropagation();
@@ -56042,7 +56093,7 @@ var EmbeddedNotification = function (_a) {
 
 var Tooltip = function (_a) {
     var title = _a.title, children = _a.children, props = __rest(_a, ["title", "children"]);
-    return (React__default["default"].createElement(TooltipMui, __assign$1({ title: title }, props, { className: "DsTooltip-root" }),
+    return (React__default["default"].createElement(TooltipMui, __assign$1({ title: React__default["default"].createElement(Text, { variant: "body2Regular", color: "white" }, title) }, props, { className: "DsTooltip-root" }),
         React__default["default"].createElement(IconButton$1, { sx: {
                 padding: 0,
                 '& .MuiBox-root': {
@@ -56678,18 +56729,6 @@ var SelectCss = function (muiTokens) {
         MuiFormControl: {
             styleOverrides: {
                 root: {
-                    '&.Mui-disabled': {
-                        '.MuiChip-deleteIcon': {
-                            color: muiTokens.palette.greyMediumInactive
-                        },
-                        '.MuiChip-root': {
-                            border: '1px solid',
-                            borderColor: muiTokens.palette.greyLightDefaultBorder
-                        },
-                        '.MuiSvgIcon-root': {
-                            color: muiTokens.palette.greyDark + ' !important'
-                        }
-                    },
                     '&.DsSelect': {
                         '& .MuiSelect-select .notranslate::after': {
                             fontWeight: 400,
@@ -56823,9 +56862,28 @@ var ChipCss = function (muiTokens) {
     return {
         MuiChip: {
             styleOverrides: {
+                avatar: {
+                    marginLeft: '-1px',
+                    marginRight: '5px',
+                    color: 'initial'
+                },
                 root: {
                     '& .MuiChip-deleteIcon': {
-                        color: muiTokens.palette.blueClickable
+                        color: muiTokens.palette.blueClickable,
+                        cursor: 'default',
+                        width: 'auto',
+                        height: 'auto'
+                    },
+                    '&.Mui-disabled': {
+                        color: muiTokens.palette.greyDark + ' !important',
+                        backgroundColor: muiTokens.palette.greyXLight + ' !important',
+                        border: '1px solid',
+                        fontWeight: muiTokens.palette.fontWeightRegular,
+                        borderColor: muiTokens.palette.greyLightDefaultBorder,
+                        opacity: 1,
+                        '.MuiChip-deleteIcon': {
+                            color: muiTokens.palette.greyMediumInactive + ' !important'
+                        }
                     },
                     color: muiTokens.palette.greyXDark,
                     backgroundColor: 'transparent',
@@ -56835,10 +56893,18 @@ var ChipCss = function (muiTokens) {
                     paddingLeft: '8px',
                     paddingRight: '8px'
                 },
-                filled: {},
+                filled: {
+                    border: 'none',
+                    fontWeight: 400 + ' !important',
+                    color: muiTokens.palette.greyXDark
+                },
+                outlined: {
+                    border: '1px solid'
+                },
                 label: {
                     padding: 0,
-                    lineHeight: '18px'
+                    lineHeight: '18px',
+                    paddingTop: '1px'
                 },
                 sizeSmall: {
                     height: '24px',
@@ -56852,49 +56918,75 @@ var ChipCss = function (muiTokens) {
                     width: '12px',
                     height: '12px',
                     margin: 0,
-                    marginLeft: '8px'
+                    marginLeft: '8px',
+                    marginRight: '2px'
                 },
                 colorDefault: {
-                    backgroundColor: muiTokens.palette.greyXLight
+                    backgroundColor: muiTokens.palette.greyXLight,
+                    border: 'none',
+                    color: muiTokens.palette.greyXDark
                 },
                 colorPrimary: {
-                    border: '1px solid',
-                    borderColor: muiTokens.palette.greyLightDefaultBorder + ' !important'
+                    borderColor: muiTokens.palette.greyLightDefaultBorder + ' !important',
+                    backgroundColor: muiTokens.palette.white,
+                    '&:hover': {
+                        color: muiTokens.palette.blueClickableHover
+                    }
                 },
                 colorSecondary: {
-                    border: 'none',
                     backgroundColor: muiTokens.palette.blueClickable + ' !important',
-                    color: muiTokens.palette.white,
+                    color: muiTokens.palette.white + ' !important',
                     '& .MuiChip-deleteIcon': {
-                        color: muiTokens.palette.greyXLight + ' !important',
-                        '&:hover': {
-                            color: muiTokens.palette.blueClickableHover
-                        }
+                        color: muiTokens.palette.greyXLight + ' !important'
                     }
                 },
                 colorSuccess: {
                     border: '1px solid',
                     borderColor: muiTokens.palette.greenSuccess + ' !important',
-                    color: muiTokens.palette.greenSuccess + ' !important',
-                    fontWeight: muiTokens.typography.fontWeightBold
+                    color: muiTokens.palette.greenSuccess,
+                    fontWeight: muiTokens.typography.fontWeightBold,
+                    '& .MuiChip-avatar': {
+                        color: muiTokens.palette.greenSuccess + ' !important'
+                    },
+                    '& .MuiChip-deleteIcon': {
+                        color: muiTokens.palette.blueInfo + ' !important'
+                    }
                 },
                 colorWarning: {
                     border: '1px solid',
                     borderColor: muiTokens.palette.orangeWarning + ' !important',
-                    color: muiTokens.palette.orangeWarning + ' !important',
-                    fontWeight: muiTokens.typography.fontWeightBold
+                    color: muiTokens.palette.orangeWarning,
+                    fontWeight: muiTokens.typography.fontWeightBold,
+                    '& .MuiChip-avatar': {
+                        color: muiTokens.palette.orangeWarning + ' !important'
+                    },
+                    '& .MuiChip-deleteIcon': {
+                        color: muiTokens.palette.blueInfo + ' !important'
+                    }
                 },
                 colorInfo: {
                     border: '1px solid',
                     borderColor: muiTokens.palette.blueInfo + ' !important',
-                    color: muiTokens.palette.blueInfo + ' !important',
-                    fontWeight: muiTokens.typography.fontWeightBold
+                    color: muiTokens.palette.blueInfo,
+                    fontWeight: muiTokens.typography.fontWeightBold,
+                    '& .MuiChip-avatar': {
+                        color: muiTokens.palette.blueInfo + ' !important'
+                    },
+                    '& .MuiChip-deleteIcon': {
+                        color: muiTokens.palette.blueInfo + ' !important'
+                    }
                 },
                 colorError: {
                     border: '1px solid',
                     borderColor: muiTokens.palette.redError + ' !important',
-                    color: muiTokens.palette.redError + ' !important',
-                    fontWeight: muiTokens.typography.fontWeightBold
+                    color: muiTokens.palette.redError,
+                    fontWeight: muiTokens.typography.fontWeightBold,
+                    '& .MuiChip-avatar': {
+                        color: muiTokens.palette.redError + ' !important'
+                    },
+                    '& .MuiChip-deleteIcon': {
+                        color: muiTokens.palette.blueInfo + ' !important'
+                    }
                 }
             }
         }