@vygruppen/spor-react 2.5.0 → 2.5.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@2.5.0 build
+> @vygruppen/spor-react@2.5.1 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-QEKFPZKV.mjs".
+CJS dist/index.js 895.50 KB
+CJS ⚡️ Build success in 4556ms
 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-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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @vygruppen/spor-react
 
+## 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-JL2OVNXX.mjs}

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

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

@@ -4222,7 +4222,8 @@ function Combobox({
   const state2 = useComboBoxState({
     ...rest,
     defaultFilter: contains2,
-    allowsEmptyCollection: Boolean(emptyContent)
+    allowsEmptyCollection: Boolean(emptyContent),
+    shouldCloseOnBlur: true
   });
   const {
     inputProps: { size: size2, ...inputProps },
@@ -4242,8 +4243,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 +4274,7 @@ function Combobox({
         }
       ) : rightIcon
     }
-  ), state2.isOpen && /* @__PURE__ */ React49__default.createElement(
+  ), state2.isOpen && !isLoading && /* @__PURE__ */ React49__default.createElement(
     Popover3,
     {
       state: state2,
@@ -4900,7 +4901,7 @@ var texts13 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-ZTEYBERS.mjs'));
+var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-JL2OVNXX.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React49__default.createElement(Radio$1, { ...props, ref });
 });
@@ -11883,7 +11884,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 */

package/dist/index.js

@@ -4732,7 +4732,8 @@ function Combobox({
   const state2 = reactStately.useComboBoxState({
     ...rest,
     defaultFilter: contains2,
-    allowsEmptyCollection: Boolean(emptyContent)
+    allowsEmptyCollection: Boolean(emptyContent),
+    shouldCloseOnBlur: true
   });
   const {
     inputProps: { size: size2, ...inputProps },
@@ -4752,8 +4753,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 +4784,7 @@ function Combobox({
         }
       ) : rightIcon
     }
-  ), state2.isOpen && /* @__PURE__ */ React49__namespace.default.createElement(
+  ), state2.isOpen && !isLoading && /* @__PURE__ */ React49__namespace.default.createElement(
     Popover3,
     {
       state: state2,
@@ -19954,7 +19955,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-QEKFPZKV.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "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

@@ -90,6 +90,7 @@ export function Combobox<T extends object>({
     ...rest,
     defaultFilter: contains,
     allowsEmptyCollection: Boolean(emptyContent),
+    shouldCloseOnBlur: true,
   });
 
   const {
@@ -111,8 +112,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,7 +150,7 @@ export function Combobox<T extends object>({
           )
         }
       />
-      {state.isOpen && (
+      {state.isOpen && !isLoading && (
         <Popover
           state={state}
           triggerRef={inputRef}

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),
     },