@vygruppen/spor-react 12.24.16 → 13.0.1

package/src/input/Input.tsx

@@ -9,7 +9,6 @@ import {
 } from "@chakra-ui/react";
 import React, {
   ComponentProps,
-  forwardRef,
   ReactNode,
   useId,
   useImperativeHandle,
@@ -64,100 +63,96 @@ export type InputProps = FieldProps &
  * @see https://spor.vy.no/components/input
  */
 
-export const Input = forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      startElement,
-      endElement,
-      label,
-      invalid,
-      helperText,
-      errorText,
-      required,
-      hidden,
-      fontSize,
-      labelAsChild,
-      ...props
-    },
-    ref,
-  ) => {
-    const recipe = useRecipe({ key: "input" });
-    const [recipeProps, restProps] = recipe.splitVariantProps(props);
-    const styles = recipe(recipeProps);
+export const Input = ({
+  ref,
+  startElement,
+  endElement,
+  label,
+  invalid,
+  helperText,
+  errorText,
+  required,
+  hidden,
+  fontSize,
+  labelAsChild,
+  ...props
+}: InputProps & {
+  ref?: React.Ref<HTMLInputElement | null>;
+}) => {
+  const recipe = useRecipe({ key: "input" });
+  const [recipeProps, restProps] = recipe.splitVariantProps(props);
+  const styles = recipe(recipeProps);
 
-    const labelId = useId();
+  const labelId = useId();
 
-    const inputRef = useRef<HTMLInputElement>(null);
-    useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);
+  const inputRef = useRef<HTMLInputElement>(null);
+  useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);
 
-    const { shouldFloat, handleFocus, handleBlur, handleChange, isControlled } =
-      useFloatingInputState<HTMLInputElement>({
-        value: props.value,
-        defaultValue: props.defaultValue,
-        onFocus: props.onFocus,
-        onBlur: props.onBlur,
-        onChange: props.onChange,
-        inputRef,
-      });
+  const { shouldFloat, handleFocus, handleBlur, handleChange, isControlled } =
+    useFloatingInputState<HTMLInputElement>({
+      value: props.value,
+      defaultValue: props.defaultValue,
+      onFocus: props.onFocus,
+      onBlur: props.onBlur,
+      onChange: props.onChange,
+      inputRef: inputRef as React.RefObject<HTMLInputElement>,
+    });
 
-    return (
-      <Field
-        invalid={invalid}
-        helperText={helperText}
-        required={required}
-        hidden={hidden}
-        errorText={errorText}
-        id={props.id}
-        labelAsChild={labelAsChild}
-        label={
-          <Flex id={labelId}>
-            <Box visibility="hidden">{startElement}</Box>
-            {label}
-          </Flex>
-        }
-        floatingLabel={true}
-        shouldFloat={shouldFloat}
-      >
-        {startElement && (
-          <InputElement
-            pointerEvents="none"
-            paddingX={2}
-            aria-hidden="true"
-            fontSize={fontSize ?? "mobile.md"}
-          >
-            {startElement}
-          </InputElement>
-        )}
-        <ChakraInput
-          data-attachable
-          ref={inputRef}
-          focusVisibleRing="outside"
-          overflow="hidden"
-          paddingLeft={startElement ? "2.6rem" : undefined}
-          paddingRight={endElement ? "2.6rem" : undefined}
-          {...restProps}
-          className={`peer ${props.className || ""}`}
-          value={isControlled ? props.value : undefined}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onChange={handleChange}
-          placeholder=""
-          css={styles}
+  return (
+    <Field
+      invalid={invalid}
+      helperText={helperText}
+      required={required}
+      hidden={hidden}
+      errorText={errorText}
+      id={props.id}
+      labelAsChild={labelAsChild}
+      label={
+        <Flex id={labelId}>
+          <Box visibility="hidden">{startElement}</Box>
+          {label}
+        </Flex>
+      }
+      floatingLabel={true}
+      shouldFloat={shouldFloat}
+    >
+      {startElement && (
+        <InputElement
+          pointerEvents="none"
+          paddingX={2}
+          aria-hidden="true"
           fontSize={fontSize ?? "mobile.md"}
           aria-labelledby={labelId}
-        />
-        {endElement && (
-          <InputElement
-            placement="end"
-            paddingX={2}
-            fontSize={fontSize ?? "mobile.md"}
-          >
-            {endElement}
-          </InputElement>
-        )}
-      </Field>
-    );
-  },
-);
-
-Input.displayName = "Input";
+        >
+          {startElement}
+        </InputElement>
+      )}
+      <ChakraInput
+        data-attachable
+        ref={inputRef}
+        focusVisibleRing="outside"
+        overflow="hidden"
+        paddingLeft={startElement ? "2.6rem" : undefined}
+        paddingRight={endElement ? "2.6rem" : undefined}
+        {...restProps}
+        className={`peer ${props.className || ""}`}
+        value={isControlled ? props.value : undefined}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onChange={handleChange}
+        placeholder=""
+        css={styles}
+        fontSize={fontSize ?? "mobile.md"}
+      />
+      {endElement && (
+        <InputElement
+          placement="end"
+          paddingX={2}
+          fontSize={fontSize ?? "mobile.md"}
+        >
+          {endElement}
+        </InputElement>
+      )}
+    </Field>
+  );
+};

package/src/input/ListBox.tsx

@@ -106,8 +106,6 @@ export const ListBox = (props: ListBoxProps<object>) => {
   );
 };
 
-ListBox.displayName = "ListBox";
-
 /**
  * Renders a label for a listbox item.
  *
@@ -143,7 +141,7 @@ type OptionProps = {
   state: SelectState<unknown> | ListState<unknown>;
 };
 function Option({ item, state }: OptionProps) {
-  const ref = useRef(null);
+  const ref = useRef<HTMLLIElement>(null);
   const {
     optionProps,
     isSelected,
@@ -177,7 +175,7 @@ function Option({ item, state }: OptionProps) {
   TODO: Follow up with react-spectrum to see if they can solve it on their end
   */
   useEffect(() => {
-    (ref as React.RefObject<HTMLDivElement>)?.current?.addEventListener(
+    ref.current?.addEventListener(
       "touchend",
       (event: TouchEvent) => {
         event.preventDefault();
@@ -185,6 +183,7 @@ function Option({ item, state }: OptionProps) {
       { passive: false, once: true },
     );
   }, []);
+
   return (
     <OptionContext.Provider value={{ labelProps, descriptionProps }}>
       <ListItem

package/src/input/Menu.tsx

@@ -18,7 +18,7 @@ import {
   DropdownDownFill18Icon,
   DropdownDownFill24Icon,
 } from "@vygruppen/spor-icon-react";
-import { forwardRef, ReactNode } from "react";
+import { ReactNode, Ref } from "react";
 import { createContext, useContext } from "react";
 
 import { Button, ButtonProps, Checkbox } from "..";
@@ -48,166 +48,173 @@ export const useMenuContext = () => useContext(CustomMenuContext);
  * ```
  *
  */
-
 export const Menu = ({ children, ...props }: MenuRootProps) => {
   return (
-    <CustomMenuContext.Provider
-      value={{
-        variant: props.variant,
-      }}
-    >
+    <CustomMenuContext.Provider value={{ variant: props.variant }}>
       <ChakraMenu.Root {...props}>{children}</ChakraMenu.Root>
     </CustomMenuContext.Provider>
   );
 };
 
-export const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <Portal>
-        <ChakraMenu.Positioner>
-          <ChakraMenu.Content ref={ref} {...props}>
-            {children}
-          </ChakraMenu.Content>
-        </ChakraMenu.Positioner>
-      </Portal>
-    );
-  },
-);
-MenuContent.displayName = "MenuContent";
+export const MenuContent = ({
+  children,
+  ref,
+  ...props
+}: MenuContentProps & { ref?: Ref<HTMLDivElement> }) => {
+  return (
+    <Portal>
+      <ChakraMenu.Positioner>
+        <ChakraMenu.Content ref={ref} {...props}>
+          {children}
+        </ChakraMenu.Content>
+      </ChakraMenu.Positioner>
+    </Portal>
+  );
+};
 
 export type MenuTriggerProps = {
-  /** An optional trigger button icon, rendered to the left of the label */
   icon?: ReactNode;
-} & Omit<ButtonProps, "variant" | "rightIcon" | "leftIcon">;
-
-export const MenuTrigger = forwardRef<HTMLButtonElement, MenuTriggerProps>(
-  ({ icon, size, children, ...props }, ref) => {
-    const { variant } = useMenuContext();
-    const { open } = useChakraMenuContext();
-    const ChevronIcon =
-      size === "sm" ? DropdownDownFill18Icon : DropdownDownFill24Icon;
-
-    const getButtonVariant = (): ButtonProps["variant"] => {
-      if (variant === "floating") return "floating";
-      if (variant === "accent") return "secondary";
-      return "tertiary";
-    };
-
-    return (
-      <ChakraMenu.Trigger asChild ref={ref}>
-        <Button
-          leftIcon={icon}
-          variant={getButtonVariant()}
-          size={size}
-          {...props}
-          rightIcon={
-            <ChevronIcon
-              transform={open ? "rotate(180deg)" : undefined}
-              transition="transform 0.3s"
-            />
-          }
-        >
-          {children}
-        </Button>
-      </ChakraMenu.Trigger>
-    );
-  },
-);
-MenuTrigger.displayName = "MenuTrigger";
+} & Omit<ButtonProps, "variant" | "rightIcon" | "leftIcon"> & {
+    ref?: Ref<HTMLButtonElement>;
+  };
+
+export const MenuTrigger = ({
+  icon,
+  size,
+  children,
+  ref,
+  ...props
+}: MenuTriggerProps) => {
+  const { variant } = useMenuContext();
+  const { open } = useChakraMenuContext();
+  const ChevronIcon =
+    size === "sm" ? DropdownDownFill18Icon : DropdownDownFill24Icon;
+
+  const getButtonVariant = (): ButtonProps["variant"] => {
+    if (variant === "floating") return "floating";
+    if (variant === "accent") return "secondary";
+    return "tertiary";
+  };
+
+  return (
+    <ChakraMenu.Trigger asChild ref={ref}>
+      <Button
+        leftIcon={icon}
+        variant={getButtonVariant()}
+        size={size}
+        {...props}
+        rightIcon={
+          <ChevronIcon
+            transform={open ? "rotate(180deg)" : undefined}
+            transition="transform 0.3s"
+          />
+        }
+      >
+        {children}
+      </Button>
+    </ChakraMenu.Trigger>
+  );
+};
 
 export type MenuItemProps = {
-  /** Display a command in the menu */
   itemCommand?: string;
-  /* Display icon to the left */
   leftIcon?: React.ReactNode;
-  /* Display icon to the right */
   rightIcon?: React.ReactNode;
-} & ChakraMenuItemProps;
-
-export const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(
-  ({ itemCommand, children, value, leftIcon, rightIcon, ...props }, ref) => {
-    return (
-      <ChakraMenu.Item value={value} {...props} ref={ref}>
-        {leftIcon}
-        {children}
-        {itemCommand && (
-          <ChakraMenu.ItemCommand>{itemCommand}</ChakraMenu.ItemCommand>
-        )}
-        {rightIcon}
-      </ChakraMenu.Item>
-    );
-  },
-);
-MenuItem.displayName = "MenuItem";
+} & ChakraMenuItemProps & { ref?: Ref<HTMLDivElement> };
+
+export const MenuItem = ({
+  itemCommand,
+  children,
+  value,
+  leftIcon,
+  rightIcon,
+  ref,
+  ...props
+}: MenuItemProps) => {
+  return (
+    <ChakraMenu.Item value={value} {...props} ref={ref}>
+      {leftIcon}
+      {children}
+      {itemCommand && (
+        <ChakraMenu.ItemCommand>{itemCommand}</ChakraMenu.ItemCommand>
+      )}
+      {rightIcon}
+    </ChakraMenu.Item>
+  );
+};
 
 export type MenuTriggerItemProps = {
-  /* Display icon to the left */
   leftIcon?: React.ReactNode;
-  /* Display icon to the right */
   rightIcon?: React.ReactNode;
-} & ChakraMenuTriggerItemProps;
+} & ChakraMenuTriggerItemProps & { ref?: Ref<HTMLDivElement> };
+
+export const MenuTriggerItem = ({
+  children,
+  leftIcon,
+  rightIcon,
+  ref,
+  ...props
+}: MenuTriggerItemProps) => {
+  return (
+    <ChakraMenu.TriggerItem {...props} ref={ref}>
+      {leftIcon}
+      {children}
+      {rightIcon}
+    </ChakraMenu.TriggerItem>
+  );
+};
 
-export const MenuTriggerItem = forwardRef<HTMLDivElement, MenuTriggerItemProps>(
-  ({ children, leftIcon, rightIcon, ...props }, ref) => {
-    return (
-      <ChakraMenu.TriggerItem {...props} ref={ref}>
-        {leftIcon}
-        {children}
-        {rightIcon}
-      </ChakraMenu.TriggerItem>
-    );
-  },
-);
-MenuTriggerItem.displayName = "MenuTriggerItem";
-
-export const MenuRadioItemGroup = forwardRef<
-  HTMLDivElement,
-  MenuRadioItemGroupProps
->(({ children, ...props }) => {
+export const MenuRadioItemGroup = ({
+  children,
+  ref,
+  ...props
+}: MenuRadioItemGroupProps & { ref?: Ref<HTMLDivElement> }) => {
   return (
-    <ChakraMenu.RadioItemGroup {...props}>{children}</ChakraMenu.RadioItemGroup>
+    <ChakraMenu.RadioItemGroup {...props} ref={ref}>
+      {children}
+    </ChakraMenu.RadioItemGroup>
   );
-});
-MenuRadioItemGroup.displayName = "MenuRadioItemGroup";
+};
 
-export const MenuRadioItem = forwardRef<HTMLDivElement, MenuRadioItemProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <ChakraMenu.RadioItem {...props} ref={ref}>
-        {children}
-        <Flex w="1.25rem" justify="center" align="center">
-          <ChakraMenu.ItemIndicator />
-        </Flex>
-      </ChakraMenu.RadioItem>
-    );
-  },
-);
-MenuRadioItem.displayName = "MenuRadioItem";
+export const MenuRadioItem = ({
+  children,
+  ref,
+  ...props
+}: MenuRadioItemProps & { ref?: Ref<HTMLDivElement> }) => {
+  return (
+    <ChakraMenu.RadioItem {...props} ref={ref}>
+      {children}
+      <Flex w="1.25rem" justify="center" align="center">
+        <ChakraMenu.ItemIndicator />
+      </Flex>
+    </ChakraMenu.RadioItem>
+  );
+};
 
 export type MenuItemGroupProps = {
-  /** Display group label */
   label?: string;
-} & ChakraMenuItemGroupProps;
-
-export const MenuItemGroup = forwardRef<HTMLDivElement, MenuItemGroupProps>(
-  ({ children, label, ...props }, ref) => {
-    return (
-      <ChakraMenu.ItemGroup {...props} ref={ref}>
-        {label && (
-          <ChakraMenu.ItemGroupLabel>{label}</ChakraMenu.ItemGroupLabel>
-        )}
-        {children}
-      </ChakraMenu.ItemGroup>
-    );
-  },
-);
-MenuItemGroup.displayName = "MenuItemGroup";
-
-export const MenuCheckboxItem = forwardRef<
-  HTMLDivElement,
-  MenuCheckboxItemProps
->(({ children, closeOnSelect = false, ...props }, ref) => {
+} & ChakraMenuItemGroupProps & { ref?: Ref<HTMLDivElement> };
+
+export const MenuItemGroup = ({
+  children,
+  label,
+  ref,
+  ...props
+}: MenuItemGroupProps) => {
+  return (
+    <ChakraMenu.ItemGroup {...props} ref={ref}>
+      {label && <ChakraMenu.ItemGroupLabel>{label}</ChakraMenu.ItemGroupLabel>}
+      {children}
+    </ChakraMenu.ItemGroup>
+  );
+};
+
+export const MenuCheckboxItem = ({
+  children,
+  closeOnSelect = false,
+  ref,
+  ...props
+}: MenuCheckboxItemProps & { ref?: Ref<HTMLDivElement> }) => {
   return (
     <ChakraMenu.CheckboxItem
       {...props}
@@ -224,11 +231,11 @@ export const MenuCheckboxItem = forwardRef<
       </Checkbox>
     </ChakraMenu.CheckboxItem>
   );
-});
-
-MenuCheckboxItem.displayName = "MenuCheckboxItem";
+};
 
-export const MenuSeparator = forwardRef<MenuSeparatorProps>(({ ...props }) => {
-  return <ChakraMenu.Separator {...props} />;
-});
-MenuSeparator.displayName = "MenuSeparator";
+export const MenuSeparator = ({
+  ref,
+  ...props
+}: MenuSeparatorProps & { ref?: Ref<HTMLHRElement> }) => {
+  return <ChakraMenu.Separator ref={ref} {...props} />;
+};

package/src/input/NativeSelect.tsx

@@ -39,10 +39,12 @@ export type NativeSelectdProps =
  *
  */
 
-export const NativeSelect = React.forwardRef<
-  HTMLDivElement,
-  NativeSelectdProps
->(function NativeSelect(props, ref) {
+export const NativeSelect = function NativeSelect({
+  ref,
+  ...props
+}: NativeSelectdProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}) {
   const {
     children,
     variant = "core",
@@ -88,4 +90,4 @@ export const NativeSelect = React.forwardRef<
       </ChakraNativeSelect.Root>
     </Field>
   );
-});
+};

package/src/input/NumericStepper.tsx

@@ -63,10 +63,12 @@ export type NumericStepperProps = FieldBaseProps &
  * @see https://spor.vy.no/components/numeric-stepper
  */
 
-export const NumericStepper = React.forwardRef<
-  HTMLDivElement,
-  NumericStepperProps
->((props: NumericStepperProps, ref) => {
+export const NumericStepper = ({
+  ref,
+  ...props
+}: NumericStepperProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}) => {
   const {
     name: nameProperty,
     id: idProperty,
@@ -192,8 +194,7 @@ export const NumericStepper = React.forwardRef<
       />
     </Field>
   );
-});
-NumericStepper.displayName = "NumericStepper";
+};
 
 type VerySmallButtonProps = {
   /** The icon to render */
@@ -213,11 +214,14 @@ type VerySmallButtonProps = {
 };
 
 /** Internal override for extra small icon buttons */
-const VerySmallButton = React.forwardRef<
-  HTMLButtonElement,
-  VerySmallButtonProps
->((props, ref) => {
+const VerySmallButton = ({
+  ref,
+  ...props
+}: VerySmallButtonProps & {
+  ref?: React.Ref<HTMLButtonElement | null>;
+}) => {
   const { withStepLabel = false, ...rest } = props;
+
   const recipe = useSlotRecipe({ key: "numericStepper" });
   const styles = recipe({ withStepLabel });
   return (
@@ -229,8 +233,7 @@ const VerySmallButton = React.forwardRef<
       {...rest}
     />
   );
-});
-VerySmallButton.displayName = "VerySmallButton";
+};
 
 type IconPropertyTypes = BoxProps & { stepLabel: number };