@servicetitan/form-state 35.0.0 → 36.0.0

package/dist/async-lazy-dropdown-state/async-lazy-dropdown-state.d.ts

@@ -1,11 +1,14 @@
-import { AnvilSelectOptionsProps, AnvilSelectPropsStrict } from '@servicetitan/design-system';
 import { DropdownOption, DropdownState } from '../dropdown-state';
 export type DataFetcher = (searchQuery: string) => Promise<DropdownOption<any>[]>;
 export declare class AsyncLazyDropdownState<T extends DropdownOption<any>> extends DropdownState<T> {
     private arrayValue;
     constructor(dataFetcher: DataFetcher);
-    get optionsWithValue(): AnvilSelectOptionsProps[];
-    onChange: (value: AnvilSelectPropsStrict["value"]) => void;
+    get optionsWithValue(): (T | {
+        value: T[keyof T];
+        text: string;
+        options: T[];
+    })[];
+    onChange: (value?: T) => void;
     setDataFetcher(dataFetcher: DataFetcher): void;
     private getOptionsWithValue;
 }

package/dist/async-lazy-dropdown-state/async-lazy-dropdown-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"async-lazy-dropdown-state.d.ts","sourceRoot":"","sources":["../../src/async-lazy-dropdown-state/async-lazy-dropdown-state.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAC9F,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElE,MAAM,MAAM,WAAW,GAAG,CAAC,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;AAElF,qBAAa,sBAAsB,CAAC,CAAC,SAAS,cAAc,CAAC,GAAG,CAAC,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC;IACvF,OAAO,CAAC,UAAU,CAAiC;gBAEvC,WAAW,EAAE,WAAW;IAkBpC,IACI,gBAAgB,8BAEnB;IAED,QAAQ,GAAI,OAAO,sBAAsB,CAAC,OAAO,CAAC,UAIhD;IAEF,cAAc,CAAC,WAAW,EAAE,WAAW;IAevC,OAAO,CAAC,mBAAmB,CAqBzB;CACL"}
+{"version":3,"file":"async-lazy-dropdown-state.d.ts","sourceRoot":"","sources":["../../src/async-lazy-dropdown-state/async-lazy-dropdown-state.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElE,MAAM,MAAM,WAAW,GAAG,CAAC,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;AAElF,qBAAa,sBAAsB,CAAC,CAAC,SAAS,cAAc,CAAC,GAAG,CAAC,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC;IACvF,OAAO,CAAC,UAAU,CAAW;gBAEjB,WAAW,EAAE,WAAW;IAkBpC,IACI,gBAAgB;;;;SAEnB;IAED,QAAQ,GAAI,QAAQ,CAAC,UAInB;IAEF,cAAc,CAAC,WAAW,EAAE,WAAW;IAevC,OAAO,CAAC,mBAAmB,CAqBzB;CACL"}

package/dist/async-lazy-dropdown-state/async-lazy-dropdown-state.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/async-lazy-dropdown-state/async-lazy-dropdown-state.ts"],"sourcesContent":["import { computed, makeObservable } from 'mobx';\nimport { AsyncDataSource } from '@servicetitan/data-query';\nimport { AnvilSelectOptionsProps, AnvilSelectPropsStrict } from '@servicetitan/design-system';\nimport { DropdownOption, DropdownState } from '../dropdown-state';\n\nexport type DataFetcher = (searchQuery: string) => Promise<DropdownOption<any>[]>;\n\nexport class AsyncLazyDropdownState<T extends DropdownOption<any>> extends DropdownState<T> {\n    private arrayValue: AnvilSelectOptionsProps[] = [];\n\n    constructor(dataFetcher: DataFetcher) {\n        super({\n            dataSource: new AsyncDataSource({\n                get: async () => {\n                    const result: any[] = await dataFetcher(this.search);\n\n                    return {\n                        data: result,\n                        total: result.length,\n                    };\n                },\n            }),\n            lazy: true,\n        });\n\n        makeObservable(this);\n    }\n\n    @computed\n    get optionsWithValue() {\n        return this.getOptionsWithValue();\n    }\n\n    onChange = (value: AnvilSelectPropsStrict['value']) => {\n        const isEmptyValue = value === undefined || (Array.isArray(value) && value.length === 0);\n\n        this.arrayValue = isEmptyValue ? [] : !Array.isArray(value) ? [value!] : value;\n    };\n\n    setDataFetcher(dataFetcher: DataFetcher) {\n        this.setDataSource(\n            new AsyncDataSource({\n                get: async () => {\n                    const result: any[] = await dataFetcher(this.search);\n\n                    return {\n                        data: result,\n                        total: result.length,\n                    };\n                },\n            })\n        );\n    }\n\n    private getOptionsWithValue = () => {\n        const options = [...this.options];\n\n        if (!this.search) {\n            const values = this.arrayValue;\n\n            const selectedOptions = options.filter(\n                option => !!values.find(value => value.value === option.value)\n            );\n\n            const unselectedOptions = options.filter(\n                option => !values.find(value => value.value === option.value)\n            );\n\n            const missingSelectedOptions = values.filter(\n                value => !options.some(option => option.value === value.value)\n            );\n            return [...missingSelectedOptions, ...selectedOptions, ...unselectedOptions];\n        }\n\n        return options;\n    };\n}\n"],"names":["computed","makeObservable","AsyncDataSource","DropdownState","AsyncLazyDropdownState","optionsWithValue","getOptionsWithValue","setDataFetcher","dataFetcher","setDataSource","get","result","search","data","total","length","dataSource","lazy","arrayValue","onChange","value","isEmptyValue","undefined","Array","isArray","options","values","selectedOptions","filter","option","find","unselectedOptions","missingSelectedOptions","some"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,SAASA,QAAQ,EAAEC,cAAc,QAAQ,OAAO;AAChD,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,SAAyBC,aAAa,QAAQ,oBAAoB;AAIlE,OAAO,MAAMC,+BAA8DD;IAqBvE,IACIE,mBAAmB;QACnB,OAAO,IAAI,CAACC,mBAAmB;IACnC;IAQAC,eAAeC,WAAwB,EAAE;QACrC,IAAI,CAACC,aAAa,CACd,IAAIP,gBAAgB;YAChBQ,KAAK;gBACD,MAAMC,SAAgB,MAAMH,YAAY,IAAI,CAACI,MAAM;gBAEnD,OAAO;oBACHC,MAAMF;oBACNG,OAAOH,OAAOI,MAAM;gBACxB;YACJ;QACJ;IAER;IA1CA,YAAYP,WAAwB,CAAE;QAClC,KAAK,CAAC;YACFQ,YAAY,IAAId,gBAAgB;gBAC5BQ,KAAK;oBACD,MAAMC,SAAgB,MAAMH,YAAY,IAAI,CAACI,MAAM;oBAEnD,OAAO;wBACHC,MAAMF;wBACNG,OAAOH,OAAOI,MAAM;oBACxB;gBACJ;YACJ;YACAE,MAAM;QACV,IAfJ,uBAAQC,cAAwC,EAAE,GAyBlDC,uBAAAA,YAAW,CAACC;YACR,MAAMC,eAAeD,UAAUE,aAAcC,MAAMC,OAAO,CAACJ,UAAUA,MAAML,MAAM,KAAK;YAEtF,IAAI,CAACG,UAAU,GAAGG,eAAe,EAAE,GAAG,CAACE,MAAMC,OAAO,CAACJ,SAAS;gBAACA;aAAO,GAAGA;QAC7E,IAiBA,uBAAQd,uBAAsB;YAC1B,MAAMmB,UAAU;mBAAI,IAAI,CAACA,OAAO;aAAC;YAEjC,IAAI,CAAC,IAAI,CAACb,MAAM,EAAE;gBACd,MAAMc,SAAS,IAAI,CAACR,UAAU;gBAE9B,MAAMS,kBAAkBF,QAAQG,MAAM,CAClCC,CAAAA,SAAU,CAAC,CAACH,OAAOI,IAAI,CAACV,CAAAA,QAASA,MAAMA,KAAK,KAAKS,OAAOT,KAAK;gBAGjE,MAAMW,oBAAoBN,QAAQG,MAAM,CACpCC,CAAAA,SAAU,CAACH,OAAOI,IAAI,CAACV,CAAAA,QAASA,MAAMA,KAAK,KAAKS,OAAOT,KAAK;gBAGhE,MAAMY,yBAAyBN,OAAOE,MAAM,CACxCR,CAAAA,QAAS,CAACK,QAAQQ,IAAI,CAACJ,CAAAA,SAAUA,OAAOT,KAAK,KAAKA,MAAMA,KAAK;gBAEjE,OAAO;uBAAIY;uBAA2BL;uBAAoBI;iBAAkB;YAChF;YAEA,OAAON;QACX;QAlDIxB,eAAe,IAAI;IACvB;AAkDJ"}
+{"version":3,"sources":["../../src/async-lazy-dropdown-state/async-lazy-dropdown-state.ts"],"sourcesContent":["import { computed, makeObservable } from 'mobx';\nimport { AsyncDataSource } from '@servicetitan/data-query';\nimport { DropdownOption, DropdownState } from '../dropdown-state';\n\nexport type DataFetcher = (searchQuery: string) => Promise<DropdownOption<any>[]>;\n\nexport class AsyncLazyDropdownState<T extends DropdownOption<any>> extends DropdownState<T> {\n    private arrayValue: T[] = [];\n\n    constructor(dataFetcher: DataFetcher) {\n        super({\n            dataSource: new AsyncDataSource({\n                get: async () => {\n                    const result: any[] = await dataFetcher(this.search);\n\n                    return {\n                        data: result,\n                        total: result.length,\n                    };\n                },\n            }),\n            lazy: true,\n        });\n\n        makeObservable(this);\n    }\n\n    @computed\n    get optionsWithValue() {\n        return this.getOptionsWithValue();\n    }\n\n    onChange = (value?: T) => {\n        const isEmptyValue = value === undefined || (Array.isArray(value) && value.length === 0);\n\n        this.arrayValue = isEmptyValue ? [] : !Array.isArray(value) ? [value!] : value;\n    };\n\n    setDataFetcher(dataFetcher: DataFetcher) {\n        this.setDataSource(\n            new AsyncDataSource({\n                get: async () => {\n                    const result: any[] = await dataFetcher(this.search);\n\n                    return {\n                        data: result,\n                        total: result.length,\n                    };\n                },\n            })\n        );\n    }\n\n    private getOptionsWithValue = () => {\n        const options = [...this.options];\n\n        if (!this.search) {\n            const values = this.arrayValue;\n\n            const selectedOptions = options.filter(\n                option => !!values.find(value => value.value === option.value)\n            );\n\n            const unselectedOptions = options.filter(\n                option => !values.find(value => value.value === option.value)\n            );\n\n            const missingSelectedOptions = values.filter(\n                value => !options.some(option => option.value === value.value)\n            );\n            return [...missingSelectedOptions, ...selectedOptions, ...unselectedOptions];\n        }\n\n        return options;\n    };\n}\n"],"names":["computed","makeObservable","AsyncDataSource","DropdownState","AsyncLazyDropdownState","optionsWithValue","getOptionsWithValue","setDataFetcher","dataFetcher","setDataSource","get","result","search","data","total","length","dataSource","lazy","arrayValue","onChange","value","isEmptyValue","undefined","Array","isArray","options","values","selectedOptions","filter","option","find","unselectedOptions","missingSelectedOptions","some"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,SAASA,QAAQ,EAAEC,cAAc,QAAQ,OAAO;AAChD,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAAyBC,aAAa,QAAQ,oBAAoB;AAIlE,OAAO,MAAMC,+BAA8DD;IAqBvE,IACIE,mBAAmB;QACnB,OAAO,IAAI,CAACC,mBAAmB;IACnC;IAQAC,eAAeC,WAAwB,EAAE;QACrC,IAAI,CAACC,aAAa,CACd,IAAIP,gBAAgB;YAChBQ,KAAK;gBACD,MAAMC,SAAgB,MAAMH,YAAY,IAAI,CAACI,MAAM;gBAEnD,OAAO;oBACHC,MAAMF;oBACNG,OAAOH,OAAOI,MAAM;gBACxB;YACJ;QACJ;IAER;IA1CA,YAAYP,WAAwB,CAAE;QAClC,KAAK,CAAC;YACFQ,YAAY,IAAId,gBAAgB;gBAC5BQ,KAAK;oBACD,MAAMC,SAAgB,MAAMH,YAAY,IAAI,CAACI,MAAM;oBAEnD,OAAO;wBACHC,MAAMF;wBACNG,OAAOH,OAAOI,MAAM;oBACxB;gBACJ;YACJ;YACAE,MAAM;QACV,IAfJ,uBAAQC,cAAkB,EAAE,GAyB5BC,uBAAAA,YAAW,CAACC;YACR,MAAMC,eAAeD,UAAUE,aAAcC,MAAMC,OAAO,CAACJ,UAAUA,MAAML,MAAM,KAAK;YAEtF,IAAI,CAACG,UAAU,GAAGG,eAAe,EAAE,GAAG,CAACE,MAAMC,OAAO,CAACJ,SAAS;gBAACA;aAAO,GAAGA;QAC7E,IAiBA,uBAAQd,uBAAsB;YAC1B,MAAMmB,UAAU;mBAAI,IAAI,CAACA,OAAO;aAAC;YAEjC,IAAI,CAAC,IAAI,CAACb,MAAM,EAAE;gBACd,MAAMc,SAAS,IAAI,CAACR,UAAU;gBAE9B,MAAMS,kBAAkBF,QAAQG,MAAM,CAClCC,CAAAA,SAAU,CAAC,CAACH,OAAOI,IAAI,CAACV,CAAAA,QAASA,MAAMA,KAAK,KAAKS,OAAOT,KAAK;gBAGjE,MAAMW,oBAAoBN,QAAQG,MAAM,CACpCC,CAAAA,SAAU,CAACH,OAAOI,IAAI,CAACV,CAAAA,QAASA,MAAMA,KAAK,KAAKS,OAAOT,KAAK;gBAGhE,MAAMY,yBAAyBN,OAAOE,MAAM,CACxCR,CAAAA,QAAS,CAACK,QAAQQ,IAAI,CAACJ,CAAAA,SAAUA,OAAOT,KAAK,KAAKA,MAAMA,KAAK;gBAEjE,OAAO;uBAAIY;uBAA2BL;uBAAoBI;iBAAkB;YAChF;YAEA,OAAON;QACX;QAlDIxB,eAAe,IAAI;IACvB;AAkDJ"}

package/dist/async-lazy-dropdown-state/async-lazy-dropdown-state.stories.d.ts

@@ -1,7 +1,7 @@
 import { DropdownOption } from '../dropdown-state';
 declare const _default: {
     title: string;
-    component: (value: import("@servicetitan/design-system").AnvilSelectPropsStrict["value"], dataFetcher: import("./async-lazy-dropdown-state").DataFetcher) => [import("./async-lazy-dropdown-state").AsyncLazyDropdownState<DropdownOption<any>>, (open: boolean) => void];
+    component: (value: DropdownOption<any> | undefined, dataFetcher: import("./async-lazy-dropdown-state").DataFetcher) => [import("./async-lazy-dropdown-state").AsyncLazyDropdownState<DropdownOption<any>>, (open: boolean) => void];
     parameters: {};
 };
 export default _default;

package/dist/async-lazy-dropdown-state/use-async-lazy-dropdown-state.d.ts

@@ -1,5 +1,4 @@
-import { AnvilSelectPropsStrict } from '@servicetitan/design-system';
 import { AsyncLazyDropdownState, DataFetcher } from './async-lazy-dropdown-state';
 import { DropdownOption } from '../dropdown-state';
-export declare const useAsyncLazyDropdownState: (value: AnvilSelectPropsStrict["value"], dataFetcher: DataFetcher) => [AsyncLazyDropdownState<DropdownOption<any>>, (open: boolean) => void];
+export declare const useAsyncLazyDropdownState: (value: DropdownOption<any> | undefined, dataFetcher: DataFetcher) => [AsyncLazyDropdownState<DropdownOption<any>>, (open: boolean) => void];
 //# sourceMappingURL=use-async-lazy-dropdown-state.d.ts.map

package/dist/async-lazy-dropdown-state/use-async-lazy-dropdown-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-async-lazy-dropdown-state.d.ts","sourceRoot":"","sources":["../../src/async-lazy-dropdown-state/use-async-lazy-dropdown-state.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,eAAO,MAAM,yBAAyB,GAClC,OAAO,sBAAsB,CAAC,OAAO,CAAC,EAEtC,aAAa,WAAW,KAyBQ,CAC5B,sBAAsB,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,EAC3C,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAE9B,CAAC"}
+{"version":3,"file":"use-async-lazy-dropdown-state.d.ts","sourceRoot":"","sources":["../../src/async-lazy-dropdown-state/use-async-lazy-dropdown-state.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,eAAO,MAAM,yBAAyB,GAClC,OAAO,cAAc,CAAC,GAAG,CAAC,GAAG,SAAS,EAEtC,aAAa,WAAW,KAyBQ,CAC5B,sBAAsB,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,EAC3C,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAE9B,CAAC"}

package/dist/async-lazy-dropdown-state/use-async-lazy-dropdown-state.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/async-lazy-dropdown-state/use-async-lazy-dropdown-state.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { AnvilSelectPropsStrict } from '@servicetitan/design-system';\nimport { AsyncLazyDropdownState, DataFetcher } from './async-lazy-dropdown-state';\nimport { DropdownOption } from '../dropdown-state';\n\nexport const useAsyncLazyDropdownState = (\n    value: AnvilSelectPropsStrict['value'],\n    // try memoising dataFetcher\n    dataFetcher: DataFetcher\n) => {\n    const [state] = useState(() => new AsyncLazyDropdownState(dataFetcher));\n    useEffect(() => {\n        state.onChange(value);\n    }, [state, value]);\n\n    const isInitialMount = useRef(true);\n    useEffect(() => {\n        if (isInitialMount.current) {\n            isInitialMount.current = false;\n        } else {\n            state.setDataFetcher(dataFetcher);\n        }\n    }, [state, dataFetcher]);\n\n    const onOpenChange = useCallback(\n        (open: boolean) => {\n            if (open) {\n                state.setSearch('');\n            }\n        },\n        [state]\n    );\n\n    return [state, onOpenChange] as [\n        AsyncLazyDropdownState<DropdownOption<any>>,\n        (open: boolean) => void,\n    ];\n};\n"],"names":["useCallback","useEffect","useRef","useState","AsyncLazyDropdownState","useAsyncLazyDropdownState","value","dataFetcher","state","onChange","isInitialMount","current","setDataFetcher","onOpenChange","open","setSearch"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAEjE,SAASC,sBAAsB,QAAqB,8BAA8B;AAGlF,OAAO,MAAMC,4BAA4B,CACrCC,OACA,4BAA4B;AAC5BC;IAEA,MAAM,CAACC,MAAM,GAAGL,SAAS,IAAM,IAAIC,uBAAuBG;IAC1DN,UAAU;QACNO,MAAMC,QAAQ,CAACH;IACnB,GAAG;QAACE;QAAOF;KAAM;IAEjB,MAAMI,iBAAiBR,OAAO;IAC9BD,UAAU;QACN,IAAIS,eAAeC,OAAO,EAAE;YACxBD,eAAeC,OAAO,GAAG;QAC7B,OAAO;YACHH,MAAMI,cAAc,CAACL;QACzB;IACJ,GAAG;QAACC;QAAOD;KAAY;IAEvB,MAAMM,eAAeb,YACjB,CAACc;QACG,IAAIA,MAAM;YACNN,MAAMO,SAAS,CAAC;QACpB;IACJ,GACA;QAACP;KAAM;IAGX,OAAO;QAACA;QAAOK;KAAa;AAIhC,EAAE"}
+{"version":3,"sources":["../../src/async-lazy-dropdown-state/use-async-lazy-dropdown-state.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { AsyncLazyDropdownState, DataFetcher } from './async-lazy-dropdown-state';\nimport { DropdownOption } from '../dropdown-state';\n\nexport const useAsyncLazyDropdownState = (\n    value: DropdownOption<any> | undefined,\n    // try memoising dataFetcher\n    dataFetcher: DataFetcher\n) => {\n    const [state] = useState(() => new AsyncLazyDropdownState(dataFetcher));\n    useEffect(() => {\n        state.onChange(value);\n    }, [state, value]);\n\n    const isInitialMount = useRef(true);\n    useEffect(() => {\n        if (isInitialMount.current) {\n            isInitialMount.current = false;\n        } else {\n            state.setDataFetcher(dataFetcher);\n        }\n    }, [state, dataFetcher]);\n\n    const onOpenChange = useCallback(\n        (open: boolean) => {\n            if (open) {\n                state.setSearch('');\n            }\n        },\n        [state]\n    );\n\n    return [state, onOpenChange] as [\n        AsyncLazyDropdownState<DropdownOption<any>>,\n        (open: boolean) => void,\n    ];\n};\n"],"names":["useCallback","useEffect","useRef","useState","AsyncLazyDropdownState","useAsyncLazyDropdownState","value","dataFetcher","state","onChange","isInitialMount","current","setDataFetcher","onOpenChange","open","setSearch"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AACjE,SAASC,sBAAsB,QAAqB,8BAA8B;AAGlF,OAAO,MAAMC,4BAA4B,CACrCC,OACA,4BAA4B;AAC5BC;IAEA,MAAM,CAACC,MAAM,GAAGL,SAAS,IAAM,IAAIC,uBAAuBG;IAC1DN,UAAU;QACNO,MAAMC,QAAQ,CAACH;IACnB,GAAG;QAACE;QAAOF;KAAM;IAEjB,MAAMI,iBAAiBR,OAAO;IAC9BD,UAAU;QACN,IAAIS,eAAeC,OAAO,EAAE;YACxBD,eAAeC,OAAO,GAAG;QAC7B,OAAO;YACHH,MAAMI,cAAc,CAACL;QACzB;IACJ,GAAG;QAACC;QAAOD;KAAY;IAEvB,MAAMM,eAAeb,YACjB,CAACc;QACG,IAAIA,MAAM;YACNN,MAAMO,SAAS,CAAC;QACpB;IACJ,GACA;QAACP;KAAM;IAGX,OAAO;QAACA;QAAOK;KAAa;AAIhC,EAAE"}

package/dist/demo/dropdown-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-state.d.ts","sourceRoot":"","sources":["../../src/demo/dropdown-state.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,EAAE,EAAE,MAAM,OAAO,CAAC;AA0N7C,eAAO,MAAM,oBAAoB,EAAE,EAclC,CAAC"}
+{"version":3,"file":"dropdown-state.d.ts","sourceRoot":"","sources":["../../src/demo/dropdown-state.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAoB,EAAE,EAAE,MAAM,OAAO,CAAC;AA6M7C,eAAO,MAAM,oBAAoB,EAAE,EAclC,CAAC"}

package/dist/demo/dropdown-state.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, Fragment } from 'react';
 import { InMemoryDataSource, AsyncDataSource } from '@servicetitan/data-query';
 import { AnvilSelect, Text, ButtonGroup, Button } from '@servicetitan/design-system';
 import { FieldState } from 'formstate';
 import { observer } from 'mobx-react';
-import { DropdownState } from '..';
+import { useRef, Fragment } from 'react';
+import { DropdownState } from '../dropdown-state';
 function useDropdownField(initial) {
     return useRef(new FieldState(initial)).current;
 }
@@ -291,7 +291,7 @@ const AsyncDropdownStateExample = observer(()=>{
             async get ({ filter }) {
                 var _filter_filters_, _filter_filters;
                 const search = filter === null || filter === void 0 ? void 0 : (_filter_filters = filter.filters) === null || _filter_filters === void 0 ? void 0 : (_filter_filters_ = _filter_filters[0]) === null || _filter_filters_ === void 0 ? void 0 : _filter_filters_.value;
-                const result = search ? options.filter(({ text })=>text.toLowerCase().includes(search.toLowerCase())) : options;
+                const result = search ? options.filter(({ text })=>text === null || text === void 0 ? void 0 : text.toLowerCase().includes(search.toLowerCase())) : options;
                 await new Promise((resolver)=>setTimeout(resolver, 1000));
                 return {
                     data: result,

package/dist/demo/dropdown-state.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/demo/dropdown-state.tsx"],"sourcesContent":["import { useRef, Fragment, FC } from 'react';\n\nimport { InMemoryDataSource, AsyncDataSource, FilterDescriptor } from '@servicetitan/data-query';\n\nimport {\n    AnvilSelect,\n    AnvilSelectOptionsProps,\n    Text,\n    ButtonGroup,\n    Button,\n} from '@servicetitan/design-system';\n\nimport { FieldState } from 'formstate';\nimport { observer } from 'mobx-react';\n\nimport { DropdownState, DropdownOption } from '..';\n\nfunction useDropdownField<T>(initial: T) {\n    return useRef(new FieldState(initial)).current;\n}\n\nfunction useDropdownState<T extends DropdownOption<any>>(state: DropdownState<T>) {\n    return useRef(state).current;\n}\n\ninterface Planet extends DropdownOption<number> {\n    diameter: number;\n    moons: number;\n}\n\nconst options: Planet[] = [\n    { value: 1, text: 'Alderaan', diameter: 12500, moons: 0 },\n    { value: 2, text: 'Bespin', diameter: 118000, moons: 2 },\n    { value: 3, text: 'Coruscant', diameter: 12240, moons: 4 },\n    { value: 4, text: 'Dagobah', diameter: 14410, moons: 0 },\n    { value: 5, text: 'Hoth', diameter: 7200, moons: 3 },\n    { value: 6, text: 'Kashyyyk', diameter: 12765, moons: 3 },\n    { value: 7, text: 'Naboo', diameter: 12120, moons: 3 },\n    { value: 8, text: 'Tatooine', diameter: 10465, moons: 3 },\n    { value: 9, text: 'Yavin', diameter: 200000, moons: 26 },\n];\n\ninterface Character extends DropdownOption<number> {\n    group: string;\n}\n\nconst optionsWithGroups: Character[] = [\n    { value: 1, text: 'Hem Dazon', group: 'Arcona' },\n    { value: 2, text: 'El-Les', group: 'Arcona' },\n    { value: 3, text: 'Jheeg', group: 'Arcona' },\n    { value: 4, text: 'Paploo', group: 'Ewok' },\n    { value: 5, text: 'Gallo', group: 'Gungan' },\n    { value: 6, text: 'Lyonie', group: 'Gungan' },\n    { value: 7, text: 'Tobler Ceel', group: 'Gungan' },\n    { value: 8, text: 'Ganne', group: 'Gungan' },\n    { value: 9, text: 'Augara Jowil', group: 'Gungan' },\n    { value: 10, text: 'Reegesk', group: 'Ranat' },\n    { value: 11, text: 'Rik-tak', group: 'Ranat' },\n    { value: 12, text: 'Bahb', group: 'Zeltron' },\n    { value: 13, text: 'Chantique', group: 'Zeltron' },\n    { value: 14, text: 'Luxa', group: 'Zeltron' },\n    { value: 15, text: 'Rahuhl', group: 'Zeltron' },\n];\n\nconst InMemoryDropdownStateExample: FC = observer(() => {\n    const field = useDropdownField<AnvilSelectOptionsProps[]>([]);\n    const state = useDropdownState(\n        new DropdownState<Planet | Character>({\n            dataSource: new InMemoryDataSource(options),\n        })\n    );\n\n    const handleChange = (data: AnvilSelectOptionsProps | AnvilSelectOptionsProps[]) => {\n        field.onChange(Array.isArray(data) ? data : [data]);\n    };\n\n    const withReset = (handler: () => void) => {\n        return async () => {\n            handleChange([]);\n            state.setSearch('');\n            state.setDataSource(null);\n            state.setSearchByGroup(false);\n            state.setSort([{ field: 'text' }]);\n            state.setFilter(null);\n            state.setGroup([{ field: 'group' }]);\n\n            await Promise.resolve();\n\n            handler();\n        };\n    };\n\n    const withoutGroups = withReset(() => {\n        state.setDataSource(new InMemoryDataSource(options));\n    });\n\n    const withGroups = withReset(() => {\n        state.setDataSource(new InMemoryDataSource(optionsWithGroups));\n    });\n\n    const withGroupsAndSearch = withReset(() => {\n        state.setDataSource(new InMemoryDataSource(optionsWithGroups));\n        state.setSearchByGroup(true);\n    });\n\n    const customSort = withReset(() => {\n        state.setDataSource(new InMemoryDataSource(options));\n        state.setSort([{ field: 'diameter', dir: 'desc' }]);\n    });\n\n    const customFilter = withReset(() => {\n        state.setDataSource(new InMemoryDataSource(options));\n        state.setFilter({\n            logic: 'and',\n            filters: [{ field: 'diameter', value: 12250, operator: 'gte' }],\n        });\n    });\n\n    const customGroup = withReset(() => {\n        state.setDataSource(new InMemoryDataSource(options));\n        state.setGroup([{ field: 'moons', dir: 'desc' }]);\n    });\n\n    return (\n        <Fragment>\n            <AnvilSelect\n                value={field.value}\n                onChange={handleChange}\n                options={state.options}\n                search={{ value: state.search, onChange: state.onSearchChange }}\n                multiple\n            />\n\n            <Text size={4} className=\"m-t-4 m-b-half\">\n                Without groups\n            </Text>\n            <Button onClick={withoutGroups}>Apply</Button>\n\n            <Text size={4} className=\"m-t-4 m-b-half\">\n                With groups\n            </Text>\n            <ButtonGroup>\n                <Button onClick={withGroups}>Search in options</Button>\n                <Button onClick={withGroupsAndSearch}>Search in options & groups</Button>\n            </ButtonGroup>\n\n            <Text size={4} className=\"m-t-4 m-b-half\">\n                Custom sort\n            </Text>\n            <Button onClick={customSort}>Apply</Button>\n\n            <Text size={4} className=\"m-t-4 m-b-half\">\n                Custom filter\n            </Text>\n            <Button onClick={customFilter}>Apply</Button>\n\n            <Text size={4} className=\"m-t-4 m-b-half\">\n                Custom group\n            </Text>\n            <Button onClick={customGroup}>Apply</Button>\n        </Fragment>\n    );\n});\n\nconst AsyncDropdownStateExample: FC = observer(() => {\n    const field = useDropdownField<AnvilSelectOptionsProps[]>([]);\n    const state = useDropdownState(\n        new DropdownState<Planet>({\n            dataSource: new AsyncDataSource(\n                {\n                    async get({ filter }) {\n                        const search = (filter?.filters?.[0] as FilterDescriptor | undefined)\n                            ?.value as string | undefined;\n\n                        const result = search\n                            ? options.filter(({ text }) =>\n                                  text.toLowerCase().includes(search.toLowerCase())\n                              )\n                            : options;\n\n                        await new Promise(resolver => setTimeout(resolver, 1000));\n\n                        return {\n                            data: result,\n                            total: result.length,\n                        };\n                    },\n                },\n                undefined,\n                true\n            ),\n            lazy: true,\n        })\n    );\n\n    const handleChange = (data: AnvilSelectOptionsProps | AnvilSelectOptionsProps[]) => {\n        field.onChange(Array.isArray(data) ? data : [data]);\n    };\n\n    const handleOpenChange = (open: boolean) => {\n        if (open) {\n            state.fetch();\n        }\n    };\n\n    return (\n        <AnvilSelect\n            value={field.value}\n            onChange={handleChange}\n            options={state.options}\n            search={{ value: state.search, onChange: state.onSearchChange }}\n            onOpenChange={handleOpenChange}\n            loading={state.loading}\n            multiple\n        />\n    );\n});\n\nexport const DropdownStateExample: FC = () => {\n    return (\n        <Fragment>\n            <Text size={5} className=\"m-b-half\">\n                InMemoryDataSource\n            </Text>\n            <InMemoryDropdownStateExample />\n\n            <Text size={5} className=\"m-t-5 m-b-half\">\n                AsyncDataSource\n            </Text>\n            <AsyncDropdownStateExample />\n        </Fragment>\n    );\n};\n"],"names":["useRef","Fragment","InMemoryDataSource","AsyncDataSource","AnvilSelect","Text","ButtonGroup","Button","FieldState","observer","DropdownState","useDropdownField","initial","current","useDropdownState","state","options","value","text","diameter","moons","optionsWithGroups","group","InMemoryDropdownStateExample","field","dataSource","handleChange","data","onChange","Array","isArray","withReset","handler","setSearch","setDataSource","setSearchByGroup","setSort","setFilter","setGroup","Promise","resolve","withoutGroups","withGroups","withGroupsAndSearch","customSort","dir","customFilter","logic","filters","operator","customGroup","search","onSearchChange","multiple","size","className","onClick","AsyncDropdownStateExample","get","filter","result","toLowerCase","includes","resolver","setTimeout","total","length","undefined","lazy","handleOpenChange","open","fetch","onOpenChange","loading","DropdownStateExample"],"mappings":"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"}
+{"version":3,"sources":["../../src/demo/dropdown-state.tsx"],"sourcesContent":["import { InMemoryDataSource, AsyncDataSource, FilterDescriptor } from '@servicetitan/data-query';\nimport {\n    AnvilSelect,\n    AnvilSelectOptionsProps,\n    Text,\n    ButtonGroup,\n    Button,\n} from '@servicetitan/design-system';\n\nimport { FieldState } from 'formstate';\nimport { observer } from 'mobx-react';\nimport { useRef, Fragment, FC } from 'react';\n\nimport { DropdownState, DropdownOption } from '../dropdown-state';\n\nfunction useDropdownField<T>(initial: T) {\n    return useRef(new FieldState(initial)).current;\n}\n\nfunction useDropdownState<T extends DropdownOption<any>>(state: DropdownState<T>) {\n    return useRef(state).current;\n}\n\ninterface Planet extends DropdownOption<number> {\n    diameter: number;\n    moons: number;\n}\n\nconst options: Planet[] = [\n    { value: 1, text: 'Alderaan', diameter: 12500, moons: 0 },\n    { value: 2, text: 'Bespin', diameter: 118000, moons: 2 },\n    { value: 3, text: 'Coruscant', diameter: 12240, moons: 4 },\n    { value: 4, text: 'Dagobah', diameter: 14410, moons: 0 },\n    { value: 5, text: 'Hoth', diameter: 7200, moons: 3 },\n    { value: 6, text: 'Kashyyyk', diameter: 12765, moons: 3 },\n    { value: 7, text: 'Naboo', diameter: 12120, moons: 3 },\n    { value: 8, text: 'Tatooine', diameter: 10465, moons: 3 },\n    { value: 9, text: 'Yavin', diameter: 200000, moons: 26 },\n];\n\ninterface Character extends DropdownOption<number> {\n    group: string;\n}\n\nconst optionsWithGroups: Character[] = [\n    { value: 1, text: 'Hem Dazon', group: 'Arcona' },\n    { value: 2, text: 'El-Les', group: 'Arcona' },\n    { value: 3, text: 'Jheeg', group: 'Arcona' },\n    { value: 4, text: 'Paploo', group: 'Ewok' },\n    { value: 5, text: 'Gallo', group: 'Gungan' },\n    { value: 6, text: 'Lyonie', group: 'Gungan' },\n    { value: 7, text: 'Tobler Ceel', group: 'Gungan' },\n    { value: 8, text: 'Ganne', group: 'Gungan' },\n    { value: 9, text: 'Augara Jowil', group: 'Gungan' },\n    { value: 10, text: 'Reegesk', group: 'Ranat' },\n    { value: 11, text: 'Rik-tak', group: 'Ranat' },\n    { value: 12, text: 'Bahb', group: 'Zeltron' },\n    { value: 13, text: 'Chantique', group: 'Zeltron' },\n    { value: 14, text: 'Luxa', group: 'Zeltron' },\n    { value: 15, text: 'Rahuhl', group: 'Zeltron' },\n];\n\nconst InMemoryDropdownStateExample: FC = observer(() => {\n    const field = useDropdownField<AnvilSelectOptionsProps[]>([]);\n    const state = useDropdownState(\n        new DropdownState<Planet | Character>({\n            dataSource: new InMemoryDataSource(options),\n        })\n    );\n\n    const handleChange = (data: AnvilSelectOptionsProps | AnvilSelectOptionsProps[]) => {\n        field.onChange(Array.isArray(data) ? data : [data]);\n    };\n\n    const withReset = (handler: () => void) => {\n        return async () => {\n            handleChange([]);\n            state.setSearch('');\n            state.setDataSource(null);\n            state.setSearchByGroup(false);\n            state.setSort([{ field: 'text' }]);\n            state.setFilter(null);\n            state.setGroup([{ field: 'group' }]);\n\n            await Promise.resolve();\n\n            handler();\n        };\n    };\n\n    const withoutGroups = withReset(() => {\n        state.setDataSource(new InMemoryDataSource(options));\n    });\n\n    const withGroups = withReset(() => {\n        state.setDataSource(new InMemoryDataSource(optionsWithGroups));\n    });\n\n    const withGroupsAndSearch = withReset(() => {\n        state.setDataSource(new InMemoryDataSource(optionsWithGroups));\n        state.setSearchByGroup(true);\n    });\n\n    const customSort = withReset(() => {\n        state.setDataSource(new InMemoryDataSource(options));\n        state.setSort([{ field: 'diameter', dir: 'desc' }]);\n    });\n\n    const customFilter = withReset(() => {\n        state.setDataSource(new InMemoryDataSource(options));\n        state.setFilter({\n            logic: 'and',\n            filters: [{ field: 'diameter', value: 12250, operator: 'gte' }],\n        });\n    });\n\n    const customGroup = withReset(() => {\n        state.setDataSource(new InMemoryDataSource(options));\n        state.setGroup([{ field: 'moons', dir: 'desc' }]);\n    });\n\n    return (\n        <Fragment>\n            <AnvilSelect\n                value={field.value}\n                onChange={handleChange}\n                options={state.options}\n                search={{ value: state.search, onChange: state.onSearchChange }}\n                multiple\n            />\n\n            <Text size={4} className=\"m-t-4 m-b-half\">\n                Without groups\n            </Text>\n            <Button onClick={withoutGroups}>Apply</Button>\n\n            <Text size={4} className=\"m-t-4 m-b-half\">\n                With groups\n            </Text>\n            <ButtonGroup>\n                <Button onClick={withGroups}>Search in options</Button>\n                <Button onClick={withGroupsAndSearch}>Search in options & groups</Button>\n            </ButtonGroup>\n\n            <Text size={4} className=\"m-t-4 m-b-half\">\n                Custom sort\n            </Text>\n            <Button onClick={customSort}>Apply</Button>\n\n            <Text size={4} className=\"m-t-4 m-b-half\">\n                Custom filter\n            </Text>\n            <Button onClick={customFilter}>Apply</Button>\n\n            <Text size={4} className=\"m-t-4 m-b-half\">\n                Custom group\n            </Text>\n            <Button onClick={customGroup}>Apply</Button>\n        </Fragment>\n    );\n});\n\nconst AsyncDropdownStateExample: FC = observer(() => {\n    const field = useDropdownField<AnvilSelectOptionsProps[]>([]);\n    const state = useDropdownState(\n        new DropdownState<Planet>({\n            dataSource: new AsyncDataSource(\n                {\n                    async get({ filter }) {\n                        const search = (filter?.filters?.[0] as FilterDescriptor | undefined)\n                            ?.value as string | undefined;\n\n                        const result = search\n                            ? options.filter(({ text }) =>\n                                  text?.toLowerCase().includes(search.toLowerCase())\n                              )\n                            : options;\n\n                        await new Promise(resolver => setTimeout(resolver, 1000));\n\n                        return {\n                            data: result,\n                            total: result.length,\n                        };\n                    },\n                },\n                undefined,\n                true\n            ),\n            lazy: true,\n        })\n    );\n\n    const handleChange = (data: AnvilSelectOptionsProps | AnvilSelectOptionsProps[]) => {\n        field.onChange(Array.isArray(data) ? data : [data]);\n    };\n\n    const handleOpenChange = (open: boolean) => {\n        if (open) {\n            state.fetch();\n        }\n    };\n\n    return (\n        <AnvilSelect\n            value={field.value}\n            onChange={handleChange}\n            options={state.options}\n            search={{ value: state.search, onChange: state.onSearchChange }}\n            onOpenChange={handleOpenChange}\n            loading={state.loading}\n            multiple\n        />\n    );\n});\n\nexport const DropdownStateExample: FC = () => {\n    return (\n        <Fragment>\n            <Text size={5} className=\"m-b-half\">\n                InMemoryDataSource\n            </Text>\n            <InMemoryDropdownStateExample />\n\n            <Text size={5} className=\"m-t-5 m-b-half\">\n                AsyncDataSource\n            </Text>\n            <AsyncDropdownStateExample />\n        </Fragment>\n    );\n};\n"],"names":["InMemoryDataSource","AsyncDataSource","AnvilSelect","Text","ButtonGroup","Button","FieldState","observer","useRef","Fragment","DropdownState","useDropdownField","initial","current","useDropdownState","state","options","value","text","diameter","moons","optionsWithGroups","group","InMemoryDropdownStateExample","field","dataSource","handleChange","data","onChange","Array","isArray","withReset","handler","setSearch","setDataSource","setSearchByGroup","setSort","setFilter","setGroup","Promise","resolve","withoutGroups","withGroups","withGroupsAndSearch","customSort","dir","customFilter","logic","filters","operator","customGroup","search","onSearchChange","multiple","size","className","onClick","AsyncDropdownStateExample","get","filter","result","toLowerCase","includes","resolver","setTimeout","total","length","undefined","lazy","handleOpenChange","open","fetch","onOpenChange","loading","DropdownStateExample"],"mappings":"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"}

package/dist/dropdown-state.d.ts

@@ -1,9 +1,8 @@
-import { ChangeEvent } from 'react';
 import { State, SortDescriptor, CompositeFilterDescriptor, GroupDescriptor, DataSource } from '@servicetitan/data-query';
-import { InputOnChangeData, AnvilSelectOptionsProps } from '@servicetitan/design-system';
+import { ChangeEvent } from 'react';
 export interface DropdownOption<T> {
-    value: T;
-    text: string;
+    value?: T;
+    text?: string;
 }
 interface DropdownStateConstructorParams<T> {
     dataSource?: DataSource<T>;
@@ -18,7 +17,11 @@ interface DropdownStateConstructorParams<T> {
 export declare class DropdownState<T extends DropdownOption<any>> {
     loading: boolean;
     search: string;
-    get options(): AnvilSelectOptionsProps[];
+    get options(): (T | {
+        value: T[keyof T];
+        text: string;
+        options: T[];
+    })[];
     get state(): State;
     private get searchFilter();
     private dataSource;
@@ -28,7 +31,9 @@ export declare class DropdownState<T extends DropdownOption<any>> {
     private group;
     private data;
     constructor({ dataSource, searchByGroup, state, lazy, }?: DropdownStateConstructorParams<T>);
-    onSearchChange: (_0: ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => void;
+    onSearchChange: (_0: ChangeEvent<HTMLInputElement>, data: {
+        value: string;
+    }) => void;
     setSearch: (search: string) => Promise<void>;
     setDataSource: (dataSource: DataSource<T> | null) => Promise<void>;
     setSearchByGroup: (searchByGroup: boolean) => Promise<void>;

package/dist/dropdown-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-state.d.ts","sourceRoot":"","sources":["../src/dropdown-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EACH,KAAK,EACL,cAAc,EACd,yBAAyB,EACzB,eAAe,EAEf,UAAU,EACb,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAWzF,MAAM,WAAW,cAAc,CAAC,CAAC;IAC7B,KAAK,EAAE,CAAC,CAAC;IACT,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,8BAA8B,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE;QACJ,IAAI,CAAC,EAAE,cAAc,EAAE,CAAC;QACxB,MAAM,CAAC,EAAE,yBAAyB,CAAC;QACnC,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC;KAC7B,CAAC;IACF,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,qBAAa,aAAa,CAAC,CAAC,SAAS,cAAc,CAAC,GAAG,CAAC;IACxC,OAAO,UAAS;IAChB,MAAM,SAAM;IAExB,IAAc,OAAO,8BA6BpB;IAED,IAAc,KAAK,IAUV,KAAK,CACb;IAES,OAAO,KAAK,YAAY,GAcjC;IAEW,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,aAAa,CAAU;IAC/B,OAAO,CAAC,IAAI,CAAmB;IAC/B,OAAO,CAAC,MAAM,CAAmC;IACjD,OAAO,CAAC,KAAK,CAAoB;IAEjC,OAAO,CAAC,IAAI,CAA8B;gBAE1C,EACR,UAAU,EACV,aAAa,EACb,KAAK,EACL,IAAI,GACP,GAAE,8BAA8B,CAAC,CAAC,CAAM;IAezC,cAAc,OAEE,WAAW,CAAC,gBAAgB,CAAC,QAAQ,iBAAiB,UAMjE;IAGL,SAAS,GAAU,QAAQ,MAAM,mBAG/B;IAGF,aAAa,GAAU,YAAY,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,mBAGrD;IAGF,gBAAgB,GAAU,eAAe,OAAO,mBAG9C;IAGF,OAAO,GAAU,MAAM,cAAc,EAAE,mBAGrC;IAGF,SAAS,GAAU,QAAQ,yBAAyB,GAAG,IAAI,mBAGzD;IAGF,QAAQ,GAAU,OAAO,CAAC,eAAe,CAAC,mBAGxC;IAGF,KAAK,sBASH;IAEF,OAAO,CAAC,QAAQ,CAgBd;CACL"}
+{"version":3,"file":"dropdown-state.d.ts","sourceRoot":"","sources":["../src/dropdown-state.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,KAAK,EACL,cAAc,EACd,yBAAyB,EACzB,eAAe,EAEf,UAAU,EACb,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAOpC,MAAM,WAAW,cAAc,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,8BAA8B,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE;QACJ,IAAI,CAAC,EAAE,cAAc,EAAE,CAAC;QACxB,MAAM,CAAC,EAAE,yBAAyB,CAAC;QACnC,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC;KAC7B,CAAC;IACF,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,qBAAa,aAAa,CAAC,CAAC,SAAS,cAAc,CAAC,GAAG,CAAC;IACxC,OAAO,UAAS;IAChB,MAAM,SAAM;IAExB,IAAc,OAAO;eAC2B,CAAC,CAAC,MAAM,CAAC,CAAC;cAAQ,MAAM;iBAAW,CAAC,EAAE;SA4BrF;IAED,IAAc,KAAK,IAUV,KAAK,CACb;IAES,OAAO,KAAK,YAAY,GAcjC;IAEW,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,aAAa,CAAU;IAC/B,OAAO,CAAC,IAAI,CAAmB;IAC/B,OAAO,CAAC,MAAM,CAAmC;IACjD,OAAO,CAAC,KAAK,CAAoB;IAEjC,OAAO,CAAC,IAAI,CAA8B;gBAE1C,EACR,UAAU,EACV,aAAa,EACb,KAAK,EACL,IAAI,GACP,GAAE,8BAA8B,CAAC,CAAC,CAAM;IAezC,cAAc,OAEE,WAAW,CAAC,gBAAgB,CAAC,QAAQ;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,UAMjE;IAGL,SAAS,GAAU,QAAQ,MAAM,mBAG/B;IAGF,aAAa,GAAU,YAAY,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,mBAGrD;IAGF,gBAAgB,GAAU,eAAe,OAAO,mBAG9C;IAGF,OAAO,GAAU,MAAM,cAAc,EAAE,mBAGrC;IAGF,SAAS,GAAU,QAAQ,yBAAyB,GAAG,IAAI,mBAGzD;IAGF,QAAQ,GAAU,OAAO,CAAC,eAAe,CAAC,mBAGxC;IAGF,KAAK,sBASH;IAEF,OAAO,CAAC,QAAQ,CAgBd;CACL"}

package/dist/dropdown-state.js

@@ -20,8 +20,8 @@ function _ts_decorate(decorators, target, key, desc) {
 function _ts_metadata(k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 }
-import { observable, computed, action, runInAction, makeObservable } from 'mobx';
 import debounce from 'debounce';
+import { observable, computed, action, runInAction, makeObservable } from 'mobx';
 function isGroupItem(item, groupedBy) {
     const { items, field } = item;
     return !!items && field === groupedBy;

package/dist/dropdown-state.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/dropdown-state.ts"],"sourcesContent":["import { ChangeEvent } from 'react';\nimport {\n    State,\n    SortDescriptor,\n    CompositeFilterDescriptor,\n    GroupDescriptor,\n    GroupResult,\n    DataSource,\n} from '@servicetitan/data-query';\n\nimport { InputOnChangeData, AnvilSelectOptionsProps } from '@servicetitan/design-system';\n\nimport { observable, computed, action, runInAction, makeObservable } from 'mobx';\n\nimport debounce from 'debounce';\n\nfunction isGroupItem<T>(item: T | GroupResult<T>, groupedBy: string): item is GroupResult<T> {\n    const { items, field } = item as GroupResult<T>;\n    return !!items && field === groupedBy;\n}\n\nexport interface DropdownOption<T> {\n    value: T;\n    text: string;\n}\n\ninterface DropdownStateConstructorParams<T> {\n    dataSource?: DataSource<T>;\n    searchByGroup?: boolean;\n    state?: {\n        sort?: SortDescriptor[];\n        filter?: CompositeFilterDescriptor;\n        group?: [GroupDescriptor];\n    };\n    lazy?: boolean;\n}\n\nexport class DropdownState<T extends DropdownOption<any>> {\n    @observable loading = false;\n    @observable search = '';\n\n    @computed get options() {\n        const result = new Map<T[keyof T], AnvilSelectOptionsProps>();\n        const flat: AnvilSelectOptionsProps[] = [];\n\n        const groupField = this.group[0].field;\n\n        this.traverse(\n            this.data,\n            item => {\n                const group = item[groupField as keyof T];\n\n                if (group) {\n                    if (result.has(group)) {\n                        result.get(group)?.options?.push(item);\n                    } else {\n                        result.set(group, {\n                            value: group,\n                            text: String(group),\n                            options: [item],\n                        });\n                    }\n                } else {\n                    flat.push(item);\n                }\n            },\n            groupField\n        );\n\n        return [...flat, ...Array.from(result.values())];\n    }\n\n    @computed get state() {\n        return {\n            sort: this.sort,\n            filter:\n                this.searchFilter || this.filter\n                    ? this.searchFilter && this.filter\n                        ? { logic: 'and', filters: [this.searchFilter, this.filter] }\n                        : (this.searchFilter ?? this.filter)\n                    : undefined,\n            group: this.group,\n        } as State;\n    }\n\n    @computed private get searchFilter() {\n        if (!this.search) {\n            return undefined;\n        }\n\n        const filter = { operator: 'contains', value: this.search, ignoreCase: true };\n\n        return {\n            logic: 'or',\n            filters: [\n                { ...filter, field: 'text' },\n                ...(this.searchByGroup ? [{ ...filter, field: 'group' }] : []),\n            ],\n        } as CompositeFilterDescriptor;\n    }\n\n    @observable private dataSource: DataSource<T> | null;\n    @observable private searchByGroup: boolean;\n    @observable private sort: SortDescriptor[];\n    @observable private filter: CompositeFilterDescriptor | null;\n    @observable private group: [GroupDescriptor];\n\n    @observable private data: T[] | GroupResult<T>[] = [];\n\n    constructor({\n        dataSource,\n        searchByGroup,\n        state,\n        lazy,\n    }: DropdownStateConstructorParams<T> = {}) {\n        makeObservable(this);\n\n        this.dataSource = dataSource ?? null;\n        this.searchByGroup = searchByGroup ?? false;\n        this.sort = state?.sort ?? [{ field: 'text' }];\n        this.filter = state?.filter ?? null;\n        this.group = state?.group ?? [{ field: 'group' }];\n\n        if (!lazy) {\n            this.fetch();\n        }\n    }\n\n    // eslint-disable-next-line @typescript-eslint/member-ordering\n    onSearchChange = (() => {\n        const fetch = debounce(() => this.fetch(), 100);\n        return (_0: ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {\n            runInAction(() => {\n                this.search = data.value;\n            });\n            fetch();\n        };\n    })();\n\n    @action\n    setSearch = async (search: string) => {\n        this.search = search;\n        await this.fetch();\n    };\n\n    @action\n    setDataSource = async (dataSource: DataSource<T> | null) => {\n        this.dataSource = dataSource;\n        await this.fetch();\n    };\n\n    @action\n    setSearchByGroup = async (searchByGroup: boolean) => {\n        this.searchByGroup = searchByGroup;\n        await this.fetch();\n    };\n\n    @action\n    setSort = async (sort: SortDescriptor[]) => {\n        this.sort = sort;\n        await this.fetch();\n    };\n\n    @action\n    setFilter = async (filter: CompositeFilterDescriptor | null) => {\n        this.filter = filter;\n        await this.fetch();\n    };\n\n    @action\n    setGroup = async (group: [GroupDescriptor]) => {\n        this.group = group;\n        await this.fetch();\n    };\n\n    @action\n    fetch = async () => {\n        this.loading = true;\n\n        const response = await this.dataSource?.getData(this.state);\n\n        runInAction(() => {\n            this.data = response?.data ?? [];\n            this.loading = false;\n        });\n    };\n\n    private traverse = (\n        items: T[] | GroupResult<T>[],\n        itemCallback: (item: T) => void,\n        groupedBy: string\n    ) => {\n        if (!items) {\n            return;\n        }\n\n        for (const item of items) {\n            if (isGroupItem(item, groupedBy)) {\n                this.traverse(item.items, itemCallback, groupedBy);\n            } else {\n                itemCallback(item);\n            }\n        }\n    };\n}\n"],"names":["observable","computed","action","runInAction","makeObservable","debounce","isGroupItem","item","groupedBy","items","field","DropdownState","options","result","Map","flat","groupField","group","traverse","data","has","get","push","set","value","text","String","Array","from","values","state","sort","filter","searchFilter","logic","filters","undefined","search","operator","ignoreCase","searchByGroup","dataSource","lazy","loading","onSearchChange","fetch","_0","setSearch","setDataSource","setSearchByGroup","setSort","setFilter","setGroup","response","getData","itemCallback"],"mappings":"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"}
+{"version":3,"sources":["../src/dropdown-state.ts"],"sourcesContent":["import {\n    State,\n    SortDescriptor,\n    CompositeFilterDescriptor,\n    GroupDescriptor,\n    GroupResult,\n    DataSource,\n} from '@servicetitan/data-query';\nimport debounce from 'debounce';\nimport { observable, computed, action, runInAction, makeObservable } from 'mobx';\nimport { ChangeEvent } from 'react';\n\nfunction isGroupItem<T>(item: T | GroupResult<T>, groupedBy: string): item is GroupResult<T> {\n    const { items, field } = item as GroupResult<T>;\n    return !!items && field === groupedBy;\n}\n\nexport interface DropdownOption<T> {\n    value?: T;\n    text?: string;\n}\n\ninterface DropdownStateConstructorParams<T> {\n    dataSource?: DataSource<T>;\n    searchByGroup?: boolean;\n    state?: {\n        sort?: SortDescriptor[];\n        filter?: CompositeFilterDescriptor;\n        group?: [GroupDescriptor];\n    };\n    lazy?: boolean;\n}\n\nexport class DropdownState<T extends DropdownOption<any>> {\n    @observable loading = false;\n    @observable search = '';\n\n    @computed get options() {\n        const result = new Map<T[keyof T], { value: T[keyof T]; text: string; options: T[] }>();\n        const flat: T[] = [];\n\n        const groupField = this.group[0].field;\n\n        this.traverse(\n            this.data,\n            item => {\n                const group = item[groupField as keyof T];\n\n                if (group) {\n                    if (result.has(group)) {\n                        result.get(group)?.options?.push(item);\n                    } else {\n                        result.set(group, {\n                            value: group,\n                            text: String(group),\n                            options: [item],\n                        });\n                    }\n                } else {\n                    flat.push(item);\n                }\n            },\n            groupField\n        );\n\n        return [...flat, ...Array.from(result.values())];\n    }\n\n    @computed get state() {\n        return {\n            sort: this.sort,\n            filter:\n                this.searchFilter || this.filter\n                    ? this.searchFilter && this.filter\n                        ? { logic: 'and', filters: [this.searchFilter, this.filter] }\n                        : (this.searchFilter ?? this.filter)\n                    : undefined,\n            group: this.group,\n        } as State;\n    }\n\n    @computed private get searchFilter() {\n        if (!this.search) {\n            return undefined;\n        }\n\n        const filter = { operator: 'contains', value: this.search, ignoreCase: true };\n\n        return {\n            logic: 'or',\n            filters: [\n                { ...filter, field: 'text' },\n                ...(this.searchByGroup ? [{ ...filter, field: 'group' }] : []),\n            ],\n        } as CompositeFilterDescriptor;\n    }\n\n    @observable private dataSource: DataSource<T> | null;\n    @observable private searchByGroup: boolean;\n    @observable private sort: SortDescriptor[];\n    @observable private filter: CompositeFilterDescriptor | null;\n    @observable private group: [GroupDescriptor];\n\n    @observable private data: T[] | GroupResult<T>[] = [];\n\n    constructor({\n        dataSource,\n        searchByGroup,\n        state,\n        lazy,\n    }: DropdownStateConstructorParams<T> = {}) {\n        makeObservable(this);\n\n        this.dataSource = dataSource ?? null;\n        this.searchByGroup = searchByGroup ?? false;\n        this.sort = state?.sort ?? [{ field: 'text' }];\n        this.filter = state?.filter ?? null;\n        this.group = state?.group ?? [{ field: 'group' }];\n\n        if (!lazy) {\n            this.fetch();\n        }\n    }\n\n    // eslint-disable-next-line @typescript-eslint/member-ordering\n    onSearchChange = (() => {\n        const fetch = debounce(() => this.fetch(), 100);\n        return (_0: ChangeEvent<HTMLInputElement>, data: { value: string }) => {\n            runInAction(() => {\n                this.search = data.value;\n            });\n            fetch();\n        };\n    })();\n\n    @action\n    setSearch = async (search: string) => {\n        this.search = search;\n        await this.fetch();\n    };\n\n    @action\n    setDataSource = async (dataSource: DataSource<T> | null) => {\n        this.dataSource = dataSource;\n        await this.fetch();\n    };\n\n    @action\n    setSearchByGroup = async (searchByGroup: boolean) => {\n        this.searchByGroup = searchByGroup;\n        await this.fetch();\n    };\n\n    @action\n    setSort = async (sort: SortDescriptor[]) => {\n        this.sort = sort;\n        await this.fetch();\n    };\n\n    @action\n    setFilter = async (filter: CompositeFilterDescriptor | null) => {\n        this.filter = filter;\n        await this.fetch();\n    };\n\n    @action\n    setGroup = async (group: [GroupDescriptor]) => {\n        this.group = group;\n        await this.fetch();\n    };\n\n    @action\n    fetch = async () => {\n        this.loading = true;\n\n        const response = await this.dataSource?.getData(this.state);\n\n        runInAction(() => {\n            this.data = response?.data ?? [];\n            this.loading = false;\n        });\n    };\n\n    private traverse = (\n        items: T[] | GroupResult<T>[],\n        itemCallback: (item: T) => void,\n        groupedBy: string\n    ) => {\n        if (!items) {\n            return;\n        }\n\n        for (const item of items) {\n            if (isGroupItem(item, groupedBy)) {\n                this.traverse(item.items, itemCallback, groupedBy);\n            } else {\n                itemCallback(item);\n            }\n        }\n    };\n}\n"],"names":["debounce","observable","computed","action","runInAction","makeObservable","isGroupItem","item","groupedBy","items","field","DropdownState","options","result","Map","flat","groupField","group","traverse","data","has","get","push","set","value","text","String","Array","from","values","state","sort","filter","searchFilter","logic","filters","undefined","search","operator","ignoreCase","searchByGroup","dataSource","lazy","loading","onSearchChange","fetch","_0","setSearch","setDataSource","setSearchByGroup","setSort","setFilter","setGroup","response","getData","itemCallback"],"mappings":"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"}

package/dist/form-state.stories.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    title: string;
+    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default _default;
+export declare const DropdownState: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=form-state.stories.d.ts.map

package/dist/form-state.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-state.stories.d.ts","sourceRoot":"","sources":["../src/form-state.stories.tsx"],"names":[],"mappings":";;yBAOgB,GAAG;;AAHnB,wBAaE;AAEF,eAAO,MAAM,aAAa,+CAAiC,CAAC"}

package/dist/index.d.ts

@@ -1,6 +1,7 @@
+export * from './async-lazy-dropdown-state';
 export type * from './date-range';
-export * from './persistent-form-state';
 export * from './dropdown-state';
 export * from './form-helpers';
 export * from './form-validators';
+export * from './persistent-form-state';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,mBAAmB,cAAc,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,mBAAmB,cAAc,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC"}

package/dist/index.js

@@ -1,6 +1,7 @@
-export * from './persistent-form-state';
+export * from './async-lazy-dropdown-state';
 export * from './dropdown-state';
 export * from './form-helpers';
 export * from './form-validators';
+export * from './persistent-form-state';
 
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export type * from './date-range';\nexport * from './persistent-form-state';\nexport * from './dropdown-state';\nexport * from './form-helpers';\nexport * from './form-validators';\n"],"names":[],"mappings":"AACA,cAAc,0BAA0B;AACxC,cAAc,mBAAmB;AACjC,cAAc,iBAAiB;AAC/B,cAAc,oBAAoB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from './async-lazy-dropdown-state';\nexport type * from './date-range';\nexport * from './dropdown-state';\nexport * from './form-helpers';\nexport * from './form-validators';\nexport * from './persistent-form-state';\n"],"names":[],"mappings":"AAAA,cAAc,8BAA8B;AAE5C,cAAc,mBAAmB;AACjC,cAAc,iBAAiB;AAC/B,cAAc,oBAAoB;AAClC,cAAc,0BAA0B"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/form-state",
-    "version": "35.0.0",
+    "version": "36.0.0",
     "description": "",
     "repository": {
         "type": "git",
@@ -15,8 +15,9 @@
         "src"
     ],
     "devDependencies": {
-        "@servicetitan/data-query": "^35.0.0",
+        "@servicetitan/data-query": "^36.0.0",
         "@servicetitan/design-system": "~14.5.1",
+        "@servicetitan/hash-browser-router": "^33.0.0",
         "@types/debounce": "~1.2.1",
         "@types/react": "~18.2.55",
         "formstate": "^2.1.0",
@@ -25,8 +26,7 @@
         "react": "^18.2.0"
     },
     "peerDependencies": {
-        "@servicetitan/data-query": "^35.0.0",
-        "@servicetitan/design-system": ">=13.2.1",
+        "@servicetitan/data-query": "^36.0.0",
         "formstate": "^2.1.0",
         "mobx": ">=6.6.0",
         "mobx-react": ">=7.5.1",
@@ -41,5 +41,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "2d0ca381a54385f88a17412ea7382bc31da86696"
+    "gitHead": "aafdfc3cb503509159642338517d94ca7f5c672b"
 }

package/src/__tests__/__snapshots__/form-helpers.test.ts.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`formStateToJS 1`] = `
 {

package/src/__tests__/form-helpers.test.ts

@@ -169,8 +169,8 @@ test('setFormStateValues array length mismatch', () => {
         }),
     ]);
 
-    expect(() => setFormStateValues(form, [{ a: 1 }, { a: 2 }])).toThrowError(/Number of elements/);
-    expect(() => setFormStateValues(form, [{ a: 1, b: [{ c: 1 }, { c: 1 }] }])).toThrowError(
+    expect(() => setFormStateValues(form, [{ a: 1 }, { a: 2 }])).toThrow(/Number of elements/);
+    expect(() => setFormStateValues(form, [{ a: 1, b: [{ c: 1 }, { c: 1 }] }])).toThrow(
         /Number of elements/
     );
 });

package/src/async-lazy-dropdown-state/async-lazy-dropdown-state.ts

@@ -1,12 +1,11 @@
 import { computed, makeObservable } from 'mobx';
 import { AsyncDataSource } from '@servicetitan/data-query';
-import { AnvilSelectOptionsProps, AnvilSelectPropsStrict } from '@servicetitan/design-system';
 import { DropdownOption, DropdownState } from '../dropdown-state';
 
 export type DataFetcher = (searchQuery: string) => Promise<DropdownOption<any>[]>;
 
 export class AsyncLazyDropdownState<T extends DropdownOption<any>> extends DropdownState<T> {
-    private arrayValue: AnvilSelectOptionsProps[] = [];
+    private arrayValue: T[] = [];
 
     constructor(dataFetcher: DataFetcher) {
         super({
@@ -31,7 +30,7 @@ export class AsyncLazyDropdownState<T extends DropdownOption<any>> extends Dropd
         return this.getOptionsWithValue();
     }
 
-    onChange = (value: AnvilSelectPropsStrict['value']) => {
+    onChange = (value?: T) => {
         const isEmptyValue = value === undefined || (Array.isArray(value) && value.length === 0);
 
         this.arrayValue = isEmptyValue ? [] : !Array.isArray(value) ? [value!] : value;

package/src/async-lazy-dropdown-state/use-async-lazy-dropdown-state.ts

@@ -1,10 +1,9 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { AnvilSelectPropsStrict } from '@servicetitan/design-system';
 import { AsyncLazyDropdownState, DataFetcher } from './async-lazy-dropdown-state';
 import { DropdownOption } from '../dropdown-state';
 
 export const useAsyncLazyDropdownState = (
-    value: AnvilSelectPropsStrict['value'],
+    value: DropdownOption<any> | undefined,
     // try memoising dataFetcher
     dataFetcher: DataFetcher
 ) => {

package/src/demo/dropdown-state.tsx

@@ -1,7 +1,4 @@
-import { useRef, Fragment, FC } from 'react';
-
 import { InMemoryDataSource, AsyncDataSource, FilterDescriptor } from '@servicetitan/data-query';
-
 import {
     AnvilSelect,
     AnvilSelectOptionsProps,
@@ -12,8 +9,9 @@ import {
 
 import { FieldState } from 'formstate';
 import { observer } from 'mobx-react';
+import { useRef, Fragment, FC } from 'react';
 
-import { DropdownState, DropdownOption } from '..';
+import { DropdownState, DropdownOption } from '../dropdown-state';
 
 function useDropdownField<T>(initial: T) {
     return useRef(new FieldState(initial)).current;
@@ -174,7 +172,7 @@ const AsyncDropdownStateExample: FC = observer(() => {
 
                         const result = search
                             ? options.filter(({ text }) =>
-                                  text.toLowerCase().includes(search.toLowerCase())
+                                  text?.toLowerCase().includes(search.toLowerCase())
                               )
                             : options;
 

package/src/dropdown-state.ts

@@ -1,4 +1,3 @@
-import { ChangeEvent } from 'react';
 import {
     State,
     SortDescriptor,
@@ -7,12 +6,9 @@ import {
     GroupResult,
     DataSource,
 } from '@servicetitan/data-query';
-
-import { InputOnChangeData, AnvilSelectOptionsProps } from '@servicetitan/design-system';
-
-import { observable, computed, action, runInAction, makeObservable } from 'mobx';
-
 import debounce from 'debounce';
+import { observable, computed, action, runInAction, makeObservable } from 'mobx';
+import { ChangeEvent } from 'react';
 
 function isGroupItem<T>(item: T | GroupResult<T>, groupedBy: string): item is GroupResult<T> {
     const { items, field } = item as GroupResult<T>;
@@ -20,8 +16,8 @@ function isGroupItem<T>(item: T | GroupResult<T>, groupedBy: string): item is Gr
 }
 
 export interface DropdownOption<T> {
-    value: T;
-    text: string;
+    value?: T;
+    text?: string;
 }
 
 interface DropdownStateConstructorParams<T> {
@@ -40,8 +36,8 @@ export class DropdownState<T extends DropdownOption<any>> {
     @observable search = '';
 
     @computed get options() {
-        const result = new Map<T[keyof T], AnvilSelectOptionsProps>();
-        const flat: AnvilSelectOptionsProps[] = [];
+        const result = new Map<T[keyof T], { value: T[keyof T]; text: string; options: T[] }>();
+        const flat: T[] = [];
 
         const groupField = this.group[0].field;
 
@@ -129,7 +125,7 @@ export class DropdownState<T extends DropdownOption<any>> {
     // eslint-disable-next-line @typescript-eslint/member-ordering
     onSearchChange = (() => {
         const fetch = debounce(() => this.fetch(), 100);
-        return (_0: ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
+        return (_0: ChangeEvent<HTMLInputElement>, data: { value: string }) => {
             runInAction(() => {
                 this.search = data.value;
             });

package/src/form-state.stories.tsx

@@ -0,0 +1,20 @@
+import { Frame, Page } from '@servicetitan/design-system';
+import { HashBrowserRouter } from '@servicetitan/hash-browser-router';
+import { DropdownStateExample } from './demo';
+
+export default {
+    title: 'FormState/Demos',
+    decorators: [
+        (Story: any) => (
+            <HashBrowserRouter>
+                <Frame>
+                    <Page>
+                        <Story />
+                    </Page>
+                </Frame>
+            </HashBrowserRouter>
+        ),
+    ],
+};
+
+export const DropdownState = () => <DropdownStateExample />;

package/src/index.ts

@@ -1,5 +1,6 @@
+export * from './async-lazy-dropdown-state';
 export type * from './date-range';
-export * from './persistent-form-state';
 export * from './dropdown-state';
 export * from './form-helpers';
 export * from './form-validators';
+export * from './persistent-form-state';