@vygruppen/spor-react 3.3.0 → 3.3.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-INCE2TKZ.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-5JEY3QEF.mjs';

package/package.json

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

package/src/datepicker/Calendar.tsx

@@ -9,11 +9,13 @@ import {
 import { CalendarGrid } from "./CalendarGrid";
 import { CalendarHeader } from "./CalendarHeader";
 import { useCurrentLocale } from "./utils";
+import { createTexts, useTranslation } from "../i18n";
 
 type CalendarProps = ReactAriaCalendarProps<DateValue> & {
   showYearNavigation?: boolean;
 };
 export function Calendar({ showYearNavigation, ...props }: CalendarProps) {
+  const { t } = useTranslation();
   const locale = useCurrentLocale();
   const state = useCalendarState({
     ...props,
@@ -22,11 +24,24 @@ export function Calendar({ showYearNavigation, ...props }: CalendarProps) {
   });
 
   const { calendarProps } = useCalendar(props, state);
+  const calendarAriaLabel = calendarProps["aria-label"];
+
+  const ariaLabel =
+    t(texts.calendar) + (calendarAriaLabel ? ` ${calendarAriaLabel}` : "");
 
   return (
-    <Box {...calendarProps}>
+    <Box {...calendarProps} aria-label={ariaLabel}>
       <CalendarHeader state={state} showYearNavigation={showYearNavigation} />
       <CalendarGrid state={state} />
     </Box>
   );
 }
+
+const texts = createTexts({
+  calendar: {
+    nb: "Kalender",
+    nn: "Kalender",
+    sv: "Kalender",
+    en: "Calendar",
+  },
+});

package/src/datepicker/CalendarCell.tsx

@@ -16,8 +16,14 @@ type CalendarCellProps = {
 };
 export function CalendarCell({ state, date, currentMonth }: CalendarCellProps) {
   const ref = useRef(null);
-  const { cellProps, buttonProps, isSelected, isDisabled, isUnavailable } =
-    useCalendarCell({ date }, state, ref);
+  const {
+    cellProps,
+    buttonProps,
+    isSelected,
+    isDisabled,
+    isUnavailable,
+    isOutsideVisibleRange,
+  } = useCalendarCell({ date }, state, ref);
 
   const isOutsideMonth = !isSameMonth(currentMonth, date);
   const styles = useMultiStyleConfig("Datepicker", {});
@@ -35,7 +41,7 @@ export function CalendarCell({ state, date, currentMonth }: CalendarCellProps) {
   if (isOutsideMonth) {
     stateProps["data-unavailable"] = true;
   }
-
+  
   return (
     <Box
       as="td"
@@ -65,6 +71,7 @@ export function CalendarCell({ state, date, currentMonth }: CalendarCellProps) {
         {...stateProps}
         ref={ref}
         sx={styles.dateCell}
+        hidden={isOutsideVisibleRange}
         width="100%"
       >
         {date.day}

package/src/datepicker/CalendarTriggerButton.tsx

@@ -1,30 +1,36 @@
-import { Box, PopoverAnchor, useMultiStyleConfig } from "@chakra-ui/react";
+import {
+  Box,
+  PopoverAnchor,
+  useMultiStyleConfig,
+  forwardRef,
+  As,
+} from "@chakra-ui/react";
 import { CalendarOutline24Icon } from "@vygruppen/spor-icon-react";
-import React, { useRef } from "react";
-import { AriaButtonProps, useButton } from "react-aria";
+import React from "react";
+import { AriaButtonProps } from "react-aria";
 import { createTexts, useTranslation } from "..";
 
 type CalendarTriggerButtonProps = AriaButtonProps<"button">;
-export const CalendarTriggerButton = (props: CalendarTriggerButtonProps) => {
-  const { t } = useTranslation();
-  const styles = useMultiStyleConfig("Datepicker", {});
-  const ref = useRef(null);
-  const { buttonProps } = useButton(props, ref);
-  return (
-    <PopoverAnchor>
-      <Box
-        ref={ref}
-        as="button"
-        type="button"
-        aria-label={t(texts.openCalendar)}
-        sx={styles.calendarTriggerButton}
-        {...(buttonProps as any)}
-      >
-        <CalendarOutline24Icon />
-      </Box>
-    </PopoverAnchor>
-  );
-};
+export const CalendarTriggerButton = forwardRef<CalendarTriggerButtonProps, As>(
+  ({ ...buttonProps }, ref) => {
+    const { t } = useTranslation();
+    const styles = useMultiStyleConfig("Datepicker", {});
+
+    return (
+      <PopoverAnchor>
+        <Box
+          ref={ref}
+          as="button"
+          aria-label={t(texts.openCalendar)}
+          sx={styles.calendarTriggerButton}
+          {...buttonProps}
+        >
+          <CalendarOutline24Icon />
+        </Box>
+      </PopoverAnchor>
+    );
+  }
+);
 
 const texts = createTexts({
   openCalendar: {

package/src/datepicker/DatePicker.tsx

@@ -1,12 +1,14 @@
 import {
   Box,
   BoxProps,
+  FocusLock,
   InputGroup,
   Popover,
   PopoverAnchor,
   PopoverArrow,
   PopoverBody,
   PopoverContent,
+  PopoverTrigger,
   Portal,
   ResponsiveValue,
   useBreakpointValue,
@@ -17,7 +19,12 @@ import { DateValue } from "@internationalized/date";
 import { useDatePickerState } from "@react-stately/datepicker";
 import { CalendarOutline24Icon } from "@vygruppen/spor-icon-react";
 import React, { forwardRef, useRef } from "react";
-import { AriaDatePickerProps, I18nProvider, useDatePicker } from "react-aria";
+import {
+  AriaDatePickerProps,
+  CalendarProps,
+  I18nProvider,
+  useDatePicker,
+} from "react-aria";
 import { FormErrorMessage } from "..";
 import { Calendar } from "./Calendar";
 import { CalendarTriggerButton } from "./CalendarTriggerButton";
@@ -30,6 +37,7 @@ type DatePickerProps = AriaDatePickerProps<DateValue> &
     variant: ResponsiveValue<"simple" | "with-trigger">;
     name?: string;
     showYearNavigation?: boolean;
+    withPortal?: boolean;
   };
 /**
  * A date picker component.
@@ -47,6 +55,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       errorMessage,
       minHeight,
       showYearNavigation,
+      withPortal = true,
       width = "auto",
       ...props
     },
@@ -76,23 +85,13 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       ref as React.MutableRefObject<HTMLDivElement>
     );
 
+    const styles = useMultiStyleConfig("Datepicker", {});
+    const locale = useCurrentLocale();
+
     const responsiveVariant =
       useBreakpointValue(typeof variant === "string" ? [variant] : variant) ??
       "simple";
-
-    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 hasTrigger = responsiveVariant === "with-trigger";
 
     const onFieldClick = () => {
       if (!hasTrigger) {
@@ -100,9 +99,19 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       }
     };
 
-    const hasTrigger = responsiveVariant === "with-trigger";
-
-    const styles = useMultiStyleConfig("Datepicker", {});
+    const popoverContent = (
+      <PopoverContent color="darkGrey" boxShadow="md" sx={styles.calendar}>
+        <PopoverArrow sx={styles.arrow} />
+        <PopoverBody>
+          <FocusLock>
+            <Calendar
+              {...calendarProps}
+              showYearNavigation={showYearNavigation}
+            />
+          </FocusLock>
+        </PopoverBody>
+      </PopoverContent>
+    );
 
     return (
       <I18nProvider locale={locale}>
@@ -115,18 +124,14 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
           <Popover
             {...dialogProps}
             isOpen={state.isOpen}
-            onClose={state.close}
             onOpen={state.open}
-            closeOnBlur
-            closeOnEsc
-            returnFocusOnClose
+            onClose={state.close}
           >
             <InputGroup {...groupProps} display="inline-flex">
               <PopoverAnchor>
                 <StyledField
                   variant={responsiveVariant}
                   onClick={onFieldClick}
-                  onKeyPress={handleEnterClick}
                   paddingX={3}
                   minHeight={minHeight}
                 >
@@ -137,33 +142,24 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                     label={props.label}
                     labelProps={labelProps}
                     name={props.name}
-                    ref={ref}
+                    ref={hasTrigger ? undefined : ref}
                     {...fieldProps}
                   />
                 </StyledField>
               </PopoverAnchor>
-              {hasTrigger && <CalendarTriggerButton {...buttonProps} />}
+              {hasTrigger && (
+                <PopoverTrigger>
+                  <CalendarTriggerButton ref={ref} {...buttonProps} />
+                </PopoverTrigger>
+              )}
             </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>
+            {state.isOpen && !props.isDisabled && withPortal && (
+              <Portal>{popoverContent}</Portal>
             )}
+            {state.isOpen && !props.isDisabled && !withPortal && popoverContent}
           </Popover>
         </Box>
       </I18nProvider>

package/src/datepicker/DateRangePicker.tsx

@@ -1,6 +1,7 @@
 import {
   Box,
   BoxProps,
+  FocusLock,
   FormLabel,
   InputGroup,
   Popover,
@@ -8,6 +9,7 @@ import {
   PopoverArrow,
   PopoverBody,
   PopoverContent,
+  PopoverTrigger,
   Portal,
   ResponsiveValue,
   useBreakpointValue,
@@ -36,6 +38,7 @@ type DateRangePickerProps = AriaDateRangePickerProps<DateValue> &
     endLabel?: string;
     endName?: string;
     variant: ResponsiveValue<"simple" | "with-trigger">;
+    withPortal?: boolean;
   };
 /**
  * A date range picker component.
@@ -51,6 +54,7 @@ export function DateRangePicker({
   minHeight,
   startName,
   endName,
+  withPortal = true,
   ...props
 }: DateRangePickerProps) {
   const formControlProps = useFormControlContext();
@@ -96,6 +100,17 @@ export function DateRangePicker({
 
   const hasTrigger = responsiveVariant === "with-trigger";
 
+  const popoverContent = (
+    <PopoverContent sx={styles.calendar} boxShadow="md" maxWidth="none">
+      <PopoverArrow sx={styles.arrow} />
+      <PopoverBody>
+        <FocusLock>
+          <RangeCalendar {...calendarProps} />
+        </FocusLock>
+      </PopoverBody>
+    </PopoverContent>
+  );
+
   return (
     <I18nProvider locale={locale}>
       <Box position="relative" display="inline-flex" flexDirection="column">
@@ -107,17 +122,10 @@ export function DateRangePicker({
         <Popover
           {...dialogProps}
           isOpen={state.isOpen}
-          onClose={() => state.setOpen(false)}
-          closeOnBlur
-          closeOnEsc
-          returnFocusOnClose
+          onOpen={state.open}
+          onClose={state.close}
         >
-          <InputGroup
-            {...groupProps}
-            ref={ref}
-            width="auto"
-            display="inline-flex"
-          >
+          <InputGroup {...groupProps} width="auto" display="inline-flex">
             <PopoverAnchor>
               <StyledField
                 alignItems="center"
@@ -134,6 +142,7 @@ export function DateRangePicker({
                   {...startFieldProps}
                   name={startName}
                   label={props.startLabel}
+                  ref={hasTrigger ? undefined : ref}
                   labelProps={labelProps}
                 />
                 <Box as="span" aria-hidden="true" px="2">
@@ -147,22 +156,14 @@ export function DateRangePicker({
                 />
               </StyledField>
             </PopoverAnchor>
-            {hasTrigger && <CalendarTriggerButton {...buttonProps} />}
+            {hasTrigger && (
+              <PopoverTrigger>
+                <CalendarTriggerButton ref={ref} {...buttonProps} />
+              </PopoverTrigger>
+            )}
           </InputGroup>
-          {state.isOpen && (
-            <Portal>
-              <PopoverContent
-                sx={styles.calendar}
-                boxShadow="md"
-                maxWidth="none"
-              >
-                <PopoverArrow sx={styles.arrow} />
-                <PopoverBody>
-                  <RangeCalendar {...calendarProps} />
-                </PopoverBody>
-              </PopoverContent>
-            </Portal>
-          )}
+          {state.isOpen && withPortal && <Portal>{popoverContent}</Portal>}
+          {state.isOpen && !withPortal && popoverContent}
         </Popover>
       </Box>
     </I18nProvider>

package/src/datepicker/DateTimeSegment.tsx

@@ -2,7 +2,6 @@ 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;
@@ -38,13 +37,12 @@ export const DateTimeSegment = forwardRef<HTMLDivElement, DateTimeSegmentProps>(
           ...segmentProps.style,
           fontVariantNumeric: "tabular-nums",
           boxSizing: "content-box",
-          color: colors.darkGrey,
         }}
         paddingX="1px"
         textAlign="end"
         outline="none"
         borderRadius="xs"
-        fontSize="mobile.md"
+        fontSize={["mobile.sm", "desktop.sm"]}
         sx={styles.dateTimeSegment}
         _focus={{
           backgroundColor: "darkTeal",

package/src/datepicker/utils.ts

@@ -9,15 +9,15 @@ export const useCurrentLocale = () => {
   const { language } = useTranslation();
   switch (language) {
     case "nb":
-      return "no";
+      return "nb-NO";
     case "nn":
-      return "no";
+      return "nb-NO";
     case "sv":
-      return "sv";
+      return "sv-SE";
     case "en":
       return "en-GB";
     default:
-      return "no";
+      return "nb-NO";
   }
 };
 

package/src/theme/components/datepicker.ts

@@ -74,7 +74,7 @@ const config = helpers.defineMultiStyleConfig({
     },
     dateTimeSegment: {
       color: mode(
-        props.isEditable ? "darkGrey" : "dimGrey",
+        "darkGrey",
         props.isPlaceholder ? "whiteAlpha.400" : "white"
       )(props),
     },
@@ -125,11 +125,11 @@ const config = helpers.defineMultiStyleConfig({
       },
     },
     arrow: {
-      [$arrowBackground.variable]: mode("white", colors.night)(props)
+      [$arrowBackground.variable]: mode("white", colors.night)(props),
     },
     calendar: {
       backgroundColor: mode("white", "night")(props),
-      color: mode("darkGrey", "white")(props)
+      color: mode("darkGrey", "white")(props),
     },
     weekdays: {
       color: mode("darkGrey", "white")(props),
@@ -197,6 +197,13 @@ const config = helpers.defineMultiStyleConfig({
           borderWidth: 1,
           borderColor: mode("osloGrey", "dimGrey")(props),
         }),
+        _focus: {
+          outline: "none",
+          boxShadow: getBoxShadowString({
+            borderWidth: 2,
+            borderColor: mode("greenHaze", "azure")(props),
+          }),
+        },
       },
       "&[data-unavailable]": {
         pointerEvents: "none",