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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "0.0.22-alpha",
+  "version": "0.0.24-alpha",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -23,6 +23,7 @@
     "@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",
@@ -36,6 +37,7 @@
     "@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/Popover/hooks/usePopover.tsx

@@ -54,7 +54,10 @@ export const usePopover: UsePopover = ({
     enabled:
       controlledOpen == null && ['click', 'both'].includes(interactionsEnabled),
   });
-  const dismiss = useDismiss(context);
+  const dismiss = useDismiss(context, {
+    referencePress: true,
+    ancestorScroll: true,
+  });
   const role = useRole(context);
   const hover = useHover(context, {
     enabled:

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

@@ -1,3 +1,4 @@
+import { Fragment } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { useTheme } from '@emotion/react';
 
@@ -50,7 +51,13 @@ export const OnClick: StoryObj<typeof Tooltip> = (args: Args) => {
       <TooltipTrigger>
         <Button size="medium" text="Click me!" />
       </TooltipTrigger>
-      <TooltipContent>Tooltip</TooltipContent>
+      <TooltipContent allowTags>
+        <Fragment>
+          <u>
+            <b>Tooltip</b>
+          </u>
+        </Fragment>
+      </TooltipContent>
     </Tooltip>
   );
 };
@@ -66,7 +73,9 @@ export const OnHover: StoryObj<typeof Tooltip> = (args: Args) => {
       <TooltipTrigger>
         <Button size="medium" text="Hover over me!" />
       </TooltipTrigger>
-      <TooltipContent>Tooltip</TooltipContent>
+      <TooltipContent>
+        <Fragment>Tooltip</Fragment>
+      </TooltipContent>
     </Tooltip>
   );
 };
@@ -90,16 +99,18 @@ export const CustomContent: StoryObj<typeof Tooltip> = (args: Args) => {
         />
       </TooltipTrigger>
       <TooltipContent css={{ textAlign: 'center' }}>
-        <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>
+        </Fragment>
       </TooltipContent>
     </Tooltip>
   );
@@ -123,7 +134,9 @@ export const NoArrow: StoryObj<typeof Tooltip> = (args: Args) => {
           text="Action"
         />
       </TooltipTrigger>
-      <TooltipContent>No arrow</TooltipContent>
+      <TooltipContent>
+        <Fragment>No arrow</Fragment>
+      </TooltipContent>
     </Tooltip>
   );
 };
@@ -141,7 +154,9 @@ export const Opened: StoryObj<typeof Tooltip> = (args: Args) => {
       <TooltipTrigger>
         <Button size="medium" text="Hover over me!" />
       </TooltipTrigger>
-      <TooltipContent>Tooltip</TooltipContent>
+      <TooltipContent>
+        <Fragment>Tooltip</Fragment>
+      </TooltipContent>
     </Tooltip>
   );
 };

package/src/components/Tooltip/types.ts

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

package/src/components/TooltipContent/TooltipContent.tsx

@@ -1,20 +1,42 @@
-import { forwardRef } from 'react';
+import { ReactNode, forwardRef } from 'react';
+import { renderToString } from 'react-dom/server';
 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 }, refProp) {
+  function TooltipContent(
+    {
+      children,
+      className,
+      style,
+      allowTags = false,
+      allowedTags = ALLOWED_TAGS,
+    },
+    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>
@@ -37,7 +59,7 @@ const TooltipContent = forwardRef<HTMLDivElement, ITooltipContentProps>(
               {tooltipCtx.hasArrow && (
                 <TooltipArrow {...tooltipCtx.arrowProps} />
               )}
-              {children}
+              {output}
             </TooltipContentBase>
           </FloatingFocusManager>
         )}

package/src/components/TooltipContent/constants.ts

@@ -0,0 +1,16 @@
+export const ALLOWED_TAGS = [
+  'b',
+  'strong',
+  'u',
+  's',
+  'i',
+  'em',
+  'mark',
+  'small',
+  'del',
+  'ins',
+  'sub',
+  'sup',
+  'br',
+  'p',
+];

package/src/components/TooltipContent/index.ts

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