@vygruppen/spor-react 2.3.4 → 2.4.1

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Item as SelectItem, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-QXVLVC2K.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Autosuggest, Badge, Box, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SelectItem, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-FLORQZEA.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "2.3.4",
+  "version": "2.4.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/input/Autosuggest.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+import { useAsyncList } from "react-stately";
+import { Combobox, ComboboxProps, InputProps } from "../";
+
+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>
+ *   );
+ * };
+ * ```
+ */
+export function Autosuggest<T extends object>({
+  label,
+  fetcher,
+  children,
+  onSelectionChange,
+  ...boxProps
+}: AutosuggestProps<T>) {
+  const list = useAsyncList<T>({
+    async load({ filterText }) {
+      return {
+        items: await fetcher(filterText),
+      };
+    },
+  });
+  return (
+    <Combobox
+      label={label}
+      items={list.items}
+      inputValue={list.filterText}
+      onInputChange={list.setFilterText}
+      isLoading={list.isLoading}
+      onSelectionChange={onSelectionChange}
+      {...boxProps}
+    >
+      {children}
+    </Combobox>
+  );
+}

package/src/input/Combobox.tsx

@@ -0,0 +1,158 @@
+import React, { useRef } from "react";
+import { AriaComboBoxProps, useComboBox, useFilter } from "react-aria";
+import { useComboBoxState } from "react-stately";
+import { ColorSpinner, FormControl, Input, InputProps, ListBox } from "..";
+import { Popover } from "./Popover";
+
+export 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.
+ *
+ * It is used to select a single item from a list of suggestions.
+ *
+ * @example
+ * ```tsx
+ * <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>
+ * ```
+ */
+export function Combobox<T extends object>({
+  label,
+  isLoading,
+  leftIcon,
+  rightIcon,
+  borderBottomLeftRadius = "sm",
+  borderBottomRightRadius = "sm",
+  borderTopLeftRadius = "sm",
+  borderTopRightRadius = "sm",
+  marginBottom,
+  marginTop,
+  marginX,
+  marginY,
+  paddingBottom,
+  paddingRight,
+  paddingTop,
+  paddingLeft,
+  paddingX,
+  paddingY,
+  onFocus,
+  ...rest
+}: ComboboxProps<T>) {
+  const { contains } = useFilter({ sensitivity: "base" });
+  const state = useComboBoxState({
+    ...rest,
+    defaultFilter: contains,
+  });
+
+  const inputRef = useRef(null);
+  const listBoxRef = useRef(null);
+  const popoverRef = useRef(null);
+
+  const {
+    inputProps: { size, ...inputProps },
+    listBoxProps,
+  } = useComboBox(
+    {
+      ...rest,
+      inputRef,
+      listBoxRef,
+      popoverRef,
+    },
+    state
+  );
+
+  return (
+    <FormControl>
+      <Input
+        {...inputProps}
+        ref={inputRef}
+        label={label}
+        onFocus={onFocus}
+        borderBottomLeftRadius={state.isOpen ? 0 : borderBottomLeftRadius}
+        borderBottomRightRadius={state.isOpen ? 0 : borderBottomRightRadius}
+        borderTopLeftRadius={borderTopLeftRadius}
+        borderTopRightRadius={borderTopRightRadius}
+        marginBottom={marginBottom}
+        marginTop={marginTop}
+        marginX={marginX}
+        marginY={marginY}
+        paddingBottom={paddingBottom}
+        paddingRight={paddingRight}
+        paddingTop={paddingTop}
+        paddingLeft={paddingLeft}
+        paddingX={paddingX}
+        paddingY={paddingY}
+        leftIcon={leftIcon}
+        rightIcon={
+          isLoading ? (
+            <ColorSpinner
+              width="1.5rem"
+              alignSelf="center"
+              css={{
+                div: {
+                  display: "flex",
+                  alignItems: "center",
+                },
+              }}
+            />
+          ) : (
+            rightIcon
+          )
+        }
+      />
+      {state.isOpen && (
+        <Popover
+          state={state}
+          triggerRef={inputRef}
+          ref={popoverRef}
+          placement="bottom start"
+        >
+          <ListBox
+            {...listBoxProps}
+            state={state}
+            listBoxRef={listBoxRef}
+            borderBottomRadius="sm"
+          >
+            {rest.children}
+          </ListBox>
+        </Popover>
+      )}
+    </FormControl>
+  );
+}

package/src/input/FormErrorMessage.tsx

@@ -58,7 +58,7 @@ export const FormErrorMessage = ({
         textStyle="xs"
         width="fit-content"
         position="absolute"
-        top={-1.5}
+        top={-0.5}
         left={3}
         zIndex="popover"
         maxWidth="50ch"

package/src/input/InfoSelect.tsx

@@ -16,7 +16,7 @@ import { createTexts, useTranslation } from "../";
 import { ListBox } from "./ListBox";
 import { Popover } from "./Popover";
 
-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.
@@ -44,7 +44,7 @@ type InfoSelectProps<T> = {
    * </Select>
    * ```
    **/
-  children: React.ReactNode | ((item: T) => React.ReactNode);
+  children: React.ReactElement | ((item: T) => React.ReactElement);
   /**
    * The items to render
    *
@@ -140,16 +140,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
  */
-export function InfoSelect<T extends { key: string }>({
+export function InfoSelect<T extends object>({
   placeholder,
   width = "100%",
   height = "auto",
@@ -165,8 +165,9 @@ export function InfoSelect<T extends { key: string }>({
     defaultSelectedKey: defaultValue,
     ...props,
   };
-  const state = useSelectState(renamedProps as any);
+  const state = useSelectState(renamedProps);
   const triggerRef = useRef<HTMLButtonElement>(null);
+  const listboxRef = useRef<HTMLUListElement>(null);
   const { labelProps, triggerProps, valueProps, menuProps } = useSelect(
     renamedProps,
     state,
@@ -217,10 +218,13 @@ export function InfoSelect<T extends { key: string }>({
       {state.isOpen && (
         <Popover state={state} triggerRef={triggerRef}>
           <ListBox
-            listBoxOptions={menuProps}
+            {...menuProps}
             state={state}
+            listBoxRef={listboxRef}
             borderBottomRadius="sm"
-          />
+          >
+            {props.children}
+          </ListBox>
         </Popover>
       )}
     </Box>

package/src/input/ListBox.tsx

@@ -1,97 +1,102 @@
 import {
   Box,
-  BoxProps,
-  chakra,
-  forwardRef,
+  List,
+  ListItem,
+  useColorModeValue,
   useMultiStyleConfig,
+  type BoxProps,
 } from "@chakra-ui/react";
 import type { Node } from "@react-types/shared";
-import React, { RefObject, useContext, useRef } from "react";
-import type { AriaListBoxOptions } from "react-aria";
-import { useListBox, useOption } from "react-aria";
-import type { ListState, SelectState } from "react-stately";
+import React, { useContext, useRef } from "react";
+import {
+  AriaListBoxProps,
+  useListBox,
+  useListBoxSection,
+  useOption,
+} from "react-aria";
+import { Item, type ListState, type SelectState } from "react-stately";
 
-type ListBoxProps = {
-  listBoxRef?: React.RefObject<HTMLUListElement>;
-  listBoxOptions: AriaListBoxOptions<unknown>;
-  state: SelectState<unknown> | ListState<unknown>;
-} & BoxProps;
+/** @deprecated use Item instead */
+export const SelectItem = Item;
+export { Item, Section } from "react-stately";
 
-type OptionProps = {
-  item: Node<unknown>;
-  state: SelectState<any> | ListState<unknown>;
-};
+type ListBoxProps<T> = AriaListBoxProps<T> &
+  Omit<BoxProps, "filter" | "autoFocus" | "children"> & {
+    /** External reference to the ListBox itself */
+    listBoxRef: React.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.
+ *
+ * @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>
+ * );
+ * ```
  *
- * 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 { 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>
+ * );
+ * ```
  */
-export const ListBox = forwardRef<ListBoxProps, "ul">((props, ref) => {
-  const { state, listBoxOptions, ...rest } = props;
+export function ListBox<T extends object>({
+  isLoading,
+  listBoxRef,
+  state,
+  ...props
+}: ListBoxProps<T>) {
+  const { listBoxProps } = useListBox(props, state, listBoxRef);
   const styles = useMultiStyleConfig("ListBox", {});
-  const internalRef = useRef<HTMLUListElement>(null);
-  const listBoxRef = (ref ?? internalRef) as RefObject<HTMLUListElement>;
-  const { listBoxProps } = useListBox(listBoxOptions, state, listBoxRef);
 
   return (
-    <Box
-      as="ul"
+    <List
       {...listBoxProps}
+      ref={listBoxRef}
       sx={styles.container}
-      ref={listBoxRef as RefObject<any>}
-      {...rest}
+      aria-busy={isLoading}
     >
-      {Array.from(state.collection).map((item) => (
-        <Option key={item.key} item={item} state={state} />
-      ))}
-    </Box>
-  );
-});
-
-type OptionContextValue = {
-  labelProps: React.HTMLAttributes<HTMLElement>;
-  descriptionProps: React.HTMLAttributes<HTMLElement>;
-};
-
-const OptionContext = React.createContext<OptionContextValue>({
-  labelProps: {},
-  descriptionProps: {},
-});
-const useOptionContext = () => {
-  return useContext(OptionContext);
-};
-
-const Option = ({ item, state }: OptionProps) => {
-  const ref = useRef<HTMLLIElement>(null);
-  const styles = useMultiStyleConfig("ListBox", {});
-  const { optionProps, labelProps, descriptionProps } = useOption(
-    { key: item.key },
-    state,
-    ref
-  );
-
-  return (
-    <chakra.li {...optionProps} ref={ref} sx={styles.item}>
-      <OptionContext.Provider value={{ labelProps, descriptionProps }}>
-        {item.rendered}
-      </OptionContext.Provider>
-    </chakra.li>
+      {Array.from(state.collection).map((item) =>
+        item.type === "section" ? (
+          <ListBoxSection key={item.key} section={item} state={state} />
+        ) : (
+          <Option key={item.key} item={item} state={state} />
+        )
+      )}
+    </List>
   );
-};
-
-// The Label and Description components will be used within a <SelectItem>.
-// They receive props from the OptionContext defined above.
-// This ensures that the option is ARIA labelled by the label, and
-// described by the description, which makes for better announcements
-// for screen reader users.
+}
 
 /**
- * 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.
  */
-export function SelectItemLabel({ children }: { children: React.ReactNode }) {
+export function ItemLabel({ children }: { children: React.ReactNode }) {
   let { labelProps } = useOptionContext();
   const styles = useMultiStyleConfig("ListBox", {});
   return (
@@ -100,17 +105,15 @@ export function SelectItemLabel({ children }: { children: React.ReactNode }) {
     </Box>
   );
 }
+/** @deprecated use ItemLabel instead */
+export const SelectItemLabel = 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.
  */
-export function SelectItemDescription({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export function ItemDescription({ children }: { children: React.ReactNode }) {
   let { descriptionProps } = useOptionContext();
   const styles = useMultiStyleConfig("ListBox", {});
   return (
@@ -119,5 +122,93 @@ export function SelectItemDescription({
     </Box>
   );
 }
+/** @deprecated Use ItemDescription instead */
+export const SelectItemDescription = ItemDescription;
+
+type OptionProps = {
+  item: Node<unknown>;
+  state: SelectState<any> | ListState<unknown>;
+};
+function Option({ item, state }: OptionProps) {
+  const ref = useRef(null);
+  const {
+    optionProps,
+    isSelected,
+    isDisabled,
+    isFocused,
+    labelProps,
+    descriptionProps,
+  } = useOption({ key: item.key }, state, ref);
+
+  const styles = useMultiStyleConfig("ListBox", {});
+  let dataFields: Record<string, boolean> = {};
+  if (isSelected) {
+    dataFields["data-selected"] = true;
+  }
+  if (isDisabled) {
+    dataFields["data-disabled"] = true;
+  }
+  if (isFocused) {
+    dataFields["data-focus"] = true;
+  }
+
+  return (
+    <OptionContext.Provider value={{ labelProps, descriptionProps }}>
+      <ListItem {...optionProps} {...dataFields} ref={ref} sx={styles.item}>
+        {item.rendered}
+      </ListItem>
+    </OptionContext.Provider>
+  );
+}
+
+type OptionContextValue = {
+  labelProps: React.HTMLAttributes<HTMLElement>;
+  descriptionProps: React.HTMLAttributes<HTMLElement>;
+};
+
+const OptionContext = React.createContext<OptionContextValue>({
+  labelProps: {},
+  descriptionProps: {},
+});
+const useOptionContext = () => {
+  return useContext(OptionContext);
+};
+
+type ListBoxSectionProps = {
+  section: Node<unknown>;
+  state: any;
+};
+function ListBoxSection({ section, state }: ListBoxSectionProps) {
+  const { itemProps, headingProps, groupProps } = useListBoxSection({
+    heading: section.rendered,
+    "aria-label": section["aria-label"],
+  });
 
-export { Item as SelectItem } from "react-stately";
+  const isFirstSection = section.key !== state.collection.getFirstKey();
+  const titleBackgroundColor = useColorModeValue("platinum", "dimGrey");
+  const titleColor = useColorModeValue("darkGrey", "white");
+  return (
+    <ListItem {...itemProps}>
+      {section.rendered && (
+        <Box
+          textStyle="xs"
+          backgroundColor={titleBackgroundColor}
+          color={titleColor}
+          paddingX={3}
+          paddingY={1}
+          marginTop={isFirstSection ? 0 : 0}
+          {...headingProps}
+        >
+          {section.rendered}
+        </Box>
+      )}
+      <List {...groupProps} padding={0} listStyleType="none">
+        {Array.from(state.collection.getChildren(section.key)).map(
+          (item: any) => (
+            <Option key={item.key} item={item} state={state} />
+          )
+        )}
+      </List>
+    </ListItem>
+  );
+}