@vygruppen/spor-react 2.4.1 → 2.4.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@2.4.1 build
+> @vygruppen/spor-react@2.4.2 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -10,12 +10,12 @@
 ESM Build start
 DTS Build start
 "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-FLORQZEA.mjs".
-CJS dist/index.js 895.79 KB
-CJS ⚡️ Build success in 5871ms
+"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-MNHFBDDO.mjs 351.67 KB
-ESM dist/chunk-FLORQZEA.mjs             415.99 KB
-ESM ⚡️ Build success in 5874ms
-DTS ⚡️ Build success in 22290ms
-DTS dist/index.d.ts 261.60 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,11 @@
 # @vygruppen/spor-react
 
+## 2.4.2
+
+### Patch Changes
+
+- a5f843bc: Autosuggest: Return the entire item selected, not just the list
+
 ## 2.4.1
 
 ### Patch Changes

package/dist/{CountryCodeSelect-MNHFBDDO.mjs → CountryCodeSelect-FDAGWNSZ.mjs}

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

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

@@ -4024,7 +4024,7 @@ function Autosuggest({
   fetcher,
   children,
   onSelectionChange,
-  ...boxProps
+  ...props
 }) {
   const list2 = useAsyncList({
     async load({ filterText }) {
@@ -4033,6 +4033,12 @@ function Autosuggest({
       };
     }
   });
+  const handleSelectionChange = (key) => {
+    if (!onSelectionChange) {
+      return;
+    }
+    return onSelectionChange(list2.getItem(key));
+  };
   return /* @__PURE__ */ React49__default.createElement(
     Combobox,
     {
@@ -4040,9 +4046,9 @@ function Autosuggest({
       items: list2.items,
       inputValue: list2.filterText,
       onInputChange: list2.setFilterText,
+      onSelectionChange: handleSelectionChange,
       isLoading: list2.isLoading,
-      onSelectionChange,
-      ...boxProps
+      ...props
     },
     children
   );
@@ -4923,7 +4929,7 @@ var texts13 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-MNHFBDDO.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,9 +644,16 @@ 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, ...boxProps }: 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.

package/dist/index.js

@@ -3755,7 +3755,7 @@ function Autosuggest({
   fetcher,
   children,
   onSelectionChange,
-  ...boxProps
+  ...props
 }) {
   const list2 = reactStately.useAsyncList({
     async load({ filterText }) {
@@ -3764,6 +3764,12 @@ function Autosuggest({
       };
     }
   });
+  const handleSelectionChange = (key) => {
+    if (!onSelectionChange) {
+      return;
+    }
+    return onSelectionChange(list2.getItem(key));
+  };
   return /* @__PURE__ */ React49__namespace.default.createElement(
     Combobox,
     {
@@ -3771,9 +3777,9 @@ function Autosuggest({
       items: list2.items,
       inputValue: list2.filterText,
       onInputChange: list2.setFilterText,
+      onSelectionChange: handleSelectionChange,
       isLoading: list2.isLoading,
-      onSelectionChange,
-      ...boxProps
+      ...props
     },
     children
   );

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-FLORQZEA.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.1",
+  "version": "2.4.2",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/input/Autosuggest.tsx

@@ -39,9 +39,16 @@ 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"
@@ -98,7 +105,7 @@ export function Autosuggest<T extends object>({
   fetcher,
   children,
   onSelectionChange,
-  ...boxProps
+  ...props
 }: AutosuggestProps<T>) {
   const list = useAsyncList<T>({
     async load({ filterText }) {
@@ -107,15 +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}
-      {...boxProps}
+      {...props}
     >
       {children}
     </Combobox>