@vygruppen/spor-react 11.3.10 → 12.0.0

package/src/datepicker/DatePicker.tsx

@@ -1,46 +1,59 @@
+"use client";
+import { Field } from "@/input/Field";
 import {
   Box,
   BoxProps,
-  FocusLock,
-  Popover,
+  Popover as ChakraPopover,
   PopoverAnchor,
-  PopoverArrow,
-  PopoverBody,
-  PopoverContent,
-  PopoverTrigger,
   Portal,
-  InputGroup,
-  ResponsiveValue,
-  useFormControlContext,
-  useMultiStyleConfig,
+  RecipeVariantProps,
+  useFieldContext,
+  useSlotRecipe,
 } from "@chakra-ui/react";
-import { DateValue } from "@internationalized/date";
-import React, { ReactNode, forwardRef, useId, useRef } from "react";
-import { AriaDatePickerProps, I18nProvider, useDatePicker } from "react-aria";
+import React, {
+  PropsWithChildren,
+  ReactNode,
+  forwardRef,
+  useId,
+  useRef,
+} from "react";
+import {
+  AriaDatePickerProps,
+  DateValue,
+  I18nProvider,
+  useDatePicker,
+} from "react-aria";
 import { useDatePickerState } from "react-stately";
-import { FormErrorMessage } from "..";
+import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
 import { Calendar } from "./Calendar";
 import { CalendarTriggerButton } from "./CalendarTriggerButton";
 import { DateField } from "./DateField";
 import { StyledField } from "./StyledField";
+import { CalendarVariants } from "./types";
 import { useCurrentLocale } from "./utils";
 
+export type DatePickerVariantProps = RecipeVariantProps<
+  typeof datePickerSlotRecipe
+>;
+
 type DatePickerProps = Omit<AriaDatePickerProps<DateValue>, "onChange"> &
-  Pick<BoxProps, "minHeight" | "width"> & {
-    variant: ResponsiveValue<"base" | "floating" | "ghost">;
+  Pick<BoxProps, "minHeight" | "width"> &
+  PropsWithChildren<DatePickerVariantProps> &
+  CalendarVariants & {
     name?: string;
     showYearNavigation?: boolean;
     withPortal?: boolean;
     onChange?: (value: DateValue | null) => void;
+    errorMessage?: ReactNode;
   };
 
 /**
  * A date picker component.
  *
- * There are three different variants – `base`, `floating` and `ghost`.
+ * There are three different variants – `core`, `floating` and `ghost`.
  *
  * ```tsx
- * <DatePicker label="Dato" variant="base" />
+ * <DatePicker label="Dato" variant="core" />
  * ```
  */
 
@@ -57,33 +70,31 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     },
     externalRef,
   ) => {
-    const formControlProps = useFormControlContext();
+    const chakraFieldProps = useFieldContext();
     const state = useDatePickerState({
       ...props,
       shouldCloseOnSelect: true,
       errorMessage,
-      isRequired: props.isRequired ?? formControlProps?.isRequired,
-      validationState: formControlProps?.isInvalid ? "invalid" : "valid",
+      isRequired: props.isRequired ?? chakraFieldProps?.required,
+      validationState: chakraFieldProps?.invalid ? "invalid" : "valid",
     });
     const internalRef = useRef<HTMLDivElement>(null);
     const ref = externalRef ?? internalRef;
-    const {
-      labelProps,
-      fieldProps,
-      buttonProps,
-      dialogProps,
-      calendarProps,
-      errorMessageProps,
-    } = useDatePicker(
-      props,
-      state,
-      ref as React.MutableRefObject<HTMLDivElement>,
-    );
+    const { labelProps, fieldProps, buttonProps, dialogProps, calendarProps } =
+      useDatePicker(
+        props,
+        state,
+        ref as React.MutableRefObject<HTMLDivElement>,
+      );
 
     const labelId = `label-${useId()}`;
     const inputGroupId = `input-group-${useId()}`;
 
-    const styles = useMultiStyleConfig("Datepicker", { variant });
+    const recipe = useSlotRecipe({
+      key: "datePicker",
+      recipe: datePickerSlotRecipe,
+    });
+    const styles = recipe({ variant });
     const locale = useCurrentLocale();
 
     const onFieldClick = () => {
@@ -91,18 +102,17 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     };
 
     const popoverContent = (
-      <PopoverContent color="darkGrey" sx={styles.calendarPopover}>
-        <PopoverArrow sx={styles.arrow} />
-        <PopoverBody>
-          <FocusLock>
+      <ChakraPopover.Positioner>
+        <ChakraPopover.Content css={styles.calendarPopover}>
+          <ChakraPopover.Body minWidth={"20rem"}>
             <Calendar
               {...calendarProps}
               variant={variant}
               showYearNavigation={showYearNavigation}
             />
-          </FocusLock>
-        </PopoverBody>
-      </PopoverContent>
+          </ChakraPopover.Body>
+        </ChakraPopover.Content>
+      </ChakraPopover.Positioner>
     );
 
     return (
@@ -113,17 +123,12 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
           flexDirection="column"
           width={width}
         >
-          <Popover
-            {...dialogProps}
-            isOpen={state.isOpen}
-            onOpen={state.open}
-            onClose={state.close}
-            flip={false}
-          >
-            <InputGroup
+          <ChakraPopover.Root {...dialogProps}>
+            <Field
               display="inline-flex"
               id={inputGroupId}
               aria-labelledby={labelId}
+              errorText={errorMessage}
             >
               <PopoverAnchor>
                 <StyledField
@@ -134,15 +139,15 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                   isDisabled={props.isDisabled}
                   ariaLabelledby={labelId}
                 >
-                  <PopoverTrigger>
+                  <ChakraPopover.Trigger asChild>
                     <CalendarTriggerButton
+                      paddingLeft={1}
+                      paddingRight={1}
                       variant={variant}
                       ref={ref}
-                      isDisabled={props.isDisabled}
-                      ariaLabelledby={labelId}
                       {...buttonProps}
                     />
-                  </PopoverTrigger>
+                  </ChakraPopover.Trigger>
                   <DateField
                     label={props.label}
                     labelProps={labelProps}
@@ -152,15 +157,13 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                   />
                 </StyledField>
               </PopoverAnchor>
-            </InputGroup>
-            <FormErrorMessage {...errorMessageProps}>
-              {errorMessage as ReactNode}
-            </FormErrorMessage>
+            </Field>
+
             {state.isOpen && !props.isDisabled && withPortal && (
               <Portal>{popoverContent}</Portal>
             )}
             {state.isOpen && !props.isDisabled && !withPortal && popoverContent}
-          </Popover>
+          </ChakraPopover.Root>
         </Box>
       </I18nProvider>
     );

package/src/datepicker/DateRangePicker.tsx

@@ -1,44 +1,44 @@
+"use client";
 import {
   Box,
   BoxProps,
-  FocusLock,
-  FormLabel,
-  InputGroup,
-  Popover,
   PopoverAnchor,
-  PopoverArrow,
-  PopoverBody,
-  PopoverContent,
-  PopoverTrigger,
+  Popover as ChakraPopover,
   Portal,
-  ResponsiveValue,
-  useFormControlContext,
-  useMultiStyleConfig,
+  useFieldContext,
+  useSlotRecipe,
 } from "@chakra-ui/react";
 import { DateValue } from "@internationalized/date";
-import React, { useRef } from "react";
+import React, { PropsWithChildren, useRef } from "react";
 import {
   AriaDateRangePickerProps,
   I18nProvider,
   useDateRangePicker,
+  useId,
 } from "react-aria";
 import { useDateRangePickerState } from "react-stately";
-import { CalendarTriggerButton } from "./CalendarTriggerButton";
 import { DateField } from "./DateField";
 import { RangeCalendar } from "./RangeCalendar";
 import { StyledField } from "./StyledField";
 import { useCurrentLocale } from "./utils";
 
+import { Field } from "../input/Field";
+import { DatePickerVariantProps } from "./DatePicker";
+import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
+import { CalendarVariants } from "./types";
+import { CalendarTriggerButton } from "./CalendarTriggerButton";
+
 type DateRangePickerProps = Omit<
   AriaDateRangePickerProps<DateValue>,
   "onChange"
 > &
-  Pick<BoxProps, "minHeight"> & {
+  Pick<BoxProps, "minHeight"> &
+  PropsWithChildren<DatePickerVariantProps> &
+  CalendarVariants & {
     startLabel?: string;
     startName?: string;
     endLabel?: string;
     endName?: string;
-    variant: ResponsiveValue<"base" | "floating" | "ghost">;
     withPortal?: boolean;
     onChange?: (
       dates: {
@@ -50,13 +50,12 @@ type DateRangePickerProps = Omit<
 /**
  * A date range picker component.
  *
- * There are three variants to choose from – `base`, `floating` and `ghost`.
+ * There are three variants to choose from – `core`, `floating` and `ghost`.
  *
  * ```tsx
- * <DateRangePicker startLabel="From" startName="from" endLabel="To" endName="to" variant="base" />
+ * <DateRangePicker startLabel="From" startName="from" endLabel="To" endName="to" variant="core" />
  * ```
- */
-export function DateRangePicker({
+ */ export function DateRangePicker({
   variant,
   minHeight,
   startName,
@@ -64,16 +63,18 @@ export function DateRangePicker({
   withPortal = true,
   ...props
 }: DateRangePickerProps) {
-  const formControlProps = useFormControlContext();
+  const fieldContextPRops = useFieldContext();
   const state = useDateRangePickerState({
     ...props,
     shouldCloseOnSelect: true,
-    isRequired: props.isRequired ?? formControlProps?.isRequired,
-    validationState: formControlProps.isInvalid ? "invalid" : "valid",
+    isRequired: props.isRequired ?? fieldContextPRops?.required,
+    validationState: fieldContextPRops?.invalid ? "invalid" : "valid",
   });
   const ref = useRef(null);
+  const uniqueId = useId();
+  const datePickerId = `date-range-picker-${uniqueId}`;
+
   const {
-    groupProps,
     labelProps,
     startFieldProps,
     endFieldProps,
@@ -82,77 +83,70 @@ export function DateRangePicker({
     calendarProps,
   } = useDateRangePicker(props, state, ref);
 
-  const styles = useMultiStyleConfig("Datepicker", { variant });
+  const recipe = useSlotRecipe({
+    key: "datePicker",
+    recipe: datePickerSlotRecipe,
+  });
+  const styles = recipe({ variant });
   const locale = useCurrentLocale();
 
-  const handleEnterClick = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && !state.isOpen && variant === "base") {
-      // Don't submit the form
-      e.stopPropagation();
-      state.setOpen(true);
-    }
-  };
-
   const onFieldClick = () => {
     state.setOpen(true);
   };
 
   const popoverContent = (
-    <PopoverContent sx={styles.calendarPopover} maxWidth="none">
-      <PopoverArrow sx={styles.arrow} />
-      <PopoverBody>
-        <FocusLock>
-          <RangeCalendar variant={"base"} {...calendarProps} />
-        </FocusLock>
-      </PopoverBody>
-    </PopoverContent>
+    <ChakraPopover.Positioner>
+      <ChakraPopover.Content css={styles.calendarPopover}>
+        <ChakraPopover.Body maxWidth="60rem">
+          <RangeCalendar variant={"core"} {...calendarProps} />
+        </ChakraPopover.Body>
+      </ChakraPopover.Content>
+    </ChakraPopover.Positioner>
   );
 
   return (
     <I18nProvider locale={locale}>
       <Box position="relative" display="inline-flex" flexDirection="column">
         {props.label && (
-          <FormLabel {...labelProps} sx={styles.inputLabel}>
+          <label {...labelProps} htmlFor={datePickerId}>
             {props.label}
-          </FormLabel>
+          </label>
         )}
-        <Popover
-          {...dialogProps}
-          isOpen={state.isOpen}
-          onOpen={state.open}
-          onClose={state.close}
-          flip={false}
-        >
-          <InputGroup {...groupProps} width="auto" display="inline-flex">
+        <ChakraPopover.Root {...dialogProps}>
+          <Field width="auto" display="inline-flex" id={datePickerId}>
             <PopoverAnchor>
               <StyledField
                 alignItems="center"
                 paddingX={3}
                 variant={variant}
                 onClick={onFieldClick}
-                onKeyPress={handleEnterClick}
                 minHeight={minHeight}
               >
                 {variant && (
-                  <PopoverTrigger>
+                  <ChakraPopover.Trigger asChild>
                     <CalendarTriggerButton
-                      paddingLeft={1}
-                      paddingRight={1}
                       variant={variant}
                       ref={ref}
                       {...buttonProps}
                     />
-                  </PopoverTrigger>
+                  </ChakraPopover.Trigger>
                 )}
+
                 <DateField
                   {...startFieldProps}
                   name={startName}
                   label={props.startLabel}
                   labelProps={labelProps}
                 />
-                <Box as="span" aria-hidden="true" paddingRight="2">
+                <Box
+                  as="span"
+                  aria-hidden="true"
+                  paddingRight="2"
+                  paddingLeft={"2"}
+                >
                   –
                 </Box>
+
                 <DateField
                   {...endFieldProps}
                   name={endName}
@@ -161,10 +155,10 @@ export function DateRangePicker({
                 />
               </StyledField>
             </PopoverAnchor>
-          </InputGroup>
+          </Field>
           {state.isOpen && withPortal && <Portal>{popoverContent}</Portal>}
           {state.isOpen && !withPortal && popoverContent}
-        </Popover>
+        </ChakraPopover.Root>
       </Box>
     </I18nProvider>
   );

package/src/datepicker/DateTimeSegment.tsx

@@ -1,9 +1,12 @@
-import { Box, useMultiStyleConfig } from "@chakra-ui/react";
-import React, { RefObject, forwardRef, useRef } from "react";
+"use client";
+import { Box, useSlotRecipe } from "@chakra-ui/react";
+import React, { PropsWithChildren, RefObject, forwardRef, useRef } from "react";
 import { useDateSegment } from "react-aria";
 import { DateFieldState, DateSegment } from "react-stately";
+import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
+import { DatePickerVariantProps } from "..";
 
-type DateTimeSegmentProps = {
+type DateTimeSegmentProps = PropsWithChildren<DatePickerVariantProps> & {
   segment: DateSegment;
   state: DateFieldState;
   ariaLabel?: string;
@@ -27,10 +30,15 @@ export const DateTimeSegment = forwardRef<HTMLDivElement, DateTimeSegmentProps>(
       ref as RefObject<HTMLDivElement>,
     );
 
-    const styles = useMultiStyleConfig("Datepicker", {
+    const recipe = useSlotRecipe({
+      key: "datePicker",
+      recipe: datePickerSlotRecipe,
+    });
+    const styles = recipe({
       isPlaceholder: segment.isPlaceholder,
       isEditable: segment.isEditable,
     });
+
     return (
       <Box
         {...segmentProps}
@@ -43,7 +51,7 @@ export const DateTimeSegment = forwardRef<HTMLDivElement, DateTimeSegmentProps>(
         outline="none"
         borderRadius="xs"
         fontSize={["mobile.sm", "desktop.sm"]}
-        sx={styles.dateTimeSegment}
+        css={styles.dateTimeSegment}
         aria-description={ariaDescription}
         aria-labelledby={ariaLabel}
       >

package/src/datepicker/RangeCalendar.tsx

@@ -1,4 +1,5 @@
-import { Box, ResponsiveValue } from "@chakra-ui/react";
+"use client";
+import { Box, useSlotRecipe } from "@chakra-ui/react";
 import { DateValue, createCalendar } from "@internationalized/date";
 import React, { useRef } from "react";
 import {
@@ -9,10 +10,11 @@ import { useRangeCalendarState } from "react-stately";
 import { CalendarGrid } from "./CalendarGrid";
 import { CalendarHeader } from "./CalendarHeader";
 import { useCurrentLocale } from "./utils";
+import { CalendarVariants } from "./types";
+import { datePickerSlotRecipe } from "@/theme/slot-recipes/datepicker";
 
-type RangeCalendarProps = ReactAriaRangeCalendarProps<DateValue> & {
-  variant: ResponsiveValue<"base" | "floating" | "ghost">;
-};
+type RangeCalendarProps = ReactAriaRangeCalendarProps<DateValue> &
+  CalendarVariants;
 
 export function RangeCalendar(props: RangeCalendarProps) {
   const locale = useCurrentLocale();
@@ -22,14 +24,18 @@ export function RangeCalendar(props: RangeCalendarProps) {
     locale,
     createCalendar,
   });
-
+  const recipe = useSlotRecipe({
+    key: "datePicker",
+    recipe: datePickerSlotRecipe,
+  });
+  const styles = recipe({});
   const ref = useRef(null);
   const { calendarProps, title } = useRangeCalendar(props, state, ref);
 
   return (
-    <Box {...calendarProps} ref={ref}>
+    <Box {...calendarProps} ref={ref} css={styles.rangeCalendarPopover}>
       <CalendarHeader state={state} title={title} />
-      <Box display="flex" gap="8">
+      <Box display="flex" gap="8" maxWidth="100vw" overflow="scroll">
         <CalendarGrid variant={props.variant} state={state} />
         <CalendarGrid
           variant={props.variant}

package/src/datepicker/StyledField.tsx

@@ -1,33 +1,41 @@
+"use client";
 import {
   Box,
   BoxProps,
-  ResponsiveValue,
-  forwardRef,
-  useFormControlContext,
-  useMultiStyleConfig,
+  useFieldContext,
+  useSlotRecipe,
 } from "@chakra-ui/react";
-import { As } from "@chakra-ui/system";
-import React from "react";
+import React, { forwardRef, PropsWithChildren } from "react";
+import { DatePickerVariantProps } from "./DatePicker";
+import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
+import { CalendarVariants } from "./types";
 
-type StyledFieldProps = BoxProps & {
-  variant: ResponsiveValue<"base" | "floating" | "ghost">;
-  isDisabled?: boolean;
-  ariaLabelledby?: string;
-};
-export const StyledField = forwardRef<StyledFieldProps, As>(
-  ({ children, variant, isDisabled, ariaLabelledby, ...otherProps }, ref) => {
-    const { isInvalid } = useFormControlContext() ?? {
+type StyledFieldProps = BoxProps &
+  PropsWithChildren<DatePickerVariantProps> &
+  CalendarVariants & {
+    isDisabled?: boolean;
+    ariaLabelledby?: string;
+  };
+export const StyledField = forwardRef<HTMLDivElement, StyledFieldProps>(
+  function StyledField(props, ref) {
+    const { children, variant, isDisabled, ariaLabelledby, ...otherProps } =
+      props;
+    const { invalid } = useFieldContext() ?? {
       isInvalid: false,
     };
 
-    const styles = useMultiStyleConfig("Datepicker", { variant });
+    const recipe = useSlotRecipe({
+      key: "datePicker",
+      recipe: datePickerSlotRecipe,
+    });
+    const styles = recipe({ variant });
 
     return (
       <Box
         {...otherProps}
-        __css={styles.wrapper}
+        css={styles.wrapper}
         ref={ref}
-        aria-invalid={isInvalid}
+        aria-invalid={invalid}
         aria-disabled={isDisabled}
         aria-labelledby={ariaLabelledby}
       >

package/src/datepicker/TimeField.tsx

@@ -1,9 +1,9 @@
+"use client";
 import { Box, Flex } from "@chakra-ui/react";
 import { CalendarDateTime, Time } from "@internationalized/date";
 import React, { useRef } from "react";
 import { AriaTimeFieldProps, useTimeField } from "react-aria";
 import { TimeFieldState } from "@react-stately/datepicker";
-import { FormLabel } from "..";
 import { DateTimeSegment } from "./DateTimeSegment";
 import { getTimestampFromTime } from "./utils";
 
@@ -23,17 +23,19 @@ export const TimeField = ({ state, ...props }: TimeFieldProps) => {
 
   return (
     <Box>
-      <FormLabel
+      <label
         {...labelProps}
         htmlFor={fieldProps.id}
-        marginBottom={0}
-        fontSize="mobile.xs"
-        cursor="text"
-        position="absolute"
-        paddingTop="2px"
+        style={{
+          marginBottom: 0,
+          fontSize: "mobile.xs",
+          cursor: "text",
+          position: "absolute",
+          paddingTop: "2px",
+        }}
       >
         {props.label}
-      </FormLabel>
+      </label>
       <Flex {...fieldProps} ref={ref} paddingTop="3" paddingBottom="0.5">
         {state.segments.map((segment) => (
           <DateTimeSegment key={segment.type} segment={segment} state={state} />