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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "0.0.24-alpha",
+  "version": "0.0.25-alpha",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -23,7 +23,6 @@
     "@nivo/line": "0.83.0",
     "@playwright/test": "^1.37.1",
     "@testing-library/jest-dom": "^5.16.5",
-    "@types/dompurify": "^3.0.5",
     "@types/testing-library__jest-dom": "^5.14.6",
     "@types/uuid": "^9.0.3",
     "resolve-tspaths": "^0.8.16",
@@ -37,7 +36,6 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@floating-ui/react": "0.25.4",
-    "dompurify": "^3.1.3",
     "dotenv": "^16.0.3",
     "js-tokens": "^4.0.0",
     "loose-envify": "^1.4.0",

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/types.ts

@@ -56,11 +56,9 @@ export type TooltipArrowProps = Omit<
 >;
 
 export interface ITooltipContentProps {
-  children: React.ReactElement;
+  children: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
-  allowTags?: boolean;
-  allowedTags?: string[];
 }
 
 export interface ITooltipContentSizes {

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 { 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,
-  ) {
+  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';