@vygruppen/spor-react 2.4.2 → 2.4.3

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@2.4.2 build
+> @vygruppen/spor-react@2.4.3 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-C3DS6BFF.mjs".
-CJS dist/index.js 895.96 KB
-CJS ⚡️ Build success in 4923ms
+"toTime" is imported from external module "@internationalized/date" but never used in "dist/chunk-Z3I6W6PC.mjs".
+CJS dist/index.js 896.27 KB
+CJS ⚡️ Build success in 5484ms
 ESM dist/index.mjs                      2.08 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
+ESM dist/CountryCodeSelect-GFQIGSFV.mjs 351.67 KB
+ESM dist/chunk-Z3I6W6PC.mjs             416.47 KB
+ESM ⚡️ Build success in 5484ms
+DTS ⚡️ Build success in 22623ms
+DTS dist/index.d.ts 262.86 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @vygruppen/spor-react
 
+## 2.4.3
+
+### Patch Changes
+
+- 5640417f: Autosuggest: Fix a bug where the onSelectionChanged was called with no item on nested lists
+
 ## 2.4.2
 
 ### Patch Changes

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

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

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

@@ -4022,7 +4022,6 @@ var AttachedInputs = ({
 function Autosuggest({
   label,
   fetcher,
-  children,
   onSelectionChange,
   ...props
 }) {
@@ -4037,7 +4036,15 @@ function Autosuggest({
     if (!onSelectionChange) {
       return;
     }
-    return onSelectionChange(list2.getItem(key));
+    let selectedItem = list2.getItem(key);
+    if (!selectedItem) {
+      selectedItem = list2.items.flatMap(
+        (item) => "children" in item && Array.isArray(item.children) ? item.children : []
+      ).find((child) => child.key === key);
+    }
+    if (selectedItem) {
+      onSelectionChange(selectedItem);
+    }
   };
   return /* @__PURE__ */ React49__default.createElement(
     Combobox,
@@ -4049,8 +4056,7 @@ function Autosuggest({
       onSelectionChange: handleSelectionChange,
       isLoading: list2.isLoading,
       ...props
-    },
-    children
+    }
   );
 }
 var Dialog = ({ title, children, ...props }) => {
@@ -4238,6 +4244,8 @@ function Combobox({
   marginTop,
   marginX,
   marginY,
+  marginRight,
+  marginLeft,
   paddingBottom,
   paddingRight,
   paddingTop,
@@ -4267,7 +4275,7 @@ function Combobox({
     },
     state2
   );
-  return /* @__PURE__ */ React49__default.createElement(FormControl, null, /* @__PURE__ */ React49__default.createElement(
+  return /* @__PURE__ */ React49__default.createElement(React49__default.Fragment, null, /* @__PURE__ */ React49__default.createElement(
     Input,
     {
       ...inputProps,
@@ -4280,6 +4288,8 @@ function Combobox({
       borderTopRightRadius,
       marginBottom,
       marginTop,
+      marginRight,
+      marginLeft,
       marginX,
       marginY,
       paddingBottom,
@@ -4929,7 +4939,7 @@ var texts13 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-FDAGWNSZ.mjs'));
+var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-GFQIGSFV.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React49__default.createElement(Radio$1, { ...props, ref });
 });

package/dist/index.d.ts

@@ -654,7 +654,7 @@ type AutosuggestProps<T> = {
      * 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">;
+} & Pick<InputProps, "marginTop" | "marginBottom" | "marginRight" | "marginLeft" | "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.
  *
@@ -685,8 +685,30 @@ type AutosuggestProps<T> = {
  *   );
  * };
  * ```
+ *
+ * The `fetcher` function can be any function that returns an iterable of items. This means that you can use any API library you want, as long as it returns an iterable of items.
+ *
+ * The items need to have a `key` property, which is used to identify the item. The `key` property can be any type, but it needs to be unique for each item.
+ *
+ * ```tsx
+ * [{ key: 'some-key', ...}, { key: 'some-other-key', ... }]
+ * ```
+ *
+ * You can also return a set of nested items, which will be rendered as a sub-list (or section). This is useful if you want to group your items. These items need to have a title prop (for labelling the section), as well as a `children` prop, which in turn will contain an iterable of items:
+ *
+ * ```tsx
+ * [
+ *   {
+ *    title: 'The title of the section',
+ *    children: [{ key: 'some-key', ... }]
+ *   },
+ *   {...}
+ * ]
+ * ```
+ *
+ * The `onSelectionChanged` will return the correct `item` (the one with the matching `key`), even if the item is in a sub-list.
  */
-declare function Autosuggest<T extends object>({ label, fetcher, children, onSelectionChange, ...props }: AutosuggestProps<T>): React__default.JSX.Element;
+declare function Autosuggest<T extends object>({ label, fetcher, onSelectionChange, ...props }: AutosuggestProps<T>): React__default.JSX.Element;
 
 type CardSelectProps = BoxProps & {
     /** The design of the trigger button.
@@ -823,7 +845,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">;
+} & Pick<InputProps, "marginTop" | "marginBottom" | "marginRight" | "marginLeft" | "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.
  *
@@ -847,7 +869,7 @@ type ComboboxProps<T> = AriaComboBoxProps<T> & {
  * </Combobox>
  * ```
  */
-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;
+declare function Combobox<T extends object>({ label, isLoading, leftIcon, rightIcon, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius, marginBottom, marginTop, marginX, marginY, marginRight, marginLeft, 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

@@ -3753,7 +3753,6 @@ var init_AttachedInputs = __esm({
 function Autosuggest({
   label,
   fetcher,
-  children,
   onSelectionChange,
   ...props
 }) {
@@ -3768,7 +3767,15 @@ function Autosuggest({
     if (!onSelectionChange) {
       return;
     }
-    return onSelectionChange(list2.getItem(key));
+    let selectedItem = list2.getItem(key);
+    if (!selectedItem) {
+      selectedItem = list2.items.flatMap(
+        (item) => "children" in item && Array.isArray(item.children) ? item.children : []
+      ).find((child) => child.key === key);
+    }
+    if (selectedItem) {
+      onSelectionChange(selectedItem);
+    }
   };
   return /* @__PURE__ */ React49__namespace.default.createElement(
     Combobox,
@@ -3780,8 +3787,7 @@ function Autosuggest({
       onSelectionChange: handleSelectionChange,
       isLoading: list2.isLoading,
       ...props
-    },
-    children
+    }
   );
 }
 var init_Autosuggest = __esm({
@@ -4753,6 +4759,8 @@ function Combobox({
   marginTop,
   marginX,
   marginY,
+  marginRight,
+  marginLeft,
   paddingBottom,
   paddingRight,
   paddingTop,
@@ -4782,7 +4790,7 @@ function Combobox({
     },
     state2
   );
-  return /* @__PURE__ */ React49__namespace.default.createElement(exports.FormControl, null, /* @__PURE__ */ React49__namespace.default.createElement(
+  return /* @__PURE__ */ React49__namespace.default.createElement(React49__namespace.default.Fragment, null, /* @__PURE__ */ React49__namespace.default.createElement(
     exports.Input,
     {
       ...inputProps,
@@ -4795,6 +4803,8 @@ function Combobox({
       borderTopRightRadius,
       marginBottom,
       marginTop,
+      marginRight,
+      marginLeft,
       marginX,
       marginY,
       paddingBottom,

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-C3DS6BFF.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-Z3I6W6PC.mjs';

package/package.json

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

package/src/input/Autosuggest.tsx

@@ -53,6 +53,8 @@ type AutosuggestProps<T> = {
   InputProps,
   | "marginTop"
   | "marginBottom"
+  | "marginRight"
+  | "marginLeft"
   | "marginY"
   | "marginX"
   | "paddingTop"
@@ -99,11 +101,32 @@ type AutosuggestProps<T> = {
  *   );
  * };
  * ```
+ *
+ * The `fetcher` function can be any function that returns an iterable of items. This means that you can use any API library you want, as long as it returns an iterable of items.
+ *
+ * The items need to have a `key` property, which is used to identify the item. The `key` property can be any type, but it needs to be unique for each item.
+ *
+ * ```tsx
+ * [{ key: 'some-key', ...}, { key: 'some-other-key', ... }]
+ * ```
+ *
+ * You can also return a set of nested items, which will be rendered as a sub-list (or section). This is useful if you want to group your items. These items need to have a title prop (for labelling the section), as well as a `children` prop, which in turn will contain an iterable of items:
+ *
+ * ```tsx
+ * [
+ *   {
+ *    title: 'The title of the section',
+ *    children: [{ key: 'some-key', ... }]
+ *   },
+ *   {...}
+ * ]
+ * ```
+ *
+ * The `onSelectionChanged` will return the correct `item` (the one with the matching `key`), even if the item is in a sub-list.
  */
 export function Autosuggest<T extends object>({
   label,
   fetcher,
-  children,
   onSelectionChange,
   ...props
 }: AutosuggestProps<T>) {
@@ -114,11 +137,26 @@ export function Autosuggest<T extends object>({
       };
     },
   });
+
   const handleSelectionChange = (key: React.Key) => {
     if (!onSelectionChange) {
       return;
     }
-    return onSelectionChange(list.getItem(key));
+
+    let selectedItem = list.getItem(key);
+    if (!selectedItem) {
+      // If the item is not in the list, it might be in a sub-list
+      selectedItem = list.items
+        .flatMap((item) =>
+          "children" in item && Array.isArray(item.children)
+            ? item.children
+            : []
+        )
+        .find((child) => child.key === key);
+    }
+    if (selectedItem) {
+      onSelectionChange(selectedItem);
+    }
   };
   return (
     <Combobox
@@ -129,8 +167,6 @@ export function Autosuggest<T extends object>({
       onSelectionChange={handleSelectionChange}
       isLoading={list.isLoading}
       {...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, InputProps, ListBox } from "..";
+import { ColorSpinner, Input, InputProps, ListBox } from "..";
 import { Popover } from "./Popover";
 
 export type ComboboxProps<T> = AriaComboBoxProps<T> & {
@@ -13,6 +13,8 @@ export type ComboboxProps<T> = AriaComboBoxProps<T> & {
     InputProps,
     | "marginTop"
     | "marginBottom"
+    | "marginRight"
+    | "marginLeft"
     | "marginY"
     | "marginX"
     | "paddingTop"
@@ -65,6 +67,8 @@ export function Combobox<T extends object>({
   marginTop,
   marginX,
   marginY,
+  marginRight,
+  marginLeft,
   paddingBottom,
   paddingRight,
   paddingTop,
@@ -98,7 +102,7 @@ export function Combobox<T extends object>({
   );
 
   return (
-    <FormControl>
+    <>
       <Input
         {...inputProps}
         ref={inputRef}
@@ -110,6 +114,8 @@ export function Combobox<T extends object>({
         borderTopRightRadius={borderTopRightRadius}
         marginBottom={marginBottom}
         marginTop={marginTop}
+        marginRight={marginRight}
+        marginLeft={marginLeft}
         marginX={marginX}
         marginY={marginY}
         paddingBottom={paddingBottom}
@@ -153,6 +159,6 @@ export function Combobox<T extends object>({
           </ListBox>
         </Popover>
       )}
-    </FormControl>
+    </>
   );
 }