@vygruppen/spor-react 2.5.1 → 2.5.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@2.5.1 build
+> @vygruppen/spor-react@2.5.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-QEKFPZKV.mjs".
-CJS dist/index.js 895.50 KB
-CJS ⚡️ Build success in 4556ms
+"toTime" is imported from external module "@internationalized/date" but never used in "dist/chunk-PFCQ55ZF.mjs".
+CJS dist/index.js 896.29 KB
+CJS ⚡️ Build success in 6499ms
 ESM dist/index.mjs                      2.06 KB
-ESM dist/CountryCodeSelect-JL2OVNXX.mjs 351.67 KB
-ESM dist/chunk-QEKFPZKV.mjs             415.80 KB
-ESM ⚡️ Build success in 4557ms
-DTS ⚡️ Build success in 17324ms
-DTS dist/index.d.ts 259.33 KB
+ESM dist/CountryCodeSelect-KO3QKE4X.mjs 351.67 KB
+ESM dist/chunk-PFCQ55ZF.mjs             416.47 KB
+ESM ⚡️ Build success in 6500ms
+DTS ⚡️ Build success in 24524ms
+DTS dist/index.d.ts 259.37 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @vygruppen/spor-react
 
+## 2.5.2
+
+### Patch Changes
+
+- a884fea5: Combobox: Make the width of the attached listbox never outgrow its input field
+
 ## 2.5.1
 
 ### Patch Changes

package/dist/{CountryCodeSelect-JL2OVNXX.mjs → CountryCodeSelect-KO3QKE4X.mjs}

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

package/dist/{chunk-QEKFPZKV.mjs → chunk-PFCQ55ZF.mjs}

@@ -4219,6 +4219,7 @@ function Combobox({
   const inputRef = useRef(null);
   const listBoxRef = useRef(null);
   const popoverRef = useRef(null);
+  const inputWidth = useInputWidth(inputRef);
   const state2 = useComboBoxState({
     ...rest,
     defaultFilter: contains2,
@@ -4288,12 +4289,36 @@ function Combobox({
         ...listBoxProps,
         state: state2,
         listBoxRef,
-        emptyContent
+        emptyContent,
+        maxWidth: inputWidth
       },
       rest.children
     )
   ));
 }
+var useInputWidth = (inputRef) => {
+  const [inputWidth, setInputWidth] = useState("auto");
+  useEffect(() => {
+    const onResize = debounce(() => {
+      if (inputRef.current) {
+        setInputWidth(`${inputRef.current.offsetWidth}px`);
+      }
+    }, 67);
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+  return inputWidth;
+};
+var debounce = (fn, ms = 100) => {
+  let timer;
+  return () => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      timer = null;
+      fn();
+    }, ms);
+  };
+};
 var FormControl = forwardRef((props, ref) => {
   return /* @__PURE__ */ React49__default.createElement(FormControl$1, { ...props, ref });
 });
@@ -4363,6 +4388,7 @@ function ListBox({
   isLoading,
   listBoxRef,
   state: state2,
+  maxWidth,
   ...props
 }) {
   const { listBoxProps } = useListBox(props, state2, listBoxRef);
@@ -4373,7 +4399,8 @@ function ListBox({
       ...listBoxProps,
       ref: listBoxRef,
       sx: styles2.container,
-      "aria-busy": isLoading
+      "aria-busy": isLoading,
+      maxWidth
     },
     state2.collection.size === 0 && props.emptyContent,
     Array.from(state2.collection).map(
@@ -4901,7 +4928,7 @@ var texts13 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-JL2OVNXX.mjs'));
+var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-KO3QKE4X.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React49__default.createElement(Radio$1, { ...props, ref });
 });

package/dist/index.d.ts

@@ -1013,6 +1013,7 @@ type ListBoxProps<T> = AriaListBoxProps<T> & Omit<BoxProps, "filter" | "autoFocu
     state: ListState<T> | SelectState<T>;
     /** UI to render if the collection is empty */
     emptyContent?: React__default.ReactNode;
+    maxWidth?: BoxProps["maxWidth"];
 };
 /**
  * A component that renders a list box with selectable options.
@@ -1048,7 +1049,7 @@ type ListBoxProps<T> = AriaListBoxProps<T> & Omit<BoxProps, "filter" | "autoFocu
  * );
  * ```
  */
-declare function ListBox<T extends object>({ isLoading, listBoxRef, state, ...props }: ListBoxProps<T>): React__default.JSX.Element;
+declare function ListBox<T extends object>({ isLoading, listBoxRef, state, maxWidth, ...props }: ListBoxProps<T>): React__default.JSX.Element;
 /**
  * Renders a label for a listbox item.
  *

package/dist/index.js

@@ -4729,6 +4729,7 @@ function Combobox({
   const inputRef = React49.useRef(null);
   const listBoxRef = React49.useRef(null);
   const popoverRef = React49.useRef(null);
+  const inputWidth = useInputWidth(inputRef);
   const state2 = reactStately.useComboBoxState({
     ...rest,
     defaultFilter: contains2,
@@ -4798,16 +4799,41 @@ function Combobox({
         ...listBoxProps,
         state: state2,
         listBoxRef,
-        emptyContent
+        emptyContent,
+        maxWidth: inputWidth
       },
       rest.children
     )
   ));
 }
+var useInputWidth, debounce;
 var init_Combobox = __esm({
   "src/input/Combobox.tsx"() {
     init_src();
     init_Popover();
+    useInputWidth = (inputRef) => {
+      const [inputWidth, setInputWidth] = React49.useState("auto");
+      React49.useEffect(() => {
+        const onResize = debounce(() => {
+          if (inputRef.current) {
+            setInputWidth(`${inputRef.current.offsetWidth}px`);
+          }
+        }, 67);
+        window.addEventListener("resize", onResize);
+        return () => window.removeEventListener("resize", onResize);
+      }, []);
+      return inputWidth;
+    };
+    debounce = (fn, ms = 100) => {
+      let timer;
+      return () => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+          timer = null;
+          fn();
+        }, ms);
+      };
+    };
   }
 });
 exports.FormControl = void 0;
@@ -4893,6 +4919,7 @@ function ListBox({
   isLoading,
   listBoxRef,
   state: state2,
+  maxWidth,
   ...props
 }) {
   const { listBoxProps } = reactAria.useListBox(props, state2, listBoxRef);
@@ -4903,7 +4930,8 @@ function ListBox({
       ...listBoxProps,
       ref: listBoxRef,
       sx: styles2.container,
-      "aria-busy": isLoading
+      "aria-busy": isLoading,
+      maxWidth
     },
     state2.collection.size === 0 && props.emptyContent,
     Array.from(state2.collection).map(

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, 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-QEKFPZKV.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, 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-PFCQ55ZF.mjs';

package/package.json

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

package/src/input/Combobox.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { AriaComboBoxProps, useComboBox, useFilter } from "react-aria";
 import { useComboBoxState } from "react-stately";
 import { ColorSpinner, Input, InputProps, ListBox } from "..";
@@ -82,10 +82,12 @@ export function Combobox<T extends object>({
 }: ComboboxProps<T>) {
   const { contains } = useFilter({ sensitivity: "base" });
 
-  const inputRef = useRef(null);
+  const inputRef = useRef<HTMLInputElement>(null);
   const listBoxRef = useRef(null);
   const popoverRef = useRef(null);
 
+  const inputWidth = useInputWidth(inputRef);
+
   const state = useComboBoxState({
     ...rest,
     defaultFilter: contains,
@@ -153,7 +155,7 @@ export function Combobox<T extends object>({
       {state.isOpen && !isLoading && (
         <Popover
           state={state}
-          triggerRef={inputRef}
+          triggerRef={inputRef as any}
           ref={popoverRef}
           placement="bottom start"
         >
@@ -162,6 +164,7 @@ export function Combobox<T extends object>({
             state={state}
             listBoxRef={listBoxRef}
             emptyContent={emptyContent}
+            maxWidth={inputWidth}
           >
             {rest.children}
           </ListBox>
@@ -170,3 +173,28 @@ export function Combobox<T extends object>({
     </>
   );
 }
+
+const useInputWidth = (inputRef: React.RefObject<HTMLInputElement>) => {
+  const [inputWidth, setInputWidth] = useState("auto");
+  useEffect(() => {
+    const onResize = debounce(() => {
+      if (inputRef.current) {
+        setInputWidth(`${inputRef.current.offsetWidth}px`);
+      }
+    }, 67);
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+  return inputWidth;
+};
+
+const debounce = (fn: () => void, ms = 100) => {
+  let timer: any;
+  return () => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      timer = null;
+      fn();
+    }, ms);
+  };
+};

package/src/input/ListBox.tsx

@@ -30,6 +30,7 @@ type ListBoxProps<T> = AriaListBoxProps<T> &
     state: ListState<T> | SelectState<T>;
     /** UI to render if the collection is empty */
     emptyContent?: React.ReactNode;
+    maxWidth?: BoxProps["maxWidth"];
   };
 
 /**
@@ -70,6 +71,7 @@ export function ListBox<T extends object>({
   isLoading,
   listBoxRef,
   state,
+  maxWidth,
   ...props
 }: ListBoxProps<T>) {
   const { listBoxProps } = useListBox(props, state, listBoxRef);
@@ -81,6 +83,7 @@ export function ListBox<T extends object>({
       ref={listBoxRef}
       sx={styles.container}
       aria-busy={isLoading}
+      maxWidth={maxWidth}
     >
       {state.collection.size === 0 && props.emptyContent}
       {Array.from(state.collection).map((item) =>