@furystack/shades-common-components 9.0.0 → 10.0.1

package/src/components/app-bar-link.tsx

@@ -1,10 +1,9 @@
 import type { RouteLinkProps } from '@furystack/shades'
-import { attachProps } from '@furystack/shades'
-import { createComponent, LocationService, RouteLink, Shade } from '@furystack/shades'
-import { match, type TokensToRegexpOptions } from 'path-to-regexp'
+import { attachProps, createComponent, LocationService, RouteLink, Shade } from '@furystack/shades'
+import { match, type MatchOptions } from 'path-to-regexp'
 import { ThemeProviderService } from '../services/theme-provider-service.js'
 
-export const AppBarLink = Shade<RouteLinkProps & { routingOptions?: TokensToRegexpOptions }>({
+export const AppBarLink = Shade<RouteLinkProps & { routingOptions?: MatchOptions }>({
   shadowDomName: 'shade-app-bar-link',
   render: ({ children, props, useObservable, injector, element }) => {
     const getAnchorStyle = (currentUrl: string) => {

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

@@ -1,7 +1,7 @@
 import type { Injector } from '@furystack/inject'
 import { Injectable } from '@furystack/inject'
 import { debounce, ObservableValue } from '@furystack/utils'
-import type { CommandProvider, CommandPaletteSuggestionResult } from './command-provider.js'
+import type { CommandPaletteSuggestionResult, CommandProvider } from './command-provider.js'
 
 @Injectable({ lifetime: 'singleton' })
 export class CommandPaletteManager {
@@ -21,13 +21,13 @@ export class CommandPaletteManager {
     }
   }).bind(this)
 
-  public dispose() {
+  public [Symbol.dispose]() {
     window.removeEventListener('keyup', this.keyPressListener)
-    this.isOpened.dispose()
-    this.isLoading.dispose()
-    this.term.dispose()
-    this.selectedIndex.dispose()
-    this.currentSuggestions.dispose()
+    this.isOpened[Symbol.dispose]()
+    this.isLoading[Symbol.dispose]()
+    this.term[Symbol.dispose]()
+    this.selectedIndex[Symbol.dispose]()
+    this.currentSuggestions[Symbol.dispose]()
   }
 
   public selectSuggestion(injector: Injector, index: number = this.selectedIndex.getValue()) {

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

@@ -1,12 +1,12 @@
 import { Shade, createComponent } from '@furystack/shades'
+import { ClickAwayService } from '../../services/click-away-service.js'
+import { ThemeProviderService } from '../../services/theme-provider-service.js'
 import { promisifyAnimation } from '../../utils/promisify-animation.js'
 import { Loader } from '../loader.js'
-import { CommandPaletteManager } from './command-palette-manager.js'
 import { CommandPaletteInput } from './command-palette-input.js'
+import { CommandPaletteManager } from './command-palette-manager.js'
 import { CommandPaletteSuggestionList } from './command-palette-suggestion-list.js'
 import type { CommandProvider } from './command-provider.js'
-import { ClickAwayService } from '../../services/click-away-service.js'
-import { ThemeProviderService } from '../../services/theme-provider-service.js'
 
 export * from './command-palette-input.js'
 export * from './command-palette-manager.js'

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

@@ -1,8 +1,8 @@
-import type { CollectionService } from '../../services/collection-service.js'
 import type { ChildrenList } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
-import type { DataRowCells } from './data-grid.js'
+import type { CollectionService } from '../../services/collection-service.js'
 import { DataGridRow } from './data-grid-row.js'
+import type { DataRowCells } from './data-grid.js'
 
 export interface DataGridBodyProps<T, Column extends string> {
   service: CollectionService<T>
@@ -24,6 +24,8 @@ export const DataGridBody: <T, Column extends string>(
   children: ChildrenList,
 ) => JSX.Element<any> = Shade<DataGridBodyProps<any, string>>({
   shadowDomName: 'shade-data-grid-body',
+  elementBase: HTMLTableSectionElement,
+  elementBaseName: 'tbody',
   style: {
     display: 'table-row-group',
   },

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

@@ -1,11 +1,11 @@
 import type { FilterType, FindOptions } from '@furystack/core'
 import type { ChildrenList } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
-import { Input } from '../inputs/input.js'
-import { Form } from '../form.js'
-import { Button } from '../button.js'
 import { ObservableValue, sleepAsync } from '@furystack/utils'
 import { collapse, expand } from '../animations.js'
+import { Button } from '../button.js'
+import { Form } from '../form.js'
+import { Input } from '../inputs/input.js'
 
 export interface DataGridHeaderProps<T, Column extends string> {
   field: Column

package/src/components/form.tsx

@@ -1,9 +1,8 @@
-import type { ChildrenList, PartialElement } from '@furystack/shades'
-import { attachProps } from '@furystack/shades'
-import { Shade, createComponent } from '@furystack/shades'
-import type { InputValidationResult } from './inputs/input.js'
 import { Injectable } from '@furystack/inject'
+import type { ChildrenList, PartialElement } from '@furystack/shades'
+import { Shade, attachProps, createComponent } from '@furystack/shades'
 import { ObservableValue } from '@furystack/utils'
+import type { InputValidationResult } from './inputs/input.js'
 
 type UnknownFormValidationResult = { isValid: null }
 
@@ -34,10 +33,10 @@ export class FormService<T> {
     this.fieldErrors.setValue({ ...this.fieldErrors.getValue(), [key]: { validationResult, validity } })
   }
 
-  public dispose() {
-    this.validatedFormData.dispose()
-    this.rawFormData.dispose()
-    this.validationResult.dispose()
+  public [Symbol.dispose]() {
+    this.validatedFormData[Symbol.dispose]()
+    this.rawFormData[Symbol.dispose]()
+    this.validationResult[Symbol.dispose]()
   }
 }
 

package/src/components/inputs/input.tsx

@@ -1,5 +1,5 @@
 import type { PartialElement } from '@furystack/shades'
-import { Shade, createComponent, attachStyles } from '@furystack/shades'
+import { Shade, attachStyles, createComponent } from '@furystack/shades'
 import { ObservableValue } from '@furystack/utils'
 import type { Palette } from '../../services/theme-provider-service.js'
 import { ThemeProviderService } from '../../services/theme-provider-service.js'

package/src/components/suggest/index.tsx

@@ -1,12 +1,12 @@
 import type { ChildrenList } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
+import { ThemeProviderService } from '../../services/theme-provider-service.js'
 import { promisifyAnimation } from '../../utils/promisify-animation.js'
 import { Loader } from '../loader.js'
-import { SuggestManager } from './suggest-manager.js'
-import type { SuggestionResult } from './suggestion-result.js'
 import { SuggestInput } from './suggest-input.js'
+import { SuggestManager } from './suggest-manager.js'
 import { SuggestionList } from './suggestion-list.js'
-import { ThemeProviderService } from '../../services/theme-provider-service.js'
+import type { SuggestionResult } from './suggestion-result.js'
 
 export * from './suggest-input.js'
 export * from './suggest-manager.js'
@@ -31,9 +31,10 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
   render: ({ props, injector, element, useDisposable }) => {
     const manager = useDisposable('manager', () => new SuggestManager(props.getEntries, props.getSuggestionEntry))
     const { theme } = injector.getInstance(ThemeProviderService)
-    const inputContainer = element.querySelector('.input-container') as HTMLDivElement
     manager.element = element
     manager.isOpened.subscribe((isOpened) => {
+      const inputContainer = element.querySelector('.input-container') as HTMLDivElement
+
       const suggestions = element.querySelector('.close-suggestions')
       const postControls = element.querySelector('.post-controls')
       if (isOpened) {

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

@@ -1,6 +1,5 @@
 import type { Injector } from '@furystack/inject'
 import { Injectable } from '@furystack/inject'
-import type { Disposable } from '@furystack/utils'
 import { debounce, EventHub, ObservableValue } from '@furystack/utils'
 import type { SuggestionResult } from './suggestion-result.js'
 
@@ -29,15 +28,15 @@ export class SuggestManager<T> extends EventHub<{ onSelectSuggestion: T }> imple
     }
   }).bind(this)
 
-  public dispose() {
+  public [Symbol.dispose]() {
     window.removeEventListener('keyup', this.keyPressListener, true)
     window.removeEventListener('click', this.clickOutsideListener, true)
-    this.isOpened.dispose()
-    this.isLoading.dispose()
-    this.term.dispose()
-    this.selectedIndex.dispose()
-    this.currentSuggestions.dispose()
-    super.dispose()
+    this.isOpened[Symbol.dispose]()
+    this.isLoading[Symbol.dispose]()
+    this.term[Symbol.dispose]()
+    this.selectedIndex[Symbol.dispose]()
+    this.currentSuggestions[Symbol.dispose]()
+    super[Symbol.dispose]()
   }
 
   public selectSuggestion(index: number = this.selectedIndex.getValue()) {

package/src/components/tabs.tsx

@@ -1,4 +1,4 @@
-import { Shade, createComponent, LocationService, attachProps } from '@furystack/shades'
+import { LocationService, Shade, attachProps, createComponent } from '@furystack/shades'
 import { ThemeProviderService } from '../services/theme-provider-service.js'
 
 export interface Tab {
@@ -7,16 +7,21 @@ export interface Tab {
   hash: string
 }
 
-const TabHeader = Shade<{ isActive?: boolean; onActivate: () => void }>({
+const TabHeader = Shade<{ hash: string }>({
   shadowDomName: 'shade-tab-header',
   style: {
     padding: '1em 2.5em',
     cursor: 'pointer',
     transition: 'box-shadow 1s linear',
   },
-  render: ({ children, element, injector, props }) => {
+  elementBase: HTMLAnchorElement,
+  elementBaseName: 'a',
+  render: ({ children, element, injector, props, useObservable }) => {
     const { theme } = injector.getInstance(ThemeProviderService)
-    const { isActive } = props
+    const locationService = injector.getInstance(LocationService)
+
+    const [hash] = useObservable('updateLocation', locationService.onLocationHashChanged)
+    const isActive = hash === props.hash
 
     attachProps(element, {
       style: {
@@ -25,7 +30,7 @@ const TabHeader = Shade<{ isActive?: boolean; onActivate: () => void }>({
         color: isActive ? theme.text.primary : theme.text.secondary,
         boxShadow: isActive ? `inset 0 -2px 0 ${theme.palette.primary.main}` : 'none',
       },
-      onclick: props.onActivate,
+      href: `#${props.hash}`,
     })
     return <>{children}</>
   },
@@ -44,7 +49,6 @@ export const Tabs = Shade<{
     })
 
     const [hash] = useObservable('updateLocation', injector.getInstance(LocationService).onLocationHashChanged)
-
     const activeTab = props.tabs.find((t) => t.hash === hash.replace('#', ''))
 
     return (
@@ -53,20 +57,9 @@ export const Tabs = Shade<{
           className="shade-tabs-header-container"
           style={{ display: 'inline-flex', borderRadius: '5px 5px 0 0', overflow: 'hidden', flexShrink: '0' }}
         >
-          {props.tabs.map((tab) => {
-            const isActive = tab === activeTab
-
-            return (
-              <TabHeader
-                isActive={isActive}
-                onActivate={() => {
-                  window.history.pushState({}, '', `#${tab.hash}`)
-                }}
-              >
-                {tab.header}
-              </TabHeader>
-            )
-          })}
+          {props.tabs.map((tab) => (
+            <TabHeader hash={tab.hash}>{tab.header}</TabHeader>
+          ))}
         </div>
         {activeTab?.component}
       </>

package/src/services/click-away-service.spec.ts

@@ -4,7 +4,7 @@ import { ClickAwayService } from './click-away-service.js'
 describe('ClickAwayService', () => {
   it('Should be constructed and disposed', () => {
     const service = new ClickAwayService(document.createElement('div'), () => {})
-    service.dispose()
+    service[Symbol.dispose]()
   })
 
   it('Should call onClickAway when clicking outside the element', () => {
@@ -17,7 +17,7 @@ describe('ClickAwayService', () => {
 
     expect(onClickAway).toBeCalled()
 
-    service.dispose()
+    service[Symbol.dispose]()
   })
 
   it('Should not call onClickAway when clicking inside the element', () => {
@@ -30,6 +30,6 @@ describe('ClickAwayService', () => {
 
     expect(onClickAway).not.toBeCalled()
 
-    service.dispose()
+    service[Symbol.dispose]()
   })
 })

package/src/services/click-away-service.ts

@@ -1,5 +1,5 @@
 export class ClickAwayService<T extends HTMLElement> {
-  public dispose() {
+  public [Symbol.dispose]() {
     window.removeEventListener('click', this.clickOutsideListener, true)
   }
 

package/src/services/collection-service.spec.ts

@@ -1,4 +1,4 @@
-import { usingAsync } from '@furystack/utils'
+import { using } from '@furystack/utils'
 import { describe, expect, it } from 'vitest'
 import { CollectionService } from './collection-service.js'
 
@@ -6,8 +6,8 @@ const testEntries = [{ foo: 1 }, { foo: 2 }, { foo: 3 }]
 
 describe('CollectionService', () => {
   describe('Selection', () => {
-    it('Should add and remove selection', async () => {
-      await usingAsync(new CollectionService({}), async (collectionService) => {
+    it('Should add and remove selection', () => {
+      using(new CollectionService({}), (collectionService) => {
         collectionService.data.setValue({ count: 3, entries: testEntries })
         testEntries.forEach((entry) => {
           expect(collectionService.isSelected(entry)).toBe(false)

package/src/services/collection-service.ts

@@ -1,4 +1,3 @@
-import type { Disposable } from '@furystack/utils'
 import { ObservableValue } from '@furystack/utils'
 
 export interface CollectionData<T> {
@@ -26,12 +25,12 @@ export interface CollectionServiceOptions<T> {
 }
 
 export class CollectionService<T> implements Disposable {
-  public dispose() {
-    this.data.dispose()
-    this.selection.dispose()
-    this.searchTerm.dispose()
-    this.hasFocus.dispose()
-    this.focusedEntry.dispose()
+  public [Symbol.dispose]() {
+    this.data[Symbol.dispose]()
+    this.selection[Symbol.dispose]()
+    this.searchTerm[Symbol.dispose]()
+    this.hasFocus[Symbol.dispose]()
+    this.focusedEntry[Symbol.dispose]()
   }
 
   public isSelected = (entry: T) => this.selection.getValue().includes(entry)

package/src/services/theme-provider-service.ts

@@ -144,7 +144,7 @@ export class ThemeProviderService extends EventHub<{ themeChanged: DeepPartial<T
     this.emit('themeChanged', theme)
   }
 
-  public dispose() {
+  public [Symbol.dispose]() {
     /** */
   }
 }