@vygruppen/spor-react 4.1.0 → 5.0.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, 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, 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, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-FPWAXD72.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, 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, 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, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-UOZQ4EDI.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -28,8 +28,8 @@
     "awesome-phonenumber": "^5.10.0",
     "framer-motion": "^9.1.7",
     "lottie-react": "^2.3.1",
-    "react-aria": "^3.27.0",
-    "react-stately": "^3.25.0",
+    "react-aria": "^3.30.0",
+    "react-stately": "^3.28.0",
     "react-swipeable": "^7.0.0"
   },
   "devDependencies": {

package/src/button/Button.tsx

@@ -28,7 +28,7 @@ export type ButtonProps = Exclude<
     | "control"
     | "primary"
     | "secondary"
-    | "additional"
+    | "tertiary"
     | "ghost"
     | "floating";
 };
@@ -40,7 +40,7 @@ export type ButtonProps = Exclude<
  * - `control`: This button is used for ticket controls only.
  * - `primary`: This is our main button. It's used for the main actions in a view, like a call to action. There should only be a single primary button in each view.
  * - `secondary`: Used for secondary actions in a view, and when you need to make several actions available at the same time.
- * - `additional`: Used for additional choices, like a less important secondary action.
+ * - `tertiary`: Used for additional choices, like a less important secondary action.
  * - `ghost`: Used inside other interactive elements, like date pickers and input fields.
  * - `floating`: Used for floating actions, like a menu button in a menu.
  *

package/src/button/IconButton.tsx

@@ -12,7 +12,7 @@ export type IconButtonProps = Omit<ChakraIconButtonProps, "variant"> & {
     | "control"
     | "primary"
     | "secondary"
-    | "additional"
+    | "tertiary"
     | "ghost"
     | "floating";
 };
@@ -26,7 +26,7 @@ export type IconButtonProps = Omit<ChakraIconButtonProps, "variant"> & {
  * - `control`: This button is used for ticket controls only.
  * - `primary`: This is our main button. It's used for the main actions in a view, like a call to action. There should only be a single primary button in each view.
  * - `secondary`: Used for secondary actions in a view, and when you need to make several actions available at the same time.
- * - `additional`: Used for additional choices, like a less important secondary action.
+ * - `tertiary`: Used for additional choices, like a less important secondary action.
  * - `ghost`: Used inside other interactive elements, like date pickers and input fields.
  * - `floating`: Used for floating actions, like a menu button in a menu.
  *

package/src/datepicker/Calendar.tsx

@@ -1,15 +1,15 @@
 import { Box, ResponsiveValue } from "@chakra-ui/react";
-import { createCalendar, DateValue } from "@internationalized/date";
-import { useCalendarState } from "@react-stately/calendar";
+import { DateValue, createCalendar } from "@internationalized/date";
 import React from "react";
 import {
   CalendarProps as ReactAriaCalendarProps,
   useCalendar,
 } from "react-aria";
+import { useCalendarState } from "react-stately";
+import { createTexts, useTranslation } from "../i18n";
 import { CalendarGrid } from "./CalendarGrid";
 import { CalendarHeader } from "./CalendarHeader";
 import { useCurrentLocale } from "./utils";
-import { createTexts, useTranslation } from "../i18n";
 
 type CalendarProps = ReactAriaCalendarProps<DateValue> & {
   showYearNavigation?: boolean;

package/src/datepicker/DateField.tsx

@@ -1,9 +1,9 @@
 import { Box, Flex, FormLabel, useMultiStyleConfig } from "@chakra-ui/react";
 import { DateValue, GregorianCalendar } from "@internationalized/date";
-import { useDateFieldState } from "@react-stately/datepicker";
 import { DOMAttributes, FocusableElement } from "@react-types/shared";
 import React, { RefObject, forwardRef, useRef } from "react";
 import { AriaDateFieldProps, useDateField } from "react-aria";
+import { useDateFieldState } from "react-stately";
 import { DateTimeSegment } from "./DateTimeSegment";
 import { useCurrentLocale } from "./utils";
 

package/src/datepicker/DatePicker.tsx

@@ -15,9 +15,9 @@ import {
   useMultiStyleConfig,
 } from "@chakra-ui/react";
 import { DateValue } from "@internationalized/date";
-import { useDatePickerState } from "@react-stately/datepicker";
-import React, { forwardRef, useRef } from "react";
+import React, { ReactNode, forwardRef, useRef } from "react";
 import { AriaDatePickerProps, I18nProvider, useDatePicker } from "react-aria";
+import { useDatePickerState } from "react-stately";
 import { FormErrorMessage } from "..";
 import { Calendar } from "./Calendar";
 import { CalendarTriggerButton } from "./CalendarTriggerButton";
@@ -141,7 +141,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
               </PopoverAnchor>
             </InputGroup>
             <FormErrorMessage {...errorMessageProps}>
-              {errorMessage}
+              {errorMessage as ReactNode}
             </FormErrorMessage>
             {state.isOpen && !props.isDisabled && withPortal && (
               <Portal>{popoverContent}</Portal>

package/src/datepicker/DateRangePicker.tsx

@@ -16,13 +16,13 @@ import {
   useMultiStyleConfig,
 } from "@chakra-ui/react";
 import { DateValue } from "@internationalized/date";
-import { useDateRangePickerState } from "@react-stately/datepicker";
 import React, { useRef } from "react";
 import {
   AriaDateRangePickerProps,
   I18nProvider,
   useDateRangePicker,
 } from "react-aria";
+import { useDateRangePickerState } from "react-stately";
 import { CalendarTriggerButton } from "./CalendarTriggerButton";
 import { DateField } from "./DateField";
 import { RangeCalendar } from "./RangeCalendar";

package/src/datepicker/RangeCalendar.tsx

@@ -1,11 +1,11 @@
-import { Box, ResponsiveValue, useMultiStyleConfig } from "@chakra-ui/react";
-import { createCalendar, DateValue } from "@internationalized/date";
-import { useRangeCalendarState } from "@react-stately/calendar";
+import { Box, ResponsiveValue } from "@chakra-ui/react";
+import { DateValue, createCalendar } from "@internationalized/date";
 import React, { useRef } from "react";
 import {
   RangeCalendarProps as ReactAriaRangeCalendarProps,
   useRangeCalendar,
 } from "react-aria";
+import { useRangeCalendarState } from "react-stately";
 import { CalendarGrid } from "./CalendarGrid";
 import { CalendarHeader } from "./CalendarHeader";
 import { useCurrentLocale } from "./utils";

package/src/popover/PopoverWizardBody.tsx

@@ -64,7 +64,7 @@ const NextStepButton = ({ isLastStep, onNext }: NextStepButtonProps) => {
   const { t } = useTranslation();
   return (
     <Button
-      variant="additional"
+      variant="tertiary"
       size="sm"
       color="white"
       leftIcon={isLastStep ? undefined : <ArrowRightFill18Icon />}

package/src/stepper/StepperStep.tsx

@@ -35,7 +35,7 @@ export const StepperStep = ({
           state === "active"
             ? "primary"
             : state === "completed"
-            ? "additional"
+            ? "tertiary"
             : "ghost"
         }
         {...adjustedProps}

package/src/theme/components/button.ts

@@ -34,7 +34,7 @@ const config = defineStyleConfig({
     primary: (props) => ({
       // FIXME: Update to use a global defined background color for darkMode whenever it is available.
       // hardcoded background color as alpha-"hack" below is not feasible for dark mode with solid background color
-      backgroundColor: mode("primaryGreen", "coralGreen")(props),
+      backgroundColor: mode("pine", "coralGreen")(props),
       color: mode("white", "darkTeal")(props),
       ...focusVisible({
         focus: {

package/src/toast/ActionToast.tsx

@@ -20,7 +20,7 @@ export const ActionToast = ({
       <Box marginRight={2} flexGrow="1">
         {children}
       </Box>
-      <Button variant="additional" size="sm" onClick={onClick}>
+      <Button variant="tertiary" size="sm" onClick={onClick}>
         {buttonText}
       </Button>
     </BaseToast>