@groupeactual/ui-kit 0.4.26 → 0.4.27

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TypographyProps, LinkProps, BoxProps as BoxProps$1, TooltipProps } from '@mui/material';
-import React, { ReactNode, FocusEventHandler, MouseEventHandler, PropsWithChildren } from 'react';
+import React, { ReactNode, FocusEventHandler, MouseEventHandler, ReactElement, PropsWithChildren } from 'react';
 import { ButtonProps } from '@mui/material/Button';
 import { TextFieldProps } from '@mui/material/TextField';
 import { InputProps } from '@mui/material/Input/Input';
@@ -11,25 +11,25 @@ import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { BoxProps } from '@mui/material/Box';
 import { ChipProps } from '@mui/material/Chip';
 
-interface Props$c extends Omit<TypographyProps, 'variant'> {
+interface Props$d extends Omit<TypographyProps, 'variant'> {
     variant?: 'bigNumber' | 'body1Regular' | 'body1Medium' | 'body1Bold' | 'body2Regular' | 'body2Medium' | 'body2Bold' | 'caption' | 'buttonNotif' | 'header1' | 'header2' | 'header3' | 'header4';
     component?: any;
 }
-declare const Text: (props: Props$c) => JSX.Element;
+declare const Text: (props: Props$d) => JSX.Element;
 
-interface Props$b extends Omit<LinkProps, 'variant'> {
+interface Props$c extends Omit<LinkProps, 'variant'> {
     variant?: 'link1' | 'link2';
     component?: any;
 }
-declare const Link: (props: Props$b) => JSX.Element;
+declare const Link: (props: Props$c) => JSX.Element;
 
-interface Props$a extends Omit<ButtonProps, 'variant' | 'children'> {
+interface Props$b extends Omit<ButtonProps, 'variant' | 'children'> {
     variant?: 'primary' | 'secondary';
     children?: ReactNode;
 }
-declare const Button: ({ variant, children, ...props }: Props$a) => JSX.Element;
+declare const Button: ({ variant, children, ...props }: Props$b) => JSX.Element;
 
-interface Props$9 extends Omit<TextFieldProps, 'error'> {
+interface Props$a extends Omit<TextFieldProps, 'error'> {
     error?: string;
     onBlur?: FocusEventHandler<unknown>;
     onChange?: InputProps['onChange'];
@@ -41,9 +41,9 @@ interface Props$9 extends Omit<TextFieldProps, 'error'> {
     endAdornment?: ReactNode;
     maxLength?: number;
 }
-declare const TextField: ({ name, value, error, onBlur, onChange, label, disabled, endAdornment, placeholder, maxLength, ...props }: Props$9) => JSX.Element;
+declare const TextField: ({ name, value, error, onBlur, onChange, label, disabled, endAdornment, placeholder, maxLength, ...props }: Props$a) => JSX.Element;
 
-interface Props$8<T> extends Omit<SelectProps<T>, 'value' | 'onChange' | 'defaultValue' | 'color'> {
+interface Props$9<T> extends Omit<SelectProps<T>, 'value' | 'onChange' | 'defaultValue' | 'color'> {
     label?: string;
     helperText?: string;
     options: T[];
@@ -53,9 +53,9 @@ interface Props$8<T> extends Omit<SelectProps<T>, 'value' | 'onChange' | 'defaul
     defaultValue?: T | undefined;
     width?: number;
 }
-declare const Select: <T extends {}>({ label, defaultValue, options, color, error, placeholder, onChange, getOptionLabel, helperText, onBlur, width, ...props }: Props$8<T>) => JSX.Element;
+declare const Select: <T extends {}>({ label, defaultValue, options, color, error, placeholder, onChange, getOptionLabel, helperText, onBlur, width, ...props }: Props$9<T>) => JSX.Element;
 
-interface Props$7<T> extends Omit<SelectProps<T[]>, 'value' | 'onChange' | 'defaultValue' | 'color'> {
+interface Props$8<T> extends Omit<SelectProps<T[]>, 'value' | 'onChange' | 'defaultValue' | 'color'> {
     label: string;
     options: T[];
     helperText?: string;
@@ -65,25 +65,25 @@ interface Props$7<T> extends Omit<SelectProps<T[]>, 'value' | 'onChange' | 'defa
     defaultValue?: T[];
     width?: number;
 }
-declare const MultiSelect: <T extends {}>({ label, options, color, error, placeholder, width, defaultValue, getOptionLabel, helperText, onChange, onBlur, ...props }: Props$7<T>) => JSX.Element;
+declare const MultiSelect: <T extends {}>({ label, options, color, error, placeholder, width, defaultValue, getOptionLabel, helperText, onChange, onBlur, ...props }: Props$8<T>) => JSX.Element;
 
-interface Props$6 {
+interface Props$7 {
     name: string;
     value: boolean;
     label: string;
     onChange?: (field: string, value: any, shouldValidate?: boolean | undefined) => void;
     error?: string;
 }
-declare const Checkbox: ({ name, value, error, label, onChange, ...props }: CheckboxProps & Props$6) => JSX.Element;
+declare const Checkbox: ({ name, value, error, label, onChange, ...props }: CheckboxProps & Props$7) => JSX.Element;
 
-interface Props$5 extends AccordionProps {
+interface Props$6 extends AccordionProps {
     icon: ReactNode;
     title?: string;
     summaryHeight?: number;
     expanded?: boolean;
     onClick?: MouseEventHandler;
 }
-declare const Accordion: ({ icon, title, summaryHeight, expanded, onClick, children, ...props }: Props$5) => JSX.Element;
+declare const Accordion: ({ icon, title, summaryHeight, expanded, onClick, children, ...props }: Props$6) => JSX.Element;
 
 declare const FontSizes: {
     xs: number;
@@ -94,15 +94,15 @@ declare const FontSizes: {
     xxl: number;
     xxxl: number;
 };
-interface Props$4 {
+interface Props$5 {
     variant?: 'square' | 'none';
     icon: IconDefinition;
     color?: string;
     size?: number | keyof typeof FontSizes;
 }
-declare const IconProvider: ({ variant, icon, color, size, ...props }: Props$4 & BoxProps) => JSX.Element;
+declare const IconProvider: ({ variant, icon, color, size, ...props }: Props$5 & BoxProps) => ReactElement;
 
-interface Props$3 {
+interface Props$4 {
     totalString: string;
     totalPerPageString: string;
     totalPages: number;
@@ -112,9 +112,20 @@ interface Props$3 {
     page?: number;
     limit?: number;
 }
-declare const Pagination: ({ totalString, totalPerPageString, totalPages, limitsPerPage, setLimit, setPage, page, limit }: Props$3) => JSX.Element;
+declare const Pagination: ({ totalString, totalPerPageString, totalPages, limitsPerPage, setLimit, setPage, page, limit }: Props$4) => JSX.Element;
 
-declare const Chip: (props: ChipProps) => JSX.Element;
+interface Props$3 extends Omit<ChipProps, '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$3) => JSX.Element;
 
 interface Props$2 extends BoxProps$1 {
     variant: 'warning' | 'error' | 'success' | 'infos';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "0.4.26",
+  "version": "0.4.27",
   "description": "A simple template for a custom React component library",
   "devDependencies": {
     "@babel/core": "^7.20.5",

package/src/components/Chip/Chip.tsx

@@ -1,9 +1,125 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { ChipProps as ChipPropsMUI } from '@mui/material/Chip';
-import { Chip as ChipMUI } from '@mui/material';
+import { Chip as ChipMUI, Tooltip } from '@mui/material';
+import { useTheme } from '@mui/system';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 
-const Chip = (props: ChipPropsMUI) => {
-  return <ChipMUI {...(props as ChipPropsMUI)} />;
+import IconProvider from '../Icon';
+
+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;
+}
+
+const Chip = ({
+  label,
+  prefixIcon,
+  suffixIcon,
+  suffixTooltip,
+  suffixAction,
+  tooltip,
+  size = 'small',
+  maxWidth = 300,
+  maxLength = 17,
+  ...props
+}: Props) => {
+  const theme = useTheme();
+  const [currentLabel, setCurrentLabel] = useState<string>(label);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  let backgroundColor: string =
+    props.color && theme.palette[props.color]
+      ? typeof theme.palette[props.color] === 'object'
+        ? theme.palette[props.color]['main']
+        : theme.palette[props.color]
+      : props.color ?? 'white';
+
+  if (props.variant === 'filled') {
+    // opacity 0.08
+    backgroundColor = `${backgroundColor}14`;
+  } else {
+    backgroundColor = 'white';
+  }
+
+  const emptyOnDelete = () => {
+    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.
+  useEffect(() => {
+    if (
+      ref?.current?.offsetWidth &&
+      ref?.current?.offsetWidth > maxWidth &&
+      `${label.substring(0, maxLength)}...` !== currentLabel
+    ) {
+      setCurrentLabel(`${label.substring(0, maxLength)}...`);
+    } else if (
+      ref?.current?.offsetWidth &&
+      ref?.current?.offsetWidth <= maxWidth &&
+      label === `${label.substring(0, maxLength)}...`
+    ) {
+      setCurrentLabel(label);
+    }
+  }, [ref?.current?.offsetWidth]);
+
+  return (
+    <Tooltip title={tooltip} placement="right-start">
+      <Tooltip
+        title={suffixTooltip}
+        open={isOpen}
+        placement="bottom-end"
+        sx={{ cursor: suffixAction ? 'pointer !important' : 'default' }}
+      >
+        <ChipMUI
+          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 ? <IconProvider icon={prefixIcon} size="sm" /> : <></>
+          }
+          deleteIcon={
+            suffixIcon ? (
+              <IconProvider
+                icon={suffixIcon}
+                onMouseEnter={() => suffixTooltip && setIsOpen(true)}
+                onMouseLeave={() => suffixTooltip && setIsOpen(false)}
+                size="sm"
+              />
+            ) : (
+              <></>
+            )
+          }
+          onDelete={suffixAction ?? emptyOnDelete}
+          {...props}
+        />
+      </Tooltip>
+    </Tooltip>
+  );
 };
 
 export default Chip;

package/src/components/Form/MultiSelect/MultiSelect.tsx

@@ -1,4 +1,4 @@
-import React, { BaseSyntheticEvent, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { FormHelperText, InputLabel, MenuItem } from '@mui/material';
 import Box from '@mui/material/Box';
 import FormControl from '@mui/material/FormControl';
@@ -6,7 +6,11 @@ import MuiSelect, {
   SelectChangeEvent,
   SelectProps
 } from '@mui/material/Select';
-import { faChevronDown, faCheck } from '@fortawesome/pro-solid-svg-icons';
+import {
+  faChevronDown,
+  faCheck,
+  faTimesCircle
+} from '@fortawesome/pro-solid-svg-icons';
 import Icon from '../../Icon';
 import Chip from '../../Chip/Chip';
 
@@ -111,8 +115,12 @@ const MultiSelect = <T extends {}>({
               {selected?.map((selectedOption: T, i) => (
                 <Chip
                   key={i}
+                  disabled={props.disabled}
+                  variant="filled"
+                  color="default"
                   label={getOptionLabel(selectedOption)}
-                  onDelete={() =>
+                  suffixIcon={faTimesCircle}
+                  suffixAction={() =>
                     !props.disabled && handleDeleteChip(selectedOption)
                   }
                   onMouseDown={(event) => {

package/src/components/Icon/Icon.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, ReactElement } from 'react';
 import SvgIcon from '@mui/material/SvgIcon';
 import { SxProps, Theme } from '@mui/material/styles';
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
@@ -64,10 +64,10 @@ const FontAwesomeSvgIcon = forwardRef<SVGSVGElement, FontAwesomeSvgIconProps>(
 const IconProvider = ({
   variant = 'none',
   icon,
-  color = '#136cac',
+  color = '#136cac', // blueClickable
   size = 16,
   ...props
-}: Props & BoxProps) => {
+}: Props & BoxProps): ReactElement => {
   const getStyles = (): SxProps<Theme> => {
     const theme = useTheme();
     const usedColor = theme.palette[color]

package/src/components/Tooltip/Tooltip.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { IconButton, Tooltip as TooltipMui, TooltipProps } from '@mui/material';
+import Text from '../Text/Text';
 
 interface Props extends Omit<TooltipProps, 'icon' | 'children'> {
   title: string;
@@ -7,7 +8,15 @@ interface Props extends Omit<TooltipProps, 'icon' | 'children'> {
 }
 
 const Tooltip = ({ title, children, ...props }: Props) => (
-  <TooltipMui title={title} {...props} className="DsTooltip-root">
+  <TooltipMui
+    title={
+      <Text variant="body2Regular" color="white">
+        {title}
+      </Text>
+    }
+    {...props}
+    className="DsTooltip-root"
+  >
     <IconButton
       sx={{
         padding: 0,