fix(striker-ui): simplify sensitive text

striker-ui/components/FormSummary.tsx

@@ -13,13 +13,7 @@ const renderEntryValueWithPassword: RenderFormValueFunction = (args) => {
   const { entry, key } = args;
 
   return /passw/i.test(key) ? (
-    <SensitiveText
+    <SensitiveText monospaced>{String(entry)}</SensitiveText>
-      revealButtonProps={{ sx: { marginRight: 0, padding: 0 } }}
-      monospaced
-      textLineHeight={null}
-    >
-      {String(entry)}
-    </SensitiveText>
   ) : (
     renderEntryValueWithMono(args)
   );

striker-ui/components/ManageFence/ManageFencePanel.tsx

@@ -348,7 +348,7 @@ const ManageFencePanel: FC = () => {
                   current = /passw/i.test(parameterId) ? (
                     <>
                       {current}
-                      <SensitiveText inline>{parameterValue}</SensitiveText>
+                      <SensitiveText>{parameterValue}</SensitiveText>
                     </>
                   ) : (
                     <>

striker-ui/components/Text/SensitiveText.tsx

@@ -1,116 +1,50 @@
-import { Button, styled } from '@mui/material';
+import { Box, styled } from '@mui/material';
-import {
+import { createElement, FC, useMemo, useState } from 'react';
-  createElement,
-  FC,
-  ReactElement,
-  ReactNode,
-  useCallback,
-  useMemo,
-  useState,
-} from 'react';
 
 import { BORDER_RADIUS, EERIE_BLACK } from '../../lib/consts/DEFAULT_THEME';
 
 import BodyText from './BodyText';
-import FlexBox from '../FlexBox';
-import IconButton from '../IconButton';
 import MonoText from './MonoText';
 
-const InlineButton = styled(Button)({
+const BaseStyle = styled(Box)({
   backgroundColor: EERIE_BLACK,
   borderRadius: BORDER_RADIUS,
-  minWidth: 'initial',
+  color: EERIE_BLACK,
+  display: 'inline-flex',
   padding: '0 .6em',
-  textTransform: 'none',
+  width: 'fit-content',
 
-  ':hover': {
+  ':focus': {
-    backgroundColor: `${EERIE_BLACK}F0`,
+    color: 'unset',
   },
 });
 
 const SensitiveText: FC<SensitiveTextProps> = ({
   children,
-  inline: isInline = false,
+  monospaced = false,
-  monospaced: isMonospaced = false,
+  revealInitially = false,
-  revealButtonProps,
-  revealInitially: isRevealInitially = false,
-  textLineHeight = 2.8,
   textProps,
 }) => {
-  const [isReveal, setIsReveal] = useState<boolean>(isRevealInitially);
+  const [reveal, setReveal] = useState<boolean>(revealInitially);
 
-  const clickEventHandler = useCallback(() => {
+  const content = useMemo(() => {
-    setIsReveal((previous) => !previous);
+    if (typeof children !== 'string') return children;
-  }, []);
 
-  const textSxLineHeight = useMemo<number | string | undefined>(
+    const elementType = monospaced ? MonoText : BodyText;
-    () => (isInline ? undefined : textLineHeight || undefined),
-    [isInline, textLineHeight],
-  );
-
-  const textElementType = useMemo(
-    () => (isMonospaced ? MonoText : BodyText),
-    [isMonospaced],
-  );
-  const contentElement = useMemo(() => {
-    let content: ReactNode;
 
-    if (isReveal) {
+    return createElement(elementType, textProps, children);
-      content =
+  }, [children, monospaced, textProps]);
-        typeof children === 'string'
-          ? createElement(
-              textElementType,
-              {
-                sx: {
-                  lineHeight: textSxLineHeight,
-                  maxWidth: '20em',
-                  overflowY: 'scroll',
-                  whiteSpace: 'nowrap',
-                },
-                ...textProps,
-              },
-              children,
-            )
-          : children;
-    } else {
-      content = createElement(
-        textElementType,
-        {
-          sx: {
-            lineHeight: textSxLineHeight,
-          },
-          ...textProps,
-        },
-        '*****',
-      );
-    }
 
-    return content;
+  return (
-  }, [children, isReveal, textElementType, textProps, textSxLineHeight]);
+    <BaseStyle
-  const rootElement = useMemo<ReactElement>(
+      component="div"
-    () =>
+      onBlur={() => setReveal(false)}
-      isInline ? (
+      onFocus={() => setReveal(true)}
-        <InlineButton onClick={clickEventHandler}>
+      tabIndex={0}
-          {contentElement}
+    >
-        </InlineButton>
+      {reveal ? content : '*****'}
-      ) : (
+    </BaseStyle>
-        <FlexBox row spacing=".5em">
-          {contentElement}
-          <IconButton
-            edge="end"
-            mapPreset="visibility"
-            onClick={clickEventHandler}
-            state={String(isReveal)}
-            sx={{ marginRight: '-.2em', padding: '.2em' }}
-            variant="normal"
-            {...revealButtonProps}
-          />
-        </FlexBox>
-      ),
-    [clickEventHandler, contentElement, revealButtonProps, isInline, isReveal],
   );
-
-  return rootElement;
 };
 
 export default SensitiveText;

striker-ui/types/SensitiveText.d.ts

@@ -1,9 +1,6 @@
 type SensitiveTextOptionalProps = {
-  inline?: boolean;
   monospaced?: boolean;
-  revealButtonProps?: import('../components/IconButton').IconButtonProps;
   revealInitially?: boolean;
-  textLineHeight?: number | null;
   textProps?: import('../components/Text').BodyTextProps;
 };