@furystack/shades-common-components 10.0.1 → 10.0.2

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

@@ -30,15 +30,15 @@ export const CommandPalette = Shade<CommandPaletteProps>({
     useDisposable('clickAwayService', () => new ClickAwayService(element, () => manager.isOpened.setValue(false)))
 
     const [isLoadingAtRender] = useObservable('isLoading', manager.isLoading, {
-      onChange: async (isLoading) => {
+      onChange: (isLoading) => {
         const loader = element.querySelector('.loader-container')
         if (isLoading) {
-          promisifyAnimation(loader, [{ opacity: 0 }, { opacity: 1 }], {
+          void promisifyAnimation(loader, [{ opacity: 0 }, { opacity: 1 }], {
             duration: 100,
             fill: 'forwards',
           })
         } else {
-          promisifyAnimation(loader, [{ opacity: 1 }, { opacity: 0 }], {
+          void promisifyAnimation(loader, [{ opacity: 1 }, { opacity: 0 }], {
             duration: 100,
             fill: 'forwards',
           })
@@ -53,17 +53,17 @@ export const CommandPalette = Shade<CommandPaletteProps>({
           const postControls = element.querySelector('.post-controls')
           const inputContainer = element.querySelector('.input-container') as HTMLDivElement
           if (isOpened) {
-            promisifyAnimation(suggestions, [{ opacity: 0 }, { opacity: 1 }], {
+            void promisifyAnimation(suggestions, [{ opacity: 0 }, { opacity: 1 }], {
               duration: 500,
               fill: 'forwards',
             })
 
-            promisifyAnimation(postControls, [{ width: '0px' }, { width: '50px' }], {
+            void promisifyAnimation(postControls, [{ width: '0px' }, { width: '50px' }], {
               duration: 100,
               fill: 'forwards',
             })
 
-            promisifyAnimation(
+            void promisifyAnimation(
               inputContainer,
               [{ background: 'transparent' }, { background: theme.background.default }],
               {
@@ -73,18 +73,18 @@ export const CommandPalette = Shade<CommandPaletteProps>({
               },
             )
           } else {
-            promisifyAnimation(suggestions, [{ opacity: 1 }, { opacity: 0 }], {
+            void promisifyAnimation(suggestions, [{ opacity: 1 }, { opacity: 0 }], {
               duration: 500,
               fill: 'forwards',
             })
 
-            promisifyAnimation(postControls, [{ width: '50px' }, { width: '0px' }], {
+            void promisifyAnimation(postControls, [{ width: '50px' }, { width: '0px' }], {
               duration: 500,
               fill: 'forwards',
               delay: 300,
             })
 
-            promisifyAnimation(
+            void promisifyAnimation(
               inputContainer,
               [{ background: theme.background.default }, { background: 'transparent' }],
               {
@@ -118,7 +118,7 @@ export const CommandPalette = Shade<CommandPaletteProps>({
             )
           }
 
-          manager.getSuggestion({ injector, term: (ev.target as any).value })
+          void manager.getSuggestion({ injector, term: (ev.target as HTMLInputElement).value })
         }}
       >
         <div

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

@@ -1,8 +1,8 @@
-import { Shade, createComponent } from '@furystack/shades'
-import { ThemeProviderService } from '../../services/theme-provider-service.js'
-import type { CollectionService } from '../../services/collection-service.js'
 import type { FindOptions } from '@furystack/core'
+import { Shade, createComponent } from '@furystack/shades'
 import type { ObservableValue } from '@furystack/utils'
+import type { CollectionService } from '../../services/collection-service.js'
+import { ThemeProviderService } from '../../services/theme-provider-service.js'
 
 export const dataGridItemsPerPage = [10, 20, 25, 50, 100, Infinity]
 
@@ -47,7 +47,7 @@ export const DataGridFooter = Shade<{
             <select
               style={{ margin: '0 1em' }}
               onchange={(ev) => {
-                const value = parseInt((ev.target as any).value, 10)
+                const value = parseInt((ev.target as HTMLInputElement).value, 10)
                 setCurrentOptions({ ...currentOptions, skip: (currentOptions.top || 0) * value })
               }}
             >
@@ -64,7 +64,7 @@ export const DataGridFooter = Shade<{
           <select
             style={{ margin: '0 1em' }}
             onchange={(ev) => {
-              const value = parseInt((ev.currentTarget as any).value as string, 10)
+              const value = parseInt((ev.currentTarget as HTMLInputElement).value, 10)
               setCurrentOptions({
                 ...currentOptions,
                 top: value,

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

@@ -109,7 +109,7 @@ const SearchForm = Shade<{
       },
     })
 
-    const currentValue = (findOptions.filter?.[props.fieldName] as any)?.$regex || ''
+    const currentValue = (findOptions.filter?.[props.fieldName] as FilterType<Record<string, string>>)?.$regex || ''
 
     return (
       <Form<SearchSubmitType>
@@ -122,7 +122,9 @@ const SearchForm = Shade<{
           justifyContent: 'space-around',
           opacity: '0',
         }}
-        validate={(data): data is SearchSubmitType => data.searchValue?.length}
+        validate={(data): data is SearchSubmitType =>
+          typeof (data as SearchSubmitType).searchValue?.length === 'number'
+        }
         onSubmit={({ searchValue }) => {
           props.onSubmit(searchValue)
         }}
@@ -133,7 +135,7 @@ const SearchForm = Shade<{
           autofocus
           labelTitle={`${props.fieldName}`}
           name="searchValue"
-          value={currentValue}
+          value={typeof currentValue === 'string' ? currentValue : ''}
           labelProps={{
             style: { padding: '0px 2em' },
           }}
@@ -171,15 +173,15 @@ export const DataGridHeader: <T, Column extends string>(
         const searchForm = element.querySelector('.search-form') as HTMLElement
         const headerContent = element.querySelector('.header-content') as HTMLElement
         if (!newValue) {
-          collapse(searchForm)
-          expand(headerContent)
+          void collapse(searchForm)
+          void expand(headerContent)
         } else {
           searchForm.style.display = 'flex'
-          expand(searchForm).then(async () => {
+          void expand(searchForm).then(async () => {
             await sleepAsync(100)
             searchForm.querySelector('input')?.focus()
           })
-          collapse(headerContent)
+          void collapse(headerContent)
         }
       },
     })
@@ -188,13 +190,13 @@ export const DataGridHeader: <T, Column extends string>(
 
     const updateSearchValue = (value?: string) => {
       if (value) {
-        const newSettings: FindOptions<unknown, any> = {
+        const newSettings = {
           ...findOptions,
           filter: {
             ...findOptions.filter,
             [props.field]: { $regex: value },
           },
-        }
+        } as typeof findOptions
         setFindOptions(newSettings)
       } else {
         const { [props.field]: _, ...newFilter } = findOptions.filter || {}

package/src/components/form.tsx

@@ -74,7 +74,9 @@ export const Form: <T>(props: FormProps<T>, children: ChildrenList) => JSX.Eleme
       } else if (props.validate(formData)) {
         formService.validationResult.setValue({ isValid: true })
         formService.validatedFormData.setValue(formData)
-        shouldSubmit && props.onSubmit(formData)
+        if (shouldSubmit) {
+          props.onSubmit(formData)
+        }
       } else {
         formService.validationResult.setValue({ isValid: false, reason: 'validation-failed' })
       }

package/src/components/inputs/autocomplete.tsx

@@ -21,7 +21,7 @@ export const Autocomplete = Shade<{
         <Input
           {...props.inputProps}
           onchange={(ev) => {
-            const { value } = ev.target as any
+            const { value } = ev.target as HTMLInputElement
             if (props.strict) {
               if (!props.suggestions.includes(value)) {
                 ;(ev.target as HTMLInputElement).setCustomValidity('Please select a valid entry!')

package/src/components/inputs/input.tsx

@@ -61,6 +61,12 @@ export interface TextInputProps extends PartialElement<HTMLInputElement> {
   getEndIcon?: (options: { state: TextInputState; validationResult?: InputValidationResult }) => JSX.Element | string
 }
 
+declare global {
+  interface ValidityState {
+    toJSON: () => Partial<ValidityState>
+  }
+}
+
 export type TextInputState = {
   value: string
   focused: boolean
@@ -175,7 +181,7 @@ export const Input = Shade<TextInputProps>({
 
       newState.value = input?.value || newState.value
       newState.validity = input?.validity || newState.validity
-      ;(newState.validity as any).toJSON = () => {
+      newState.validity.toJSON = () => {
         return {
           valid: newState.validity.valid,
           valueMissing: newState.validity.valueMissing,
@@ -192,9 +198,11 @@ export const Input = Shade<TextInputProps>({
 
       const validationResult = props.getValidationResult?.({ state: newState })
 
-      validationResult?.isValid === false || newState.validity?.valid === false
-        ? element.setAttribute('data-validation-failed', 'true')
-        : element.removeAttribute('data-validation-failed')
+      if (validationResult?.isValid === false || newState.validity?.valid === false) {
+        element.setAttribute('data-validation-failed', 'true')
+      } else {
+        element.removeAttribute('data-validation-failed')
+      }
 
       attachStyles(label, { style: getLabelStyle({ themeProvider, props, state: newState, validationResult }) })
 
@@ -215,7 +223,6 @@ export const Input = Shade<TextInputProps>({
         const formService = injector.getInstance(FormService)
         formService.setFieldState(props.name as keyof unknown, validationResult || { isValid: true }, newState.validity)
       }
-      return newState
     }
 
     const [state, setState] = useObservable<TextInputState>(
@@ -247,12 +254,12 @@ export const Input = Shade<TextInputProps>({
               const el = ev.target as HTMLInputElement
               setState({ ...state, validity: el.validity })
             }}
-            onchange={(ev) => {
+            onchange={function (ev) {
               const el = ev.target as HTMLInputElement
               const newValue = el.value
               setState({ ...state, value: newValue, validity: el?.validity })
               props.onTextChange?.(newValue)
-              props.onchange && (props.onchange as any)(ev)
+              props?.onchange?.call(this, ev)
             }}
             onfocus={(ev) => {
               const el = ev.target as HTMLInputElement

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

@@ -50,7 +50,7 @@ export const TextArea = Shade<TextAreaProps>({
           }}
           onfocus={() => {
             if (!props.disabled) {
-              promisifyAnimation(
+              void promisifyAnimation(
                 element.querySelector('label'),
                 [{ color: themeProvider.getTextColor(theme.background.default) }, { color: palette.primary.main }],
                 {
@@ -59,7 +59,7 @@ export const TextArea = Shade<TextAreaProps>({
                   fill: 'forwards',
                 },
               )
-              promisifyAnimation(
+              void promisifyAnimation(
                 element.querySelector('div[contenteditable="true"]'),
                 [
                   { boxShadow: '0px 0px 0px rgba(128,128,128,0.1)' },
@@ -74,7 +74,7 @@ export const TextArea = Shade<TextAreaProps>({
           }}
           onblur={() => {
             if (!props.disabled) {
-              promisifyAnimation(
+              void promisifyAnimation(
                 element.querySelector('label'),
                 [{ color: palette.primary.main }, { color: themeProvider.getTextColor(theme.background.default) }],
                 {
@@ -83,7 +83,7 @@ export const TextArea = Shade<TextAreaProps>({
                   fill: 'forwards',
                 },
               )
-              promisifyAnimation(
+              void promisifyAnimation(
                 element.querySelector('div[contenteditable="true"]'),
                 [
                   { boxShadow: '0px 3px 0px rgba(128,128,128,0.4)' },

package/src/components/loader.tsx

@@ -38,12 +38,12 @@ export const Loader = Shade<LoaderProps>({
     const { borderColor = theme.palette.primary.main } = props
 
     setTimeout(() => {
-      promisifyAnimation(element, [{ opacity: '0' }, { opacity: '1' }], {
+      void promisifyAnimation(element, [{ opacity: '0' }, { opacity: '1' }], {
         duration: 500,
         delay,
         fill: 'forwards',
       })
-      promisifyAnimation(
+      void promisifyAnimation(
         element.firstElementChild,
         [{ transform: 'rotate(0deg)' }, { transform: 'rotate(180deg)' }, { transform: 'rotate(360deg)' }],
         {

package/src/components/modal.tsx

@@ -15,7 +15,7 @@ export const Modal = Shade<ModalProps>({
     const [isVisible] = useObservable('isVisible', props.isVisible)
 
     if (isVisible) {
-      props.showAnimation?.(element)
+      void props.showAnimation?.(element)
     }
 
     return isVisible ? (

package/src/components/noty-list.tsx

@@ -25,7 +25,7 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
   constructed: ({ element }) => {
     setTimeout(() => {
       const height = element.scrollHeight || 80
-      promisifyAnimation(
+      void promisifyAnimation(
         element,
         [
           { opacity: '0', height: '0px' },
@@ -73,21 +73,13 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
 
     const timeout = props.model.timeout || getDefaultNotyTimeouts(props.model.type)
     if (timeout) {
-      setTimeout(removeSelf, timeout)
+      setTimeout(() => void removeSelf(), timeout)
     }
 
     element.className = `noty ${props.model.type}`
     element.style.backgroundColor = colors.main
     element.style.color = textColor
 
-    // attachProps(element, {
-    //   className: `noty ${props.model.type}`,
-    //   style: {
-    //     backgroundColor: colors.main,
-    //     color: textColor,
-    //   },
-    // })
-
     return (
       <>
         <div
@@ -153,7 +145,7 @@ export const NotyList = Shade({
     useDisposable('removeNoty', () =>
       notyService.subscribe('onNotyRemoved', (n) => {
         element.querySelectorAll('shade-noty').forEach((e) => {
-          if ((e as JSX.Element).props.model === n) {
+          if ((e as JSX.Element<{ model?: NotyModel }>).props.model === n) {
             e.remove()
           }
         })

package/src/components/skeleton.tsx

@@ -22,13 +22,13 @@ export const Skeleton = Shade<SkeletonProps>({
   render: ({ element, props }) => {
     const { delay = 1500 } = props
     setTimeout(() => {
-      promisifyAnimation(element, [{ opacity: 0 }, { opacity: 1 }], {
+      void promisifyAnimation(element, [{ opacity: 0 }, { opacity: 1 }], {
         fill: 'forwards',
         duration: 300,
         easing: 'ease-out',
         delay,
       }).then(() => {
-        promisifyAnimation(
+        void promisifyAnimation(
           element,
           [{ backgroundPosition: '0% 50%' }, { backgroundPosition: '100% 50%' }, { backgroundPosition: '0% 50%' }],
           {

package/src/components/suggest/index.tsx

@@ -38,49 +38,57 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
       const suggestions = element.querySelector('.close-suggestions')
       const postControls = element.querySelector('.post-controls')
       if (isOpened) {
-        promisifyAnimation(suggestions, [{ opacity: 0 }, { opacity: 1 }], {
+        void promisifyAnimation(suggestions, [{ opacity: 0 }, { opacity: 1 }], {
           duration: 500,
           fill: 'forwards',
         })
 
-        promisifyAnimation(postControls, [{ width: '0px' }, { width: '50px' }], {
+        void promisifyAnimation(postControls, [{ width: '0px' }, { width: '50px' }], {
           duration: 100,
           fill: 'forwards',
         })
 
-        promisifyAnimation(inputContainer, [{ background: 'transparent' }, { background: theme.background.default }], {
-          duration: 500,
-          fill: 'forwards',
-          easing: 'cubic-bezier(0.050, 0.570, 0.840, 1.005)',
-        })
+        void promisifyAnimation(
+          inputContainer,
+          [{ background: 'transparent' }, { background: theme.background.default }],
+          {
+            duration: 500,
+            fill: 'forwards',
+            easing: 'cubic-bezier(0.050, 0.570, 0.840, 1.005)',
+          },
+        )
       } else {
-        promisifyAnimation(suggestions, [{ opacity: 1 }, { opacity: 0 }], {
+        void promisifyAnimation(suggestions, [{ opacity: 1 }, { opacity: 0 }], {
           duration: 500,
           fill: 'forwards',
         })
 
-        promisifyAnimation(postControls, [{ width: '50px' }, { width: '0px' }], {
+        void promisifyAnimation(postControls, [{ width: '50px' }, { width: '0px' }], {
           duration: 500,
           fill: 'forwards',
           delay: 300,
         })
 
-        promisifyAnimation(inputContainer, [{ background: theme.background.default }, { background: 'transparent' }], {
-          duration: 300,
-          fill: 'forwards',
-          easing: 'cubic-bezier(0.000, 0.245, 0.190, 0.790)',
-        })
+        void promisifyAnimation(
+          inputContainer,
+          [{ background: theme.background.default }, { background: 'transparent' }],
+          {
+            duration: 300,
+            fill: 'forwards',
+            easing: 'cubic-bezier(0.000, 0.245, 0.190, 0.790)',
+          },
+        )
       }
     })
-    manager.isLoading.subscribe(async (isLoading) => {
+    manager.isLoading.subscribe((isLoading) => {
       const loader = element.querySelector('shade-loader')
       if (isLoading) {
-        promisifyAnimation(loader, [{ opacity: 0 }, { opacity: 1 }], {
+        void promisifyAnimation(loader, [{ opacity: 0 }, { opacity: 1 }], {
           duration: 100,
           fill: 'forwards',
         })
       } else {
-        promisifyAnimation(loader, [{ opacity: 1 }, { opacity: 0 }], {
+        void promisifyAnimation(loader, [{ opacity: 1 }, { opacity: 0 }], {
           duration: 100,
           fill: 'forwards',
         })
@@ -107,7 +115,7 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
             )
           }
 
-          manager.getSuggestion({ injector, term: (ev.target as any).value })
+          void manager.getSuggestion({ injector, term: (ev.target as HTMLInputElement).value })
         }}
       >
         <div

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

@@ -1,8 +1,8 @@
 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 type { SuggestManager } from './suggest-manager.js'
-import { ThemeProviderService } from '../../services/theme-provider-service.js'
 
 export const SuggestionList: <T>(props: { manager: SuggestManager<T> }, children: ChildrenList) => JSX.Element<any> =
   Shade<{ manager: SuggestManager<any> }>({
@@ -29,14 +29,14 @@ export const SuggestionList: <T>(props: { manager: SuggestManager<T> }, children
       })
 
       const [isListOpened] = useObservable('isOpened', manager.isOpened, {
-        onChange: async (isOpened) => {
+        onChange: (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(
+            void promisifyAnimation(
               container,
               [
                 { opacity: 0, transform: 'translate(0, -50px)' },
@@ -45,7 +45,7 @@ export const SuggestionList: <T>(props: { manager: SuggestManager<T> }, children
               { fill: 'forwards', duration: 500 },
             )
           } else {
-            await promisifyAnimation(
+            void promisifyAnimation(
               container,
               [
                 { opacity: 1, transform: 'translate(0, 0)' },
@@ -80,7 +80,9 @@ export const SuggestionList: <T>(props: { manager: SuggestManager<T> }, children
             <div
               className="suggestion-item"
               onclick={() => {
-                isListOpened && manager.selectSuggestion(i)
+                if (isListOpened) {
+                  manager.selectSuggestion(i)
+                }
               }}
               style={{
                 padding: '1em',

package/src/services/collection-service.ts

@@ -44,7 +44,11 @@ export class CollectionService<T> implements Disposable {
   }
 
   public toggleSelection = (entry: T) => {
-    this.isSelected(entry) ? this.removeFromSelection(entry) : this.addToSelection(entry)
+    if (this.isSelected(entry)) {
+      this.removeFromSelection(entry)
+    } else {
+      this.addToSelection(entry)
+    }
   }
 
   public data = new ObservableValue<CollectionData<T>>({ count: 0, entries: [] })
@@ -68,12 +72,13 @@ export class CollectionService<T> implements Disposable {
       switch (ev.key) {
         case ' ':
           ev.preventDefault()
-          focusedEntry &&
+          if (focusedEntry) {
             this.selection.setValue(
               selectedEntries.includes(focusedEntry)
                 ? selectedEntries.filter((e) => e !== focusedEntry)
                 : [...selectedEntries, focusedEntry],
             )
+          }
           break
         case '*':
           this.selection.setValue(entries.filter((e) => !selectedEntries.includes(e)))
@@ -85,11 +90,14 @@ export class CollectionService<T> implements Disposable {
           this.selection.setValue([])
           break
         case 'Insert':
-          focusedEntry &&
-            (this.selection.getValue().includes(focusedEntry)
-              ? this.selection.setValue([...this.selection.getValue().filter((e) => e !== focusedEntry)])
-              : this.selection.setValue([...this.selection.getValue(), focusedEntry]))
-          this.focusedEntry.setValue(entries[entries.findIndex((e) => e === this.focusedEntry.getValue()) + 1])
+          if (focusedEntry) {
+            if (this.selection.getValue().includes(focusedEntry)) {
+              this.selection.setValue([...this.selection.getValue().filter((e) => e !== focusedEntry)])
+            } else {
+              this.selection.setValue([...this.selection.getValue(), focusedEntry])
+            }
+            this.focusedEntry.setValue(entries[entries.findIndex((e) => e === this.focusedEntry.getValue()) + 1])
+          }
 
           break
         case 'ArrowUp':
@@ -125,7 +133,7 @@ export class CollectionService<T> implements Disposable {
             const newFocusedEntry = entries.find(
               (e) =>
                 this.options.searchField &&
-                (e[this.options.searchField] as any)?.toString().startsWith(newSearchExpression),
+                (e[this.options.searchField] as string)?.toString().startsWith(newSearchExpression),
             )
             this.focusedEntry.setValue(newFocusedEntry)
             this.searchTerm.setValue(newSearchExpression)

package/src/utils/promisify-animation.spec.ts

@@ -1,18 +1,22 @@
 import { sleepAsync } from '@furystack/utils'
+import { describe, expect, it, vi } from 'vitest'
 import { promisifyAnimation } from './promisify-animation.js'
-import { describe, it, expect, vi } from 'vitest'
 
 describe('promisifyAnimation', () => {
   it('should trigger the element animation', async () => {
     const el = document.createElement('div')
-    const onfinish = vi.fn()
+    const onfinish = vi.fn(() => {})
     const oncancel = vi.fn()
     const animate = vi.fn(() => {
       const animation = {
         onfinish,
         oncancel,
       }
-      sleepAsync(100).then(() => animation.onfinish())
+      sleepAsync(100)
+        .then(() => animation.onfinish())
+        .catch(() => {
+          /** */
+        })
       return animation
     })
     Object.assign(el, { animate })