@vygruppen/spor-react 2.4.0 → 2.4.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@2.4.0 build
+> @vygruppen/spor-react@2.4.2 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,13 +9,13 @@
 CJS Build start
 ESM Build start
 DTS Build start
-"toTime" is imported from external module "@internationalized/date" but never used in "dist/chunk-D5OFVN6X.mjs".
 "toTime" is imported from external module "@internationalized/date" but never used in "dist/index.js".
+"toTime" is imported from external module "@internationalized/date" but never used in "dist/chunk-C3DS6BFF.mjs".
+CJS dist/index.js 895.96 KB
+CJS ⚡️ Build success in 4923ms
 ESM dist/index.mjs                      2.08 KB
-ESM dist/CountryCodeSelect-5DBHKSF3.mjs 351.67 KB
-ESM dist/chunk-D5OFVN6X.mjs             415.29 KB
-ESM ⚡️ Build success in 5694ms
-CJS dist/index.js 895.09 KB
-CJS ⚡️ Build success in 5696ms
-DTS ⚡️ Build success in 21721ms
-DTS dist/index.d.ts 260.75 KB
+ESM dist/CountryCodeSelect-FDAGWNSZ.mjs 351.67 KB
+ESM dist/chunk-C3DS6BFF.mjs             416.15 KB
+ESM ⚡️ Build success in 4924ms
+DTS ⚡️ Build success in 18562ms
+DTS dist/index.d.ts 261.82 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @vygruppen/spor-react
 
+## 2.4.2
+
+### Patch Changes
+
+- a5f843bc: Autosuggest: Return the entire item selected, not just the list
+
+## 2.4.1
+
+### Patch Changes
+
+- 3dfeccd7: Add some spacing and styling props to both Combobox and Autosuggest
+
 ## 2.4.0
 
 ### Minor Changes

package/dist/{CountryCodeSelect-5DBHKSF3.mjs → CountryCodeSelect-FDAGWNSZ.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, SelectItem } from './chunk-D5OFVN6X.mjs';
+import { createTexts, useTranslation, InfoSelect, SelectItem } from './chunk-C3DS6BFF.mjs';
 import React from 'react';
 
 // ../../node_modules/awesome-phonenumber/index-esm.mjs

package/dist/{chunk-D5OFVN6X.mjs → chunk-C3DS6BFF.mjs}

@@ -4023,7 +4023,8 @@ function Autosuggest({
   label,
   fetcher,
   children,
-  onSelectionChange
+  onSelectionChange,
+  ...props
 }) {
   const list2 = useAsyncList({
     async load({ filterText }) {
@@ -4032,6 +4033,12 @@ function Autosuggest({
       };
     }
   });
+  const handleSelectionChange = (key) => {
+    if (!onSelectionChange) {
+      return;
+    }
+    return onSelectionChange(list2.getItem(key));
+  };
   return /* @__PURE__ */ React49__default.createElement(
     Combobox,
     {
@@ -4039,8 +4046,9 @@ function Autosuggest({
       items: list2.items,
       inputValue: list2.filterText,
       onInputChange: list2.setFilterText,
+      onSelectionChange: handleSelectionChange,
       isLoading: list2.isLoading,
-      onSelectionChange
+      ...props
     },
     children
   );
@@ -4220,6 +4228,23 @@ var ChoiceChip = forwardRef((props, ref) => {
 function Combobox({
   label,
   isLoading,
+  leftIcon,
+  rightIcon,
+  borderBottomLeftRadius = "sm",
+  borderBottomRightRadius = "sm",
+  borderTopLeftRadius = "sm",
+  borderTopRightRadius = "sm",
+  marginBottom,
+  marginTop,
+  marginX,
+  marginY,
+  paddingBottom,
+  paddingRight,
+  paddingTop,
+  paddingLeft,
+  paddingX,
+  paddingY,
+  onFocus,
   ...rest
 }) {
   const { contains: contains2 } = useFilter({ sensitivity: "base" });
@@ -4248,7 +4273,22 @@ function Combobox({
       ...inputProps,
       ref: inputRef,
       label,
-      borderBottomRadius: state2.isOpen ? 0 : "sm",
+      onFocus,
+      borderBottomLeftRadius: state2.isOpen ? 0 : borderBottomLeftRadius,
+      borderBottomRightRadius: state2.isOpen ? 0 : borderBottomRightRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      marginBottom,
+      marginTop,
+      marginX,
+      marginY,
+      paddingBottom,
+      paddingRight,
+      paddingTop,
+      paddingLeft,
+      paddingX,
+      paddingY,
+      leftIcon,
       rightIcon: isLoading ? /* @__PURE__ */ React49__default.createElement(
         ColorSpinner,
         {
@@ -4261,7 +4301,7 @@ function Combobox({
             }
           }
         }
-      ) : void 0
+      ) : rightIcon
     }
   ), state2.isOpen && /* @__PURE__ */ React49__default.createElement(
     Popover3,
@@ -4364,7 +4404,7 @@ function ListBox({
       sx: styles2.container,
       "aria-busy": isLoading
     },
-    [...state2.collection].map(
+    Array.from(state2.collection).map(
       (item) => item.type === "section" ? /* @__PURE__ */ React49__default.createElement(ListBoxSection, { key: item.key, section: item, state: state2 }) : /* @__PURE__ */ React49__default.createElement(Option, { key: item.key, item, state: state2 })
     )
   );
@@ -4431,7 +4471,9 @@ function ListBoxSection({ section, state: state2 }) {
       ...headingProps
     },
     section.rendered
-  ), /* @__PURE__ */ React49__default.createElement(List, { ...groupProps, padding: 0, listStyleType: "none" }, [...state2.collection.getChildren(section.key)].map((item) => /* @__PURE__ */ React49__default.createElement(Option, { key: item.key, item, state: state2 }))));
+  ), /* @__PURE__ */ React49__default.createElement(List, { ...groupProps, padding: 0, listStyleType: "none" }, Array.from(state2.collection.getChildren(section.key)).map(
+    (item) => /* @__PURE__ */ React49__default.createElement(Option, { key: item.key, item, state: state2 })
+  )));
 }
 
 // src/input/InfoSelect.tsx
@@ -4887,7 +4929,7 @@ var texts13 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-5DBHKSF3.mjs'));
+var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-FDAGWNSZ.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React49__default.createElement(Radio$1, { ...props, ref });
 });

package/dist/index.d.ts

@@ -644,10 +644,17 @@ type AutosuggestProps<T> = {
      * */
     children: ComboboxProps<T>["children"];
     /**
-     * Callback for when the selection changes.
+     * Callback for when the selection changes. Returns the entire item.
      */
-    onSelectionChange?: ComboboxProps<T>["onSelectionChange"];
-};
+    onSelectionChange?: (item: T) => void;
+    /** The selected item key (controlled) */
+    selectedKey?: ComboboxProps<T>["selectedKey"];
+    /** What should open the menu.
+     *
+     * Defaults to "input"
+     */
+    menuTrigger?: ComboboxProps<T>["menuTrigger"];
+} & 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.
  *
@@ -679,7 +686,7 @@ type AutosuggestProps<T> = {
  * };
  * ```
  */
-declare function Autosuggest<T extends object>({ label, fetcher, children, onSelectionChange, }: AutosuggestProps<T>): React__default.JSX.Element;
+declare function Autosuggest<T extends object>({ label, fetcher, children, onSelectionChange, ...props }: AutosuggestProps<T>): React__default.JSX.Element;
 
 type CardSelectProps = BoxProps & {
     /** The design of the trigger button.
@@ -816,7 +823,7 @@ type ComboboxProps<T> = AriaComboBoxProps<T> & {
     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.
  *
@@ -840,7 +847,7 @@ type ComboboxProps<T> = AriaComboBoxProps<T> & {
  * </Combobox>
  * ```
  */
-declare function Combobox<T extends object>({ label, isLoading, ...rest }: ComboboxProps<T>): 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>;

package/dist/index.js

@@ -3754,7 +3754,8 @@ function Autosuggest({
   label,
   fetcher,
   children,
-  onSelectionChange
+  onSelectionChange,
+  ...props
 }) {
   const list2 = reactStately.useAsyncList({
     async load({ filterText }) {
@@ -3763,6 +3764,12 @@ function Autosuggest({
       };
     }
   });
+  const handleSelectionChange = (key) => {
+    if (!onSelectionChange) {
+      return;
+    }
+    return onSelectionChange(list2.getItem(key));
+  };
   return /* @__PURE__ */ React49__namespace.default.createElement(
     Combobox,
     {
@@ -3770,8 +3777,9 @@ function Autosuggest({
       items: list2.items,
       inputValue: list2.filterText,
       onInputChange: list2.setFilterText,
+      onSelectionChange: handleSelectionChange,
       isLoading: list2.isLoading,
-      onSelectionChange
+      ...props
     },
     children
   );
@@ -4735,6 +4743,23 @@ var init_ChoiceChip = __esm({
 function Combobox({
   label,
   isLoading,
+  leftIcon,
+  rightIcon,
+  borderBottomLeftRadius = "sm",
+  borderBottomRightRadius = "sm",
+  borderTopLeftRadius = "sm",
+  borderTopRightRadius = "sm",
+  marginBottom,
+  marginTop,
+  marginX,
+  marginY,
+  paddingBottom,
+  paddingRight,
+  paddingTop,
+  paddingLeft,
+  paddingX,
+  paddingY,
+  onFocus,
   ...rest
 }) {
   const { contains: contains2 } = reactAria.useFilter({ sensitivity: "base" });
@@ -4763,7 +4788,22 @@ function Combobox({
       ...inputProps,
       ref: inputRef,
       label,
-      borderBottomRadius: state2.isOpen ? 0 : "sm",
+      onFocus,
+      borderBottomLeftRadius: state2.isOpen ? 0 : borderBottomLeftRadius,
+      borderBottomRightRadius: state2.isOpen ? 0 : borderBottomRightRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      marginBottom,
+      marginTop,
+      marginX,
+      marginY,
+      paddingBottom,
+      paddingRight,
+      paddingTop,
+      paddingLeft,
+      paddingX,
+      paddingY,
+      leftIcon,
       rightIcon: isLoading ? /* @__PURE__ */ React49__namespace.default.createElement(
         exports.ColorSpinner,
         {
@@ -4776,7 +4816,7 @@ function Combobox({
             }
           }
         }
-      ) : void 0
+      ) : rightIcon
     }
   ), state2.isOpen && /* @__PURE__ */ React49__namespace.default.createElement(
     Popover3,
@@ -4899,7 +4939,7 @@ function ListBox({
       sx: styles2.container,
       "aria-busy": isLoading
     },
-    [...state2.collection].map(
+    Array.from(state2.collection).map(
       (item) => item.type === "section" ? /* @__PURE__ */ React49__namespace.default.createElement(ListBoxSection, { key: item.key, section: item, state: state2 }) : /* @__PURE__ */ React49__namespace.default.createElement(Option, { key: item.key, item, state: state2 })
     )
   );
@@ -4957,7 +4997,9 @@ function ListBoxSection({ section, state: state2 }) {
       ...headingProps
     },
     section.rendered
-  ), /* @__PURE__ */ React49__namespace.default.createElement(react.List, { ...groupProps, padding: 0, listStyleType: "none" }, [...state2.collection.getChildren(section.key)].map((item) => /* @__PURE__ */ React49__namespace.default.createElement(Option, { key: item.key, item, state: state2 }))));
+  ), /* @__PURE__ */ React49__namespace.default.createElement(react.List, { ...groupProps, padding: 0, listStyleType: "none" }, Array.from(state2.collection.getChildren(section.key)).map(
+    (item) => /* @__PURE__ */ React49__namespace.default.createElement(Option, { key: item.key, item, state: state2 })
+  )));
 }
 exports.SelectItem = void 0; exports.SelectItemLabel = void 0; exports.SelectItemDescription = void 0; var OptionContext, useOptionContext;
 var init_ListBox = __esm({

package/dist/index.mjs

@@ -1 +1 @@
-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-D5OFVN6X.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-C3DS6BFF.mjs';

package/package.json

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

package/src/input/Autosuggest.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useAsyncList } from "react-stately";
-import { Combobox, ComboboxProps } from "../";
+import { Combobox, ComboboxProps, InputProps } from "../";
 
 type AutosuggestProps<T> = {
   /** The label of the search field */
@@ -39,10 +39,36 @@ type AutosuggestProps<T> = {
    * */
   children: ComboboxProps<T>["children"];
   /**
-   * Callback for when the selection changes.
+   * Callback for when the selection changes. Returns the entire item.
    */
-  onSelectionChange?: ComboboxProps<T>["onSelectionChange"];
-};
+  onSelectionChange?: (item: T) => void;
+  /** The selected item key (controlled) */
+  selectedKey?: ComboboxProps<T>["selectedKey"];
+  /** What should open the menu.
+   *
+   * Defaults to "input"
+   */
+  menuTrigger?: ComboboxProps<T>["menuTrigger"];
+} & 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.
  *
@@ -79,6 +105,7 @@ export function Autosuggest<T extends object>({
   fetcher,
   children,
   onSelectionChange,
+  ...props
 }: AutosuggestProps<T>) {
   const list = useAsyncList<T>({
     async load({ filterText }) {
@@ -87,14 +114,21 @@ export function Autosuggest<T extends object>({
       };
     },
   });
+  const handleSelectionChange = (key: React.Key) => {
+    if (!onSelectionChange) {
+      return;
+    }
+    return onSelectionChange(list.getItem(key));
+  };
   return (
     <Combobox
       label={label}
       items={list.items}
       inputValue={list.filterText}
       onInputChange={list.setFilterText}
+      onSelectionChange={handleSelectionChange}
       isLoading={list.isLoading}
-      onSelectionChange={onSelectionChange}
+      {...props}
     >
       {children}
     </Combobox>

package/src/input/Combobox.tsx

@@ -1,7 +1,7 @@
 import React, { useRef } from "react";
 import { AriaComboBoxProps, useComboBox, useFilter } from "react-aria";
 import { useComboBoxState } from "react-stately";
-import { ColorSpinner, FormControl, Input, ListBox } from "..";
+import { ColorSpinner, FormControl, Input, InputProps, ListBox } from "..";
 import { Popover } from "./Popover";
 
 export type ComboboxProps<T> = AriaComboBoxProps<T> & {
@@ -9,7 +9,26 @@ export type ComboboxProps<T> = AriaComboBoxProps<T> & {
   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.
  *
@@ -36,6 +55,23 @@ export type ComboboxProps<T> = AriaComboBoxProps<T> & {
 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" });
@@ -67,7 +103,22 @@ export function Combobox<T extends object>({
         {...inputProps}
         ref={inputRef}
         label={label}
-        borderBottomRadius={state.isOpen ? 0 : "sm"}
+        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
@@ -80,7 +131,9 @@ export function Combobox<T extends object>({
                 },
               }}
             />
-          ) : undefined
+          ) : (
+            rightIcon
+          )
         }
       />
       {state.isOpen && (

package/src/input/ListBox.tsx

@@ -80,7 +80,7 @@ export function ListBox<T extends object>({
       sx={styles.container}
       aria-busy={isLoading}
     >
-      {[...state.collection].map((item) =>
+      {Array.from(state.collection).map((item) =>
         item.type === "section" ? (
           <ListBoxSection key={item.key} section={item} state={state} />
         ) : (
@@ -203,9 +203,11 @@ function ListBoxSection({ section, state }: ListBoxSectionProps) {
         </Box>
       )}
       <List {...groupProps} padding={0} listStyleType="none">
-        {[...state.collection.getChildren(section.key)].map((item) => (
-          <Option key={item.key} item={item} state={state} />
-        ))}
+        {Array.from(state.collection.getChildren(section.key)).map(
+          (item: any) => (
+            <Option key={item.key} item={item} state={state} />
+          )
+        )}
       </List>
     </ListItem>
   );