@am92/react-design-system 2.9.6 → 2.9.7

package/dist/Components/DsLink/DsLink.Overrides.d.ts

@@ -6,6 +6,10 @@ export declare const DsLinkOverrides: {
                 cursor: string;
                 textDecorationColor: string;
                 textUnderlinePosition: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
                 '&:visited': {
                     color: string;
                     textDecorationColor: string;
@@ -25,6 +29,7 @@ export declare const DsLinkOverrides: {
                 };
                 '&:focus': {
                     textDecoration: string;
+                    textDecorationThickness: string;
                 };
             };
         };

package/dist/Components/DsLink/DsLink.Overrides.js

@@ -7,6 +7,10 @@ export const DsLinkOverrides = {
                 cursor: 'pointer',
                 textDecorationColor: 'var(--ds-colour-actionSecondary)',
                 textUnderlinePosition: 'under',
+                fontWeight: 'var(--ds-typo-bodyRegularSmall-fontWeight)',
+                fontSize: 'var(--ds-typo-bodyRegularSmall-fontSize)',
+                lineHeight: 'var(--ds-typo-bodyRegularSmall-lineHeight)',
+                letterSpacing: 'var(--ds-typo-bodyRegularSmall-letterSpacing)',
                 '&:visited': {
                     color: 'var(--ds-colour-stateSelectedVisitedTextLink)',
                     textDecorationColor: 'var(--ds-colour-stateSelectedVisitedTextLink)'
@@ -25,7 +29,8 @@ export const DsLinkOverrides = {
                     textDecorationColor: 'var(--ds-colour-typoDisabled)'
                 },
                 '&:focus': {
-                    textDecoration: 'underline'
+                    textDecoration: 'underline',
+                    textDecorationThickness: '2px',
                 }
             }
         }

package/dist/Components/DsTooltip/DsTooltip.Component.d.ts

@@ -1,3 +1,4 @@
-import { FC } from 'react';
+import React from 'react';
 import { DsTooltipProps } from './DsTooltip.Types';
-export declare const DsTooltip: FC<DsTooltipProps>;
+export declare const CustomTooltip: <TWrapper extends React.ElementType = React.ElementType<any, keyof React.JSX.IntrinsicElements>>(InProps: DsTooltipProps<TWrapper>) => import("react/jsx-runtime").JSX.Element;
+export declare const DsTooltip: <TWrapper extends React.ElementType = React.ElementType<any, keyof React.JSX.IntrinsicElements>>(InProps: DsTooltipProps<TWrapper>) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/DsTooltip/DsTooltip.Component.js

@@ -1,21 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import Tooltip from '@mui/material/Tooltip';
+import { DsTooltipDefaultProps } from './DsTooltip.Types';
 import { DsTypography } from '../DsTypography';
-import { DsLink } from '../DsLink';
-export const DsTooltip = (props) => {
+export const CustomTooltip = (InProps) => {
+    const props = { ...DsTooltipDefaultProps, ...InProps };
     const renderTitle = () => {
-        const { heading, description, buttonGroup } = props;
-        const tooltipButtonGroup = buttonGroup
-            ? React.cloneElement(buttonGroup, {
-                size: 'small',
-                fullWidth: true,
-                noPadding: true,
-                sx: { bgcolor: 'transparent', mt: 'var(--ds-spacing-bitterCold)' }
-            })
-            : false;
-        return (_jsxs(_Fragment, { children: [heading && (_jsx(DsTypography, { component: "div", variant: "bodyBoldMedium", sx: { mb: 'var(--ds-spacing-glacial)' }, children: heading })), description && (_jsx(DsTypography, { component: "div", variant: "bodyRegularMedium", children: description })), tooltipButtonGroup] }));
+        const { heading, description } = props;
+        return (_jsxs(_Fragment, { children: [heading && (_jsx(DsTypography, { component: 'div', variant: 'bodyBoldMedium', sx: { mb: 'var(--ds-spacing-glacial)' }, children: heading })), description && (_jsx(DsTypography, { component: 'div', variant: 'bodyRegularMedium', children: description }))] }));
     };
-    const { heading, description, buttonGroup, children, ...tooltipProps } = props;
-    return (_jsx(Tooltip, { title: renderTitle(), ...tooltipProps, children: _jsx(DsLink, { component: "span", underline: "always", color: "inherit", variant: "inherit", sx: { textDecorationColor: 'inherit' }, children: children }) }));
+    const { heading, description, slots, slotProps, children, ...tooltipProps } = props;
+    const WrapperComponent = slots?.wrapper || React.Fragment;
+    const wrapperProps = slotProps?.wrapper || {};
+    return (_jsx(Tooltip, { title: renderTitle(), ...tooltipProps, children: _jsx(WrapperComponent, { ...wrapperProps, children: children || null }) }));
 };
+export const DsTooltip = CustomTooltip;

package/dist/Components/DsTooltip/DsTooltip.Overrides.d.ts

@@ -1,6 +1,6 @@
 export declare const DsTooltipOverrides: {
     MuiTooltip: {
-        defaultProps: import("./DsTooltip.Types").DsTooltipProps;
+        defaultProps: import("./DsTooltip.Types").DsTooltipProps<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").LinkTypeMap<{}, "a">>>;
         styleOverrides: {
             popper: {
                 '&[data-popper-placement*="bottom"]': {

package/dist/Components/DsTooltip/DsTooltip.Types.d.ts

@@ -1,7 +1,35 @@
 import { TooltipProps } from '@mui/material';
-export interface DsTooltipProps extends Omit<TooltipProps, 'title'> {
+import { DsLink } from '../DsLink';
+type DsTooltipSlots<TWrapper extends React.ElementType = React.ElementType> = TooltipProps['slots'] & {
+    /** This is a slot is used to provide custom component to the wrapping parent of the tooltip children */
+    wrapper?: TWrapper;
+};
+type DsTooltipSlotProps<TWrapper extends React.ElementType = React.ElementType> = TooltipProps['slotProps'] & {
+    /** This is a slot is used to provide props to the custom wrapping parent of the tooltip children */
+    wrapper?: React.ComponentProps<TWrapper>;
+};
+export type DsTooltipProps<TWrapper extends React.ElementType = React.ElementType> = Omit<TooltipProps, 'title' | 'slots' | 'slotProps'> & {
+    /** This prop can be used to provide a heading to the tooltip */
     heading?: string;
+    /** This prop can be used to provide a description to the tooltip */
     description?: string;
-    buttonGroup?: React.ReactElement;
-}
-export declare const DsTooltipDefaultProps: DsTooltipProps;
+    /**
+     * The components used for each slot inside.
+     *
+     * This prop is an alias for the `components` prop, which will be deprecated in the future.
+     *
+     * @default {}
+     */
+    slots?: DsTooltipSlots<TWrapper>;
+    /**
+     * The extra props for the slot components.
+     * You can override the existing props or add new ones.
+     *
+     * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+     *
+     * @default {}
+     */
+    slotProps?: DsTooltipSlotProps<TWrapper>;
+};
+export declare const DsTooltipDefaultProps: DsTooltipProps<typeof DsLink>;
+export {};

package/dist/Components/DsTooltip/DsTooltip.Types.js

@@ -1,8 +1,20 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { DsLink } from '../DsLink';
 export const DsTooltipDefaultProps = {
     arrow: true,
-    placement: 'top-start',
+    placement: 'top',
     enterTouchDelay: 0,
     leaveTouchDelay: 4000,
-    children: _jsx(_Fragment, {})
+    children: _jsx(_Fragment, {}),
+    slots: {
+        wrapper: DsLink
+    },
+    slotProps: {
+        wrapper: {
+            color: 'inherit',
+            variant: 'inherit',
+            underline: 'always',
+            sx: { textDecorationColor: 'inherit' }
+        }
+    }
 };

package/dist/Theme/componentOverrides.d.ts

@@ -288,7 +288,7 @@ declare const componentOverrides: {
         defaultProps: import("../Components").DsTypographyProps;
     };
     MuiTooltip: {
-        defaultProps: import("../Components").DsTooltipProps;
+        defaultProps: import("../Components").DsTooltipProps<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").LinkTypeMap<{}, "a">>>;
         styleOverrides: {
             popper: {
                 '&[data-popper-placement*="bottom"]': {
@@ -769,6 +769,10 @@ declare const componentOverrides: {
                 cursor: string;
                 textDecorationColor: string;
                 textUnderlinePosition: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
                 '&:visited': {
                     color: string;
                     textDecorationColor: string;
@@ -788,6 +792,7 @@ declare const componentOverrides: {
                 };
                 '&:focus': {
                     textDecoration: string;
+                    textDecorationThickness: string;
                 };
             };
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@am92/react-design-system",
-  "version": "2.9.6",
+  "version": "2.9.7",
   "description": "ReactJS Design System using Material UI",
   "sideEffects": false,
   "types": "dist/index.d.ts",