@vygruppen/spor-react 2.4.1 → 2.4.3

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@2.4.1 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-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-Z3I6W6PC.mjs".
+CJS dist/index.js 896.27 KB
+CJS ⚡️ Build success in 5484ms
 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-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,17 @@
 # @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
+
+- a5f843bc: Autosuggest: Return the entire item selected, not just the list
+
 ## 2.4.1
 
 ### Patch Changes

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

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

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

@@ -4022,9 +4022,8 @@ var AttachedInputs = ({
 function Autosuggest({
   label,
   fetcher,
-  children,
   onSelectionChange,
-  ...boxProps
+  ...props
 }) {
   const list2 = useAsyncList({
     async load({ filterText }) {
@@ -4033,6 +4032,20 @@ function Autosuggest({
       };
     }
   });
+  const handleSelectionChange = (key) => {
+    if (!onSelectionChange) {
+      return;
+    }
+    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,
     {
@@ -4040,11 +4053,10 @@ function Autosuggest({
       items: list2.items,
       inputValue: list2.filterText,
       onInputChange: list2.setFilterText,
+      onSelectionChange: handleSelectionChange,
       isLoading: list2.isLoading,
-      onSelectionChange,
-      ...boxProps
-    },
-    children
+      ...props
+    }
   );
 }
 var Dialog = ({ title, children, ...props }) => {
@@ -4232,6 +4244,8 @@ function Combobox({
   marginTop,
   marginX,
   marginY,
+  marginRight,
+  marginLeft,
   paddingBottom,
   paddingRight,
   paddingTop,
@@ -4261,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,
@@ -4274,6 +4288,8 @@ function Combobox({
       borderTopRightRadius,
       marginBottom,
       marginTop,
+      marginRight,
+      marginLeft,
       marginX,
       marginY,
       paddingBottom,
@@ -4923,7 +4939,7 @@ var texts13 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-MNHFBDDO.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

@@ -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"];
-} & Pick<InputProps, "marginTop" | "marginBottom" | "marginY" | "marginX" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingY" | "paddingX" | "leftIcon" | "rightIcon" | "borderTopRightRadius" | "borderTopLeftRadius" | "borderBottomRightRadius" | "borderBottomLeftRadius" | "onFocus">;
+    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" | "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.
  *
@@ -678,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, ...boxProps }: 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.
@@ -816,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.
  *
@@ -840,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,9 +3753,8 @@ var init_AttachedInputs = __esm({
 function Autosuggest({
   label,
   fetcher,
-  children,
   onSelectionChange,
-  ...boxProps
+  ...props
 }) {
   const list2 = reactStately.useAsyncList({
     async load({ filterText }) {
@@ -3764,6 +3763,20 @@ function Autosuggest({
       };
     }
   });
+  const handleSelectionChange = (key) => {
+    if (!onSelectionChange) {
+      return;
+    }
+    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,
     {
@@ -3771,11 +3784,10 @@ function Autosuggest({
       items: list2.items,
       inputValue: list2.filterText,
       onInputChange: list2.setFilterText,
+      onSelectionChange: handleSelectionChange,
       isLoading: list2.isLoading,
-      onSelectionChange,
-      ...boxProps
-    },
-    children
+      ...props
+    }
   );
 }
 var init_Autosuggest = __esm({
@@ -4747,6 +4759,8 @@ function Combobox({
   marginTop,
   marginX,
   marginY,
+  marginRight,
+  marginLeft,
   paddingBottom,
   paddingRight,
   paddingTop,
@@ -4776,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,
@@ -4789,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-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-Z3I6W6PC.mjs';

package/package.json

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

package/src/input/Autosuggest.tsx

@@ -39,13 +39,22 @@ 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"
+  | "marginRight"
+  | "marginLeft"
   | "marginY"
   | "marginX"
   | "paddingTop"
@@ -92,13 +101,34 @@ 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,
-  ...boxProps
+  ...props
 }: AutosuggestProps<T>) {
   const list = useAsyncList<T>({
     async load({ filterText }) {
@@ -107,17 +137,36 @@ export function Autosuggest<T extends object>({
       };
     },
   });
+
+  const handleSelectionChange = (key: React.Key) => {
+    if (!onSelectionChange) {
+      return;
+    }
+
+    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
       label={label}
       items={list.items}
       inputValue={list.filterText}
       onInputChange={list.setFilterText}
+      onSelectionChange={handleSelectionChange}
       isLoading={list.isLoading}
-      onSelectionChange={onSelectionChange}
-      {...boxProps}
-    >
-      {children}
-    </Combobox>
+      {...props}
+    />
   );
 }

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>
+    </>
   );
 }