fix(ArgValue): fix wrong union type splitting

lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx

@@ -298,6 +298,24 @@ LongEnum.args = {
   },
 };
 
+export const complex_union =
+  '((a: string | SVGSVGElement) => void) | RefObject<SVGSVGElement | number> | [a|b] | {a|b}';
+
+export const ComplexUnion = Template.bind({});
+ComplexUnion.args = {
+  ...baseArgs,
+  row: {
+    key: 'complexUnion',
+    name: 'Complex',
+    type: { required: true },
+    table: {
+      type: {
+        summary: complex_union,
+      },
+    },
+  },
+};
+
 export const Markdown = Template.bind({});
 Markdown.args = {
   ...baseArgs,

lib/components/src/blocks/ArgsTable/ArgValue.tsx

@@ -15,6 +15,7 @@ interface ArgValueProps {
 
 interface ArgTextProps {
   text: string;
+  simple?: boolean;
 }
 
 interface ArgSummaryProps {
@@ -30,19 +31,27 @@ const Summary = styled.div<{ isExpanded?: boolean }>(({ isExpanded }) => ({
   flexWrap: 'wrap',
   alignItems: 'flex-start',
   marginBottom: '-4px',
+  minWidth: 100,
 }));
 
-const Text = styled.span<{}>(codeCommon, ({ theme }) => ({
-  flex: 0,
+const Text = styled.span<{ simple?: boolean }>(codeCommon, ({ theme, simple = false }) => ({
+  flex: '0 0 auto',
   fontFamily: theme.typography.fonts.mono,
   fontSize: theme.typography.size.s1,
   wordBreak: 'break-word',
+  whiteSpace: 'normal',
+  maxWidth: '100%',
   margin: 0,
   marginRight: '4px',
   marginBottom: '4px',
   paddingTop: '2px',
   paddingBottom: '2px',
   lineHeight: '13px',
+  ...(simple && {
+    background: 'transparent',
+    border: '0 none',
+    paddingLeft: 0,
+  }),
 }));
 
 const ExpandButton = styled.button<{}>(({ theme }) => ({
@@ -90,8 +99,8 @@ const EmptyArg = () => {
   return <span>-</span>;
 };
 
-const ArgText: FC<ArgTextProps> = ({ text }) => {
-  return <Text>{text}</Text>;
+const ArgText: FC<ArgTextProps> = ({ text, simple }) => {
+  return <Text simple={simple}>{text}</Text>;
 };
 
 const calculateDetailWidth = memoize(1000)((detail: string): string => {
@@ -129,6 +138,12 @@ const ArgSummary: FC<ArgSummaryProps> = ({ value, initialExpandedArgs }) => {
   const summaryAsString = typeof summary.toString === 'function' ? summary.toString() : summary;
 
   if (detail == null) {
+    const cannotBeSafelySplitted = /[(){}[\]<>]/.test(summaryAsString);
+
+    if (cannotBeSafelySplitted) {
+      return <ArgText text={summaryAsString} simple={summaryAsString.includes('|')} />;
+    }
+
     const summaryItems = getSummaryItems(summaryAsString);
     const itemsCount = summaryItems.length;
     const hasManyItems = itemsCount > ITEMS_BEFORE_EXPANSION;