@furystack/shades-common-components 3.0.2 → 3.1.0

package/src/components/command-palette/command-palette-manager.ts

@@ -1,6 +1,5 @@
 import { Injector, Injectable } from '@furystack/inject'
 import { debounce, ObservableValue } from '@furystack/utils'
-import { ClickAwayService } from '../../services/click-away-service'
 import { CommandProvider, CommandPaletteSuggestionResult } from './command-provider'
 
 @Injectable({ lifetime: 'singleton' })
@@ -21,8 +20,6 @@ export class CommandPaletteManager {
     }
   }).bind(this)
 
-  public element?: HTMLElement
-
   public dispose() {
     window.removeEventListener('keyup', this.keyPressListener)
     this.isOpened.dispose()
@@ -30,7 +27,6 @@ export class CommandPaletteManager {
     this.term.dispose()
     this.selectedIndex.dispose()
     this.currentSuggestions.dispose()
-    this.clickAwayListener?.dispose()
   }
 
   public selectSuggestion(injector: Injector, index: number = this.selectedIndex.getValue()) {
@@ -62,8 +58,6 @@ export class CommandPaletteManager {
     }
   }, 250)
 
-  public clickAwayListener?: ClickAwayService<any>
-
   constructor(private readonly commandProviders: CommandProvider[]) {
     window.addEventListener('keyup', this.keyPressListener, true)
   }

package/src/components/command-palette/index.tsx

@@ -28,64 +28,66 @@ export const CommandPalette = Shade<CommandPaletteProps, CommandPaletteState>({
   getInitialState: ({ props }) => ({
     manager: new CommandPaletteManager(props.commandProviders),
   }),
-  constructed: ({ element: el, getState }) => {
+  resources: ({ getState, element: rootElement }) => {
     const { manager } = getState()
-    const element = el.querySelector('.input-container') as HTMLDivElement
-    manager.element = el
-    manager.clickAwayListener = new ClickAwayService(el, () => manager.isOpened.setValue(false))
-    manager.isOpened.subscribe((isOpened) => {
-      const suggestions = el.querySelector('.close-suggestions')
-      const postControls = el.querySelector('.post-controls')
-      if (isOpened) {
-        promisifyAnimation(suggestions, [{ opacity: 0 }, { opacity: 1 }], {
-          duration: 500,
-          fill: 'forwards',
-        })
+    const element = rootElement.querySelector('.input-container') as HTMLDivElement
+    const clickAwayListener = new ClickAwayService(rootElement, () => manager.isOpened.setValue(false))
+    return [
+      manager.isOpened.subscribe((isOpened) => {
+        const suggestions = rootElement.querySelector('.close-suggestions')
+        const postControls = rootElement.querySelector('.post-controls')
+        if (isOpened) {
+          promisifyAnimation(suggestions, [{ opacity: 0 }, { opacity: 1 }], {
+            duration: 500,
+            fill: 'forwards',
+          })
 
-        promisifyAnimation(postControls, [{ width: '0px' }, { width: '50px' }], {
-          duration: 100,
-          fill: 'forwards',
-        })
+          promisifyAnimation(postControls, [{ width: '0px' }, { width: '50px' }], {
+            duration: 100,
+            fill: 'forwards',
+          })
 
-        promisifyAnimation(element, [{ background: 'transparent' }, { background: 'rgba(128,128,128,0.1)' }], {
-          duration: 500,
-          fill: 'forwards',
-          easing: 'cubic-bezier(0.050, 0.570, 0.840, 1.005)',
-        })
-      } else {
-        promisifyAnimation(suggestions, [{ opacity: 1 }, { opacity: 0 }], {
-          duration: 500,
-          fill: 'forwards',
-        })
+          promisifyAnimation(element, [{ background: 'transparent' }, { background: 'rgba(128,128,128,0.1)' }], {
+            duration: 500,
+            fill: 'forwards',
+            easing: 'cubic-bezier(0.050, 0.570, 0.840, 1.005)',
+          })
+        } else {
+          promisifyAnimation(suggestions, [{ opacity: 1 }, { opacity: 0 }], {
+            duration: 500,
+            fill: 'forwards',
+          })
 
-        promisifyAnimation(postControls, [{ width: '50px' }, { width: '0px' }], {
-          duration: 500,
-          fill: 'forwards',
-          delay: 300,
-        })
+          promisifyAnimation(postControls, [{ width: '50px' }, { width: '0px' }], {
+            duration: 500,
+            fill: 'forwards',
+            delay: 300,
+          })
 
-        promisifyAnimation(element, [{ background: 'rgba(128,128,128,0.1)' }, { background: 'transparent' }], {
-          duration: 300,
-          fill: 'forwards',
-          easing: 'cubic-bezier(0.000, 0.245, 0.190, 0.790)',
-        })
-      }
-    })
-    manager.isLoading.subscribe(async (isLoading) => {
-      const loader = el.querySelector('.loader-container')
-      if (isLoading) {
-        promisifyAnimation(loader, [{ opacity: 0 }, { opacity: 1 }], {
-          duration: 100,
-          fill: 'forwards',
-        })
-      } else {
-        promisifyAnimation(loader, [{ opacity: 1 }, { opacity: 0 }], {
-          duration: 100,
-          fill: 'forwards',
-        })
-      }
-    })
-    return () => manager.dispose()
+          promisifyAnimation(element, [{ background: 'rgba(128,128,128,0.1)' }, { background: 'transparent' }], {
+            duration: 300,
+            fill: 'forwards',
+            easing: 'cubic-bezier(0.000, 0.245, 0.190, 0.790)',
+          })
+        }
+      }),
+      manager.isLoading.subscribe(async (isLoading) => {
+        const loader = rootElement.querySelector('.loader-container')
+        if (isLoading) {
+          promisifyAnimation(loader, [{ opacity: 0 }, { opacity: 1 }], {
+            duration: 100,
+            fill: 'forwards',
+          })
+        } else {
+          promisifyAnimation(loader, [{ opacity: 1 }, { opacity: 0 }], {
+            duration: 100,
+            fill: 'forwards',
+          })
+        }
+      }),
+      clickAwayListener,
+      manager,
+    ]
   },
   render: ({ props, injector, element, getState }) => {
     element.style.flexGrow = '1'

package/src/components/data-grid/body.tsx

@@ -1,7 +1,8 @@
 import { CollectionService } from '../../services/collection-service'
-import { ChildrenList, Shade, createComponent } from '@furystack/shades'
+import { ChildrenList, Shade, createComponent, createFragment } from '@furystack/shades'
 import { DataRowCells } from './data-grid'
 import { Loader } from '../loader'
+import { DataGridRow } from './data-grid-row'
 
 export interface DataGridBodyProps<T> {
   service: CollectionService<T>
@@ -13,8 +14,6 @@ export interface DataGridBodyProps<T> {
 
 export interface DataGridBodyState<T> {
   data: T[]
-  selection: T[]
-  focus: T | undefined
   isLoading: boolean
 }
 
@@ -24,19 +23,12 @@ export const DataGridBody: <T>(props: DataGridBodyProps<T>, children: ChildrenLi
 >({
   getInitialState: ({ props }) => ({
     data: props.service.data.getValue().entries,
-    selection: props.service.selection.getValue(),
-    focus: props.service.focus.getValue(),
     isLoading: props.service.isLoading.getValue(),
   }),
-  constructed: ({ props, updateState }) => {
-    const disposables = [
-      props.service.data.subscribe((data) => updateState({ data: data.entries })),
-      props.service.focus.subscribe((focus) => updateState({ focus })),
-      props.service.selection.subscribe((selection) => updateState({ selection })),
-      props.service.isLoading.subscribe((isLoading) => updateState({ isLoading })),
-    ]
-    return () => disposables.map((d) => d.dispose())
-  },
+  resources: ({ props, updateState }) => [
+    props.service.data.subscribe((data) => updateState({ data: data.entries })),
+    props.service.isLoading.subscribe((isLoading) => updateState({ isLoading })),
+  ],
   shadowDomName: 'shade-data-grid-body',
   render: ({ getState, props, element }) => {
     element.style.display = 'table-row-group'
@@ -45,6 +37,7 @@ export const DataGridBody: <T>(props: DataGridBodyProps<T>, children: ChildrenLi
     if (state.isLoading) {
       return (
         <div style={{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center', width: '100%' }}>
+          {/* TODO: Skeleton */}
           <Loader style={{ height: '128px', width: '128px' }} />
         </div>
       )
@@ -55,34 +48,16 @@ export const DataGridBody: <T>(props: DataGridBodyProps<T>, children: ChildrenLi
     }
 
     return (
-      <div style={{ display: 'contents' }}>
+      <>
         {state.data.map((entry) => (
-          <tr
-            style={{
-              background: state.selection.includes(entry) ? 'rgba(128,128,128,0.3)' : 'transparent',
-              filter: state.focus === entry ? 'brightness(1.5)' : 'brightness(1)',
-              cursor: 'default',
-              boxShadow: '2px 1px 0px rgba(255,255,255,0.07)',
-              fontSize: '0.8em',
-            }}
-            onclick={() => {
-              if (getState().focus !== entry) {
-                props.service.focus.setValue(entry)
-                props.service.selection.setValue([entry])
-              }
-            }}
-            ondblclick={() => props.onDoubleClick?.(entry)}
-          >
-            {props.columns.map((column: any) => (
-              <td style={{ padding: '0.5em', ...props.style }}>
-                {props.rowComponents?.[column]?.(entry, state) || props.rowComponents?.default?.(entry, state) || (
-                  <span>{entry[column]}</span>
-                )}
-              </td>
-            ))}
-          </tr>
+          <DataGridRow<any>
+            columns={props.columns}
+            entry={entry}
+            service={props.service}
+            rowComponents={props.rowComponents}
+          ></DataGridRow>
         ))}
-      </div>
+      </>
     )
   },
 })

package/src/components/data-grid/data-grid-row.tsx

@@ -0,0 +1,88 @@
+import { ChildrenList, createComponent, createFragment, Shade } from '@furystack/shades'
+import { CollectionService } from '../../services/collection-service'
+import { DataRowCells } from './data-grid'
+
+export interface DataGridRowProps<T> {
+  entry: T
+  columns: Array<keyof T>
+  service: CollectionService<T>
+  rowComponents?: DataRowCells<T>
+}
+
+export interface DataGridRowState<T> {
+  selection?: T[]
+  focus?: T
+}
+
+export const DataGridRow: <T>(props: DataGridRowProps<T>, children: ChildrenList) => JSX.Element<any, any> = Shade<
+  DataGridRowProps<any>,
+  DataGridRowState<any>
+>({
+  getInitialState: ({ props }) => ({
+    focus: props.service.focusedEntry.getValue(),
+    selection: props.service.selection.getValue(),
+  }),
+  shadowDomName: 'shades-data-grid-row',
+  resources: ({ props, element }) => [
+    props.service.focusedEntry.subscribe((newEntry) => {
+      if (newEntry === props.entry) {
+        element.style.filter = 'brightness(1.5)'
+        element.style.fontWeight = 'bolder'
+
+        const headerHeight = element.closest('table')?.querySelector('th')?.getBoundingClientRect().height || 42
+
+        const parent = element.closest('.shade-grid-wrapper') as HTMLElement
+        const maxTop = element.offsetTop - headerHeight
+        const currentTop = parent.scrollTop
+        if (maxTop < currentTop) {
+          parent.scrollTo({ top: maxTop, behavior: 'smooth' })
+        }
+
+        const footerHeight =
+          element.closest('shade-data-grid')?.querySelector('shade-data-grid-footer')?.getBoundingClientRect().height ||
+          42
+        const visibleMaxTop = parent.clientHeight - footerHeight // parent.getBoundingClientRect().height - footerHeight - headerHeight
+        const desiredMaxTop = element.offsetTop + element.clientHeight
+        if (desiredMaxTop > visibleMaxTop) {
+          parent.scrollTo({ top: desiredMaxTop - visibleMaxTop, behavior: 'smooth' })
+        }
+
+        // ;(element as any).scrollIntoView({ inline: 'nearest', block: 'nearest', behavior: 'smooth' })
+      } else {
+        element.style.filter = 'brightness(1)'
+        element.style.fontWeight = 'inherit'
+      }
+    }),
+    props.service.selection.subscribe((selection) => {
+      if (selection.includes(props.entry)) {
+        element.style.background = 'rgba(128,128,128,0.1)'
+      } else {
+        element.style.background = 'none'
+      }
+    }),
+  ],
+
+  render: ({ getState, props, element }) => {
+    const state = getState()
+    const { entry, rowComponents, columns } = props
+
+    element.style.display = 'table-row'
+    element.style.cursor = 'default'
+    element.style.userSelect = 'none'
+
+    element.onclick = () => {
+      props.service.focusedEntry.setValue(props.entry)
+    }
+    return (
+      <>
+        {columns.map((column) => (
+          <td style={{ padding: '0.5em' }}>
+            {rowComponents?.[column]?.(entry, state) || rowComponents?.default?.(entry, state) || (
+              <span>{entry[column]}</span>
+            )}
+          </td>
+        ))}
+      </>
+    )
+  },
+})

package/src/components/data-grid/data-grid.tsx

@@ -1,17 +1,17 @@
 import { ChildrenList, createComponent, Shade } from '@furystack/shades'
 import { CollectionService } from '../../services/collection-service'
 import { GridProps } from '../grid'
-import { colors } from '../styles'
 import { DataGridHeader } from './header'
-import { DataGridBody, DataGridBodyState } from './body'
+import { DataGridBody } from './body'
 import { DataGridFooter } from './footer'
-import { ThemeProviderService } from '../../services'
+import { ClickAwayService, ThemeProviderService } from '../../services'
+import { DataGridRowState } from './data-grid-row'
 
 export type DataHeaderCells<T> = {
-  [TKey in keyof T | 'default']?: (name: keyof T, state: DataGridState) => JSX.Element
+  [TKey in keyof T | 'default']?: (name: keyof T) => JSX.Element
 }
 export type DataRowCells<T> = {
-  [TKey in keyof T | 'default']?: (element: T, state: DataGridBodyState<T>) => JSX.Element
+  [TKey in keyof T | 'default']?: (element: T, state: DataGridRowState<T>) => JSX.Element
 }
 
 export interface DataGridProps<T> {
@@ -20,25 +20,16 @@ export interface DataGridProps<T> {
   service: CollectionService<T>
   headerComponents: DataHeaderCells<T>
   rowComponents: DataRowCells<T>
-  onFocusChange?: (entry?: T) => void
-  onSelectionChange?: (selection: T[]) => void
-  onDoubleClick?: (entry: T) => void
-}
-
-export interface DataGridState {
-  error?: unknown
+  autofocus?: boolean
 }
 
 export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => JSX.Element<any, any> = Shade<
-  DataGridProps<any>,
-  DataGridState
+  DataGridProps<any>
 >({
   shadowDomName: 'shade-data-grid',
-  getInitialState: () => ({}),
-  constructed: ({ props, updateState, injector, element }) => {
+  resources: ({ injector, element, props }) => {
     const tp = injector.getInstance(ThemeProviderService)
-    const subscriptions = [
-      props.service.error.subscribe((error) => updateState({ error })),
+    return [
       tp.theme.subscribe((t) => {
         const headers = element.querySelectorAll('th')
         const { r, g, b } = tp.getRgbFromColorString(t.background.paper)
@@ -47,18 +38,19 @@ export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => J
           header.style.backgroundColor = `rgba(${r}, ${g}, ${b}, 0.3)`
         })
       }),
-      props.service.focus.subscribe((f) => props.onFocusChange?.(f)),
-      props.service.selection.subscribe((f) => props.onSelectionChange?.(f)),
+      new ClickAwayService(element, () => {
+        props.service.hasFocus.setValue(false)
+      }),
     ]
-    return () => Promise.all(subscriptions.map((s) => s.dispose()))
   },
-  render: ({ props, getState, injector }) => {
+  constructed: ({ props }) => {
+    window.addEventListener('keydown', (ev) => {
+      props.service.handleKeyDown(ev)
+    })
+  },
+  render: ({ props, injector }) => {
     const tp = injector.getInstance(ThemeProviderService)
     const theme = tp.theme.getValue()
-    const state = getState()
-    if (state.error) {
-      return <div style={{ color: colors.error.main }}>{JSON.stringify(state.error)}</div>
-    }
 
     const { r, g, b } = tp.getRgbFromColorString(theme.background.paper)
     const headerStyle: Partial<CSSStyleDeclaration> = {
@@ -86,17 +78,19 @@ export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => J
           overflow: 'auto',
           zIndex: '1',
         }}
+        onclick={() => {
+          props.service.hasFocus.setValue(true)
+        }}
       >
-        <table style={{ width: '100%', height: 'calc(100% - 4em)', position: 'relative' }}>
+        <table style={{ width: '100%', maxHeight: 'calc(100% - 4em)', position: 'relative' }}>
           <thead>
             <tr>
               {props.columns.map((column: any) => {
                 return (
                   <th style={headerStyle}>
-                    {props.headerComponents?.[column]?.(column, state) ||
-                      props.headerComponents?.default?.(column, state) || (
-                        <DataGridHeader<any, typeof column> field={column} collectionService={props.service} />
-                      )}
+                    {props.headerComponents?.[column]?.(column) || props.headerComponents?.default?.(column) || (
+                      <DataGridHeader<any, typeof column> field={column} collectionService={props.service} />
+                    )}
                   </th>
                 )
               })}
@@ -107,7 +101,6 @@ export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => J
             service={props.service}
             rowComponents={props.rowComponents}
             style={props.styles?.cell}
-            onDoubleClick={props.onDoubleClick}
           />
         </table>
         <DataGridFooter service={props.service} />

package/src/components/data-grid/footer.tsx

@@ -2,7 +2,7 @@ import { Shade, createComponent } from '@furystack/shades'
 import { ThemeProviderService } from '../../services'
 import { CollectionService, CollectionData } from '../../services/collection-service'
 
-export const dataGridItemsPerPage = [10, 20, 25, 50, 100]
+export const dataGridItemsPerPage = [10, 20, 25, 50, 100, Infinity]
 
 export const DataGridFooter = Shade<{ service: CollectionService<any> }, { data: CollectionData<any> }>({
   shadowDomName: 'shade-data-grid-footer',
@@ -26,13 +26,14 @@ export const DataGridFooter = Shade<{ service: CollectionService<any> }, { data:
     const state = getState()
     const currentQuerySettings = props.service.querySettings.getValue()
     const currentPage = Math.ceil(currentQuerySettings.skip || 0) / (currentQuerySettings.top || 1)
+    const currentEntriesPerPage = currentQuerySettings.top || Infinity
     const theme = injector.getInstance(ThemeProviderService).theme.getValue()
 
     return (
       <div
         className="pager"
         style={{
-          background: theme.background.paper,
+          backdropFilter: 'blur(10px)',
           color: theme.text.secondary,
           position: 'sticky',
           bottom: '0',
@@ -42,27 +43,28 @@ export const DataGridFooter = Shade<{ service: CollectionService<any> }, { data:
           alignItems: 'center',
         }}
       >
-        <div>
-          Goto page
-          <select
-            style={{ margin: '0 1em' }}
-            onchange={(ev) => {
-              const value = parseInt((ev.target as any).value, 10)
-              const currentQuery = props.service.querySettings.getValue()
-              props.service.querySettings.setValue({ ...currentQuery, skip: (currentQuery.top || 0) * value })
-            }}
-          >
-            {[...new Array(Math.ceil(state.data.count / (props.service.querySettings.getValue().top || Infinity)))].map(
-              (_val, index) => (
+        {currentEntriesPerPage !== Infinity && (
+          <div>
+            Goto page
+            <select
+              style={{ margin: '0 1em' }}
+              onchange={(ev) => {
+                const value = parseInt((ev.target as any).value, 10)
+                const currentQuery = props.service.querySettings.getValue()
+                props.service.querySettings.setValue({ ...currentQuery, skip: (currentQuery.top || 0) * value })
+              }}
+            >
+              {[
+                ...new Array(Math.ceil(state.data.count / (props.service.querySettings.getValue().top || Infinity))),
+              ].map((_val, index) => (
                 <option value={index.toString()} selected={currentPage === index}>
                   {(index + 1).toString()}
                 </option>
-              ),
-            )}
-          </select>
-        </div>
+              ))}
+            </select>
+          </div>
+        )}
         <div>
-          {' '}
           Show
           <select
             style={{ margin: '0 1em' }}
@@ -76,7 +78,7 @@ export const DataGridFooter = Shade<{ service: CollectionService<any> }, { data:
             }}
           >
             {dataGridItemsPerPage.map((no) => (
-              <option value={no.toString()} selected={no === currentQuerySettings.top}>
+              <option value={no.toString()} selected={no === currentEntriesPerPage}>
                 {no.toString()}
               </option>
             ))}

package/src/components/data-grid/header.tsx

@@ -29,7 +29,7 @@ export const DataGridHeader: <T, K extends keyof T>(
         ...currentSettings,
         filter: {
           ...currentSettings.filter,
-          [props.field]: value ? { $regex: value } : undefined,
+          [props.field]: { $regex: value },
         },
       }
       props.collectionService.querySettings.setValue(newSettings)

package/src/components/data-grid/index.tsx

@@ -1 +1,2 @@
 export * from './data-grid'
+export * from './selection-cell'

package/src/components/data-grid/selection-cell.tsx

@@ -0,0 +1,32 @@
+import { createComponent, Shade } from '@furystack/shades'
+import { CollectionService } from '../../services'
+
+export const SelectionCell = Shade<{ entry: any; service: CollectionService<any> }>({
+  shadowDomName: 'shades-data-grid-selection-cell',
+  resources: ({ props, element }) => [
+    props.service.selection.subscribe((selection) => {
+      if (selection.includes(props.entry)) {
+        ;(element.firstChild as HTMLInputElement).checked = true
+      } else {
+        ;(element.firstChild as HTMLInputElement).checked = false
+      }
+    }),
+  ],
+  render: ({ props }) => {
+    return (
+      <input
+        onchange={(ev) => {
+          if ((ev.target as HTMLInputElement).checked) {
+            props.service.selection.setValue([...props.service.selection.getValue(), props.entry])
+          } else {
+            props.service.selection.setValue([
+              ...props.service.selection.getValue().filter((entry) => entry !== props.entry),
+            ])
+          }
+        }}
+        type="checkbox"
+        checked={props.service.selection.getValue().includes(props.entry) ? true : false}
+      />
+    )
+  },
+})

package/src/components/grid.tsx

@@ -64,7 +64,7 @@ export const Grid: <T>(props: GridProps<T>, children: ChildrenList) => JSX.Eleme
                   <th style={headerStyle}>
                     {props.headerComponents?.[column]?.(column) || props.headerComponents?.default?.(column) || (
                       <span>{column}</span>
-                    )}{' '}
+                    )}
                   </th>
                 )
               })}

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './animations'
 export * from './app-bar'
+export * from './app-bar-link'
 export * from './autocomplete'
 export * from './avatar'
 export * from './button'

package/src/components/input.tsx

@@ -1,5 +1,6 @@
 import { Shade, PartialElement, createComponent } from '@furystack/shades'
 import { ThemeProviderService } from '..'
+import { Theme } from '../services'
 import { promisifyAnimation } from '../utils/promisify-animation'
 
 export interface InputProps extends PartialElement<HTMLInputElement> {
@@ -18,11 +19,24 @@ export interface TextAreaProps extends PartialElement<HTMLTextAreaElement> {
 }
 
 export type TextInputProps = InputProps | TextAreaProps
-export const Input = Shade<TextInputProps>({
+
+export type TextInputState = {
+  theme: Theme
+  value?: string
+}
+
+export const Input = Shade<TextInputProps, TextInputState>({
   shadowDomName: 'shade-input',
-  render: ({ props, element, injector }) => {
+  getInitialState: ({ injector, props }) => ({
+    theme: injector.getInstance(ThemeProviderService).theme.getValue(),
+    value: props.value,
+  }),
+  resources: ({ injector, updateState }) => [
+    injector.getInstance(ThemeProviderService).theme.subscribe((theme) => updateState({ theme })),
+  ],
+  render: ({ props, element, injector, getState, updateState }) => {
     const themeProvider = injector.getInstance(ThemeProviderService)
-    const theme = themeProvider.theme.getValue()
+    const { theme, value } = getState()
     const { palette } = theme
 
     return (
@@ -55,12 +69,14 @@ export const Input = Shade<TextInputProps>({
               ...props.style,
             }}
           >
-            {props.value}
+            {value}
           </div>
         ) : (
           <input
             onchange={(ev) => {
-              props.onTextChange && props.onTextChange((ev.target as any).value)
+              const newValue = (ev.target as HTMLInputElement).value
+              updateState({ value: newValue }, true)
+              props.onTextChange && props.onTextChange(newValue)
               props.onchange && (props.onchange as any)(ev)
             }}
             onfocus={() => {
@@ -123,6 +139,7 @@ export const Input = Shade<TextInputProps>({
               padding: '0.6em 0',
               ...props.style,
             }}
+            value={value}
           />
         )}
       </label>

package/src/components/paper.tsx

@@ -24,7 +24,7 @@ export const Paper = Shade<PartialElement<HTMLDivElement> & { elevation?: 1 | 2
           color: themeProvider.theme.getValue().text.secondary,
           margin: '8px',
           padding: '6px 16px',
-          ...(props ? props.style : {}),
+          ...props?.style,
         }}
       >
         {children}