fix html label to upper case

Author: kamiazya

src/hooks/__tests__/__snapshots__/use-rendered-id.spec.tsx.snap

@@ -4,6 +4,6 @@ exports[`useRenderedID  1`] = `"hoge"`;
 
 exports[`useRenderedID  2`] = `"<<b>bold</b>>"`;
 
-exports[`useRenderedID  3`] = `"<<b>bold</b>>"`;
+exports[`useRenderedID  3`] = `"<<B>bold</B>>"`;
 
-exports[`useRenderedID  4`] = `"<<table BORDER=\\"0\\" CELLBORDER=\\"1\\" CELLSPACING=\\"0\\"><tr><td>left</td><td PORT=\\"m\\">middle</td><td PORT=\\"r\\">right</td></tr></table>>"`;
+exports[`useRenderedID  4`] = `"<<TABLE BORDER=\\"0\\" CELLBORDER=\\"1\\" CELLSPACING=\\"0\\"><TR><TD>left</TD><TD PORT=\\"m\\">middle</TD><TD PORT=\\"r\\">right</TD></TR></TABLE>>"`;

src/utils/__tests__/__snapshots__/render-id.test.tsx.snap

@@ -4,8 +4,8 @@ exports[`renderId case 1`] = `"hoge"`;
 
 exports[`renderId case 2`] = `"<<b>bold</b>>"`;
 
-exports[`renderId case 3`] = `"<<b>bold</b>>"`;
+exports[`renderId case 3`] = `"<<B>bold</B>>"`;
 
 exports[`renderId case 4`] = `"<label<port>>"`;
 
-exports[`renderId case 5`] = `"<<table BORDER=\\"0\\" CELLBORDER=\\"1\\" CELLSPACING=\\"0\\"><tr><td>left</td><td PORT=\\"m\\">middle</td><td PORT=\\"r\\">right</td></tr></table>>"`;
+exports[`renderId case 5`] = `"<<TABLE BORDER=\\"0\\" CELLBORDER=\\"1\\" CELLSPACING=\\"0\\"><TR><TD>left</TD><TD PORT=\\"m\\">middle</TD><TD PORT=\\"r\\">right</TD></TR></TABLE>>"`;

src/utils/render-id.ts

@@ -2,14 +2,11 @@ import { ReactElement, isValidElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 
 export function renderId(id?: ReactElement | string): string | undefined {
-  if (typeof id === 'string') {
-    return id;
-  }
   if (isValidElement(id)) {
     const htmlLike = renderToStaticMarkup(id)
       .replace(/<dot-port>(.+?)<\/dot-port>/gi, '<$1>')
-      .replace(/<(\/?)dot-/gi, '<$1');
+      .replace(/<(\/?)dot-([a-z-]+)/gi, (_, $1, $2) => `<${$1}${$2.toUpperCase()}`);
     return `<${htmlLike}>`;
   }
-  return undefined;
+  return id;
 }