@vygruppen/spor-react 3.1.0 → 3.1.1

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.1",
   "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>
     );
   }