@servicetitan/form-state 31.1.0 → 31.3.0

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

@@ -1,80 +1,84 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _ts_decorate(decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
+}
+function _ts_metadata(k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
+}
 import { computed, makeObservable } from 'mobx';
 import { AsyncDataSource } from '@servicetitan/data-query';
 import { DropdownState } from '../dropdown-state';
 export class AsyncLazyDropdownState extends DropdownState {
-    constructor(dataFetcher) {
-        super({
-            dataSource: new AsyncDataSource({
-                get: async () => {
-                    const result = await dataFetcher(this.search);
-                    return {
-                        data: result,
-                        total: result.length,
-                    };
-                },
-            }),
-            lazy: true,
-        });
-        Object.defineProperty(this, "arrayValue", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: []
-        });
-        Object.defineProperty(this, "onChange", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (value) => {
-                const isEmptyValue = value === undefined || (Array.isArray(value) && value.length === 0);
-                this.arrayValue = isEmptyValue ? [] : !Array.isArray(value) ? [value] : value;
-            }
-        });
-        Object.defineProperty(this, "getOptionsWithValue", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                const options = [...this.options];
-                if (!this.search) {
-                    const values = this.arrayValue;
-                    const selectedOptions = options.filter(option => !!values.find(value => value.value === option.value));
-                    const unselectedOptions = options.filter(option => !values.find(value => value.value === option.value));
-                    const missingSelectedOptions = values.filter(value => !options.some(option => option.value === value.value));
-                    return [...missingSelectedOptions, ...selectedOptions, ...unselectedOptions];
-                }
-                return options;
-            }
-        });
-        makeObservable(this);
-    }
     get optionsWithValue() {
         return this.getOptionsWithValue();
     }
     setDataFetcher(dataFetcher) {
         this.setDataSource(new AsyncDataSource({
-            get: async () => {
+            get: async ()=>{
                 const result = await dataFetcher(this.search);
                 return {
                     data: result,
-                    total: result.length,
+                    total: result.length
                 };
-            },
+            }
         }));
     }
+    constructor(dataFetcher){
+        super({
+            dataSource: new AsyncDataSource({
+                get: async ()=>{
+                    const result = await dataFetcher(this.search);
+                    return {
+                        data: result,
+                        total: result.length
+                    };
+                }
+            }),
+            lazy: true
+        }), _define_property(this, "arrayValue", []), _define_property(this, "onChange", (value)=>{
+            const isEmptyValue = value === undefined || Array.isArray(value) && value.length === 0;
+            this.arrayValue = isEmptyValue ? [] : !Array.isArray(value) ? [
+                value
+            ] : value;
+        }), _define_property(this, "getOptionsWithValue", ()=>{
+            const options = [
+                ...this.options
+            ];
+            if (!this.search) {
+                const values = this.arrayValue;
+                const selectedOptions = options.filter((option)=>!!values.find((value)=>value.value === option.value));
+                const unselectedOptions = options.filter((option)=>!values.find((value)=>value.value === option.value));
+                const missingSelectedOptions = values.filter((value)=>!options.some((option)=>option.value === value.value));
+                return [
+                    ...missingSelectedOptions,
+                    ...selectedOptions,
+                    ...unselectedOptions
+                ];
+            }
+            return options;
+        });
+        makeObservable(this);
+    }
 }
-__decorate([
+_ts_decorate([
     computed,
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [])
+    _ts_metadata("design:type", void 0),
+    _ts_metadata("design:paramtypes", [])
 ], AsyncLazyDropdownState.prototype, "optionsWithValue", null);
+
 //# sourceMappingURL=async-lazy-dropdown-state.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"async-lazy-dropdown-state.js","sourceRoot":"","sources":["../../src/async-lazy-dropdown-state/async-lazy-dropdown-state.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,MAAM,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,EAAkB,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAIlE,MAAM,OAAO,sBAAsD,SAAQ,aAAgB;IAGvF,YAAY,WAAwB;QAChC,KAAK,CAAC;YACF,UAAU,EAAE,IAAI,eAAe,CAAC;gBAC5B,GAAG,EAAE,KAAK,IAAI,EAAE;oBACZ,MAAM,MAAM,GAAU,MAAM,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;oBAErD,OAAO;wBACH,IAAI,EAAE,MAAM;wBACZ,KAAK,EAAE,MAAM,CAAC,MAAM;qBACvB,CAAC;gBACN,CAAC;aACJ,CAAC;YACF,IAAI,EAAE,IAAI;SACb,CAAC,CAAC;QAfC;;;;mBAAwC,EAAE;WAAC;QAyBnD;;;;mBAAW,CAAC,KAAsC,EAAE,EAAE;gBAClD,MAAM,YAAY,GAAG,KAAK,KAAK,SAAS,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC;gBAEzF,IAAI,CAAC,UAAU,GAAG,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAM,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YACnF,CAAC;WAAC;QAiBM;;;;mBAAsB,GAAG,EAAE;gBAC/B,MAAM,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;gBAElC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;oBACf,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC;oBAE/B,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CAClC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC,CACjE,CAAC;oBAEF,MAAM,iBAAiB,GAAG,OAAO,CAAC,MAAM,CACpC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC,CAChE,CAAC;oBAEF,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CACxC,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC,CACjE,CAAC;oBACF,OAAO,CAAC,GAAG,sBAAsB,EAAE,GAAG,eAAe,EAAE,GAAG,iBAAiB,CAAC,CAAC;gBACjF,CAAC;gBAED,OAAO,OAAO,CAAC;YACnB,CAAC;WAAC;QAlDE,cAAc,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC;IAED,IACI,gBAAgB;QAChB,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;IACtC,CAAC;IAQD,cAAc,CAAC,WAAwB;QACnC,IAAI,CAAC,aAAa,CACd,IAAI,eAAe,CAAC;YAChB,GAAG,EAAE,KAAK,IAAI,EAAE;gBACZ,MAAM,MAAM,GAAU,MAAM,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBAErD,OAAO;oBACH,IAAI,EAAE,MAAM;oBACZ,KAAK,EAAE,MAAM,CAAC,MAAM;iBACvB,CAAC;YACN,CAAC;SACJ,CAAC,CACL,CAAC;IACN,CAAC;CAwBJ;AAhDG;IAAC,QAAQ;;;8DAGR"}
+{"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","constructor","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;IA1CAC,YAAYR,WAAwB,CAAE;QAClC,KAAK,CAAC;YACFS,YAAY,IAAIf,gBAAgB;gBAC5BQ,KAAK;oBACD,MAAMC,SAAgB,MAAMH,YAAY,IAAI,CAACI,MAAM;oBAEnD,OAAO;wBACHC,MAAMF;wBACNG,OAAOH,OAAOI,MAAM;oBACxB;gBACJ;YACJ;YACAG,MAAM;QACV,IAfJ,uBAAQC,cAAwC,EAAE,GAyBlDC,uBAAAA,YAAW,CAACC;YACR,MAAMC,eAAeD,UAAUE,aAAcC,MAAMC,OAAO,CAACJ,UAAUA,MAAMN,MAAM,KAAK;YAEtF,IAAI,CAACI,UAAU,GAAGG,eAAe,EAAE,GAAG,CAACE,MAAMC,OAAO,CAACJ,SAAS;gBAACA;aAAO,GAAGA;QAC7E,IAiBA,uBAAQf,uBAAsB;YAC1B,MAAMoB,UAAU;mBAAI,IAAI,CAACA,OAAO;aAAC;YAEjC,IAAI,CAAC,IAAI,CAACd,MAAM,EAAE;gBACd,MAAMe,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;QAlDIzB,eAAe,IAAI;IACvB;AAkDJ"}

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

@@ -1,3 +1,4 @@
 export * from './async-lazy-dropdown-state';
 export * from './use-async-lazy-dropdown-state';
+
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/async-lazy-dropdown-state/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC"}
+{"version":3,"sources":["../../src/async-lazy-dropdown-state/index.ts"],"sourcesContent":["export * from './async-lazy-dropdown-state';\nexport * from './use-async-lazy-dropdown-state';\n"],"names":[],"mappings":"AAAA,cAAc,8BAA8B;AAC5C,cAAc,kCAAkC"}

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

@@ -1,26 +1,36 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { AsyncLazyDropdownState } from './async-lazy-dropdown-state';
-export const useAsyncLazyDropdownState = (value, 
-// try memoising dataFetcher
-dataFetcher) => {
-    const [state] = useState(() => new AsyncLazyDropdownState(dataFetcher));
-    useEffect(() => {
+export const useAsyncLazyDropdownState = (value, // try memoising dataFetcher
+dataFetcher)=>{
+    const [state] = useState(()=>new AsyncLazyDropdownState(dataFetcher));
+    useEffect(()=>{
         state.onChange(value);
-    }, [state, value]);
+    }, [
+        state,
+        value
+    ]);
     const isInitialMount = useRef(true);
-    useEffect(() => {
+    useEffect(()=>{
         if (isInitialMount.current) {
             isInitialMount.current = false;
-        }
-        else {
+        } else {
             state.setDataFetcher(dataFetcher);
         }
-    }, [state, dataFetcher]);
-    const onOpenChange = useCallback((open) => {
+    }, [
+        state,
+        dataFetcher
+    ]);
+    const onOpenChange = useCallback((open)=>{
         if (open) {
             state.setSearch('');
         }
-    }, [state]);
-    return [state, onOpenChange];
+    }, [
+        state
+    ]);
+    return [
+        state,
+        onOpenChange
+    ];
 };
+
 //# sourceMappingURL=use-async-lazy-dropdown-state.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"use-async-lazy-dropdown-state.js","sourceRoot":"","sources":["../../src/async-lazy-dropdown-state/use-async-lazy-dropdown-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAE,sBAAsB,EAAe,MAAM,6BAA6B,CAAC;AAGlF,MAAM,CAAC,MAAM,yBAAyB,GAAG,CACrC,KAAsC;AACtC,4BAA4B;AAC5B,WAAwB,EAC1B,EAAE;IACA,MAAM,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,sBAAsB,CAAC,WAAW,CAAC,CAAC,CAAC;IACxE,SAAS,CAAC,GAAG,EAAE;QACX,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IAEnB,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACpC,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,cAAc,CAAC,OAAO,EAAE,CAAC;YACzB,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;QACnC,CAAC;aAAM,CAAC;YACJ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;QACtC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;IAEzB,MAAM,YAAY,GAAG,WAAW,CAC5B,CAAC,IAAa,EAAE,EAAE;QACd,IAAI,IAAI,EAAE,CAAC;YACP,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;QACxB,CAAC;IACL,CAAC,EACD,CAAC,KAAK,CAAC,CACV,CAAC;IAEF,OAAO,CAAC,KAAK,EAAE,YAAY,CAG1B,CAAC;AACN,CAAC,CAAC"}
+{"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"}

package/dist/date-range.js

@@ -1,2 +1,3 @@
-export {};
+export { };
+
 //# sourceMappingURL=date-range.js.map

package/dist/date-range.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-range.js","sourceRoot":"","sources":["../src/date-range.ts"],"names":[],"mappings":""}
+{"version":3,"sources":["../src/date-range.ts"],"sourcesContent":["export interface DateRange {\n    from?: Date;\n    to?: Date;\n}\n"],"names":[],"mappings":"AAAA,WAGC"}

package/dist/demo/dropdown-state.js

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