@vygruppen/spor-react 12.24.16 → 13.0.1

package/src/datepicker/DateField.tsx

@@ -2,7 +2,7 @@
 import { Box, Field, Flex, useSlotRecipe } from "@chakra-ui/react";
 import { DateValue, GregorianCalendar } from "@internationalized/date";
 import { DOMAttributes, FocusableElement } from "@react-types/shared";
-import React, { forwardRef, PropsWithChildren, RefObject, useRef } from "react";
+import React, { PropsWithChildren, RefObject, useRef } from "react";
 import { AriaDateFieldProps, useDateField } from "react-aria";
 import { DateSegment, useDateFieldState } from "react-stately";
 
@@ -30,60 +30,62 @@ type DateFieldProps = AriaDateFieldProps<DateValue> &
     labelProps?: DOMAttributes<FocusableElement>;
     name?: string;
   };
-export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
-  (props, externalRef) => {
-    const locale = useCurrentLocale();
+export const DateField = ({
+  ref: externalRef,
+  ...props
+}: DateFieldProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}) => {
+  const locale = useCurrentLocale();
 
-    const recipe = useSlotRecipe({
-      key: "datePicker",
-    });
-    const styles = recipe({});
-    const state = useDateFieldState({
-      ...props,
-      locale,
-      createCalendar,
-    });
+  const recipe = useSlotRecipe({
+    key: "datePicker",
+  });
+  const styles = recipe({});
+  const state = useDateFieldState({
+    ...props,
+    locale,
+    createCalendar,
+  });
 
-    const { t } = useTranslation();
+  const { t } = useTranslation();
 
-    const internalRef = useRef(null);
-    const ref = externalRef ?? internalRef;
-    const { fieldProps } = useDateField(
-      props,
-      state,
-      ref as RefObject<HTMLDivElement>,
-    );
+  const internalRef = useRef(null);
+  const ref = externalRef ?? internalRef;
+  const { fieldProps } = useDateField(
+    props,
+    state,
+    ref as RefObject<HTMLDivElement>,
+  );
 
-    return (
-      <Box minWidth="6rem" width="100%">
-        {props.label && (
-          <Box css={styles.inputLabel} position="absolute" paddingTop="2px">
-            <Label padding="0" {...props.labelProps}>
-              {props.label} <Field.RequiredIndicator />
-            </Label>
-          </Box>
-        )}
-        <Flex {...fieldProps} ref={ref} paddingTop="3" paddingBottom="0.5">
-          {state.segments.map((segment, index) => (
-            <DateTimeSegment
-              key={index}
-              segment={segment}
-              ariaDescription={t(getAriaLabel(segment.type))}
-              state={state}
-            />
-          ))}
-        </Flex>
-        <input
-          type="hidden"
-          value={state.value?.toString() ?? ""}
-          name={props.name}
-          id={props.id}
-        />
-      </Box>
-    );
-  },
-);
-DateField.displayName = "DateField";
+  return (
+    <Box minWidth="6rem" width="100%">
+      {props.label && (
+        <Box css={styles.inputLabel} position="absolute" paddingTop="2px">
+          <Label padding="0" {...props.labelProps}>
+            {props.label} <Field.RequiredIndicator />
+          </Label>
+        </Box>
+      )}
+      <Flex {...fieldProps} ref={ref} paddingTop="3" paddingBottom="0.5">
+        {state.segments.map((segment, index) => (
+          <DateTimeSegment
+            key={index}
+            segment={segment}
+            ariaDescription={t(getAriaLabel(segment.type))}
+            state={state}
+          />
+        ))}
+      </Flex>
+      <input
+        type="hidden"
+        value={state.value?.toString() ?? ""}
+        name={props.name}
+        id={props.id}
+      />
+    </Box>
+  );
+};
 
 const texts = createTexts({
   day: {

package/src/datepicker/DatePicker.tsx

@@ -12,7 +12,7 @@ import {
   useSlotRecipe,
 } from "@chakra-ui/react";
 import { CalendarOutline24Icon } from "@vygruppen/spor-icon-react";
-import React, { forwardRef, PropsWithChildren, useId, useRef } from "react";
+import React, { PropsWithChildren, useId, useRef } from "react";
 import {
   AriaDatePickerProps,
   DateValue,
@@ -62,136 +62,129 @@ type DatePickerProps = Omit<AriaDatePickerProps<DateValue>, "onChange"> &
  * ```
  */
 
-export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
-  (
-    {
-      variant,
-      errorText,
-      minHeight,
-      showYearNavigation,
-      withPortal = true,
-      width = "auto",
-      invalid = false,
-      helperText,
-      positioning,
-      css,
-      ...props
-    },
-    externalRef,
-  ) => {
-    const chakraFieldProps = useFieldContext();
-    const state = useDatePickerState({
-      ...props,
-      shouldCloseOnSelect: true,
-      onChange: props.onValueChange,
-      errorMessage: errorText,
-      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 } =
-      useDatePicker(
-        props,
-        state,
-        ref as React.MutableRefObject<HTMLDivElement>,
-      );
-
-    const inputGroupId = `input-group-${useId()}`;
-
-    const recipe = useSlotRecipe({
-      key: "datePicker",
-    });
-
-    const styles = recipe({ variant });
-    const locale = useCurrentLocale();
-
-    const shouldShowCalendar =
-      state.isOpen && !props.isDisabled && !props.noCalendar;
-
-    const onFieldClick = () => {
-      if (!props.noCalendar) {
-        state.setOpen(true);
-      }
-      props.onClick?.();
-    };
-
-    const popoverContent = (
-      <ChakraPopover.Positioner>
-        <ChakraPopover.Content css={styles.calendarPopover}>
-          <ChakraPopover.Body minWidth="20rem">
-            <Calendar
-              {...calendarProps}
-              variant={variant}
-              showYearNavigation={showYearNavigation}
-              css={css}
-            />
-          </ChakraPopover.Body>
-        </ChakraPopover.Content>
-      </ChakraPopover.Positioner>
-    );
-
-    return (
-      <I18nProvider locale={locale}>
-        <Box
-          position="relative"
-          display="inline-flex"
-          flexDirection="column"
-          width={width}
-          css={css}
-        >
-          <ChakraPopover.Root {...dialogProps} positioning={positioning}>
-            <Field
-              display="inline-flex"
-              id={inputGroupId}
-              errorText={errorText}
-              invalid={invalid}
-              helperText={helperText}
-              required={props.required}
-            >
-              <PopoverAnchor>
-                <StyledField
-                  variant={variant}
-                  onClick={onFieldClick}
-                  paddingX={3}
-                  minHeight={minHeight}
-                  isDisabled={props.isDisabled}
-                  isActive={props.isActive}
-                  overrideBorderColor={props.overrideBorderColor}
-                >
-                  {props.noCalendar ? (
-                    <Box pr={3} pl={0.5} mr={0.5}>
-                      <CalendarOutline24Icon />
-                    </Box>
-                  ) : (
-                    <ChakraPopover.Trigger asChild>
-                      <CalendarTriggerButton
-                        paddingLeft={1}
-                        paddingRight={1}
-                        variant={variant}
-                        ref={ref}
-                        {...buttonProps}
-                      />
-                    </ChakraPopover.Trigger>
-                  )}
-
-                  <DateField
-                    label={props.label}
-                    labelProps={labelProps}
-                    name={props.name}
-                    {...fieldProps}
-                  />
-                </StyledField>
-              </PopoverAnchor>
-            </Field>
-
-            {shouldShowCalendar &&
-              (withPortal ? <Portal>{popoverContent}</Portal> : popoverContent)}
-          </ChakraPopover.Root>
-        </Box>
-      </I18nProvider>
-    );
-  },
-);
-DatePicker.displayName = "DatePicker";
+export const DatePicker = ({
+  ref: externalRef,
+  variant,
+  errorText,
+  minHeight,
+  showYearNavigation,
+  withPortal = true,
+  width = "auto",
+  invalid = false,
+  helperText,
+  positioning,
+  css,
+  ...props
+}: DatePickerProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}) => {
+  const chakraFieldProps = useFieldContext();
+  const state = useDatePickerState({
+    ...props,
+    shouldCloseOnSelect: true,
+    onChange: props.onValueChange,
+    errorMessage: errorText,
+    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 } =
+    useDatePicker(props, state, ref as React.MutableRefObject<HTMLDivElement>);
+
+  const inputGroupId = `input-group-${useId()}`;
+
+  const recipe = useSlotRecipe({
+    key: "datePicker",
+  });
+
+  const styles = recipe({ variant });
+  const locale = useCurrentLocale();
+
+  const shouldShowCalendar =
+    state.isOpen && !props.isDisabled && !props.noCalendar;
+
+  const onFieldClick = () => {
+    if (!props.noCalendar) {
+      state.setOpen(true);
+    }
+    props.onClick?.();
+  };
+
+  const popoverContent = (
+    <ChakraPopover.Positioner>
+      <ChakraPopover.Content css={styles.calendarPopover}>
+        <ChakraPopover.Body minWidth="20rem">
+          <Calendar
+            {...calendarProps}
+            variant={variant}
+            showYearNavigation={showYearNavigation}
+            css={css}
+          />
+        </ChakraPopover.Body>
+      </ChakraPopover.Content>
+    </ChakraPopover.Positioner>
+  );
+
+  return (
+    <I18nProvider locale={locale}>
+      <Box
+        position="relative"
+        display="inline-flex"
+        flexDirection="column"
+        width={width}
+        css={css}
+      >
+        <ChakraPopover.Root {...dialogProps} positioning={positioning}>
+          <Field
+            display="inline-flex"
+            id={inputGroupId}
+            errorText={errorText}
+            invalid={invalid}
+            helperText={helperText}
+            required={props.required}
+          >
+            <PopoverAnchor>
+              <StyledField
+                variant={variant}
+                onClick={onFieldClick}
+                paddingX={3}
+                minHeight={minHeight}
+                isDisabled={props.isDisabled}
+                isActive={props.isActive}
+                overrideBorderColor={props.overrideBorderColor}
+              >
+                {props.noCalendar ? (
+                  <Box pr={3} pl={0.5} mr={0.5}>
+                    <CalendarOutline24Icon />
+                  </Box>
+                ) : (
+                  <ChakraPopover.Trigger asChild>
+                    <CalendarTriggerButton
+                      paddingLeft={1}
+                      paddingRight={1}
+                      variant={variant}
+                      ref={ref}
+                      {...buttonProps}
+                    />
+                  </ChakraPopover.Trigger>
+                )}
+
+                <DateField
+                  label={props.label}
+                  labelProps={labelProps}
+                  name={props.name}
+                  {...fieldProps}
+                />
+              </StyledField>
+            </PopoverAnchor>
+          </Field>
+
+          {shouldShowCalendar &&
+            (withPortal ? <Portal>{popoverContent}</Portal> : popoverContent)}
+        </ChakraPopover.Root>
+      </Box>
+    </I18nProvider>
+  );
+};

package/src/datepicker/DateTimeSegment.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { Box, useSlotRecipe } from "@chakra-ui/react";
-import { forwardRef, PropsWithChildren, RefObject, useRef } from "react";
+import { PropsWithChildren, RefObject, useRef } from "react";
 import { useDateSegment } from "react-aria";
 import { DateFieldState, DateSegment } from "react-stately";
 
@@ -19,49 +19,53 @@ type DateTimeSegmentProps = PropsWithChildren<DatePickerVariantProps> & {
  *
  * This component should be used with the react-aria library, and is not meant to be used directly.
  * */
-export const DateTimeSegment = forwardRef<HTMLDivElement, DateTimeSegmentProps>(
-  ({ segment, state, ariaLabel, ariaDescription, variant }, externalRef) => {
-    const internalRef = useRef(null);
-    const ref = externalRef ?? internalRef;
+export const DateTimeSegment = ({
+  ref: externalRef,
+  segment,
+  state,
+  ariaLabel,
+  ariaDescription,
+  variant,
+}: DateTimeSegmentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}) => {
+  const internalRef = useRef(null);
+  const ref = externalRef ?? internalRef;
 
-    const { segmentProps } = useDateSegment(
-      segment,
-      state,
-      ref as RefObject<HTMLDivElement>,
-    );
+  const { segmentProps } = useDateSegment(
+    segment,
+    state,
+    ref as RefObject<HTMLDivElement>,
+  );
 
-    const recipe = useSlotRecipe({
-      key: "datePicker",
-    });
+  const recipe = useSlotRecipe({
+    key: "datePicker",
+  });
 
-    const styles = recipe({
-      variant,
-    });
+  const styles = recipe({
+    variant,
+  });
 
-    return (
-      <Box
-        {...segmentProps}
-        ref={ref}
-        style={{
-          ...segmentProps.style,
-          boxSizing: "content-box",
-        }}
-        textAlign="center"
-        outline="none"
-        borderRadius="xs"
-        fontSize={["mobile.sm", "desktop.sm"]}
-        css={styles.dateTimeSegment}
-        aria-label={ariaDescription}
-        aria-labelledby={ariaLabel}
-      >
-        {isPaddable(segment.type)
-          ? segment.text.padStart(2, "0")
-          : segment.text}
-      </Box>
-    );
-  },
-);
-DateTimeSegment.displayName = "DateTimeSegment";
+  return (
+    <Box
+      {...segmentProps}
+      ref={ref}
+      style={{
+        ...segmentProps.style,
+        boxSizing: "content-box",
+      }}
+      textAlign="center"
+      outline="none"
+      borderRadius="xs"
+      fontSize={["mobile.sm", "desktop.sm"]}
+      css={styles.dateTimeSegment}
+      aria-label={ariaDescription}
+      aria-labelledby={ariaLabel}
+    >
+      {isPaddable(segment.type) ? segment.text.padStart(2, "0") : segment.text}
+    </Box>
+  );
+};
 
 const isPaddable = (segmentType: DateSegment["type"]) =>
   segmentType === "month" ||

package/src/datepicker/StyledField.tsx

@@ -5,7 +5,7 @@ import {
   useFieldContext,
   useSlotRecipe,
 } from "@chakra-ui/react";
-import { forwardRef, PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 
 import { DatePickerVariantProps } from "./DatePicker";
 import { CalendarVariants } from "./types";
@@ -17,40 +17,43 @@ type StyledFieldProps = BoxProps &
     isActive?: boolean;
     overrideBorderColor?: string;
   };
-export const StyledField = forwardRef<HTMLDivElement, StyledFieldProps>(
-  function StyledField(props, ref) {
-    const {
-      children,
-      variant,
-      isDisabled,
-      isActive,
-      overrideBorderColor,
-      ...otherProps
-    } = props;
-    const { invalid } = useFieldContext() ?? {
-      isInvalid: false,
-    };
+export const StyledField = function StyledField({
+  ref,
+  ...props
+}: StyledFieldProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}) {
+  const {
+    children,
+    variant,
+    isDisabled,
+    isActive,
+    overrideBorderColor,
+    ...otherProps
+  } = props;
+  const { invalid } = useFieldContext() ?? {
+    isInvalid: false,
+  };
 
-    const recipe = useSlotRecipe({
-      key: "datePicker",
-    });
-    const styles = recipe({ variant });
+  const recipe = useSlotRecipe({
+    key: "datePicker",
+  });
+  const styles = recipe({ variant });
 
-    return (
-      <Box
-        {...otherProps}
-        css={{
-          ...styles.wrapper,
-          outlineColor: overrideBorderColor || undefined,
-        }}
-        data-active={isActive ? "" : undefined}
-        ref={ref}
-        aria-invalid={invalid}
-        aria-disabled={isDisabled}
-        fontSize={["mobile.md", "desktop.md"]}
-      >
-        {children}
-      </Box>
-    );
-  },
-);
+  return (
+    <Box
+      {...otherProps}
+      css={{
+        ...styles.wrapper,
+        outlineColor: overrideBorderColor || undefined,
+      }}
+      data-active={isActive ? "" : undefined}
+      ref={ref}
+      aria-invalid={invalid}
+      aria-disabled={isDisabled}
+      fontSize={["mobile.md", "desktop.md"]}
+    >
+      {children}
+    </Box>
+  );
+};

package/src/dialog/Dialog.tsx

@@ -11,10 +11,12 @@ interface DialogContentProps extends ChakraDialog.ContentProps {
   children?: React.ReactNode;
 }
 
-export const DialogContent = React.forwardRef<
-  HTMLDivElement,
-  DialogContentProps
->((props, ref) => {
+export const DialogContent = ({
+  ref,
+  ...props
+}: DialogContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}) => {
   const {
     children,
     portalled = true,
@@ -33,19 +35,20 @@ export const DialogContent = React.forwardRef<
       </ChakraDialog.Positioner>
     </Portal>
   );
-});
-DialogContent.displayName = "DialogContent";
+};
 
-export const DialogCloseTrigger = React.forwardRef<
-  HTMLButtonElement,
-  ChakraDialog.CloseTriggerProps
->(function DialogCloseTrigger(props, ref) {
+export const DialogCloseTrigger = function DialogCloseTrigger({
+  ref,
+  ...props
+}: ChakraDialog.CloseTriggerProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}) {
   return (
     <ChakraDialog.CloseTrigger ref={ref} position="absolute" {...props} asChild>
       <CloseButton size="md" />
     </ChakraDialog.CloseTrigger>
   );
-});
+};
 
 export const DialogRoot = ChakraDialog.Root;
 export const DialogFooter = ChakraDialog.Footer;