@groupeactual/ui-kit 1.7.10 → 2.0.0-beta.0

package/src/components/Tooltip/Tooltip.tsx

@@ -16,59 +16,62 @@ interface Props extends Omit<TooltipProps, 'icon' | 'children' | 'placement'> {
   placementMargin?: number;
 }
 
-const Tooltip = ({
-  title,
-  placement = 'right',
-  children,
-  placementMargin = 4,
-  ...tooltipProps
-}: Props) => {
-  if (!title) {
-    return <>{children}</>;
-  }
+const Tooltip = React.forwardRef<HTMLDivElement, Props>(
+  (
+    { title, placement = 'right', children, placementMargin = 4, ...props },
+    ref,
+  ) => {
+    if (!title) {
+      return <>{children}</>;
+    }
 
-  return (
-    <TooltipMui
-      title={<>{title}</>}
-      {...tooltipProps}
-      sx={{
-        display: 'inline-flex',
-        ...tooltipProps.sx,
-      }}
-      placement={placement || undefined}
-      slotProps={{
-        popper: {
-          sx: {
-            [`&.${tooltipClasses.popper} .MuiTooltip-tooltip`]: {
-              backgroundColor: 'greyXDark',
-              padding: '4px !important',
-              fontSize: '12px !important',
-              color: 'white',
-              fontWeight: 400,
-            },
-            [`&.${tooltipClasses.popper}[data-popper-placement*="bottom"] .${tooltipClasses.tooltip}`]:
-              {
-                marginTop: placementMargin + 'px',
-              },
-            [`&.${tooltipClasses.popper}[data-popper-placement*="top"] .${tooltipClasses.tooltip}`]:
-              {
-                marginBottom: placementMargin + 'px',
-              },
-            [`&.${tooltipClasses.popper}[data-popper-placement*="right"] .${tooltipClasses.tooltip}`]:
-              {
-                marginLeft: placementMargin + 'px',
-              },
-            [`&.${tooltipClasses.popper}[data-popper-placement*="left"] .${tooltipClasses.tooltip}`]:
-              {
-                marginRight: placementMargin + 'px',
+    return (
+      <TooltipMui
+        {...props}
+        data-testid="ds-tooltip"
+        title={<>{title}</>}
+        ref={ref}
+        sx={{
+          display: 'inline-flex',
+          ...props.sx,
+        }}
+        placement={placement || undefined}
+        slotProps={{
+          popper: {
+            sx: {
+              [`&.${tooltipClasses.popper} .MuiTooltip-tooltip`]: {
+                backgroundColor: 'greyXDark',
+                padding: '4px !important',
+                fontSize: '12px !important',
+                color: 'white',
+                fontWeight: 400,
               },
+              [`&.${tooltipClasses.popper}[data-popper-placement*="bottom"] .${tooltipClasses.tooltip}`]:
+                {
+                  marginTop: placementMargin + 'px',
+                },
+              [`&.${tooltipClasses.popper}[data-popper-placement*="top"] .${tooltipClasses.tooltip}`]:
+                {
+                  marginBottom: placementMargin + 'px',
+                },
+              [`&.${tooltipClasses.popper}[data-popper-placement*="right"] .${tooltipClasses.tooltip}`]:
+                {
+                  marginLeft: placementMargin + 'px',
+                },
+              [`&.${tooltipClasses.popper}[data-popper-placement*="left"] .${tooltipClasses.tooltip}`]:
+                {
+                  marginRight: placementMargin + 'px',
+                },
+            },
           },
-        },
-      }}
-    >
-      <Box component="span">{children}</Box>
-    </TooltipMui>
-  );
-};
+        }}
+      >
+        <Box component="span">{children}</Box>
+      </TooltipMui>
+    );
+  },
+);
+
+Tooltip.displayName = 'Tooltip';
 
 export default Tooltip;

package/src/components/index.ts

@@ -17,11 +17,11 @@ export { default as EmbeddedNotification } from './EmbbededNotification/Embedded
 export { default as Tooltip } from './Tooltip/Tooltip';
 export { default as AutoCompleteSingle } from './Form/AutoCompleteSingle';
 export { default as AutoCompleteMulti } from './Form/AutoCompleteMulti';
-export { default as FileUploader } from './UploadDocument/FileUploader';
+export { default as FileUploader } from './FileUploader/FileUploader';
 export type {
   AcceptTextType,
   FileDataType,
-} from './UploadDocument/fileuploader.interface';
+} from './FileUploader/fileuploader.interface';
 export { default as MenuItem } from './MenuItem/MenuItem';
 export { default as Snackbar } from './Snackbar/Snackbar';
 export { default as NotistackAdapter } from './NotistackAdapter/NotistackAdapter';
@@ -35,3 +35,4 @@ export { default as TimePicker } from './Form/TimePicker';
 export { default as Datatable } from './Datatable/Datatable';
 export { default as DatatableCellRender } from './Datatable/DatatableCellRender';
 export { default as IconButton } from './IconButton/IconButton';
+export { default as TabsPanel } from './TabsPanel';

package/src/index.ts

@@ -2,4 +2,3 @@ export * from './components';
 export { default as DesignSystemProvider } from './DesignSystemProvider';
 export { DesignSystemContext } from './DesignSystemProvider';
 export { type DesignSystemContextValues } from './DesignSystemProvider';
-export { type PaletteDS } from './interfaces/theme';

package/dist/es/src/components/Datatable/Datatable.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { Props } from './datatable.interface';
-declare const Datatable: <T extends object>({ onLoad, onSort, sortInfo, withHeader, withPagination, columns, isTableLayoutFixed, ...props }: Props<T>) => React.JSX.Element;
-export default Datatable;

package/dist/es/src/components/Form/AutoCompleteMulti/AutoCompleteMulti.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-import { type AutocompleteProps } from '@mui/material';
-interface AutocompleteMultipleSelectProps<T> extends Omit<AutocompleteProps<T, true, true, false>, 'onChange' | 'value' | 'options' | 'renderInput' | 'error' | 'autocomplete' | 'searchIcon'> {
-    value: T[] | undefined;
-    label?: string;
-    helperText?: string;
-    placeholder?: string;
-    options: T[];
-    getOptionLabel: (_option: T) => string;
-    getKeyValue: (_option: T) => string;
-    onChange: (_value: T[]) => void;
-    getOptionDisabled?: (_option: T) => boolean;
-    color?: 'success';
-    width?: number | string;
-    error?: string;
-    searchIcon?: boolean;
-}
-declare const AutocompleteMultipleSelect: <T>({ value, label, placeholder, options, disabled, getOptionLabel, getKeyValue, onChange, getOptionDisabled, width, color, helperText, error, searchIcon, ...props }: AutocompleteMultipleSelectProps<T>) => React.JSX.Element;
-export default AutocompleteMultipleSelect;

package/dist/es/src/components/Form/Checkbox/Checkbox.d.ts

@@ -1,14 +0,0 @@
-import React, { ReactNode } from 'react';
-import { CheckboxProps } from '@mui/material';
-interface Props {
-    name: string;
-    value: boolean;
-    label: ReactNode;
-    onChange?: (_field: string, _value: boolean, _shouldValidate?: boolean | undefined) => void;
-    helperText?: string;
-    error?: string;
-    infoBubbleContent?: string;
-    infoBubblePosition?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-end' | 'bottom-start' | 'left-end' | 'left-start' | 'right-end' | 'right-start' | 'top-end' | 'top-start' | undefined;
-}
-declare const Checkbox: ({ name, value, error, helperText, label, infoBubbleContent, infoBubblePosition, onChange, disabled, ...props }: CheckboxProps & Props) => React.JSX.Element;
-export default Checkbox;

package/dist/es/src/components/Form/CheckboxGroup/CheckboxGroup.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { CheckboxItemType } from './checkboxgroup.interface';
-interface CheckboxGroupProps {
-    label: string;
-    options: CheckboxItemType[];
-    disabled?: boolean;
-    error?: string;
-    helperText?: string;
-    onChange?: (_selectedOptions: Record<string, boolean>) => void;
-}
-declare const CheckboxGroup: ({ options, label, disabled, error, helperText, onChange, }: CheckboxGroupProps) => React.JSX.Element;
-export default CheckboxGroup;

package/dist/es/src/components/Form/CheckboxGroup/checkboxgroup.interface.d.ts

@@ -1,8 +0,0 @@
-import { ReactNode } from 'react';
-export interface CheckboxItemType {
-    label: ReactNode;
-    value: boolean;
-    name: string;
-    infoBubbleContent?: string;
-    infoBubblePosition?: 'right' | 'bottom' | 'left' | 'top' | 'bottom-end' | 'bottom-start' | 'left-end' | 'left-start' | 'right-end' | 'right-start' | 'top-end' | 'top-start' | undefined;
-}

package/dist/es/src/components/Form/RadioGroup/RadioGroup.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import { RadioGroupProps } from '@mui/material';
-interface ItemType<T> {
-    label: string;
-    value: T;
-    infoBubbleContent?: string;
-    infoBubblePosition?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-end' | 'bottom-start' | 'left-end' | 'left-start' | 'right-end' | 'right-start' | 'top-end' | 'top-start' | undefined;
-}
-interface Props<T> extends Omit<RadioGroupProps, 'onChange'> {
-    label: string;
-    options: ItemType<T>[];
-    onChange: (_value: T) => void;
-    error?: string;
-    helperText?: string;
-    disabled?: boolean;
-}
-declare const RadioGroup: <T>({ options, value, label, onChange, helperText, disabled, error, ...props }: Props<T>) => React.JSX.Element;
-export default RadioGroup;

package/dist/es/src/components/Form/Switch/Switch.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { SwitchProps } from '@mui/material';
-interface Props {
-    label: string;
-    checked: boolean;
-    leftSideLabel?: string;
-    onClick: () => void;
-}
-declare const Switch: ({ label, checked, leftSideLabel, onClick, ...props }: SwitchProps & Props) => React.JSX.Element;
-export default Switch;

package/dist/es/src/components/IconProvider/IconProvider.d.ts

@@ -1,19 +0,0 @@
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { BoxProps } from '@mui/material';
-declare const FontSizes: {
-    xs: number;
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
-    xxl: number;
-    xxxl: number;
-};
-interface Props {
-    variant?: 'square' | 'none';
-    icon: IconDefinition;
-    color?: string;
-    size?: number | keyof typeof FontSizes;
-}
-declare const IconProvider: ({ variant, icon, color, size, sx, ...props }: Props & BoxProps) => JSX.Element;
-export default IconProvider;

package/dist/es/src/components/MenuItem/MenuItem.d.ts

@@ -1,10 +0,0 @@
-import React, { ReactNode } from 'react';
-import { MenuItemProps } from '@mui/material';
-interface Props extends Omit<MenuItemProps, 'onClick'> {
-    onClick: (_event?: React.MouseEvent<HTMLElement>) => void;
-    children: NonNullable<ReactNode>;
-    testId?: string;
-    disabled?: boolean;
-}
-declare const MenuItem: ({ onClick, children, testId, disabled, ...props }: Props) => React.JSX.Element;
-export default MenuItem;

package/dist/es/src/components/Modal/Dialog/Dialog.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ModalProps } from '@/components/Modal/modal.interface';
-declare const Dialog: ({ title, open, onClose, children, icon, ...props }: Omit<ModalProps, "footer" | "cardProps" | "size" | "component">) => React.JSX.Element;
-export default Dialog;

package/dist/es/src/components/Modal/Drawer/Drawer.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { DrawerProps } from '@/components/Modal/modal.interface';
-declare const Drawer: ({ title, open, hideCloseButton, titleLeftComponent, footer, cardProps, size, children, onClose, ...props }: DrawerProps) => React.JSX.Element;
-export default Drawer;

package/dist/es/src/components/Text/Text.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { TypographyProps } from '@mui/material';
-interface Props extends Omit<TypographyProps, 'variant'> {
-    variant?: 'bigNumber' | 'body1' | 'body1Regular' | 'body1Medium' | 'body1Bold' | 'body2' | 'body2Regular' | 'body2Medium' | 'body2Bold' | 'caption' | 'buttonNotif' | 'header1' | 'header2' | 'header3' | 'header4' | 'h1' | 'h2' | 'h3' | 'h4' | 'link1' | 'link2';
-    component?: any;
-}
-declare const Text: (props: Props) => React.JSX.Element;
-export default Text;

package/dist/es/src/index.d.ts

@@ -1,5 +0,0 @@
-export * from './components';
-export { default as DesignSystemProvider } from './DesignSystemProvider';
-export { DesignSystemContext } from './DesignSystemProvider';
-export { type DesignSystemContextValues } from './DesignSystemProvider';
-export { type PaletteDS } from './interfaces/theme';

package/dist/es/src/interfaces/theme.d.ts

@@ -1,51 +0,0 @@
-export interface PaletteDS {
-    redActual: string;
-    blueClickable: string;
-    blueHoverClickable: string;
-    greyMediumInactive: string;
-    greyXDark: string;
-    greyDark: string;
-    white: string;
-    greyXLight: string;
-    greyXDarkBgModal: string;
-    blueHoverEquivalence: string;
-    blueHoverOpacity12: string;
-    greyLightDefaultBorder: string;
-    blueInfo: string;
-    greenSuccess: string;
-    redError: string;
-    orangeWarning: string;
-    blueDark: string;
-    blueMedium: string;
-    blueLight: string;
-    greenDark: string;
-    greenMedium: string;
-    green: string;
-    brown: string;
-    greenLight: string;
-    orangeLight: string;
-    yellow: string;
-    purpleDark: string;
-    purple: string;
-    pink: string;
-    pinkLight: string;
-    primary: {
-        main: string;
-        dark: string;
-    };
-    secondary: {
-        main: string;
-    };
-    success: {
-        main: string;
-    };
-    error: {
-        main: string;
-    };
-    warning: {
-        main: string;
-    };
-    infos: {
-        main: string;
-    };
-}