@vygruppen/spor-react 12.24.15 → 13.0.0

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.RefObject<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

@@ -0,0 +1,241 @@
+"use client";
+import {
+  Flex,
+  Menu as ChakraMenu,
+  MenuCheckboxItemProps,
+  MenuContentProps,
+  MenuItemGroupProps as ChakraMenuItemGroupProps,
+  MenuItemProps as ChakraMenuItemProps,
+  MenuRadioItemGroupProps,
+  MenuRadioItemProps,
+  MenuRootProps,
+  MenuSeparatorProps,
+  MenuTriggerItemProps as ChakraMenuTriggerItemProps,
+  Portal,
+  useMenuContext as useChakraMenuContext,
+} from "@chakra-ui/react";
+import {
+  DropdownDownFill18Icon,
+  DropdownDownFill24Icon,
+} from "@vygruppen/spor-icon-react";
+import { ReactNode, Ref } from "react";
+import { createContext, useContext } from "react";
+
+import { Button, ButtonProps, Checkbox } from "..";
+
+type Variant = Pick<MenuRootProps, "variant">;
+
+const CustomMenuContext = createContext<Variant>({
+  variant: "core",
+});
+export const useMenuContext = () => useContext(CustomMenuContext);
+
+/**
+ * Menu component.
+ *
+ * Used to create an accessible dropdown menu. 
+ *
+ * @example
+ * ```tsx
+  <Menu> 
+    <MenuTrigger> Menu </MenuTrigger>
+    <MenuContent> 
+      <MenuItem value="1"> Item 1  </MenuItem>
+      <MenuItem value="2"> Item 2 </MenuItem>
+      <MenuItem value="3"> Item 3 </MenuItem>
+    </MenuContent>
+  </Menu>
+ * ```
+ *
+ */
+export const Menu = ({ children, ...props }: MenuRootProps) => {
+  return (
+    <CustomMenuContext.Provider value={{ variant: props.variant }}>
+      <ChakraMenu.Root {...props}>{children}</ChakraMenu.Root>
+    </CustomMenuContext.Provider>
+  );
+};
+
+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 = {
+  icon?: ReactNode;
+} & 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 = {
+  itemCommand?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+} & 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 = {
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+} & 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 MenuRadioItemGroup = ({
+  children,
+  ref,
+  ...props
+}: MenuRadioItemGroupProps & { ref?: Ref<HTMLDivElement> }) => {
+  return (
+    <ChakraMenu.RadioItemGroup {...props} ref={ref}>
+      {children}
+    </ChakraMenu.RadioItemGroup>
+  );
+};
+
+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 = {
+  label?: string;
+} & 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}
+      ref={ref}
+      closeOnSelect={closeOnSelect}
+      checked={props.checked}
+      onCheckedChange={props.onCheckedChange}
+    >
+      <Checkbox
+        checked={props.checked}
+        onCheckedChange={() => props.onCheckedChange}
+      >
+        {children}
+      </Checkbox>
+    </ChakraMenu.CheckboxItem>
+  );
+};
+
+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.RefObject<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.RefObject<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.RefObject<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 };
 

package/src/input/PasswordInput.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Button, useControllableState } from "@chakra-ui/react";
-import React, { forwardRef } from "react";
+import React from "react";
 
 import { ButtonProps, Input, InputProps } from "..";
 import { createTexts, useTranslation } from "..";
@@ -42,70 +42,74 @@ export interface PasswordInputProps
  * @see https://spor.vy.no/components/password-input
  */
 
-export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
-  (props, ref) => {
-    const {
-      defaultVisible,
-      visible: visibleProperty,
-      onVisibleChange,
-      label,
-      startElement,
-      ...rest
-    } = props;
+export const PasswordInput = ({
+  ref,
+  ...props
+}: PasswordInputProps & {
+  ref?: React.RefObject<HTMLInputElement>;
+}) => {
+  const {
+    defaultVisible,
+    visible: visibleProperty,
+    onVisibleChange,
+    label,
+    startElement,
+    ...rest
+  } = props;
 
-    const [visible, setVisible] = useControllableState({
-      value: visibleProperty,
-      defaultValue: defaultVisible || false,
-      onChange: onVisibleChange,
-    });
+  const [visible, setVisible] = useControllableState({
+    value: visibleProperty,
+    defaultValue: defaultVisible || false,
+    onChange: onVisibleChange,
+  });
 
-    const { t } = useTranslation();
+  const { t } = useTranslation();
 
-    return (
-      <Input
-        ref={ref}
-        startElement={startElement && startElement}
-        label={label}
-        type={visible ? "text" : "password"}
-        endElement={
-          <VisibilityTrigger
-            variant="ghost"
-            disabled={rest.disabled}
-            onPointerDown={(event) => {
-              if (rest.disabled) return;
-              if (event.button !== 0) return;
-              event.preventDefault();
-              setVisible(!visible);
-            }}
-          >
-            {visible ? t(texts.hidePassword) : t(texts.showPassword)}
-          </VisibilityTrigger>
-        }
-        {...rest}
-      />
-    );
-  },
-);
-PasswordInput.displayName = "PasswordInput";
+  return (
+    <Input
+      ref={ref}
+      startElement={startElement && startElement}
+      label={label}
+      type={visible ? "text" : "password"}
+      endElement={
+        <VisibilityTrigger
+          variant="ghost"
+          disabled={rest.disabled}
+          onPointerDown={(event) => {
+            if (rest.disabled) return;
+            if (event.button !== 0) return;
+            event.preventDefault();
+            setVisible(!visible);
+          }}
+        >
+          {visible ? t(texts.hidePassword) : t(texts.showPassword)}
+        </VisibilityTrigger>
+      }
+      {...rest}
+    />
+  );
+};
 
-const VisibilityTrigger = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
-    return (
-      <Button
-        ref={ref}
-        type="button"
-        fontWeight="normal"
-        size="sm"
-        borderRadius="sm"
-        marginRight={1}
-        {...props}
-      >
-        {props.children}
-      </Button>
-    );
-  },
-);
-VisibilityTrigger.displayName = "VisibilityTrigger";
+const VisibilityTrigger = ({
+  ref,
+  ...props
+}: ButtonProps & {
+  ref?: React.RefObject<HTMLButtonElement>;
+}) => {
+  return (
+    <Button
+      ref={ref}
+      type="button"
+      fontWeight="normal"
+      size="sm"
+      borderRadius="sm"
+      marginRight={1}
+      {...props}
+    >
+      {props.children}
+    </Button>
+  );
+};
 
 const texts = createTexts({
   showPassword: {