@furystack/shades-common-components 3.6.1 → 4.0.0

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

@@ -1,5 +1,6 @@
 import type { ChildrenList } from '@furystack/shades'
-import { attachStyles, createComponent, createFragment, Shade } from '@furystack/shades'
+import { attachStyles, createComponent, Shade } from '@furystack/shades'
+import { ThemeProviderService } from '../../services'
 import type { CollectionService } from '../../services/collection-service'
 import type { DataRowCells } from './data-grid'
 
@@ -16,87 +17,88 @@ export interface DataGridRowProps<T> {
   unselectedRowStyle?: Partial<CSSStyleDeclaration>
 }
 
-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>
+export const DataGridRow: <T>(props: DataGridRowProps<T>, children: ChildrenList) => JSX.Element<any> = Shade<
+  DataGridRowProps<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) {
-        attachStyles(element, {
-          style: props.focusedRowStyle || {
-            filter: 'brightness(1.5)',
-            fontWeight: 'bolder',
-          },
-        })
 
-        element.classList.add('focused')
+  render: ({ props, element, useObservable, injector }) => {
+    const { entry, rowComponents, columns, service } = props
 
-        const headerHeight = element.closest('table')?.querySelector('th')?.getBoundingClientRect().height || 42
+    const { theme } = injector.getInstance(ThemeProviderService)
 
-        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
-        const desiredMaxTop = element.offsetTop + element.clientHeight
-        if (desiredMaxTop > visibleMaxTop) {
-          parent.scrollTo({ top: desiredMaxTop - visibleMaxTop, behavior: 'smooth' })
-        }
-      } else {
-        element.classList.remove('focused')
-        attachStyles(element, {
-          style: props.unfocusedRowStyle || {
-            filter: 'brightness(1)',
-            fontWeight: 'inherit',
-          },
-        })
-      }
-    }, true),
-    props.service.selection.subscribe((selection) => {
-      if (selection.includes(props.entry)) {
+    const attachSelectedStyles = (selection: any[]) => {
+      if (selection.includes(entry)) {
         element.classList.add('selected')
-        attachStyles(element, { style: props.selectedRowStyle || { backgroundColor: 'rgba(128,128,128,0.1)' } })
+        attachStyles(element, { style: props.selectedRowStyle || { backgroundColor: theme.background.default } })
         element.setAttribute('aria-selected', 'true')
       } else {
         element.classList.remove('selected')
         attachStyles(element, { style: props.unselectedRowStyle || { backgroundColor: 'transparent' } })
         element.setAttribute('aria-selected', 'false')
       }
-    }, true),
-  ],
+    }
+
+    const [selection] = useObservable('isSelected', service.selection, attachSelectedStyles, true)
+
+    attachSelectedStyles(selection)
+
+    const [focus] = useObservable(
+      'focus',
+      service.focusedEntry,
+      (newEntry) => {
+        if (newEntry === props.entry) {
+          attachStyles(element, {
+            style: props.focusedRowStyle || {
+              boxShadow: `0 0 0 1px ${theme.palette.primary.main}`,
+              fontWeight: 'bolder',
+            },
+          })
+
+          element.classList.add('focused')
+
+          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
+          const desiredMaxTop = element.offsetTop + element.clientHeight
+          if (desiredMaxTop > visibleMaxTop) {
+            parent.scrollTo({ top: desiredMaxTop - visibleMaxTop, behavior: 'smooth' })
+          }
+        } else {
+          element.classList.remove('focused')
+          attachStyles(element, {
+            style: props.unfocusedRowStyle || {
+              boxShadow: 'none',
+              fontWeight: 'inherit',
+            },
+          })
+        }
+      },
+      true,
+    )
 
-  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'
-    if (state.selection?.includes(entry)) {
+    if (selection?.includes(entry)) {
       element.setAttribute('aria-selected', 'true')
       element.classList.add('selected')
     }
 
-    if (state.focus === entry) {
+    if (focus === entry) {
       element.classList.add('focused')
     }
-    element.setAttribute('aria-selected', state.selection?.includes(entry).toString() || 'false')
+    element.setAttribute('aria-selected', selection?.includes(entry).toString() || 'false')
 
     return (
       <>
@@ -106,9 +108,8 @@ export const DataGridRow: <T>(props: DataGridRowProps<T>, children: ChildrenList
             onclick={(ev) => props.onRowClick?.(entry, ev)}
             ondblclick={(ev) => props.onRowDoubleClick?.(entry, ev)}
           >
-            {rowComponents?.[column]?.(entry, state) || rowComponents?.default?.(entry, state) || (
-              <span>{entry[column]}</span>
-            )}
+            {rowComponents?.[column]?.(entry, { selection, focus }) ||
+              rowComponents?.default?.(entry, { selection, focus }) || <span>{entry[column]}</span>}
           </td>
         ))}
       </>

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

@@ -6,13 +6,12 @@ import { DataGridHeader } from './header'
 import { DataGridBody } from './body'
 import { DataGridFooter } from './footer'
 import { ClickAwayService, ThemeProviderService } from '../../services'
-import type { DataGridRowState } from './data-grid-row'
 
 export type DataHeaderCells<T> = {
   [TKey in keyof T | 'default']?: (name: keyof T) => JSX.Element
 }
 export type DataRowCells<T> = {
-  [TKey in keyof T | 'default']?: (element: T, state: DataGridRowState<T>) => JSX.Element
+  [TKey in keyof T | 'default']?: (element: T, state: { focus?: T; selection: T[] }) => JSX.Element
 }
 
 export interface DataGridProps<T> {
@@ -68,26 +67,27 @@ export interface DataGridProps<T> {
   loaderComponent?: JSX.Element
 }
 
-export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => JSX.Element<any, any> = Shade<
+export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => JSX.Element<any> = Shade<
   DataGridProps<any>
 >({
   shadowDomName: 'shade-data-grid',
-  resources: ({ element, props }) => {
-    return [
-      new ClickAwayService(element, () => {
-        props.service.hasFocus.setValue(false)
-      }),
-    ]
-  },
   constructed: ({ props }) => {
     const listener = (ev: KeyboardEvent) => props.service.handleKeyDown(ev)
     window.addEventListener('keydown', listener)
     return () => window.removeEventListener('keydown', listener)
   },
-  render: ({ props, injector }) => {
+  render: ({ props, injector, useDisposable, element }) => {
     const tp = injector.getInstance(ThemeProviderService)
     const { theme } = tp
 
+    useDisposable(
+      'clickAway',
+      () =>
+        new ClickAwayService(element, () => {
+          props.service.hasFocus.setValue(false)
+        }),
+    )
+
     const headerStyle: Partial<CSSStyleDeclaration> = {
       backdropFilter: 'blur(12px)',
       padding: '12px 0',

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

@@ -1,26 +1,23 @@
 import { Shade, createComponent } from '@furystack/shades'
 import { ThemeProviderService } from '../../services'
-import type { CollectionService, CollectionData } from '../../services/collection-service'
+import type { CollectionService } from '../../services/collection-service'
 
 export const dataGridItemsPerPage = [10, 20, 25, 50, 100, Infinity]
 
-export const DataGridFooter = Shade<{ service: CollectionService<any> }, { data: CollectionData<any> }>({
+export const DataGridFooter = Shade<{ service: CollectionService<any> }>({
   shadowDomName: 'shade-data-grid-footer',
-  getInitialState: ({ props }) => ({
-    data: props.service.data.getValue(),
-  }),
-  constructed: ({ props, updateState }) => {
-    const disposables = [props.service.data.subscribe((data) => updateState({ data }))]
-
-    return () => disposables.forEach((d) => d.dispose())
-  },
-  render: ({ props, getState, injector }) => {
-    const state = getState()
-    const currentQuerySettings = props.service.querySettings.getValue()
-    const currentPage = Math.ceil(currentQuerySettings.skip || 0) / (currentQuerySettings.top || 1)
-    const currentEntriesPerPage = currentQuerySettings.top || Infinity
+  render: ({ props, injector, useObservable }) => {
     const { theme } = injector.getInstance(ThemeProviderService)
 
+    const [currentData] = useObservable('dataUpdater', props.service.data)
+
+    const [currentQuerySettings] = useObservable('querySettings', props.service.querySettings)
+
+    const top = currentQuerySettings.top || Infinity
+    const skip = currentQuerySettings.skip || 0
+    const currentPage = Math.ceil(skip) / (top || 1)
+    const currentEntriesPerPage = top
+
     return (
       <div
         className="pager"
@@ -47,7 +44,7 @@ export const DataGridFooter = Shade<{ service: CollectionService<any> }, { data:
               }}
             >
               {[
-                ...new Array(Math.ceil(state.data.count / (props.service.querySettings.getValue().top || Infinity))),
+                ...new Array(Math.ceil(currentData.count / (props.service.querySettings.getValue().top || Infinity))),
               ].map((_val, index) => (
                 <option value={index.toString()} selected={currentPage === index}>
                   {(index + 1).toString()}

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

@@ -19,37 +19,41 @@ export interface DataGridHeaderState<T> {
 export const DataGridHeader: <T, K extends keyof T>(
   props: DataGridHeaderProps<T, K>,
   children: ChildrenList,
-) => JSX.Element<any, any> = Shade<DataGridHeaderProps<any, any>, DataGridHeaderState<any>>({
+) => JSX.Element<any> = Shade<DataGridHeaderProps<any, any>>({
   shadowDomName: 'data-grid-header',
-  getInitialState: ({ props }) => ({
-    querySettings: props.collectionService.querySettings.getValue(),
-    isSearchOpened: false,
-    updateSearchValue: debounce((value: string) => {
-      const currentSettings = props.collectionService.querySettings.getValue()
-      const newSettings: FindOptions<unknown, any> = {
-        ...currentSettings,
-        filter: {
-          ...currentSettings.filter,
-          [props.field]: { $regex: value },
-        },
-      }
-      props.collectionService.querySettings.setValue(newSettings)
-    }),
-  }),
-  constructed: ({ props, updateState, getState }) => {
-    const disposable = props.collectionService.querySettings.subscribe((querySettings) =>
-      updateState({ querySettings }, getState().isSearchOpened),
+  // getInitialState: ({ props }) => ({
+  //   querySettings: props.collectionService.querySettings.getValue(),
+  //   isSearchOpened: false,
+  // updateSearchValue: ,
+  // }),
+  render: ({ props, element, useState, useObservable }) => {
+    const [querySettings, setQuerySettings] = useObservable('querySettings', props.collectionService.querySettings)
+    const currentOrder = Object.keys(querySettings.order || {})[0]
+    const currentOrderDirection = Object.values(querySettings.order || {})[0]
+
+    const [isSearchOpened, setIsSearchOpened] = useState('isSearchOpened', false)
+    const [updateSearchValue] = useState(
+      'updateSearchValue',
+      debounce((value: string) => {
+        const currentSettings = props.collectionService.querySettings.getValue()
+        const newSettings: FindOptions<unknown, any> = {
+          ...currentSettings,
+          filter: {
+            ...currentSettings.filter,
+            [props.field]: { $regex: value },
+          },
+        }
+        props.collectionService.querySettings.setValue(newSettings)
+      }),
     )
-    return () => disposable.dispose()
-  },
-  render: ({ getState, props, updateState, element }) => {
-    const currentState = getState()
-    const currentOrder = Object.keys(currentState.querySettings.order || {})[0]
-    const currentOrderDirection = Object.values(currentState.querySettings.order || {})[0]
 
     const filterValue = (props.collectionService.querySettings.getValue().filter as any)?.[props.field]?.$regex || ''
 
-    if (currentState.isSearchOpened) {
+    useObservable('querySettingsChange', props.collectionService.querySettings, (newSettings) => {
+      setQuerySettings(newSettings)
+    })
+
+    if (isSearchOpened) {
       setTimeout(() => {
         element.querySelector('input')?.focus()
       }, 1)
@@ -59,8 +63,8 @@ export const DataGridHeader: <T, K extends keyof T>(
           value={filterValue}
           placeholder={props.field}
           autofocus
-          onblur={() => updateState({ isSearchOpened: false })}
-          onkeyup={(ev) => currentState.updateSearchValue((ev.target as HTMLInputElement).value)}
+          onblur={() => setIsSearchOpened(false)}
+          onkeyup={(ev) => updateSearchValue((ev.target as HTMLInputElement).value)}
           labelProps={{
             style: { padding: '0px 2em' },
           }}
@@ -71,7 +75,7 @@ export const DataGridHeader: <T, K extends keyof T>(
     return (
       <div
         style={{ display: 'flex', width: '100%', height: '100%', justifyContent: 'space-around' }}
-        onclick={() => updateState({ isSearchOpened: true })}
+        onclick={() => setIsSearchOpened(true)}
       >
         <div>{props.field}</div>
         <div className="header-controls" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
@@ -88,7 +92,7 @@ export const DataGridHeader: <T, K extends keyof T>(
               }
               newOrder[props.field] = newDirection
               props.collectionService.querySettings.setValue({
-                ...currentState.querySettings,
+                ...querySettings,
                 order: newOrder,
               })
             }}

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

@@ -3,29 +3,19 @@ import type { 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 }) => {
+  render: ({ props, useObservable, element }) => {
+    const [selection] = useObservable('selection', props.service.selection, (newSelection) => {
+      ;(element.querySelector('input') as HTMLInputElement).checked = newSelection.includes(props.entry)
+    })
+    const isSelected = selection.includes(props.entry)
+
     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),
-            ])
-          }
+        onchange={() => {
+          props.service.toggleSelection(props.entry)
         }}
         type="checkbox"
-        checked={props.service.selection.getValue().includes(props.entry) ? true : false}
+        checked={isSelected}
       />
     )
   },

package/src/components/fab.tsx

@@ -1,30 +1,28 @@
 import type { PartialElement } from '@furystack/shades'
+import { attachProps } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
 
 export const Fab = Shade<PartialElement<HTMLDivElement>>({
   shadowDomName: 'shade-fab',
-  render: ({ props, children }) => {
-    return (
-      <div
-        {...props}
-        style={{
-          position: 'fixed',
-          bottom: '32px',
-          right: '32px',
-          background: 'gray',
-          width: '64px',
-          height: '64px',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          borderRadius: '50%',
-          boxShadow: '2px 2px 4px rgba(0,0,0,0.3)',
-          cursor: 'pointer',
-          ...props.style,
-        }}
-      >
-        {children}
-      </div>
-    )
+  render: ({ props, children, element }) => {
+    attachProps(element, {
+      ...props,
+      style: {
+        position: 'fixed',
+        bottom: '32px',
+        right: '32px',
+        background: 'gray',
+        width: '64px',
+        height: '64px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: '50%',
+        boxShadow: '2px 2px 4px rgba(0,0,0,0.3)',
+        cursor: 'pointer',
+        ...props?.style,
+      },
+    })
+    return <>{children}</>
   },
 })

package/src/components/grid.tsx

@@ -23,7 +23,7 @@ export type RowCells<T> = {
   [TKey in keyof T | 'default']?: (element: T) => JSX.Element
 }
 
-export const Grid: <T>(props: GridProps<T>, children: ChildrenList) => JSX.Element<any, any> = Shade({
+export const Grid: <T>(props: GridProps<T>, children: ChildrenList) => JSX.Element<any> = Shade({
   shadowDomName: 'shade-grid',
   render: ({ props, injector }) => {
     const { theme } = injector.getInstance(ThemeProviderService)

package/src/components/inputs/autocomplete.tsx

@@ -2,27 +2,21 @@ import { Shade, createComponent } from '@furystack/shades'
 import type { TextInputProps } from './input'
 import { Input } from './input'
 
-export const Autocomplete = Shade<
-  { inputProps?: TextInputProps; suggestions: string[]; strict?: boolean; onchange?: (value: string) => void },
-  { dataListId: string }
->({
-  getInitialState: () => ({
-    dataListId: (Math.random() + 1).toString(36).substring(3),
-  }),
-  constructed: ({ getState, element }) => {
-    const { dataListId } = getState()
-    const input = element.querySelector('input')
-    if (input) {
-      input.setAttribute('list', dataListId)
-    }
-  },
+export const Autocomplete = Shade<{
+  inputProps?: TextInputProps
+  suggestions: string[]
+  strict?: boolean
+  onchange?: (value: string) => void
+}>({
   shadowDomName: 'shade-autocomplete',
-  render: ({ props, getState }) => {
-    const { dataListId } = getState()
+  render: ({ props, useState }) => {
+    const [dataListId] = useState('dataListId', (Math.random() + 1).toString(36).substring(3))
+
     return (
       <div>
         <Input
           {...props.inputProps}
+          list={dataListId as any}
           onchange={(ev) => {
             const { value } = ev.target as any
             if (props.strict) {

package/src/components/inputs/input.tsx

@@ -1,5 +1,6 @@
 import type { PartialElement } from '@furystack/shades'
 import { Shade, createComponent, attachStyles } from '@furystack/shades'
+import { ObservableValue } from '@furystack/utils'
 import { ThemeProviderService } from '../..'
 import type { Palette } from '../../services'
 
@@ -106,33 +107,32 @@ const getLabelStyle = ({
   }
 }
 
-export const Input = Shade<TextInputProps, TextInputState>({
+export const Input = Shade<TextInputProps>({
   shadowDomName: 'shade-input',
-  getInitialState: ({ props }) => ({
-    value: props.value || '',
-    focused: props.autofocus || false,
-    validity: { valid: true } as ValidityState,
-  }),
-  compareState: ({ newState, element, props, injector }) => {
+  render: ({ props, injector, useObservable, element }) => {
     const themeProvider = injector.getInstance(ThemeProviderService)
-    const label = element.querySelector('label') as HTMLLabelElement
-    attachStyles(label, { style: getLabelStyle({ themeProvider, props, state: newState }) })
 
-    const helper = element.querySelector<HTMLSpanElement>('span.helperText')
-    const helperNode = props.getHelperText?.({ state: newState }) || ''
-    helper?.replaceChildren(helperNode)
+    const [state, setState] = useObservable<TextInputState>(
+      'inputState',
+      new ObservableValue({
+        value: props.value || '',
+        focused: props.autofocus || false,
+        validity: { valid: true } as ValidityState,
+      }),
+      (newState) => {
+        const label = element.querySelector('label') as HTMLLabelElement
+        attachStyles(label, { style: getLabelStyle({ themeProvider, props, state: newState }) })
 
-    const startIcon = element.querySelector<HTMLSpanElement>('span.startIcon')
-    startIcon?.replaceChildren(props.getStartIcon?.({ state: newState }) || '')
-    const endIcon = element.querySelector<HTMLSpanElement>('span.endIcon')
-    endIcon?.replaceChildren(props.getEndIcon?.({ state: newState }) || '')
+        const helper = element.querySelector<HTMLSpanElement>('span.helperText')
+        const helperNode = props.getHelperText?.({ state: newState }) || ''
+        helper?.replaceChildren(helperNode)
 
-    return false
-  },
-  render: ({ props, getState, updateState, injector }) => {
-    const state = getState()
-    const { value } = state
-    const themeProvider = injector.getInstance(ThemeProviderService)
+        const startIcon = element.querySelector<HTMLSpanElement>('span.startIcon')
+        startIcon?.replaceChildren(props.getStartIcon?.({ state: newState }) || '')
+        const endIcon = element.querySelector<HTMLSpanElement>('span.endIcon')
+        endIcon?.replaceChildren(props.getEndIcon?.({ state: newState }) || '')
+      },
+    )
 
     return (
       <label {...props.labelProps} style={getLabelStyle({ props, state, themeProvider })}>
@@ -150,20 +150,20 @@ export const Input = Shade<TextInputProps, TextInputState>({
             oninvalid={(ev) => {
               ev.preventDefault()
               const el = ev.target as HTMLInputElement
-              updateState({ validity: el.validity })
+              setState({ ...state, validity: el.validity })
             }}
             onchange={(ev) => {
               const el = ev.target as HTMLInputElement
               const newValue = el.value
-              updateState({ value: newValue, validity: el?.validity })
+              setState({ ...state, value: newValue, validity: el?.validity })
               props.onTextChange?.(newValue)
               props.onchange && (props.onchange as any)(ev)
             }}
             onfocus={() => {
-              updateState({ focused: true })
+              setState({ ...state, focused: true })
             }}
             onblur={() => {
-              updateState({ focused: false })
+              setState({ ...state, focused: false })
             }}
             {...props}
             style={{
@@ -180,7 +180,7 @@ export const Input = Shade<TextInputProps, TextInputState>({
               flexGrow: '1',
               ...props.style,
             }}
-            value={value}
+            value={state.value}
           />
           {props.getEndIcon ? <span className="endIcon">{props.getEndIcon({ state })}</span> : null}
         </div>

package/src/components/inputs/text-area.tsx

@@ -10,19 +10,11 @@ export interface TextAreaProps extends PartialElement<HTMLTextAreaElement> {
   variant?: 'contained' | 'outlined'
 }
 
-export type TextAreaInputState = {
-  value?: string
-}
-
-export const TextArea = Shade<TextAreaProps, TextAreaInputState>({
+export const TextArea = Shade<TextAreaProps>({
   shadowDomName: 'shade-text-area',
-  getInitialState: ({ props }) => ({
-    value: props.value,
-  }),
-  render: ({ props, element, injector, getState }) => {
+  render: ({ props, element, injector }) => {
     const themeProvider = injector.getInstance(ThemeProviderService)
     const { theme } = themeProvider
-    const { value } = getState()
     const { palette } = theme
 
     return (
@@ -105,7 +97,7 @@ export const TextArea = Shade<TextAreaProps, TextAreaInputState>({
             }
           }}
         >
-          {value}
+          {props.value}
         </div>
       </label>
     )