@choc-ui/chakra-autocomplete 5.2.0 → 5.2.1

package/README.md

@@ -385,6 +385,18 @@ Then add the `AutoCompleteCreatable` component to the bottom of the list. Refer
 
 <img width="517" alt="CleanShot 2021-07-29 at 02 29 20@2x" src="https://user-images.githubusercontent.com/30869823/127417453-e78b9b48-26e8-4ff0-a264-1d6bb4717ab0.png">
 
+### Loading State
+
+Need to pull data from API, but don't want your users to see a blank screen?  You can enable the loading state by passing the `isLoading` prop to `AutoComplete`.  By doing this, 2 other props will be enabled
+
+1. `loadingIcon` on `AutoCompleteInput` will display some sort of loading icon on the right side of the input.  By default, a `Spinner` will be displayed, but you can pass in any custom element to be rendered
+
+2. `loadingState` on `AutoCompleteList` can display custom loading content when `isLoading` is `true`.  All content will be rendered in the center of the list.  By default, a `Spinner` will be displayed, but you can pass in any custom element to be rendered.
+
+Best practice is to combine `setTimeout` and `useEffect` to create a debounce effect.  This will prevent un-necessary API calls if your user types relatively quickly.
+
+A working code demo can be found [here](https://codesandbox.io/s/choc-ui-chakra-autocomplete-loading-tfc8jz)
+
 ### Autocomplete methods
 
 Assign a ref to the `AutoComplete` component and call the available methods with:

package/dist/autocomplete-context.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import { UseAutoCompleteReturn } from "./types";
 export declare const AutoCompleteProvider: import("react").Provider<UseAutoCompleteReturn>, useAutoCompleteContext: () => UseAutoCompleteReturn;
+//# sourceMappingURL=autocomplete-context.d.ts.map

package/dist/autocomplete-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-context.d.ts","sourceRoot":"","sources":["../src/autocomplete-context.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEhD,eAAO,MAAO,oBAAoB,mDAAE,sBAAsB,6BAMxD,CAAC"}

package/dist/autocomplete-creatable.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FlexProps } from "@chakra-ui/react";
 import { MaybeRenderProp } from "@chakra-ui/react-utils";
 interface AutoCompleteCreatableProps extends Omit<FlexProps, "children"> {
@@ -7,8 +6,9 @@ interface AutoCompleteCreatableProps extends Omit<FlexProps, "children"> {
     }>;
     alwaysDisplay?: boolean;
 }
-export declare function AutoCompleteCreatable(props: AutoCompleteCreatableProps): JSX.Element | null;
+export declare function AutoCompleteCreatable(props: AutoCompleteCreatableProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace AutoCompleteCreatable {
     var displayName: string;
 }
 export {};
+//# sourceMappingURL=autocomplete-creatable.d.ts.map

package/dist/autocomplete-creatable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-creatable.d.ts","sourceRoot":"","sources":["../src/autocomplete-creatable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAQzD,UAAU,0BAA2B,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACtE,QAAQ,CAAC,EAAE,eAAe,CAAC;QAAE,KAAK,EAAE,GAAG,CAAA;KAAE,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,kDA8BtE;yBA9Be,qBAAqB"}

package/dist/autocomplete-group.d.ts

@@ -7,3 +7,4 @@ export interface AutoCompleteGroupProps extends BoxProps {
 }
 export declare const AutoCompleteGroup: import("@chakra-ui/system/dist/system.types").ComponentWithAs<"div", AutoCompleteGroupProps>;
 export declare const AutoCompleteGroupTitle: import("@chakra-ui/system/dist/system.types").ComponentWithAs<"div", FlexProps>;
+//# sourceMappingURL=autocomplete-group.d.ts.map

package/dist/autocomplete-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-group.d.ts","sourceRoot":"","sources":["../src/autocomplete-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,QAAQ,EAIR,SAAS,EAEV,MAAM,kBAAkB,CAAC;AAE1B,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,sBAAuB,SAAQ,QAAQ;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,iBAAiB,8FAmB7B,CAAC;AAEF,eAAO,MAAM,sBAAsB,iFAIlC,CAAC"}

package/dist/autocomplete-input.d.ts

@@ -11,3 +11,4 @@ export interface AutoCompleteInputProps extends Omit<InputProps, "children"> {
     loadingIcon?: React.ReactNode;
 }
 export declare const AutoCompleteInput: import("@chakra-ui/system/dist/system.types").ComponentWithAs<"input", AutoCompleteInputProps>;
+//# sourceMappingURL=autocomplete-input.d.ts.map

package/dist/autocomplete-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-input.d.ts","sourceRoot":"","sources":["../src/autocomplete-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EAIV,iBAAiB,EAMlB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEhD,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC;IAC1E,QAAQ,CAAC,EAAE,eAAe,CAAC;QAAE,IAAI,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAA;KAAE,CAAC,CAAC;IACpE,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC9B;AAgBD,eAAO,MAAM,iBAAiB,gGAgD7B,CAAC"}

package/dist/autocomplete-item.d.ts

@@ -10,3 +10,4 @@ export interface AutoCompleteItemProps extends FlexProps {
 }
 export declare const AutoCompleteItem: import("@chakra-ui/system/dist/system.types").ComponentWithAs<"div", AutoCompleteItemProps>;
 export declare const baseItemStyles: FlexProps;
+//# sourceMappingURL=autocomplete-item.d.ts.map

package/dist/autocomplete-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-item.d.ts","sourceRoot":"","sources":["../src/autocomplete-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,SAAS,EAGV,MAAM,kBAAkB,CAAC;AAM1B,MAAM,WAAW,qBAAsB,SAAQ,SAAS;IACtD,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,SAAS,GAAG,GAAG,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,qBAAqB,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC;CAC1D;AAED,eAAO,MAAM,gBAAgB,6FA6C5B,CAAC;AAIF,eAAO,MAAM,cAAc,EAAE,SAM5B,CAAC"}

package/dist/autocomplete-list.d.ts

@@ -4,3 +4,4 @@ export interface AutoCompleteListProps extends PopoverContentProps {
     loadingState?: React.ReactNode;
 }
 export declare const AutoCompleteList: import("@chakra-ui/system/dist/system.types").ComponentWithAs<"div", AutoCompleteListProps>;
+//# sourceMappingURL=autocomplete-list.d.ts.map

package/dist/autocomplete-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-list.d.ts","sourceRoot":"","sources":["../src/autocomplete-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,mBAAmB,EAGpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,qBAAsB,SAAQ,mBAAmB;IAChE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC/B;AAED,eAAO,MAAM,gBAAgB,6FAyB5B,CAAC"}

package/dist/autocomplete-tag.d.ts

@@ -1,9 +1,10 @@
 import { TagProps } from "@chakra-ui/tag";
 import React from "react";
-declare type AutoCompleteTagProps = {
+type AutoCompleteTagProps = {
     disabled?: boolean;
     label: string;
     onRemove?: () => void;
 } & TagProps;
-export declare const AutoCompleteTag: React.MemoExoticComponent<(props: AutoCompleteTagProps) => JSX.Element>;
+export declare const AutoCompleteTag: React.MemoExoticComponent<(props: AutoCompleteTagProps) => import("react/jsx-runtime").JSX.Element>;
 export {};
+//# sourceMappingURL=autocomplete-tag.d.ts.map

package/dist/autocomplete-tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-tag.d.ts","sourceRoot":"","sources":["../src/autocomplete-tag.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiC,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAEzE,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,GAAG,QAAQ,CAAC;AAEb,eAAO,MAAM,eAAe,oCAAgB,oBAAoB,6CAoB9D,CAAC"}

package/dist/autocomplete.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { MaybeRenderProp } from "@chakra-ui/react-utils";
 import { AutoCompleteRefMethods, UseAutoCompleteProps } from "./types";
-export declare type AutoCompleteChildProps = {
+export type AutoCompleteChildProps = {
     isOpen: boolean;
     onClose: () => void;
     onOpen: () => void;
@@ -11,3 +11,4 @@ export interface AutoCompleteProps extends UseAutoCompleteProps {
     ref?: React.RefObject<AutoCompleteRefMethods>;
 }
 export declare const AutoComplete: import("@chakra-ui/system/dist/system.types").ComponentWithAs<"div", AutoCompleteProps>;
+//# sourceMappingURL=autocomplete.d.ts.map

package/dist/autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../src/autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAKzD,OAAO,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AACF,MAAM,WAAW,iBAAkB,SAAQ,oBAAoB;IAC7D,QAAQ,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,sBAAsB,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,YAAY,yFAuCxB,CAAC"}

package/dist/components/empty-state.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
 import { BoxProps } from "@chakra-ui/layout";
-export declare const EmptyState: (props: BoxProps) => JSX.Element;
+export declare const EmptyState: (props: BoxProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=empty-state.d.ts.map

package/dist/components/empty-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../src/components/empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAmB,MAAM,mBAAmB,CAAC;AAInE,eAAO,MAAM,UAAU,UAAW,QAAQ,4CAQzC,CAAC"}

package/dist/helpers/fuzzySearch.d.ts

@@ -1 +1,2 @@
 export declare function fuzzyScore(str1: string, str2: string, gramSize?: number): number;
+//# sourceMappingURL=fuzzySearch.d.ts.map

package/dist/helpers/fuzzySearch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fuzzySearch.d.ts","sourceRoot":"","sources":["../../src/helpers/fuzzySearch.ts"],"names":[],"mappings":"AAKA,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAU,UA+B1E"}

package/dist/helpers/group.d.ts

@@ -2,3 +2,4 @@ import { ReactNode } from "react";
 export declare const hasFirstItem: (children: ReactNode, firstItem: any) => any;
 export declare const hasLastItem: (children: ReactNode, lastItem: any) => any;
 export declare const hasChildren: (children: any, filteredList: any[]) => boolean;
+//# sourceMappingURL=group.d.ts.map

package/dist/helpers/group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.d.ts","sourceRoot":"","sources":["../../src/helpers/group.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,eAAO,MAAM,YAAY,aAAc,SAAS,aAAa,GAAG,QAS/D,CAAC;AACF,eAAO,MAAM,WAAW,aAAc,SAAS,YAAY,GAAG,QAQ7D,CAAC;AAEF,eAAO,MAAM,WAAW,aAAc,GAAG,gBAAgB,GAAG,EAAE,YAU7D,CAAC"}

package/dist/helpers/input.d.ts

@@ -1 +1,2 @@
 export declare const getMultipleWrapStyles: (themeInput: any, multiple?: boolean) => any;
+//# sourceMappingURL=input.d.ts.map

package/dist/helpers/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/helpers/input.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB,eAAgB,GAAG,aAAa,OAAO,QAyCxE,CAAC"}

package/dist/helpers/items.d.ts

@@ -7,3 +7,4 @@ export declare const setEmphasis: (children: any, query: string) => any;
 export declare const getItemList: (children: ReactNode) => Item[];
 export declare const getFocusedStyles: () => FlexProps;
 export declare const defaultFilterMethod: (query: string, itemValue: Item["value"], itemLabel: Item["label"]) => boolean;
+//# sourceMappingURL=items.d.ts.map

package/dist/helpers/items.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"items.d.ts","sourceRoot":"","sources":["../../src/helpers/items.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,eAAO,MAAM,eAAe,SAAU,qBAAqB,CAAC,OAAO,CAAC,QACoC,CAAC;AAEzG,eAAO,MAAM,WAAW,aAAc,GAAG,SAAS,MAAM,QAWvD,CAAC;AAEF,eAAO,MAAM,WAAW,aAAc,SAAS,KAAG,IAAI,EAerD,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAO,SAOnC,CAAC;AAEF,eAAO,MAAM,mBAAmB,UACvB,MAAM,aACF,IAAI,CAAC,OAAO,CAAC,aACb,IAAI,CAAC,OAAO,CAAC,YAQzB,CAAC"}

package/dist/helpers/list.d.ts

@@ -1,2 +1,3 @@
 import React from "react";
-export declare const siblingInfo: (children: React.ReactNode) => readonly [(string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal)[], (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal)[]];
+export declare const siblingInfo: (children: React.ReactNode) => readonly [(string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal)[], (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal)[]];
+//# sourceMappingURL=list.d.ts.map

package/dist/helpers/list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../src/helpers/list.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,eAAO,MAAM,WAAW,aAAc,MAAM,SAAS,kSA8BpD,CAAC"}

package/dist/index.d.ts

@@ -8,3 +8,4 @@ export * from "./autocomplete-list";
 export * from "./autocomplete-tag";
 export * from "./use-autocomplete";
 export * from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC"}