@stoker-platform/web-app 0.5.146 → 0.5.148

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @stoker-platform/web-app
 
+## 0.5.148
+
+### Patch Changes
+
+- fix: add isMobile to data retrieval function dependency arrays
+
+## 0.5.147
+
+### Patch Changes
+
+- feat: increase relation picker item size
+
 ## 0.5.146
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.146",
+    "version": "0.5.148",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {

package/src/Filters.tsx

@@ -314,9 +314,10 @@ export function Filters({ collection, excluded, relationList }: FiltersProps) {
                 if (isCollectionPreloadCacheEnabled && query) {
                     const searchResults = localFullTextSearch(collectionSchema, query, data.records)
                     const objectIds = searchResults.map((result) => result.id)
+                    const numberOfResults = isMobile ? 20 : 10
                     setData((prev) => ({
                         ...prev,
-                        [field]: data.records.filter((doc) => objectIds.includes(doc.id)).slice(0, 10),
+                        [field]: data.records.filter((doc) => objectIds.includes(doc.id)).slice(0, numberOfResults),
                     }))
                 } else {
                     setData((prev) => ({
@@ -334,7 +335,7 @@ export function Filters({ collection, excluded, relationList }: FiltersProps) {
                 }))
             })
         },
-        [],
+        [isMobile],
     )
 
     const debounceTimeout = useRef<NodeJS.Timeout>()
@@ -613,6 +614,7 @@ export function Filters({ collection, excluded, relationList }: FiltersProps) {
                                     <CommandGroup>
                                         {data[filter.field] && (
                                             <CommandItem
+                                                className={cn(isMobile ? "p-3" : undefined)}
                                                 key="no_selection"
                                                 value="no_selection"
                                                 onSelect={(currentValue) => {
@@ -646,6 +648,7 @@ export function Filters({ collection, excluded, relationList }: FiltersProps) {
                                         )}
                                         {data[filter.field]?.map((record: StokerRecord) => (
                                             <CommandItem
+                                                className={cn(isMobile ? "p-3" : undefined)}
                                                 key={record.id}
                                                 value={record.id}
                                                 onSelect={(currentValue) => {

package/src/Form.tsx

@@ -1926,6 +1926,8 @@ function RelationField({
         initialize()
     }, [])
 
+    const isMobile = useIsMobile()
+
     const getData = useCallback(
         async (query: string | undefined, constraints: [string, "==" | "in", unknown][] = []) => {
             setIsLoadingImmediate(true)
@@ -2025,9 +2027,12 @@ function RelationField({
                         return !!fieldCustomization.admin?.filterResults?.(result, collection, record)
                     })
                     const objectIds = searchResults.map((result) => result.id)
-                    orderData(data.records.filter((doc) => objectIds.includes(doc.id)).slice(0, 10)).then((data) => {
-                        setData(data)
-                    })
+                    const numberOfResults = isMobile ? 20 : 10
+                    orderData(data.records.filter((doc) => objectIds.includes(doc.id)).slice(0, numberOfResults)).then(
+                        (data) => {
+                            setData(data)
+                        },
+                    )
                 } else {
                     orderData(
                         data.records
@@ -2049,7 +2054,7 @@ function RelationField({
                 setIsLoading(false)
             })
         },
-        [record, form],
+        [record, form, isMobile],
     )
 
     const handleOneToChange = useCallback(
@@ -2111,7 +2116,6 @@ function RelationField({
         popoverHeight = "h-48"
     }
 
-    const isMobile = useIsMobile()
     const { offset: keyboardOffset, viewportHeight } = useKeyboardOffset(isMobile && isOpen)
     const sheetHeight = Math.max(240, Math.min(viewportHeight - 16, viewportHeight * 0.9))
 
@@ -2165,6 +2169,7 @@ function RelationField({
                     <CommandGroup>
                         {data && ["OneToOne", "OneToMany"].includes(field.type) && (
                             <CommandItem
+                                className={cn(isMobile ? "p-3" : undefined)}
                                 key="no_selection"
                                 value="no_selection"
                                 onSelect={(currentValue: string) => {
@@ -2183,6 +2188,7 @@ function RelationField({
                         )}
                         {data?.map((relationRecord: StokerRecord) => (
                             <CommandItem
+                                className={cn(isMobile ? "p-3" : undefined)}
                                 key={relationRecord.id}
                                 value={relationRecord.id}
                                 onSelect={(currentValue) => {

package/src/PermissionPicker.tsx

@@ -74,6 +74,8 @@ export const PermissionPicker = ({
 
     const pickerDebounceTimeout = useRef<NodeJS.Timeout>()
 
+    const isMobile = useIsMobile()
+
     const getData = useCallback(
         async (query: string | undefined, constraints: [string, "==" | "in", unknown][] = []) => {
             setIsLoadingImmediate(true)
@@ -140,7 +142,8 @@ export const PermissionPicker = ({
                 if (isCollectionPreloadCacheEnabled && query) {
                     const searchResults = localFullTextSearch(collection, query, data.records)
                     const objectIds = searchResults.map((result) => result.id)
-                    setData(data.records.filter((doc) => objectIds.includes(doc.id)).slice(0, 10))
+                    const numberOfResults = isMobile ? 20 : 10
+                    setData(data.records.filter((doc) => objectIds.includes(doc.id)).slice(0, numberOfResults))
                 } else {
                     setData(data.records.slice(0, 10))
                 }
@@ -148,7 +151,7 @@ export const PermissionPicker = ({
                 setIsLoading(false)
             })
         },
-        [],
+        [isMobile],
     )
 
     const debounceTimeout = useRef<NodeJS.Timeout>()
@@ -333,7 +336,6 @@ export const PermissionPicker = ({
         popoverHeight = "h-48"
     }
 
-    const isMobile = useIsMobile()
     const { offset: keyboardOffset, viewportHeight } = useKeyboardOffset(isMobile && isOpen)
     const sheetHeight = Math.max(240, Math.min(viewportHeight - 16, viewportHeight * 0.9))
 
@@ -387,6 +389,7 @@ export const PermissionPicker = ({
                     <CommandGroup>
                         {data && (
                             <CommandItem
+                                className={cn(isMobile ? "p-3" : undefined)}
                                 key="no_selection"
                                 value="no_selection"
                                 onSelect={(currentValue) => {
@@ -402,6 +405,7 @@ export const PermissionPicker = ({
                         )}
                         {data?.map((record: StokerRecord) => (
                             <CommandItem
+                                className={cn(isMobile ? "p-3" : undefined)}
                                 key={record.id}
                                 value={record.id}
                                 onSelect={(currentValue) => {