chore: small changes

lib/build.js

@@ -56,7 +56,7 @@ module.exports = wrap(async function (component) {
       pkg.peerDependencies = peerDependencies
     }
     pkg.exports = {
-      '.': `esm/${component}/index.js`,
+      '.': `./esm/${component}/index.js`,
       './css': `./luna-${component}.css`,
       [`./luna-${component}.css`]: `./luna-${component}.css`,
       [`./luna-${component}.js`]: `./luna-${component}.js`,

src/toolbar/README.md

@@ -26,6 +26,13 @@ import 'luna-toolbar/luna-toolbar.css'
 import LunaToolbar from 'luna-toolbar'
 ```
 
+## Usage
+
+```javascript
+const toolbar = new LunaToolbar(container)
+toolbar.appendText('Test')
+```
+
 ## Api
 
 ### appendHtml(html: string | HTMLElement): ToolbarHtml

src/toolbar/index.ts

@@ -10,6 +10,10 @@ import { exportCjs } from '../share/util'
 
 /**
  * Application toolbar.
+ *
+ * @example
+ * const toolbar = new LunaToolbar(container)
+ * toolbar.appendText('Test')
  */
 export default class Toolbar extends Component {
   private items: ToolbarItem[] = []

src/toolbar/react.tsx

@@ -8,8 +8,10 @@ import {
   ReactElement,
   useState,
 } from 'react'
+import h from 'licia/h'
 import types from 'licia/types'
 import Toolbar from './index'
+import { createPortal } from 'react-dom'
 
 interface IToolbarProps {}
 
@@ -113,4 +115,17 @@ export const LunaToolbarSpace: FC<IToolbarItemProps> = (props) => {
   return null
 }
 
+export const LunaToolbarHtml: FC<IToolbarItemProps> = (props) => {
+  const html = useRef(h('div') as HTMLDivElement)
+  document.createDocumentFragment()
+
+  useEffect(() => {
+    if (props.toolbar) {
+      props.toolbar.appendHtml(html.current)
+    }
+  }, [props.toolbar])
+
+  return createPortal(<>{props.children}</>, html.current)
+}
+
 export default LunaToolbar

src/toolbar/story.js

@@ -8,6 +8,7 @@ import LunaToolbar, {
   LunaToolbarSeparator,
   LunaToolbarSpace,
   LunaToolbarInput,
+  LunaToolbarHtml,
 } from './react'
 
 const def = story(
@@ -37,6 +38,9 @@ const def = story(
     const filter = toolbar.appendInput('filter', '', 'Filter')
     filter.disable()
     toolbar.appendSpace()
+    toolbar.appendHtml(
+      '<span style="color:green;line-height:30px;">Loading</span>'
+    )
     toolbar.appendText('Status: OK')
 
     return toolbar
@@ -60,6 +64,16 @@ const def = story(
           <LunaToolbarSeparator />
           <LunaToolbarInput key="filter" value="" placeholder="Filter" />
           <LunaToolbarSpace />
+          <LunaToolbarHtml>
+            <span
+              style={{
+                color: 'green',
+                lineHeight: '30px',
+              }}
+            >
+              Loading
+            </span>
+          </LunaToolbarHtml>
           <LunaToolbarText text="Status: OK" />
         </LunaToolbar>
       )

src/toolbar/style.scss

@@ -5,6 +5,8 @@
   @include component();
   height: 31px;
   display: flex;
+  white-space: nowrap;
+  overflow-x: hidden;
   border-bottom: 1px solid $border-color;
 }