@vygruppen/spor-react 2.5.0 → 2.5.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@2.5.0 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-7GRTZA6T.mjs".
-CJS dist/index.js 895.46 KB
-CJS ⚡️ Build success in 5694ms
+"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-ZTEYBERS.mjs 351.67 KB
-ESM dist/chunk-7GRTZA6T.mjs             415.76 KB
-ESM ⚡️ Build success in 5707ms
-DTS ⚡️ Build success in 21517ms
-DTS dist/index.d.ts 259.31 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,19 @@
 # @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
+
+- 28a772f4: Datepicker, Timepicker: Changed color to meet contrast minimum requriement
+- f49fa9d2: TimePicker: Fixes typing bug in onChange prop
+- 643afb0d: Combobox: Fix glitchy loading state
+
 ## 2.5.0
 
 ### Minor Changes

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

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

package/dist/{chunk-7GRTZA6T.mjs → chunk-PFCQ55ZF.mjs}

@@ -4219,10 +4219,12 @@ function Combobox({
   const inputRef = useRef(null);
   const listBoxRef = useRef(null);
   const popoverRef = useRef(null);
+  const inputWidth = useInputWidth(inputRef);
   const state2 = useComboBoxState({
     ...rest,
     defaultFilter: contains2,
-    allowsEmptyCollection: Boolean(emptyContent)
+    allowsEmptyCollection: Boolean(emptyContent),
+    shouldCloseOnBlur: true
   });
   const {
     inputProps: { size: size2, ...inputProps },
@@ -4242,8 +4244,8 @@ function Combobox({
       ...inputProps,
       ref: inputRef,
       label,
-      borderBottomLeftRadius: state2.isOpen ? 0 : borderBottomLeftRadius,
-      borderBottomRightRadius: state2.isOpen ? 0 : borderBottomRightRadius,
+      borderBottomLeftRadius: state2.isOpen && !isLoading ? 0 : borderBottomLeftRadius,
+      borderBottomRightRadius: state2.isOpen && !isLoading ? 0 : borderBottomRightRadius,
       borderTopLeftRadius,
       borderTopRightRadius,
       marginBottom,
@@ -4273,7 +4275,7 @@ function Combobox({
         }
       ) : rightIcon
     }
-  ), state2.isOpen && /* @__PURE__ */ React49__default.createElement(
+  ), state2.isOpen && !isLoading && /* @__PURE__ */ React49__default.createElement(
     Popover3,
     {
       state: state2,
@@ -4287,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 });
 });
@@ -4362,6 +4388,7 @@ function ListBox({
   isLoading,
   listBoxRef,
   state: state2,
+  maxWidth,
   ...props
 }) {
   const { listBoxProps } = useListBox(props, state2, listBoxRef);
@@ -4372,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(
@@ -4900,7 +4928,7 @@ var texts13 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-ZTEYBERS.mjs'));
+var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-KO3QKE4X.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React49__default.createElement(Radio$1, { ...props, ref });
 });
@@ -11883,7 +11911,7 @@ var config13 = helpers6.defineMultiStyleConfig({
     },
     dateTimeSegment: {
       color: mode(
-        props.isPlaceholder ? "dimGrey" : props.isEditable ? "darkGrey" : "osloGrey",
+        props.isEditable ? "darkGrey" : "dimGrey",
         props.isPlaceholder ? "whiteAlpha.400" : "white"
       )(props)
     },

package/dist/index.d.ts

@@ -452,7 +452,7 @@ type DateRangePickerProps = AriaDateRangePickerProps<DateValue> & Pick<BoxProps,
  */
 declare function DateRangePicker({ variant, minHeight, startName, endName, ...props }: DateRangePickerProps): React__default.JSX.Element;
 
-type TimePickerProps = Omit<BoxProps, "defaultValue"> & {
+type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & {
     /** The label. Defaults to a localized version of "Time" */
     label?: string;
     /** The name of the form field, if used in a regular form */
@@ -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,10 +4729,12 @@ 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,
-    allowsEmptyCollection: Boolean(emptyContent)
+    allowsEmptyCollection: Boolean(emptyContent),
+    shouldCloseOnBlur: true
   });
   const {
     inputProps: { size: size2, ...inputProps },
@@ -4752,8 +4754,8 @@ function Combobox({
       ...inputProps,
       ref: inputRef,
       label,
-      borderBottomLeftRadius: state2.isOpen ? 0 : borderBottomLeftRadius,
-      borderBottomRightRadius: state2.isOpen ? 0 : borderBottomRightRadius,
+      borderBottomLeftRadius: state2.isOpen && !isLoading ? 0 : borderBottomLeftRadius,
+      borderBottomRightRadius: state2.isOpen && !isLoading ? 0 : borderBottomRightRadius,
       borderTopLeftRadius,
       borderTopRightRadius,
       marginBottom,
@@ -4783,7 +4785,7 @@ function Combobox({
         }
       ) : rightIcon
     }
-  ), state2.isOpen && /* @__PURE__ */ React49__namespace.default.createElement(
+  ), state2.isOpen && !isLoading && /* @__PURE__ */ React49__namespace.default.createElement(
     Popover3,
     {
       state: state2,
@@ -4797,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;
@@ -4892,6 +4919,7 @@ function ListBox({
   isLoading,
   listBoxRef,
   state: state2,
+  maxWidth,
   ...props
 }) {
   const { listBoxProps } = reactAria.useListBox(props, state2, listBoxRef);
@@ -4902,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(
@@ -19954,7 +19983,7 @@ var init_datepicker2 = __esm({
         },
         dateTimeSegment: {
           color: themeTools.mode(
-            props.isPlaceholder ? "dimGrey" : props.isEditable ? "darkGrey" : "osloGrey",
+            props.isEditable ? "darkGrey" : "dimGrey",
             props.isPlaceholder ? "whiteAlpha.400" : "white"
           )(props)
         },

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

package/src/datepicker/TimePicker.tsx

@@ -12,7 +12,7 @@ import { StyledField } from "./StyledField";
 import { TimeField } from "./TimeField";
 import { getCurrentTime, useCurrentLocale } from "./utils";
 
-type TimePickerProps = Omit<BoxProps, "defaultValue"> & {
+type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & {
   /** The label. Defaults to a localized version of "Time" */
   label?: string;
   /** The name of the form field, if used in a regular form */

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,14 +82,17 @@ 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,
     allowsEmptyCollection: Boolean(emptyContent),
+    shouldCloseOnBlur: true,
   });
 
   const {
@@ -111,8 +114,12 @@ export function Combobox<T extends object>({
         {...inputProps}
         ref={inputRef}
         label={label}
-        borderBottomLeftRadius={state.isOpen ? 0 : borderBottomLeftRadius}
-        borderBottomRightRadius={state.isOpen ? 0 : borderBottomRightRadius}
+        borderBottomLeftRadius={
+          state.isOpen && !isLoading ? 0 : borderBottomLeftRadius
+        }
+        borderBottomRightRadius={
+          state.isOpen && !isLoading ? 0 : borderBottomRightRadius
+        }
         borderTopLeftRadius={borderTopLeftRadius}
         borderTopRightRadius={borderTopRightRadius}
         marginBottom={marginBottom}
@@ -145,10 +152,10 @@ export function Combobox<T extends object>({
           )
         }
       />
-      {state.isOpen && (
+      {state.isOpen && !isLoading && (
         <Popover
           state={state}
-          triggerRef={inputRef}
+          triggerRef={inputRef as any}
           ref={popoverRef}
           placement="bottom start"
         >
@@ -157,6 +164,7 @@ export function Combobox<T extends object>({
             state={state}
             listBoxRef={listBoxRef}
             emptyContent={emptyContent}
+            maxWidth={inputWidth}
           >
             {rest.children}
           </ListBox>
@@ -165,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) =>

package/src/theme/components/datepicker.ts

@@ -73,7 +73,7 @@ const config = helpers.defineMultiStyleConfig({
     },
     dateTimeSegment: {
       color: mode(
-        props.isPlaceholder ? "dimGrey" : props.isEditable ? "darkGrey" : "osloGrey", 
+        props.isEditable ? "darkGrey" : "dimGrey",
         props.isPlaceholder ? "whiteAlpha.400" : "white"
       )(props),
     },