@vygruppen/spor-react 5.1.0 → 5.2.0

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, 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, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, 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, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, defineStyleConfig, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-VXZX2ZXT.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, 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, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, 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, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, defineStyleConfig, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-HOS74XL2.mjs';

package/package.json

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

package/src/datepicker/DatePicker.tsx

@@ -25,12 +25,13 @@ import { DateField } from "./DateField";
 import { StyledField } from "./StyledField";
 import { useCurrentLocale } from "./utils";
 
-type DatePickerProps = AriaDatePickerProps<DateValue> &
+type DatePickerProps = Omit<AriaDatePickerProps<DateValue>, "onChange"> &
   Pick<BoxProps, "minHeight" | "width"> & {
     variant: ResponsiveValue<"base" | "floating" | "ghost">;
     name?: string;
     showYearNavigation?: boolean;
     withPortal?: boolean;
+    onChange?: (value: DateValue | null) => void;
   };
 
 /**

package/src/datepicker/DateRangePicker.tsx

@@ -29,7 +29,10 @@ import { RangeCalendar } from "./RangeCalendar";
 import { StyledField } from "./StyledField";
 import { useCurrentLocale } from "./utils";
 
-type DateRangePickerProps = AriaDateRangePickerProps<DateValue> &
+type DateRangePickerProps = Omit<
+  AriaDateRangePickerProps<DateValue>,
+  "onChange"
+> &
   Pick<BoxProps, "minHeight"> & {
     startLabel?: string;
     startName?: string;
@@ -37,6 +40,10 @@ type DateRangePickerProps = AriaDateRangePickerProps<DateValue> &
     endName?: string;
     variant: ResponsiveValue<"base" | "floating" | "ghost">;
     withPortal?: boolean;
+    onChange?: (dates: {
+      start: DateValue | null;
+      end: DateValue | null;
+    }) => void;
   };
 /**
  * A date range picker component.

package/src/datepicker/TimePicker.tsx

@@ -31,7 +31,7 @@ type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & {
    **/
   defaultValue?: TimeValue | null;
   /** Callback for when the time changes */
-  onChange?: (value: TimeValue) => void;
+  onChange?: (value: TimeValue | null) => void;
   /** The maxiumum number of minutes to move when the step buttons are used.
    *
    * Defaults to 30 minutes.

package/src/input/NumericStepper.tsx

@@ -91,7 +91,7 @@ export function NumericStepper({
   return (
     <Flex alignItems="center" {...boxProps}>
       <VerySmallButton
-        icon={<SubtractIcon color="white" stepLabel={clampedStepSize} />}
+        icon={<SubtractIcon stepLabel={clampedStepSize} />}
         aria-label={t(texts.decrementButtonAriaLabel(clampedStepSize))}
         onClick={() => onChange(Math.max(value - clampedStepSize, minValue))}
         visibility={value <= minValue ? "hidden" : "visible"}
@@ -164,7 +164,7 @@ export function NumericStepper({
         </chakra.text>
       )}
       <VerySmallButton
-        icon={<AddIcon color="white" stepLabel={clampedStepSize} />}
+        icon={<AddIcon stepLabel={clampedStepSize} />}
         aria-label={t(texts.incrementButtonAriaLabel(clampedStepSize))}
         onClick={() => onChange(Math.min(value + clampedStepSize, maxValue))}
         visibility={value >= maxValue ? "hidden" : "visible"}

package/src/stepper/StepperStep.tsx

@@ -35,8 +35,8 @@ export const StepperStep = ({
           state === "active"
             ? "primary"
             : state === "completed"
-            ? "tertiary"
-            : "ghost"
+              ? "tertiary"
+              : "ghost"
         }
         {...adjustedProps}
         onClick={() => onClick(stepNumber)}

package/src/theme/components/listbox.ts

@@ -18,7 +18,7 @@ const config = helpers.defineMultiStyleConfig({
     container: {
       // avoiding extra div by blending a transparent color into darkGrey for dark mode
       backgroundColor: mode(
-        "mint",
+        "white",
         `color-mix(in srgb, ${colors.darkGrey}, ${colors.white} 10%)`,
       )(props),
       boxShadow: "sm",