@vygruppen/spor-react 3.0.3 → 3.1.0

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

package/package.json

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

package/src/datepicker/DateField.tsx

@@ -2,7 +2,7 @@ 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, { useRef } from "react";
+import React, { RefObject, forwardRef, useRef } from "react";
 import { AriaDateFieldProps, useDateField } from "react-aria";
 import { DateTimeSegment } from "./DateTimeSegment";
 import { useCurrentLocale } from "./utils";
@@ -21,31 +21,51 @@ type DateFieldProps = AriaDateFieldProps<DateValue> & {
   labelProps?: DOMAttributes<FocusableElement>;
   name?: string;
 };
-export function DateField(props: DateFieldProps) {
-  const locale = useCurrentLocale();
-  const styles = useMultiStyleConfig("Datepicker", {});
-  const state = useDateFieldState({
-    ...props,
-    locale,
-    createCalendar,
-  });
+export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
+  (props, externalRef) => {
+    const locale = useCurrentLocale();
+    const styles = useMultiStyleConfig("Datepicker", {});
+    const state = useDateFieldState({
+      ...props,
+      locale,
+      createCalendar,
+    });
 
-  const ref = useRef(null);
-  const { fieldProps, labelProps } = useDateField(props, state, ref);
+    const internalRef = useRef(null);
+    const ref = externalRef ?? internalRef;
+    const { fieldProps, labelProps } = useDateField(
+      props,
+      state,
+      ref as RefObject<HTMLDivElement>
+    );
 
-  return (
-    <Box minWidth="6rem" width="100%">
-      {props.label && (
-        <FormLabel {...props.labelProps} {...labelProps} sx={styles.inputLabel}>
-          {props.label}
-        </FormLabel>
-      )}
-      <Flex {...fieldProps} ref={ref}>
-        {state.segments.map((segment, i) => (
-          <DateTimeSegment key={i} segment={segment} state={state} />
-        ))}
-      </Flex>
-      <input type="hidden" value={state.value?.toString()} name={props.name} />
-    </Box>
-  );
-}
+    return (
+      <Box minWidth="6rem" width="100%">
+        {props.label && (
+          <FormLabel
+            {...props.labelProps}
+            {...labelProps}
+            sx={styles.inputLabel}
+          >
+            {props.label}
+          </FormLabel>
+        )}
+        <Flex {...fieldProps}>
+          {state.segments.map((segment, i) => (
+            <DateTimeSegment
+              ref={i === 0 ? ref : undefined}
+              key={i}
+              segment={segment}
+              state={state}
+            />
+          ))}
+        </Flex>
+        <input
+          type="hidden"
+          value={state.value?.toString()}
+          name={props.name}
+        />
+      </Box>
+    );
+  }
+);

package/src/datepicker/DatePicker.tsx

@@ -16,7 +16,7 @@ import {
 import { DateValue } from "@internationalized/date";
 import { useDatePickerState } from "@react-stately/datepicker";
 import { CalendarOutline24Icon } from "@vygruppen/spor-icon-react";
-import React, { useRef } from "react";
+import React, { forwardRef, useRef } from "react";
 import { AriaDatePickerProps, I18nProvider, useDatePicker } from "react-aria";
 import { FormErrorMessage } from "..";
 import { Calendar } from "./Calendar";
@@ -40,118 +40,133 @@ type DatePickerProps = AriaDatePickerProps<DateValue> &
  * <DatePicker label="Dato" variant="simple" />
  * ```
  */
-export function DatePicker({
-  variant,
-  errorMessage,
-  minHeight,
-  showYearNavigation,
-  width = "auto",
-  ...props
-}: DatePickerProps) {
-  const formControlProps = useFormControlContext();
-  const state = useDatePickerState({
-    ...props,
-    shouldCloseOnSelect: true,
-    errorMessage,
-    isRequired: props.isRequired ?? formControlProps?.isRequired,
-    validationState: formControlProps?.isInvalid ? "invalid" : "valid",
-  });
-  const ref = useRef(null);
-  const {
-    groupProps,
-    labelProps,
-    fieldProps,
-    buttonProps,
-    dialogProps,
-    calendarProps,
-    errorMessageProps,
-  } = useDatePicker(props, state, ref);
+export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
+  (
+    {
+      variant,
+      errorMessage,
+      minHeight,
+      showYearNavigation,
+      width = "auto",
+      ...props
+    },
+    externalRef
+  ) => {
+    const formControlProps = useFormControlContext();
+    const state = useDatePickerState({
+      ...props,
+      shouldCloseOnSelect: true,
+      errorMessage,
+      isRequired: props.isRequired ?? formControlProps?.isRequired,
+      validationState: formControlProps?.isInvalid ? "invalid" : "valid",
+    });
+    const internalRef = useRef<HTMLDivElement>(null);
+    const ref = externalRef ?? internalRef;
+    const {
+      groupProps,
+      labelProps,
+      fieldProps,
+      buttonProps,
+      dialogProps,
+      calendarProps,
+      errorMessageProps,
+    } = useDatePicker(
+      props,
+      state,
+      ref as React.MutableRefObject<HTMLDivElement>
+    );
 
-  const responsiveVariant =
-    useBreakpointValue(typeof variant === "string" ? [variant] : variant) ??
-    "simple";
+    const responsiveVariant =
+      useBreakpointValue(typeof variant === "string" ? [variant] : variant) ??
+      "simple";
 
-  const locale = useCurrentLocale();
+    const locale = useCurrentLocale();
 
-  const handleEnterClick = (e: React.KeyboardEvent) => {
-    if (responsiveVariant === "simple" && e.key === "Enter" && !state.isOpen) {
-      // Don't submit the form
-      e.stopPropagation();
-      state.setOpen(true);
-    }
-  };
+    const handleEnterClick = (e: React.KeyboardEvent) => {
+      if (
+        responsiveVariant === "simple" &&
+        e.key === "Enter" &&
+        !state.isOpen
+      ) {
+        // Don't submit the form
+        e.stopPropagation();
+        state.setOpen(true);
+      }
+    };
 
-  const onFieldClick = () => {
-    if (!hasTrigger) {
-      state.setOpen(true);
-    }
-  };
+    const onFieldClick = () => {
+      if (!hasTrigger) {
+        state.setOpen(true);
+      }
+    };
 
-  const hasTrigger = responsiveVariant === "with-trigger";
+    const hasTrigger = responsiveVariant === "with-trigger";
 
-  const styles = useMultiStyleConfig("Datepicker", {});
+    const styles = useMultiStyleConfig("Datepicker", {});
 
-  return (
-    <I18nProvider locale={locale}>
-      <Box
-        position="relative"
-        display="inline-flex"
-        flexDirection="column"
-        width={width}
-      >
-        <Popover
-          {...dialogProps}
-          isOpen={state.isOpen}
-          onClose={() => state.setOpen(false)}
-          onOpen={() => state.setOpen(true)}
-          closeOnBlur
-          closeOnEsc
-          returnFocusOnClose
+    return (
+      <I18nProvider locale={locale}>
+        <Box
+          position="relative"
+          display="inline-flex"
+          flexDirection="column"
+          width={width}
         >
-          <InputGroup {...groupProps} ref={ref} display="inline-flex">
-            <PopoverAnchor>
-              <StyledField
-                variant={responsiveVariant}
-                onClick={onFieldClick}
-                onKeyPress={handleEnterClick}
-                paddingX={3}
-                minHeight={minHeight}
-              >
-                {!hasTrigger && (
-                  <CalendarOutline24Icon marginRight={2} alignSelf="center" />
-                )}
-                <DateField
-                  label={props.label}
-                  labelProps={labelProps}
-                  name={props.name}
-                  {...fieldProps}
-                />
-              </StyledField>
-            </PopoverAnchor>
-            {hasTrigger && <CalendarTriggerButton {...buttonProps} />}
-          </InputGroup>
-          <FormErrorMessage {...errorMessageProps}>
-            {errorMessage}
-          </FormErrorMessage>
-          {state.isOpen && !props.isDisabled && (
-            <Portal>
-              <PopoverContent
-                color="darkGrey"
-                boxShadow="md"
-                sx={styles.calendar}
-              >
-                <PopoverArrow sx={styles.arrow} />
-                <PopoverBody>
-                  <Calendar
-                    {...calendarProps}
-                    showYearNavigation={showYearNavigation}
+          <Popover
+            {...dialogProps}
+            isOpen={state.isOpen}
+            onClose={state.close}
+            onOpen={state.open}
+            closeOnBlur
+            closeOnEsc
+            returnFocusOnClose
+          >
+            <InputGroup {...groupProps} display="inline-flex">
+              <PopoverAnchor>
+                <StyledField
+                  variant={responsiveVariant}
+                  onClick={onFieldClick}
+                  onKeyPress={handleEnterClick}
+                  paddingX={3}
+                  minHeight={minHeight}
+                >
+                  {!hasTrigger && (
+                    <CalendarOutline24Icon marginRight={2} alignSelf="center" />
+                  )}
+                  <DateField
+                    label={props.label}
+                    labelProps={labelProps}
+                    name={props.name}
+                    ref={ref}
+                    {...fieldProps}
                   />
-                </PopoverBody>
-              </PopoverContent>
-            </Portal>
-          )}
-        </Popover>
-      </Box>
-    </I18nProvider>
-  );
-}
+                </StyledField>
+              </PopoverAnchor>
+              {hasTrigger && <CalendarTriggerButton {...buttonProps} />}
+            </InputGroup>
+            <FormErrorMessage {...errorMessageProps}>
+              {errorMessage}
+            </FormErrorMessage>
+            {state.isOpen && !props.isDisabled && (
+              <Portal>
+                <PopoverContent
+                  color="darkGrey"
+                  boxShadow="md"
+                  sx={styles.calendar}
+                >
+                  <PopoverArrow sx={styles.arrow} />
+                  <PopoverBody>
+                    <Calendar
+                      {...calendarProps}
+                      showYearNavigation={showYearNavigation}
+                    />
+                  </PopoverBody>
+                </PopoverContent>
+              </Portal>
+            )}
+          </Popover>
+        </Box>
+      </I18nProvider>
+    );
+  }
+);

package/src/datepicker/DateTimeSegment.tsx

@@ -1,5 +1,5 @@
 import { Box, useMultiStyleConfig } from "@chakra-ui/react";
-import React, { useRef } from "react";
+import React, { RefObject, forwardRef, useRef } from "react";
 import { useDateSegment } from "react-aria";
 import { DateFieldState, DateSegment } from "react-stately";
 
@@ -14,40 +14,49 @@ type DateTimeSegmentProps = {
  *
  * This component should be used with the react-aria library, and is not meant to be used directly.
  * */
-export const DateTimeSegment = ({ segment, state }: DateTimeSegmentProps) => {
-  const ref = useRef(null);
+export const DateTimeSegment = forwardRef<HTMLDivElement, DateTimeSegmentProps>(
+  ({ segment, state }, externalRef) => {
+    const internalRef = useRef(null);
+    const ref = externalRef ?? internalRef;
 
-  const { segmentProps } = useDateSegment(segment, state, ref);
+    const { segmentProps } = useDateSegment(
+      segment,
+      state,
+      ref as RefObject<HTMLDivElement>
+    );
 
-  const styles = useMultiStyleConfig("Datepicker", {
-    isPlaceholder: segment.isPlaceholder,
-    isEditable: segment.isEditable,
-  });
+    const styles = useMultiStyleConfig("Datepicker", {
+      isPlaceholder: segment.isPlaceholder,
+      isEditable: segment.isEditable,
+    });
 
-  return (
-    <Box
-      {...segmentProps}
-      ref={ref}
-      style={{
-        ...segmentProps.style,
-        fontVariantNumeric: "tabular-nums",
-        boxSizing: "content-box",
-      }}
-      paddingX="1px"
-      textAlign="end"
-      outline="none"
-      borderRadius="xs"
-      fontSize="mobile.md"
-      sx={styles.dateTimeSegment}
-      _focus={{
-        backgroundColor: "darkTeal",
-        color: "white",
-      }}
-    >
-      {isPaddable(segment.type) ? segment.text.padStart(2, "0") : segment.text}
-    </Box>
-  );
-};
+    return (
+      <Box
+        {...segmentProps}
+        ref={ref}
+        style={{
+          ...segmentProps.style,
+          fontVariantNumeric: "tabular-nums",
+          boxSizing: "content-box",
+        }}
+        paddingX="1px"
+        textAlign="end"
+        outline="none"
+        borderRadius="xs"
+        fontSize="mobile.md"
+        sx={styles.dateTimeSegment}
+        _focus={{
+          backgroundColor: "darkTeal",
+          color: "white",
+        }}
+      >
+        {isPaddable(segment.type)
+          ? segment.text.padStart(2, "0")
+          : segment.text}
+      </Box>
+    );
+  }
+);
 
 const isPaddable = (segmentType: DateSegment["type"]) =>
   segmentType === "month" ||

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,
@@ -165,8 +159,10 @@ export function Combobox<T extends object>({
           state={state}
           triggerRef={inputRef as any}
           ref={popoverRef}
+          isNonModal
           placement="bottom start"
           shouldFlip={false}
+          hasBackdrop={false}
         >
           <ListBox
             {...listBoxProps}

package/src/input/Popover.tsx

@@ -39,6 +39,11 @@ type PopoverProps = {
    * Defaults to false.
    */
   isNonModal?: boolean;
+  /** Whether or not the popover renders a backdrop that stops the user from interacting with background elements
+   *
+   * Defaults to true
+   */
+  hasBackdrop?: boolean;
 };
 /**
  * Internal popover component.
@@ -56,6 +61,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       placement = "bottom",
       shouldFlip = false,
       isNonModal = false,
+      hasBackdrop = true,
     },
     ref
   ) => {
@@ -77,7 +83,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
 
     return (
       <Overlay>
-        <Box {...underlayProps} position="fixed" inset="0" />
+        {hasBackdrop && <Box {...underlayProps} position="fixed" inset="0" />}
         <Box
           {...popoverProps}
           ref={popoverRef}

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