@vygruppen/spor-react 3.0.3 → 3.0.4

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "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

@@ -167,6 +167,7 @@ export function Combobox<T extends object>({
           ref={popoverRef}
           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}