@furystack/shades-common-components 6.0.0 → 7.0.0

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

@@ -61,14 +61,16 @@ export const OrderButton = Shade<{ collectionService: CollectionService<any>; fi
 const SearchButton = Shade<{ service: CollectionService<any>; fieldName: string; onclick: () => void }>({
   shadowDomName: 'data-grid-search-button',
   render: ({ props, useObservable, element }) => {
-    const [queryState] = useObservable('currentFilterState', props.service.querySettings, (currentQueryState) => {
-      const currentValue = (currentQueryState.filter?.[props.fieldName] as any)?.$regex || ''
+    const [queryState] = useObservable('currentFilterState', props.service.querySettings, {
+      onChange: (currentQueryState) => {
+        const currentValue = (currentQueryState.filter?.[props.fieldName] as any)?.$regex || ''
 
-      const button = element.querySelector('button') as HTMLInputElement
-      button.innerHTML = currentValue ? '🔍' : '🔎'
-      button.style.textShadow = currentValue
-        ? '1px 1px 20px rgba(235,225,45,0.9), 1px 1px 12px rgba(235,225,45,0.9), 0px 0px 3px  rgba(255,200,145,0.6)'
-        : 'none'
+        const button = element.querySelector('button') as HTMLInputElement
+        button.innerHTML = currentValue ? '🔍' : '🔎'
+        button.style.textShadow = currentValue
+          ? '1px 1px 20px rgba(235,225,45,0.9), 1px 1px 12px rgba(235,225,45,0.9), 0px 0px 3px  rgba(255,200,145,0.6)'
+          : 'none'
+      },
     })
 
     const filterValue = (queryState.filter as any)?.[props.fieldName]?.$regex || ''
@@ -100,9 +102,11 @@ const SearchForm = Shade<{
   render: ({ props, useObservable, element }) => {
     type SearchSubmitType = { searchValue: string }
 
-    const [queryState] = useObservable('currentFilterState', props.service.querySettings, (currentQueryState) => {
-      const currentValue = (currentQueryState.filter?.[props.fieldName] as any)?.$regex || ''
-      ;(element.querySelector('input') as HTMLInputElement).value = currentValue
+    const [queryState] = useObservable('currentFilterState', props.service.querySettings, {
+      onChange: (currentQueryState) => {
+        const currentValue = (currentQueryState.filter?.[props.fieldName] as any)?.$regex || ''
+        ;(element.querySelector('input') as HTMLInputElement).value = currentValue
+      },
     })
 
     return (
@@ -157,17 +161,19 @@ export const DataGridHeader: <T, K extends keyof T>(
 ) => JSX.Element<any> = Shade<DataGridHeaderProps<any, any>>({
   shadowDomName: 'data-grid-header',
   render: ({ props, element, useObservable }) => {
-    const [, setIsSearchOpened] = useObservable('isSearchOpened', new ObservableValue(false), (newValue) => {
-      const searchForm = element.querySelector('.search-form') as HTMLElement
-      const headerContent = element.querySelector('.header-content') as HTMLElement
-      if (!newValue) {
-        collapse(searchForm)
-        expand(headerContent)
-      } else {
-        searchForm.style.display = 'flex'
-        expand(searchForm).then(() => searchForm.querySelector('input')?.focus())
-        collapse(headerContent)
-      }
+    const [, setIsSearchOpened] = useObservable('isSearchOpened', new ObservableValue(false), {
+      onChange: (newValue) => {
+        const searchForm = element.querySelector('.search-form') as HTMLElement
+        const headerContent = element.querySelector('.header-content') as HTMLElement
+        if (!newValue) {
+          collapse(searchForm)
+          expand(headerContent)
+        } else {
+          searchForm.style.display = 'flex'
+          expand(searchForm).then(() => searchForm.querySelector('input')?.focus())
+          collapse(headerContent)
+        }
+      },
     })
     const updateSearchValue = (value?: string) => {
       const currentSettings = props.collectionService.querySettings.getValue()

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

@@ -4,8 +4,10 @@ import type { CollectionService } from '../../services/collection-service.js'
 export const SelectionCell = Shade<{ entry: any; service: CollectionService<any> }>({
   shadowDomName: 'shades-data-grid-selection-cell',
   render: ({ props, useObservable, element }) => {
-    const [selection] = useObservable('selection', props.service.selection, (newSelection) => {
-      ;(element.querySelector('input') as HTMLInputElement).checked = newSelection.includes(props.entry)
+    const [selection] = useObservable('selection', props.service.selection, {
+      onChange: (newSelection) => {
+        ;(element.querySelector('input') as HTMLInputElement).checked = newSelection.includes(props.entry)
+      },
     })
     const isSelected = selection.includes(props.entry)
 

package/src/components/inputs/input.tsx

@@ -226,7 +226,7 @@ export const Input = Shade<TextInputProps>({
         validity: element.querySelector('input')?.validity || ({} as ValidityState),
         element,
       }),
-      updateState,
+      { onChange: updateState },
     )
 
     return (

package/src/components/suggest/suggest-input.tsx

@@ -11,10 +11,9 @@ export const SuggestInput = Shade<{ manager: SuggestManager<any> }>({
   render: ({ element, props, useObservable, injector }) => {
     const { theme } = injector.getInstance(ThemeProviderService)
 
-    useObservable(
-      'isOpened',
-      props.manager.isOpened,
-      (isOpened) => {
+    // todo: getLast is eliminated, do we need it?
+    useObservable('isOpened', props.manager.isOpened, {
+      onChange: (isOpened) => {
         const input = element.firstChild as HTMLInputElement
         if (isOpened) {
           input.focus()
@@ -22,8 +21,7 @@ export const SuggestInput = Shade<{ manager: SuggestManager<any> }>({
           input.value = ''
         }
       },
-      true,
-    )
+    })
 
     return (
       <input

package/src/components/suggest/suggest-manager.ts

@@ -30,8 +30,8 @@ export class SuggestManager<T> extends EventHub<'onSelectSuggestion', { onSelect
   }).bind(this)
 
   public dispose() {
-    window.removeEventListener('keyup', this.keyPressListener)
-    window.removeEventListener('click', this.clickOutsideListener)
+    window.removeEventListener('keyup', this.keyPressListener, true)
+    window.removeEventListener('click', this.clickOutsideListener, true)
     this.isOpened.dispose()
     this.isLoading.dispose()
     this.term.dispose()

package/src/components/suggest/suggestion-list.tsx

@@ -13,10 +13,9 @@ export const SuggestionList: <T>(props: { manager: SuggestManager<T> }, children
 
       const [suggestions] = useObservable('suggestions', manager.currentSuggestions)
 
-      const [selectedIndex] = useObservable(
-        'selectedIndex',
-        manager.selectedIndex,
-        (idx) => {
+      // todo: GetLast is eliminated, do we need it?
+      const [selectedIndex] = useObservable('selectedIndex', manager.selectedIndex, {
+        onChange: (idx) => {
           ;([...element.querySelectorAll('.suggestion-item')] as HTMLDivElement[]).map((s, i) => {
             if (i === idx) {
               s.style.background = theme.background.paper
@@ -27,35 +26,36 @@ export const SuggestionList: <T>(props: { manager: SuggestManager<T> }, children
             }
           })
         },
-        true,
-      )
+      })
 
-      const [isListOpened] = useObservable('isOpened', manager.isOpened, async (isOpened) => {
-        const container = element.firstElementChild as HTMLDivElement
-        if (isOpened) {
-          container.style.zIndex = '1'
-          container.style.width = `calc(${Math.round(
-            element.parentElement?.getBoundingClientRect().width || 200,
-          )}px - 3em)`
-          await promisifyAnimation(
-            container,
-            [
-              { opacity: 0, transform: 'translate(0, -50px)' },
-              { opacity: 1, transform: 'translate(0, 0)' },
-            ],
-            { fill: 'forwards', duration: 500 },
-          )
-        } else {
-          await promisifyAnimation(
-            container,
-            [
-              { opacity: 1, transform: 'translate(0, 0)' },
-              { opacity: 0, transform: 'translate(0, -50px)' },
-            ],
-            { fill: 'forwards', duration: 200 },
-          )
-          container.style.zIndex = '-1'
-        }
+      const [isListOpened] = useObservable('isOpened', manager.isOpened, {
+        onChange: async (isOpened) => {
+          const container = element.firstElementChild as HTMLDivElement
+          if (isOpened) {
+            container.style.zIndex = '1'
+            container.style.width = `calc(${Math.round(
+              element.parentElement?.getBoundingClientRect().width || 200,
+            )}px - 3em)`
+            await promisifyAnimation(
+              container,
+              [
+                { opacity: 0, transform: 'translate(0, -50px)' },
+                { opacity: 1, transform: 'translate(0, 0)' },
+              ],
+              { fill: 'forwards', duration: 500 },
+            )
+          } else {
+            await promisifyAnimation(
+              container,
+              [
+                { opacity: 1, transform: 'translate(0, 0)' },
+                { opacity: 0, transform: 'translate(0, -50px)' },
+              ],
+              { fill: 'forwards', duration: 200 },
+            )
+            container.style.zIndex = '-1'
+          }
+        },
       })
 
       return (

package/src/services/collection-service.ts

@@ -217,7 +217,8 @@ export class CollectionService<T> implements Disposable {
       }
     }
 
-    this.querySettings.subscribe((val) => this.getEntries(val), true)
+    this.querySettings.subscribe((val) => this.getEntries(val))
+    this.getEntries(this.querySettings.getValue())
   }
 
   public async handleRowDoubleClick(entry: T) {