@vygruppen/spor-react 3.0.2 → 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-CIZ54LAU.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.2",
+  "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/datepicker/TimeField.tsx

@@ -28,6 +28,7 @@ export const TimeField = ({ state, ...props }: TimeFieldProps) => {
         htmlFor={fieldProps.id}
         marginBottom={0}
         fontSize="mobile.xs"
+        cursor="text"
       >
         {props.label}
       </FormLabel>

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 } from "..";
+import { ColorSpinner, Input, InputProps, ListBox, useOutsideClick } from "..";
 import { Popover } from "./Popover";
 
 export type ComboboxProps<T> = AriaComboBoxProps<T> & {
@@ -96,6 +96,12 @@ export function Combobox<T extends object>({
     label,
   });
 
+  useOutsideClick({
+    ref: listBoxRef,
+    handler: state.close,
+    enabled: true,
+  });
+
   const {
     inputProps: { size, ...inputProps },
     listBoxProps,
@@ -141,6 +147,7 @@ export function Combobox<T extends object>({
             <ColorSpinner
               width="1.5rem"
               alignSelf="center"
+              paddingRight={paddingRight}
               css={{
                 div: {
                   display: "flex",
@@ -159,6 +166,8 @@ export function Combobox<T extends object>({
           triggerRef={inputRef as any}
           ref={popoverRef}
           placement="bottom start"
+          shouldFlip={false}
+          hasBackdrop={false}
         >
           <ListBox
             {...listBoxProps}

package/src/input/Popover.tsx

@@ -27,6 +27,23 @@ type PopoverProps = {
    * Defaults to "bottom"
    */
   placement?: AriaPopoverProps["placement"];
+  /**
+   * Whether or not the list should flip to the opposite side of the trigger if there is not enough space.
+   * Defaults to false.
+   */
+  shouldFlip?: boolean;
+  /**
+   * Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies.
+   * Most popovers should not use this option as it may negatively impact the screen reader experience. Only use with components such as combobox, which are designed to handle this situation carefully.
+   *
+   * 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.
@@ -42,6 +59,9 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       offset = 0,
       crossOffset = 0,
       placement = "bottom",
+      shouldFlip = false,
+      isNonModal = false,
+      hasBackdrop = true,
     },
     ref
   ) => {
@@ -55,13 +75,15 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         offset,
         crossOffset,
         placement,
+        shouldFlip,
+        isNonModal,
       },
       state
     );
 
     return (
       <Overlay>
-        <Box {...underlayProps} position="fixed" inset="0" />
+        {hasBackdrop && <Box {...underlayProps} position="fixed" inset="0" />}
         <Box
           {...popoverProps}
           ref={popoverRef}

package/src/theme/components/datepicker.ts

@@ -70,6 +70,7 @@ const config = helpers.defineMultiStyleConfig({
       fontSize: "mobile.xs",
       color: mode("darkGrey", "white")(props),
       margin: 0,
+      cursor: "text",
     },
     dateTimeSegment: {
       color: mode(