@vygruppen/spor-react 3.0.4 → 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-ETCK74GR.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.0.4",
+  "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

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { AriaComboBoxProps, useComboBox, useFilter } from "react-aria";
 import { useComboBoxState } from "react-stately";
-import { ColorSpinner, Input, InputProps, ListBox, useOutsideClick } from "..";
+import { ColorSpinner, Input, InputProps, ListBox } from "..";
 import { Popover } from "./Popover";
 
 export type ComboboxProps<T> = AriaComboBoxProps<T> & {
@@ -96,12 +96,6 @@ export function Combobox<T extends object>({
     label,
   });
 
-  useOutsideClick({
-    ref: listBoxRef,
-    handler: state.close,
-    enabled: true,
-  });
-
   const {
     inputProps: { size, ...inputProps },
     listBoxProps,
@@ -119,6 +113,7 @@ export function Combobox<T extends object>({
     <>
       <Input
         {...inputProps}
+        aria-haspopup="listbox"
         ref={inputRef}
         label={label}
         borderBottomLeftRadius={
@@ -165,6 +160,7 @@ export function Combobox<T extends object>({
           state={state}
           triggerRef={inputRef as any}
           ref={popoverRef}
+          isNonModal
           placement="bottom start"
           shouldFlip={false}
           hasBackdrop={false}

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/input/Textarea.tsx

@@ -5,16 +5,17 @@ import {
   Textarea as ChakraTextarea,
   TextareaProps as ChakraTextareaProps,
   useFormControlContext,
+  InputGroup,
 } from "@chakra-ui/react";
 import React, { useId } from "react";
 
 export type TextareaProps = Exclude<ChakraTextareaProps, "variant" | "size"> & {
-  label: string;
+  label?: string;
 };
 /**
  * Text area that works with the `FormControl` component.
  *
- * Note that it requires you to pass a label.
+ * Providing a label is optional.
  *
  * ```tsx
  * <FormControl>
@@ -30,11 +31,16 @@ export const Textarea = forwardRef<TextareaProps, "textarea">((props, ref) => {
   const formControlProps = useFormControlContext();
   const fallbackId = `textarea-${useId()}`;
   const inputId = props.id ?? formControlProps?.id ?? fallbackId;
+
   return (
-    <Box {...spacingProps}>
-      <FormLabel htmlFor={inputId}>{label}</FormLabel>
-      <ChakraTextarea {...rest} id={inputId} ref={ref} />
-    </Box>
+    <InputGroup position="relative" {...spacingProps}>
+      <ChakraTextarea {...rest} id={inputId} ref={ref} placeholder=" " />
+      {label && (
+        <FormLabel htmlFor={inputId} id={`${inputId}-label`}>
+          {label}
+        </FormLabel>
+      )}
+    </InputGroup>
   );
 });
 

package/src/loader/SkeletonText.tsx

@@ -1,7 +1,8 @@
-import { BoxProps, SkeletonText as ChakraSkeletonText } from "@chakra-ui/react";
+import { SkeletonText as ChakraSkeletonText, SkeletonTextProps as ChakraSkeletonTextProps } from "@chakra-ui/react";
 import React from "react";
 
-export type SkeletonTextProps = BoxProps;
+export type SkeletonTextProps = ChakraSkeletonTextProps
+  
 /**
  * SkeletonText renders a loading animation for a given text. It works great as a placeholder to avoid layout shifts.
  */

package/src/theme/components/textarea.ts

@@ -5,9 +5,17 @@ const config = defineStyleConfig({
   baseStyle: (props) => ({
     ...Input.baseStyle!(props).field,
     minHeight: "5rem",
-    py: 3,
     verticalAlign: "top",
     appearance: "none",
+    paddingTop: 2,
+    "&:not(:placeholder-shown)": {
+      "&:has(+ label)": {
+        paddingTop: 4
+      },
+      "& + label": {
+        transform: "scale(0.825) translateY(-10px)",
+      },
+    },
   }),
 });