chore: select allow unknown

Author: sergiocarracedo

packages/react/src/experimental/Forms/Fields/Select/index.tsx

@@ -43,22 +43,27 @@ import { SelectTopActions } from "./SelectTopActions"
 import type { SelectItemObject, SelectItemProps } from "./types"
 export * from "./types"
 
+// Helper type to resolve the actual record type
+export type ResolvedRecordType<R> = R extends RecordType ? R : RecordType
+
 /**
  * Select component for choosing from a list of options.
  *
  * @template T - The type of the emitted  value
  * @template R - The type of the record/item data (used with data source)
  *
  */
-export type SelectProps<T extends string, R extends RecordType = RecordType> = {
+export type SelectProps<T extends string, R = unknown> = {
   onChange: (
     value: T,
-    originalItem?: R,
-    option?: SelectItemObject<T, R>
+    originalItem?: ResolvedRecordType<R>,
+    option?: SelectItemObject<T, ResolvedRecordType<R>>
+  ) => void
+  onChangeSelectedOption?: (
+    option: SelectItemObject<T, ResolvedRecordType<R>>
   ) => void
-  onChangeSelectedOption?: (option: SelectItemObject<T, R>) => void
   value?: T
-  defaultItem?: SelectItemObject<T, R>
+  defaultItem?: SelectItemObject<T, ResolvedRecordType<R>>
   children?: React.ReactNode
   open?: boolean
   showSearchBox?: boolean
@@ -73,18 +78,20 @@ export type SelectProps<T extends string, R extends RecordType = RecordType> = {
 } & (
   | {
       source: DataSourceDefinition<
-        R,
+        ResolvedRecordType<R>,
         FiltersDefinition,
         SortingsDefinition,
-        GroupingDefinition<R>
+        GroupingDefinition<ResolvedRecordType<R>>
       >
-      mapOptions: (item: R) => SelectItemProps<T, R>
+      mapOptions: (
+        item: ResolvedRecordType<R>
+      ) => SelectItemProps<T, ResolvedRecordType<R>>
       options?: never
     }
   | {
       source?: never
       mapOptions?: never
-      options: SelectItemProps<T, R>[]
+      options: SelectItemProps<T, ResolvedRecordType<R>>[]
     }
 ) &
   Pick<
@@ -154,7 +161,7 @@ const SelectValue = forwardRef<
 
 const SelectComponent = forwardRef(function Select<
   T extends string,
-  R extends RecordType = RecordType,
+  R = unknown,
 >(
   {
     placeholder,
@@ -189,6 +196,7 @@ const SelectComponent = forwardRef(function Select<
   }: SelectProps<T, R>,
   ref: React.ForwardedRef<HTMLButtonElement>
 ) {
+  type ActualRecordType = ResolvedRecordType<R>
   const searchInputRef = useRef<HTMLInputElement>(null)
 
   const [openLocal, setOpenLocal] = useState(open)
@@ -212,20 +220,23 @@ const SelectComponent = forwardRef(function Select<
     return {
       ...source,
       dataAdapter: source
-        ? (source.dataAdapter as PaginatedDataAdapter<R, FiltersDefinition>)
+        ? (source.dataAdapter as PaginatedDataAdapter<
+            ActualRecordType,
+            FiltersDefinition
+          >)
         : {
             fetchData: ({
               search,
             }: BaseFetchOptions<FiltersDefinition>): PromiseOrObservable<
-              BaseResponse<R>
+              BaseResponse<ActualRecordType>
             > => {
               return {
                 records: options.filter(
                   (option) =>
                     option.type === "separator" ||
                     !search ||
                     option.label.toLowerCase().includes(search.toLowerCase())
-                ) as unknown as R[],
+                ) as unknown as ActualRecordType[],
               }
             },
           },
@@ -246,29 +257,29 @@ const SelectComponent = forwardRef(function Select<
   )
 
   /**
-   * Maps an item to a SelectItemProps<T, R>
+   * Maps an item to a SelectItemProps<T, ActualRecordType>
    */
   const optionMapper = useCallback(
-    (item: R): SelectItemProps<T, R> => {
+    (item: ActualRecordType): SelectItemProps<T, ActualRecordType> => {
       if (source) {
         if (!mapOptions) {
           throw new Error("mapOptions is required when using a source")
         }
         return mapOptions(item)
       }
-      // At this point, we are sure that options is an array of SelectItemProps<T, R>
-      return item as unknown as SelectItemProps<T, R>
+      // At this point, we are sure that options is an array of SelectItemProps<T, ActualRecordType>
+      return item as unknown as SelectItemProps<T, ActualRecordType>
     },
     [mapOptions, source]
   )
 
   const { data, isInitialLoading, loadMore, isLoadingMore } =
-    useData<R>(localSource)
+    useData<ActualRecordType>(localSource)
 
   const { currentSearch, setCurrentSearch } = localSource
 
   const [selectedOption, setSelectedOption] = useState<
-    SelectItemObject<T, R> | undefined
+    SelectItemObject<T, ActualRecordType> | undefined
   >(undefined)
 
   /**
@@ -277,7 +288,9 @@ const SelectComponent = forwardRef(function Select<
    * @returns The option if found, undefined otherwise
    */
   const findOption = useCallback(
-    (value: string | T | undefined): SelectItemObject<T, R> | undefined => {
+    (
+      value: string | T | undefined
+    ): SelectItemObject<T, ActualRecordType> | undefined => {
       if (value === undefined) {
         return undefined
       }
@@ -351,7 +364,9 @@ const SelectComponent = forwardRef(function Select<
   )
 
   const getItems = useCallback(
-    (records: WithGroupId<R>[] | R[]): VirtualItem[] => {
+    (
+      records: WithGroupId<ActualRecordType>[] | ActualRecordType[]
+    ): VirtualItem[] => {
       return records.map((option, index) => {
         const mappedOption = optionMapper(option)
         return mappedOption.type === "separator"
@@ -519,7 +534,7 @@ const SelectComponent = forwardRef(function Select<
 
 export const Select = SelectComponent as <
   T extends string = string,
-  R extends RecordType = RecordType,
+  R = unknown,
 >(
   props: SelectProps<T, R> & { ref?: React.Ref<HTMLButtonElement> }
 ) => React.ReactElement

packages/react/src/experimental/Navigation/Header/Breadcrumbs/internal/BreadcrumbSelect/index.tsx

@@ -1,23 +1,22 @@
 import { F0Icon } from "@/components/F0Icon"
 import {
+  ResolvedRecordType,
   Select,
   SelectItemObject,
   SelectProps,
 } from "@/experimental/Forms/Fields/Select"
-import { RecordType } from "@/hooks/datasource"
 import { ChevronDown } from "@/icons/app"
 import { motion } from "motion/react"
 import { useState } from "react"
 
-export type BreadcrumbSelectProps<
-  T extends string,
-  R extends RecordType = RecordType,
-> = SelectProps<T, R>
+export type BreadcrumbSelectProps<T extends string, R = unknown> = SelectProps<
+  T,
+  R
+>
 
-export function BreadcrumbSelect<
-  T extends string,
-  R extends RecordType = RecordType,
->({ ...props }: BreadcrumbSelectProps<T, R>) {
+export function BreadcrumbSelect<T extends string, R = unknown>({
+  ...props
+}: BreadcrumbSelectProps<T, R>) {
   const [localOpen, setLocalOpen] = useState(props.open)
 
   const onOpenChangeLocal = (open: boolean) => {
@@ -31,13 +30,15 @@ export function BreadcrumbSelect<
 
   const handleChange = (
     value: T,
-    item?: R,
-    option?: SelectItemObject<T, R>
+    item?: ResolvedRecordType<R>,
+    option?: SelectItemObject<T, ResolvedRecordType<R>>
   ) => {
     props.onChange?.(value, item, option)
   }
 
-  const handleChangeSelectedOption = (option: SelectItemObject<T, R>) => {
+  const handleChangeSelectedOption = (
+    option: SelectItemObject<T, ResolvedRecordType<R>>
+  ) => {
     setSelectedLabel(option.label)
   }
 

packages/react/src/experimental/OneDataCollection/__stories__/collection-actions.stories.tsx

@@ -177,8 +177,25 @@ export const BasicActionsExample: Story = {
 export const WithExpandedActionsExample: Story = {
   render: () => {
     const dataSource = useDataCollectionSource({
+      filters: {
+        status: {
+          type: "in",
+          label: "Status",
+          options: {
+            options: [
+              { value: "active", label: "Active" },
+              { value: "inactive", label: "Inactive" },
+            ],
+          },
+        },
+      },
       dataAdapter: {
-        fetchData: () => Promise.resolve({ records: mockUsers }),
+        fetchData: ({ filters }) =>
+          Promise.resolve({
+            records: mockUsers.filter((user) =>
+              filters.status?.includes(user.status)
+            ),
+          }),
       },
       primaryActions: () => ({
         label: "Create user",
@@ -192,7 +209,7 @@ export const WithExpandedActionsExample: Story = {
     })
 
     dataSource.setCurrentFilters({
-      status: "active",
+      status: ["active"],
     })
 
     return <BaseStory dataSource={dataSource} />

packages/react/src/hooks/datasource/__stories__/index.mdx

@@ -11,8 +11,8 @@ pagination, grouping, and selection.
 
 {/* prettier-ignore */}
 > If your are looking for the `OneDataCollection` component, please refer to the  <LinkTo kind="Components/Data Collection" story="Documentation">OneDataCollection</LinkTo>
-> documentation. as this hooks, even if it's compatible with the >
-> `OneDataCollection` component, it does not provide all the features of the >
+> documentation. as this hooks, even if it's compatible with the 
+> `OneDataCollection` component, it does not provide all the features of the
 > `OneDataCollection` component.
 
 ## Overview
@@ -73,6 +73,17 @@ const dataSource = useDataSource({
   grouping: {
     /* grouping definitions */
   },
+  currentFilters: {
+    /* initial filter state */
+  },
+  currentGrouping: {
+    /* initial grouping state */
+  },
+  currentSearch: "" // initial search value,
+  defaultSorting: {
+    field: "name", // default sorting field
+    order: "asc",
+  },
 })
 ```
 
@@ -117,6 +128,18 @@ function MyDataCollection() {
   const dataSource = useDataSource({
     dataAdapter: { fetchData: myFetchFunction },
     filters: myFilters,
+    currentFilters: {
+      name: "John",
+    },
+    currentGrouping: {
+      field: "name",
+      order: "asc",
+    },
+    currentSearch: "John",
+    defaultSorting: {
+      field: "name",
+      order: "asc",
+    },
   })
 
   const { data, isLoading } = useData(dataSource)

packages/react/src/hooks/datasource/useDataSource.ts

@@ -118,9 +118,10 @@ export function useDataSource<
         return JSON.stringify(next) === JSON.stringify(prev) ? prev : next
       })
     } else {
-      _setCurrentFilters((prev) =>
-        JSON.stringify(value) === JSON.stringify(prev) ? prev : value
-      )
+      if (JSON.stringify(currentFilters) === JSON.stringify(value)) {
+        return
+      }
+      _setCurrentFilters(value)
     }
   }