@vygruppen/spor-react 3.1.0 → 3.1.2

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, 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-V6MFUVYF.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, 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-GIRK7GTN.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -27,7 +27,7 @@
     "@vygruppen/spor-loader": "*",
     "framer-motion": ">6.0.0",
     "lottie-react": "^2.3.1",
-    "react-aria": "^3.23.0",
+    "react-aria": "^3.27.0",
     "react-stately": "^3.20.0",
     "react-swipeable": "^7.0.0"
   },

package/src/accordion/Expandable.tsx

@@ -12,7 +12,7 @@ import { Accordion, AccordionProps } from "./Accordion";
 import { useAccordionContext } from "./AccordionContext";
 
 type HeadingLevel = "h2" | "h3" | "h4" | "h5" | "h6";
-type ExpandableProps = AccordionProps & {
+type ExpandableProps = Omit<AccordionProps, "title"> & {
   /** The hidden content */
   children: React.ReactNode;
   /** The title that's shown inside the toggle button */
@@ -62,7 +62,7 @@ export const Expandable = ({
   );
 };
 
-export type ExpandableItemProps = AccordionItemProps & {
+export type ExpandableItemProps = Omit<AccordionItemProps, "title"> & {
   /** The hidden content */
   children: React.ReactNode;
   /** The title that's shown inside the toggle button */

package/src/alert/ExpandableAlert.tsx

@@ -42,9 +42,10 @@ export const ExpandableAlert = ({
   headingLevel = "h3",
   defaultOpen = false,
   onToggle = () => {},
+  ...boxProps
 }: ExpandableAlertProps) => {
   return (
-    <BaseAlert variant={variant} paddingX={0} paddingY={0} padding={0}>
+    <BaseAlert variant={variant} paddingX={0} paddingY={0} padding={0} {...boxProps}>
       <Accordion
         onChange={(expandedIndex) => onToggle(expandedIndex === 0)}
         defaultIndex={defaultOpen ? 0 : -1}

package/src/datepicker/DateField.tsx

@@ -46,11 +46,13 @@ export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
             {...props.labelProps}
             {...labelProps}
             sx={styles.inputLabel}
+            position="absolute"
+            paddingTop="2px"
           >
             {props.label}
           </FormLabel>
         )}
-        <Flex {...fieldProps}>
+        <Flex {...fieldProps} paddingTop="3" paddingBottom="0.5">
           {state.segments.map((segment, i) => (
             <DateTimeSegment
               ref={i === 0 ? ref : undefined}

package/src/datepicker/DateTimeSegment.tsx

@@ -2,6 +2,7 @@ import { Box, useMultiStyleConfig } from "@chakra-ui/react";
 import React, { RefObject, forwardRef, useRef } from "react";
 import { useDateSegment } from "react-aria";
 import { DateFieldState, DateSegment } from "react-stately";
+import { colors } from "../theme/foundations";
 
 type DateTimeSegmentProps = {
   segment: DateSegment;
@@ -29,7 +30,6 @@ export const DateTimeSegment = forwardRef<HTMLDivElement, DateTimeSegmentProps>(
       isPlaceholder: segment.isPlaceholder,
       isEditable: segment.isEditable,
     });
-
     return (
       <Box
         {...segmentProps}
@@ -38,6 +38,7 @@ export const DateTimeSegment = forwardRef<HTMLDivElement, DateTimeSegmentProps>(
           ...segmentProps.style,
           fontVariantNumeric: "tabular-nums",
           boxSizing: "content-box",
+          color: colors.darkGrey,
         }}
         paddingX="1px"
         textAlign="end"

package/src/datepicker/TimeField.tsx

@@ -29,10 +29,12 @@ export const TimeField = ({ state, ...props }: TimeFieldProps) => {
         marginBottom={0}
         fontSize="mobile.xs"
         cursor="text"
+        position="absolute"
+        paddingTop="2px"
       >
         {props.label}
       </FormLabel>
-      <Flex {...fieldProps} ref={ref}>
+      <Flex {...fieldProps} ref={ref} paddingTop="3" paddingBottom="0.5">
         {state.segments.map((segment) => (
           <DateTimeSegment key={segment.type} segment={segment} state={state} />
         ))}

package/src/datepicker/TimePicker.tsx

@@ -2,8 +2,8 @@ import { BoxProps, useFormControlContext } from "@chakra-ui/react";
 import { CalendarDateTime } from "@internationalized/date";
 import { TimeValue } from "@react-types/datepicker";
 import {
-  DropdownLeftFill24Icon,
-  DropdownRightFill24Icon,
+  DropdownLeftFill18Icon,
+  DropdownRightFill18Icon,
 } from "@vygruppen/spor-icon-react";
 import React from "react";
 import { useTimeFieldState } from "react-stately";
@@ -140,7 +140,7 @@ export const TimePicker = ({
         borderRadius="xs"
         aria-label={backwardsLabel}
         title={backwardsLabel}
-        icon={<DropdownLeftFill24Icon />}
+        icon={<DropdownLeftFill18Icon />}
         onClick={handleBackwardsClick}
         isDisabled={isDisabled}
         style={isDisabled ? { backgroundColor: "transparent" } : {}}
@@ -152,7 +152,7 @@ export const TimePicker = ({
         borderRadius="xs"
         aria-label={forwardsLabel}
         title={forwardsLabel}
-        icon={<DropdownRightFill24Icon />}
+        icon={<DropdownRightFill18Icon />}
         onClick={handleForwardClick}
         isDisabled={isDisabled}
         style={isDisabled ? { backgroundColor: "transparent" } : {}}

package/src/input/Combobox.tsx

@@ -113,6 +113,7 @@ export function Combobox<T extends object>({
     <>
       <Input
         {...inputProps}
+        aria-haspopup="listbox"
         ref={inputRef}
         label={label}
         borderBottomLeftRadius={

package/src/input/Popover.tsx

@@ -81,18 +81,26 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       state
     );
 
+    const popoverBox = (
+      <Box
+        {...popoverProps}
+        ref={popoverRef}
+        minWidth={triggerRef.current?.clientWidth ?? "auto"}
+        marginLeft={-2}
+      >
+        <DismissButton onDismiss={state.close} />
+        {children}
+        <DismissButton onDismiss={state.close} />
+      </Box>
+    );
+
+    if (isNonModal) {
+      return popoverBox;
+    }
     return (
       <Overlay>
         {hasBackdrop && <Box {...underlayProps} position="fixed" inset="0" />}
-        <Box
-          {...popoverProps}
-          ref={popoverRef}
-          minWidth={triggerRef.current?.clientWidth ?? "auto"}
-        >
-          <DismissButton onDismiss={state.close} />
-          {children}
-          <DismissButton onDismiss={state.close} />
-        </Box>
+        {popoverBox}
       </Overlay>
     );
   }

package/src/typography/Heading.tsx

@@ -1,14 +1,12 @@
 import { HeadingProps as ChakraHeadingProps, Text } from "@chakra-ui/react";
-import type tokens from "@vygruppen/spor-design-tokens";
 import React from "react";
-
-type TextStyles = keyof typeof tokens.font.style;
+import type { textStyles } from "../theme/foundations";
 
 export type HeadingProps = Omit<ChakraHeadingProps, "textStyle" | "as"> & {
   /** The heading level, e.g. h1, h2, h3... **/
   as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-  /** The size and style of the heading */
-  variant?: TextStyles;
+  /** The size and style of the heading. Defaults to xl-display */
+  variant?: keyof typeof textStyles;
 };
 /**
  * Create your own fancy headings with this component.