@ssa-ui-kit/core 0.0.24-alpha → 0.0.26-alpha

package/src/components/Tooltip/ProgressChartTooltip.tsx

@@ -3,7 +3,7 @@ import Icon from '@components/Icon';
 import Typography from '@components/Typography';
 
 import { TooltipContentBase } from './TooltipContentBase';
-import { IProgressChartTooltipProps } from './types';
+import { ProgressChartTooltipProps } from './types';
 import { mapSizes } from './utils';
 
 export const ProgressChartTooltip = ({
@@ -12,7 +12,7 @@ export const ProgressChartTooltip = ({
   valueFormatted,
   iconName,
   barProps = {},
-}: IProgressChartTooltipProps) => {
+}: ProgressChartTooltipProps) => {
   const { color } = barProps;
 
   return (

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { useTheme } from '@emotion/react';
 
@@ -51,13 +50,7 @@ export const OnClick: StoryObj<typeof Tooltip> = (args: Args) => {
       <TooltipTrigger>
         <Button size="medium" text="Click me!" />
       </TooltipTrigger>
-      <TooltipContent allowTags>
-        <Fragment>
-          <u>
-            <b>Tooltip</b>
-          </u>
-        </Fragment>
-      </TooltipContent>
+      <TooltipContent>Tooltip</TooltipContent>
     </Tooltip>
   );
 };
@@ -73,9 +66,7 @@ export const OnHover: StoryObj<typeof Tooltip> = (args: Args) => {
       <TooltipTrigger>
         <Button size="medium" text="Hover over me!" />
       </TooltipTrigger>
-      <TooltipContent>
-        <Fragment>Tooltip</Fragment>
-      </TooltipContent>
+      <TooltipContent>Tooltip</TooltipContent>
     </Tooltip>
   );
 };
@@ -99,18 +90,16 @@ export const CustomContent: StoryObj<typeof Tooltip> = (args: Args) => {
         />
       </TooltipTrigger>
       <TooltipContent css={{ textAlign: 'center' }}>
-        <Fragment>
-          <Typography variant="h6">Your progress</Typography>
-          <div css={{ margin: '0 auto', width: '60px' }}>
-            <ProgressCircle
-              max={100}
-              currentValue={80}
-              color="purple"
-              infoContent="80%"
-              size={60}
-            />
-          </div>
-        </Fragment>
+        <Typography variant="h6">Your progress</Typography>
+        <div css={{ margin: '0 auto', width: '60px' }}>
+          <ProgressCircle
+            max={100}
+            currentValue={80}
+            color="purple"
+            infoContent="80%"
+            size={60}
+          />
+        </div>
       </TooltipContent>
     </Tooltip>
   );
@@ -134,9 +123,7 @@ export const NoArrow: StoryObj<typeof Tooltip> = (args: Args) => {
           text="Action"
         />
       </TooltipTrigger>
-      <TooltipContent>
-        <Fragment>No arrow</Fragment>
-      </TooltipContent>
+      <TooltipContent>No arrow</TooltipContent>
     </Tooltip>
   );
 };
@@ -154,9 +141,7 @@ export const Opened: StoryObj<typeof Tooltip> = (args: Args) => {
       <TooltipTrigger>
         <Button size="medium" text="Hover over me!" />
       </TooltipTrigger>
-      <TooltipContent>
-        <Fragment>Tooltip</Fragment>
-      </TooltipContent>
+      <TooltipContent>Tooltip</TooltipContent>
     </Tooltip>
   );
 };

package/src/components/Tooltip/Tooltip.tsx

@@ -1,6 +1,6 @@
 import { useTooltip } from './useTooltip';
 import { TooltipContext } from './useTooltipContext';
-import { ITooltipProps } from './types';
+import { TooltipProps } from './types';
 
 /*
  * <Tooltip>
@@ -10,7 +10,7 @@ import { ITooltipProps } from './types';
  *   <TooltipContent>Tooltip</TooltipContent>
  * </Tooltip>
  * */
-const Tooltip = ({ children, ...props }: ITooltipProps) => {
+const Tooltip = ({ children, ...props }: TooltipProps) => {
   const tooltip = useTooltip(props);
 
   return (

package/src/components/Tooltip/types.ts

@@ -5,14 +5,14 @@ import {
   UseFloatingReturn,
 } from '@floating-ui/react';
 import { PointTooltipProps, Point } from '@nivo/line';
-import { IMapIcons } from '@components/Icon/types';
+import { MapIconsType } from '@components/Icon/types';
 import { ProgressBarProps } from '@components/ProgressBar/types';
 import { SerializedStyles } from '@emotion/react';
 import { CommonProps } from '@global-types/emotion';
 
 export type TooltipSize = 'small' | 'medium' | 'large';
 
-export interface ITooltipProps extends CommonProps {
+export interface TooltipProps extends CommonProps {
   children: React.ReactNode;
   placement?: Placement;
   enableHover?: boolean;
@@ -25,7 +25,7 @@ export interface ITooltipProps extends CommonProps {
   isOpen?: boolean;
 }
 
-export type UseTooltipArgs = Omit<ITooltipProps, 'children'>;
+export type UseTooltipArgs = Omit<TooltipProps, 'children'>;
 
 type UseInteractions = ReturnType<typeof useInteractions>;
 
@@ -34,7 +34,7 @@ interface MutableRefObject<T> {
 }
 
 export type UseTooltip = (props: UseTooltipArgs) => Pick<
-  ITooltipProps,
+  TooltipProps,
   'size' | 'hasArrow' | 'arrowProps'
 > & {
   arrowRef: MutableRefObject<null>;
@@ -47,7 +47,7 @@ export type TooltipContextType =
       ReturnType<typeof useInteractions> & {
         isOpen: boolean;
         arrowRef: React.Ref<SVGSVGElement>;
-      } & Pick<ITooltipProps, 'size' | 'hasArrow' | 'arrowProps'>)
+      } & Pick<TooltipProps, 'size' | 'hasArrow' | 'arrowProps'>)
   | null;
 
 export type TooltipArrowProps = Omit<
@@ -55,35 +55,33 @@ export type TooltipArrowProps = Omit<
   'context'
 >;
 
-export interface ITooltipContentProps {
-  children: React.ReactElement;
+export interface TooltipContentProps {
+  children: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
-  allowTags?: boolean;
-  allowedTags?: string[];
 }
 
-export interface ITooltipContentSizes {
+export interface TooltipContentSizes {
   small: SerializedStyles;
   medium: SerializedStyles;
   large: SerializedStyles;
 }
 
-export interface ITooltipTriggerProps {
+export interface TooltipTriggerProps {
   children: React.ReactNode;
 }
 
 export type SimpleChartTooltipProps =
   | PointTooltipProps &
-      Pick<ITooltipProps, 'size'> & {
+      Pick<TooltipProps, 'size'> & {
         renderValue?: (data: Point['data']) => React.ReactNode;
       };
 
-export interface IProgressChartTooltipProps {
+export interface ProgressChartTooltipProps {
   caption: string;
   value: number;
   valueFormatted: string;
-  iconName?: keyof IMapIcons;
+  iconName?: keyof MapIconsType;
   barProps?: Partial<Omit<ProgressBarProps, 'currentValue'>>;
 }
 

package/src/components/Tooltip/utils.tsx

@@ -1,7 +1,7 @@
-import { ITooltipContentSizes } from './types';
+import { TooltipContentSizes } from './types';
 import { small, medium, large } from './styles';
 
-export const mapSizes: ITooltipContentSizes = {
+export const mapSizes: TooltipContentSizes = {
   small,
   medium,
   large,

package/src/components/TooltipContent/TooltipContent.tsx

@@ -1,42 +1,20 @@
-import { ReactNode, forwardRef } from 'react';
-import { renderToString } from 'react-dom/server';
+import { forwardRef } from 'react';
 import {
   FloatingPortal,
   FloatingFocusManager,
   useMergeRefs,
 } from '@floating-ui/react';
-import * as DOMPurify from 'dompurify';
+
 import { TooltipArrow } from '@components/Tooltip/TooltipArrow';
 import { TooltipContentBase } from '@components/Tooltip/TooltipContentBase';
-import { ITooltipContentProps, TooltipSize } from '@components/Tooltip/types';
+import { TooltipContentProps, TooltipSize } from '@components/Tooltip/types';
 import { useTooltipContext } from '@components/Tooltip/useTooltipContext';
 import { mapSizes } from '@components/Tooltip/utils';
-import { ALLOWED_TAGS } from './constants';
 
-const TooltipContent = forwardRef<HTMLDivElement, ITooltipContentProps>(
-  function TooltipContent(
-    {
-      children,
-      className,
-      style,
-      allowTags = false,
-      allowedTags = ALLOWED_TAGS,
-    },
-    refProp,
-  ) {
+const TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(
+  function TooltipContent({ children, className, style }, refProp) {
     const tooltipCtx = useTooltipContext();
     const ref = useMergeRefs([tooltipCtx?.refs.setFloating, refProp]);
-    let output: string | ReactNode = '';
-
-    if (allowTags) {
-      const html = renderToString(children);
-      const htmlSanitized = DOMPurify.sanitize(html, {
-        ALLOWED_TAGS: allowedTags,
-      });
-      output = <div dangerouslySetInnerHTML={{ __html: htmlSanitized }} />;
-    } else {
-      output = children;
-    }
 
     return (
       <FloatingPortal>
@@ -59,7 +37,7 @@ const TooltipContent = forwardRef<HTMLDivElement, ITooltipContentProps>(
               {tooltipCtx.hasArrow && (
                 <TooltipArrow {...tooltipCtx.arrowProps} />
               )}
-              {output}
+              {children}
             </TooltipContentBase>
           </FloatingFocusManager>
         )}

package/src/components/TooltipContent/index.ts

@@ -1,2 +1 @@
 export { default } from './TooltipContent';
-export { ALLOWED_TAGS } from './constants';

package/src/components/TooltipTrigger/TooltipTrigger.tsx

@@ -1,9 +1,9 @@
 import { cloneElement, isValidElement } from 'react';
 
-import { ITooltipTriggerProps } from '@components/Tooltip/types';
+import { TooltipTriggerProps } from '@components/Tooltip/types';
 import { useTooltipContext } from '@components/Tooltip/useTooltipContext';
 
-const TooltipTrigger = ({ children }: ITooltipTriggerProps) => {
+const TooltipTrigger = ({ children }: TooltipTriggerProps) => {
   const tooltipCtx = useTooltipContext();
 
   if (isValidElement(children)) {

package/src/components/index.ts

@@ -17,7 +17,7 @@ export { default as DropdownBase } from './DropdownBase';
 export { default as DropdownOption } from './DropdownOption';
 export { default as DropdownOptions } from './DropdownOptions';
 export { default as DropdownToggle } from './DropdownToggle';
-export type { IDropdownOption } from './DropdownOptions';
+export type { DropdownOptionProps } from './DropdownOptions';
 export { default as Icon } from './Icon';
 export * from './Icon';
 export * from './Icon/types';