@vygruppen/spor-react 2.3.4 → 2.4.1

package/dist/index.d.ts

@@ -8,10 +8,11 @@ import * as React from 'react';
 import React__default, { ChangeEvent } from 'react';
 import { DateValue } from '@internationalized/date';
 export { Time } from '@internationalized/date';
-import { AriaDatePickerProps, AriaDateRangePickerProps, AriaPositionProps, AriaListBoxOptions } from 'react-aria';
+import { AriaDatePickerProps, AriaDateRangePickerProps, AriaPositionProps, AriaComboBoxProps, AriaListBoxProps } from 'react-aria';
 import { TimeValue } from '@react-types/datepicker';
-import { SelectState, ListState } from 'react-stately';
-export { Item as SelectItem } from 'react-stately';
+import * as react_stately from 'react-stately';
+import { ListState, SelectState } from 'react-stately';
+export { Item, Section } from 'react-stately';
 import * as _chakra_ui_theme_tools_dist_component from '@chakra-ui/theme-tools/dist/component';
 import * as _chakra_ui_styled_system from '@chakra-ui/styled-system';
 
@@ -606,6 +607,80 @@ type AttachedInputsProps = FlexProps;
  */
 declare const AttachedInputs: ({ flexDirection, ...rest }: AttachedInputsProps) => React__default.JSX.Element;
 
+type AutosuggestProps<T> = {
+    /** The label of the search field */
+    label: string;
+    /**
+     * The function responsible for fetching new suggestion items, based on the query.
+     *
+     * This will typically be an API call to a backend service.
+     *
+     * @example
+     * ```tsx
+     * const fetcher = async (query?: string) => {
+     *   const response = await fetch(`https://some.api.com/filter=${query}`);
+     *   const json = await response.json();
+     *   return json;
+     * };
+     * ```
+     * */
+    fetcher: (query?: string) => Promise<Iterable<T>>;
+    /**
+     * A render function that receives each item, and returns the UI for each item in the list.
+     *
+     * @example
+     * ```tsx
+     * <Autosuggest {...otherProps}>
+     *  {(user) => (
+     *    <Item key={user.id} textValue={user.fullName}>
+     *       <ItemLabel>{user.fullName}</ItemLabel>
+     *       <ItemDescription>{user.asl}</ItemDescription>
+     *    </Item>
+     *  )}
+     * </Autosuggest>
+     * ```
+     *
+     * You technically don't need to use the `<SelectItemLabel />` and `<SelectItemDescription />` components, but they are recommended to improve the accessibility of the search results. You can style them however you want, so there should never be a reason not to include at least the `<SelectItemLabel />` component. But who's judging?
+     * */
+    children: ComboboxProps<T>["children"];
+    /**
+     * Callback for when the selection changes.
+     */
+    onSelectionChange?: ComboboxProps<T>["onSelectionChange"];
+} & Pick<InputProps, "marginTop" | "marginBottom" | "marginY" | "marginX" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingY" | "paddingX" | "leftIcon" | "rightIcon" | "borderTopRightRadius" | "borderTopLeftRadius" | "borderBottomRightRadius" | "borderBottomLeftRadius" | "onFocus">;
+/**
+ * A component that provides an autocomplete search field with suggestions.
+ *
+ * This component requires a `fetcher` prop, which is a function that receives a query string, and returns a list of items that match the query.
+ *
+ * @example
+ * ```tsx
+ * const fetcher = async (query?: string) => {
+ *   const response = await fetch(`https://some.api.vy.no/filter=${query}`);
+ *   const json = await response.json();
+ *   return json;
+ * };
+ *
+ * const Example = () => {
+ *   return (
+ *     <Autosuggest
+ *       label="Search for users"
+ *       fetcher={fetcher}
+ *       onSelectionChange={(item) => console.log(item)}
+ *     >
+ *       {(user) => (
+ *         <Item key={user.id} textValue={user.fullName}>
+ *           <ItemLabel>{user.fullName}</ItemLabel>
+ *           <ItemDescription>{user.asl}</ItemDescription>
+ *         </Item>
+ *       )}
+ *     </Autosuggest>
+ *   );
+ * };
+ * ```
+ */
+declare function Autosuggest<T extends object>({ label, fetcher, children, onSelectionChange, ...boxProps }: AutosuggestProps<T>): React__default.JSX.Element;
+
 type CardSelectProps = BoxProps & {
     /** The design of the trigger button.
      *
@@ -736,47 +811,36 @@ type ChoiceChipProps = {
  */
 declare const ChoiceChip: _chakra_ui_system_dist_system_types.ComponentWithAs<_chakra_ui_system_dist_system_types.As, ChoiceChipProps>;
 
-type NumericStepperProps = {
-    /** The name of the input field */
-    name?: string;
-    /** The current value */
-    value?: number;
-    /** A default value, if uncontrolled */
-    defaultValue?: number;
-    /** Callback for when the value changes */
-    onChange?: (value: number) => void;
-    /** Optional minimum value. Defaults to 0 */
-    minValue?: number;
-    /** Optional maximum value. Defaults to 99 */
-    maxValue?: number;
-    /** Whether the stepper is disabled or not */
-    isDisabled?: boolean;
-} & Omit<BoxProps, "onChange">;
-/** A simple stepper component for integer values
- *
- * Allows you to choose a given integer value, like for example the number of
- * adults on your journey.
- *
- * ```tsx
- * <NumericStepper value={value} onChange={setValue} />
- * ```
- *
- * You can also set a minimum and/or maximum value:
- *
- * ```tsx
- * <NumericStepper value={value} onChange={setValue} minValue={1} maxValue={10} />
- * ```
+type ComboboxProps<T> = AriaComboBoxProps<T> & {
+    /** The label of the combobox */
+    label: string;
+    /** Whether or not the combobox is waiting for new suggestions */
+    isLoading?: boolean;
+} & Pick<InputProps, "marginTop" | "marginBottom" | "marginY" | "marginX" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingY" | "paddingX" | "leftIcon" | "rightIcon" | "borderTopRightRadius" | "borderTopLeftRadius" | "borderBottomRightRadius" | "borderBottomLeftRadius" | "onFocus">;
+/**
+ * A combobox is a combination of an input and a list of suggestions.
  *
- * You can use the NumericStepper inside of a FormControl component to get IDs etc linked up automatically:
+ * It is used to select a single item from a list of suggestions.
  *
+ * @example
  * ```tsx
- * <FormControl>
- *   <FormLabel>Number of adults</FormLabel>
- *   <NumericStepper />
- * </FormControl>
+ * <Combobox
+ *   label="Choose a color"
+ *   items={[
+ *     { label: "Green", value: "green" },
+ *     { label: "Blue", value: "blue" },
+ *     { label: "Yellow", value: "yellow" },
+ *   ]}
+ * >
+ * {(item) => (
+ *   <Item key={item.value} value={item.value}>
+ *      {item.label}
+ *   </Item>
+ *  )}
+ * </Combobox>
  * ```
  */
-declare function NumericStepper({ name: nameProp, id: idProp, value: valueProp, defaultValue, onChange: onChangeProp, minValue, maxValue, isDisabled, ...boxProps }: NumericStepperProps): React__default.JSX.Element;
+declare function Combobox<T extends object>({ label, isLoading, leftIcon, rightIcon, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius, marginBottom, marginTop, marginX, marginY, paddingBottom, paddingRight, paddingTop, paddingLeft, paddingX, paddingY, onFocus, ...rest }: ComboboxProps<T>): React__default.JSX.Element;
 
 type FormControlProps = FormControlProps$1;
 declare const FormControl: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", FormControlProps$1>;
@@ -817,7 +881,7 @@ declare const FormErrorMessage: ({ children, ...boxProps }: FormErrorMessageProp
 type FormLabelProps = FormLabelProps$1;
 declare const FormLabel: _chakra_ui_system_dist_system_types.ComponentWithAs<"label", FormLabelProps$1>;
 
-type InfoSelectProps<T> = {
+type InfoSelectProps<T extends object> = {
     /**
      * Either a render function accepting an item, and returning a <SelectItem />,
      * or a list of <SelectItem />s.
@@ -845,7 +909,7 @@ type InfoSelectProps<T> = {
      * </Select>
      * ```
      **/
-    children: React__default.ReactNode | ((item: T) => React__default.ReactNode);
+    children: React__default.ReactElement | ((item: T) => React__default.ReactElement);
     /**
      * The items to render
      *
@@ -941,18 +1005,16 @@ type InfoSelectProps<T> = {
  *   ]}
  * >
  *   {(item) => (
- *     <SelectItem key={item.key}>
+ *     <Item key={item.key}>
  *       {item.label}
- *     </SelectItem>
+ *     </Item>
  *   )}
  * </InfoSelect>
  * ```
  *
  * @see https://spor.vy.no/komponenter/info-select
  */
-declare function InfoSelect<T extends {
-    key: string;
-}>({ placeholder, width, height, onChange, value, isLabelSrOnly, defaultValue, ...props }: InfoSelectProps<T>): React__default.JSX.Element;
+declare function InfoSelect<T extends object>({ placeholder, width, height, onChange, value, isLabelSrOnly, defaultValue, ...props }: InfoSelectProps<T>): React__default.JSX.Element;
 
 type InputProps = Exclude<InputProps$1, "variant" | "size"> & {
     /** The input's label */
@@ -1011,33 +1073,72 @@ declare const InputLeftElement: _chakra_ui_system_dist_system_types.ComponentWit
  */
 declare const InputRightElement: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", InputElementProps$1>;
 
-type ListBoxProps = {
-    listBoxRef?: React__default.RefObject<HTMLUListElement>;
-    listBoxOptions: AriaListBoxOptions<unknown>;
-    state: SelectState<unknown> | ListState<unknown>;
-} & BoxProps;
+/** @deprecated use Item instead */
+declare const SelectItem: <T>(props: react_stately.ItemProps<T>) => JSX.Element;
+
+type ListBoxProps<T> = AriaListBoxProps<T> & Omit<BoxProps, "filter" | "autoFocus" | "children"> & {
+    /** External reference to the ListBox itself */
+    listBoxRef: React__default.RefObject<HTMLUListElement>;
+    /** Whether or not the listbox is waiting on new data, i.e. through a autosuggest search */
+    isLoading?: boolean;
+    /** The state of the listbox, provided externally somehow. */
+    state: ListState<T> | SelectState<T>;
+};
 /**
- * A listbox component.
+ * A component that renders a list box with selectable options.
  *
- * This component is currently only thought to be used with the `InfoSelect` component. Usage outside of that is not documented, nor intended.
+ * @example
+ * ```jsx
+ * const options = [
+ *   { id: 1, name: "Option 1" },
+ *   { id: 2, name: "Option 2" },
+ *   { id: 3, name: "Option 3" },
+ * ];
+ *
+ * const state = useListState({ items: options });
+ * const ref = useRef(null);
+ *
+ * return (
+ *   <ListBox state={state} listBoxRef={ref}>
+ *     {(option) => <div key={option.id}>{option.name}</div>}
+ *   </ListBox>
+ * );
+ * ```
+ *
+ * @example
+ * ```jsx
+ * const { data, isLoading } = useSWR('/api/options')
+ * const state = useListState({ items: data });
+ * const ref = useRef(null);
+ *
+ * return (
+ *   <ListBox state={state} isLoading={isLoading} ref={ref}>
+ *     {(option) => <div key={option.id}>{option.name}</div>}
+ *   </ListBox>
+ * );
+ * ```
  */
-declare const ListBox: _chakra_ui_system_dist_system_types.ComponentWithAs<"ul", ListBoxProps>;
+declare function ListBox<T extends object>({ isLoading, listBoxRef, state, ...props }: ListBoxProps<T>): React__default.JSX.Element;
 /**
- * Renders a label for a SelectItem.
+ * Renders a label for a listbox item.
  *
- * Useful if you want to render a custom SelectItem - especially if it has a description.
+ * Useful if you want to render a custom Item - especially if it has a description.
  */
-declare function SelectItemLabel({ children }: {
+declare function ItemLabel({ children }: {
     children: React__default.ReactNode;
 }): React__default.JSX.Element;
+/** @deprecated use ItemLabel instead */
+declare const SelectItemLabel: typeof ItemLabel;
 /**
- * Renders a description for a SelectItem.
+ * Renders a description for an Item.
  *
- * Useful if you want to render a custom SelectItem with more than just a label.
+ * Useful if you want to render a custom Item with more than just a label.
  */
-declare function SelectItemDescription({ children, }: {
+declare function ItemDescription({ children }: {
     children: React__default.ReactNode;
 }): React__default.JSX.Element;
+/** @deprecated Use ItemDescription instead */
+declare const SelectItemDescription: typeof ItemDescription;
 
 type NativeSelectProps = Exclude<SelectProps, "colorScheme" | "variant" | "size"> & {
     label?: string;
@@ -1058,6 +1159,48 @@ type NativeSelectProps = Exclude<SelectProps, "colorScheme" | "variant" | "size"
  */
 declare const NativeSelect: _chakra_ui_system_dist_system_types.ComponentWithAs<"select", NativeSelectProps>;
 
+type NumericStepperProps = {
+    /** The name of the input field */
+    name?: string;
+    /** The current value */
+    value?: number;
+    /** A default value, if uncontrolled */
+    defaultValue?: number;
+    /** Callback for when the value changes */
+    onChange?: (value: number) => void;
+    /** Optional minimum value. Defaults to 0 */
+    minValue?: number;
+    /** Optional maximum value. Defaults to 99 */
+    maxValue?: number;
+    /** Whether the stepper is disabled or not */
+    isDisabled?: boolean;
+} & Omit<BoxProps, "onChange">;
+/** A simple stepper component for integer values
+ *
+ * Allows you to choose a given integer value, like for example the number of
+ * adults on your journey.
+ *
+ * ```tsx
+ * <NumericStepper value={value} onChange={setValue} />
+ * ```
+ *
+ * You can also set a minimum and/or maximum value:
+ *
+ * ```tsx
+ * <NumericStepper value={value} onChange={setValue} minValue={1} maxValue={10} />
+ * ```
+ *
+ * You can use the NumericStepper inside of a FormControl component to get IDs etc linked up automatically:
+ *
+ * ```tsx
+ * <FormControl>
+ *   <FormLabel>Number of adults</FormLabel>
+ *   <NumericStepper />
+ * </FormControl>
+ * ```
+ */
+declare function NumericStepper({ name: nameProp, id: idProp, value: valueProp, defaultValue, onChange: onChangeProp, minValue, maxValue, isDisabled, ...boxProps }: NumericStepperProps): React__default.JSX.Element;
+
 type PasswordInputProps = InputProps;
 declare const PasswordInput: _chakra_ui_system_dist_system_types.ComponentWithAs<"input", InputProps>;
 
@@ -3589,10 +3732,10 @@ declare const theme: {
                     };
                     _focus: {
                         outline: string;
-                        background: string;
+                        backgroundColor: string;
                     };
                     _selected: {
-                        background: string;
+                        backgroundColor: string;
                         color: string;
                     };
                 };
@@ -6927,4 +7070,4 @@ type TextProps = Omit<TextProps$1, "textStyle"> & {
  */
 declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", TextProps>;
 
-export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, NumericStepper, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, PopoverWizardProps, ProgressBar, ProgressLoader, Radio, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimpleDrawerProps, SimplePopover, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoProps, WizardPopover, WizardPopoverProps, createTexts, fontFaces, theme, useToast, useTranslation };
+export { Accordion, AccordionProps, AttachedInputs, Autosuggest, Badge, BadgeProps, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, NumericStepper, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, PopoverWizardProps, ProgressBar, ProgressLoader, Radio, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SelectItem, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimpleDrawerProps, SimplePopover, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoProps, WizardPopover, WizardPopoverProps, createTexts, fontFaces, theme, useToast, useTranslation };