feat(popover): add close button to popover

src/components/popover.riot

@@ -2,6 +2,12 @@
   <div class="popover-wrapper" if="{ props.opened }">
     <div class="popover-dialog">
       <div class="popover-body" onclick="{ (e) => e.stopPropagation() }">
+        <div class="popover-close" onclick="{ props.onClose }">
+          <svg height="10" width="10">
+            <line x1="0" y1="0" x2="10" y2="10" stroke="#000" stroke-width="1" />
+            <line x1="0" y1="10" x2="10" y2="0" stroke="#000" stroke-width="1" />
+          </svg>
+        </div>
         <div each="{ style in Object.keys(props.styleProps) }">
           <template if="{ props.styleProps[style] }"> { style }: <code>{ props.styleProps[style] }</code> </template>
         </div>
@@ -44,5 +50,18 @@
       box-shadow: 0 2px 4px rgb(0 0 0 / 20%), 0 -1px 0 rgb(0 0 0 / 2%);
       cursor: default;
     }
+    .popover-close {
+      position: absolute;
+      top: 0;
+      right: 0;
+      margin: 0.25em 0.5em;
+      padding: 0.5em;
+      line-height: 0;
+      border-radius: 0.375rem;
+      cursor: pointer;
+    }
+    .popover-close:hover {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
   </style>
 </popover>

src/components/render-item.riot

@@ -1,5 +1,5 @@
 <render-item onclick="{ onClick }">
-  <popover opened="{ this.state.popover }" style-props="{ props.styleProps }">
+  <popover onClose="{ onClose }" opened="{ this.state.popover }" style-props="{ props.styleProps }">
     <canvas if="{ props.type === 'canvas' }"></canvas>
     <slot></slot>
   </popover>
@@ -15,6 +15,10 @@
       onClick(e) {
         this.update({ popover: !this.state.popover });
       },
+      onClose(e) {
+        this.update({ popover: false });
+        e.stopPropagation();
+      },
       applyStyles(container, style) {
         if (!container || !container.style || !style) {
           return;