@vygruppen/spor-react 12.24.16 → 13.0.0

package/src/dialog/Drawer.tsx

@@ -11,7 +11,6 @@ import {
   ArrowLeftFill24Icon,
   CloseFill24Icon,
 } from "@vygruppen/spor-icon-react";
-import { forwardRef } from "react";
 import { useSwipeable } from "react-swipeable";
 
 import { ResponsiveButton } from "@/button/ResponsiveButton";
@@ -55,55 +54,60 @@ const [RootDrawerProvider, useRootDrawerProps] =
     name: "RootDrawerProvider",
   });
 
-export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
-  (props, ref) => {
-    const {
-      children,
-      portalled = true,
-      portalRef,
-      hideHandle = false,
-      ...rest
-    } = props;
-    const { size, placement } = useRootDrawerProps();
-    const { setOpen } = useDialogContext();
-    const handlers = useSwipeable({
-      onSwiped: ({ dir }) => {
-        const shouldClose =
-          (placement === "bottom" && dir === "Down") ||
-          (placement === "top" && dir === "Up") ||
-          (placement === "end" && dir === "Right") ||
-          (placement === "start" && dir === "Left");
-        if (shouldClose) {
-          setOpen(false);
-        }
-      },
-      swipeDuration: 250,
-    });
-    const sizeNotFull = size !== "full";
-    const showHandle = !hideHandle;
+export const DrawerContent = ({
+  ref,
+  ...props
+}: DrawerContentProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
+  const {
+    children,
+    portalled = true,
+    portalRef,
+    hideHandle = false,
+    ...rest
+  } = props;
+  const { size, placement } = useRootDrawerProps();
+  const { setOpen } = useDialogContext();
+  const handlers = useSwipeable({
+    onSwiped: ({ dir }) => {
+      const shouldClose =
+        (placement === "bottom" && dir === "Down") ||
+        (placement === "top" && dir === "Up") ||
+        (placement === "end" && dir === "Right") ||
+        (placement === "start" && dir === "Left");
+      if (shouldClose) {
+        setOpen(false);
+      }
+    },
+    swipeDuration: 250,
+  });
+  const sizeNotFull = size !== "full";
+  const showHandle = !hideHandle;
 
-    return (
-      <Portal disabled={!portalled} container={portalRef}>
-        <ChakraDrawer.Positioner asChild>
-          <Box {...handlers} width="100%">
-            <ChakraDrawer.Content ref={ref} {...rest}>
-              {showHandle && sizeNotFull && placement === "bottom" && (
-                <CloseDrawerLine />
-              )}
-              {children}
-              {showHandle && sizeNotFull && placement === "top" && (
-                <CloseDrawerLine />
-              )}
-            </ChakraDrawer.Content>
-          </Box>
-        </ChakraDrawer.Positioner>
-      </Portal>
-    );
-  },
-);
-DrawerContent.displayName = "DrawerContent";
+  return (
+    <Portal disabled={!portalled} container={portalRef}>
+      <ChakraDrawer.Positioner asChild>
+        <Box {...handlers} width="100%">
+          <ChakraDrawer.Content ref={ref} {...rest}>
+            {showHandle && sizeNotFull && placement === "bottom" && (
+              <CloseDrawerLine />
+            )}
+            {children}
+            {showHandle && sizeNotFull && placement === "top" && (
+              <CloseDrawerLine />
+            )}
+          </ChakraDrawer.Content>
+        </Box>
+      </ChakraDrawer.Positioner>
+    </Portal>
+  );
+};
 
-export const CloseDrawerLine = forwardRef<HTMLButtonElement>((props, ref) => {
+export const CloseDrawerLine = ({
+  ref,
+  ...props
+}: React.ComponentProps<typeof Box>) => {
   return (
     <Box
       width={7}
@@ -117,13 +121,14 @@ export const CloseDrawerLine = forwardRef<HTMLButtonElement>((props, ref) => {
       ref={ref}
     />
   );
-});
-CloseDrawerLine.displayName = "CloseDrawerLine";
+};
 
-export const DrawerCloseTrigger = forwardRef<
-  HTMLButtonElement,
-  DrawerCloseTriggerProps
->(function DrawerCloseTrigger(props, ref) {
+export const DrawerCloseTrigger = function DrawerCloseTrigger({
+  ref,
+  ...props
+}: DrawerCloseTriggerProps & {
+  ref?: React.RefObject<HTMLButtonElement>;
+}) {
   const { showText = false, ...rest } = props;
   const { size } = useRootDrawerProps();
   const { t } = useTranslation();
@@ -140,12 +145,14 @@ export const DrawerCloseTrigger = forwardRef<
       )}
     </ChakraDrawer.CloseTrigger>
   );
-});
+};
 
-export const DrawerBackTrigger = forwardRef<
-  HTMLButtonElement,
-  ChakraDrawer.CloseTriggerProps
->((props, ref) => {
+export const DrawerBackTrigger = ({
+  ref,
+  ...props
+}: ChakraDrawer.CloseTriggerProps & {
+  ref?: React.RefObject<HTMLButtonElement>;
+}) => {
   const { t } = useTranslation();
   return (
     <ChakraDrawer.CloseTrigger asChild {...props} ref={ref}>
@@ -156,13 +163,14 @@ export const DrawerBackTrigger = forwardRef<
       />
     </ChakraDrawer.CloseTrigger>
   );
-});
-DrawerBackTrigger.displayName = "DrawerBackTrigger";
+};
 
-export const DrawerFullScreenHeader = forwardRef<
-  HTMLDivElement,
-  DrawerFullScreenHeaderProps
->((props, ref) => {
+export const DrawerFullScreenHeader = ({
+  ref,
+  ...props
+}: DrawerFullScreenHeaderProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
   const { backTrigger = true, closeTrigger = true, children } = props;
   return (
     <ChakraDrawer.Header {...props} ref={ref}>
@@ -171,8 +179,7 @@ export const DrawerFullScreenHeader = forwardRef<
       <Box> {closeTrigger && <DrawerCloseTrigger />}</Box>
     </ChakraDrawer.Header>
   );
-});
-DrawerFullScreenHeader.displayName = "DrawerFullScreenHeader";
+};
 
 export const Drawer = (props: DrawerProps) => {
   const { children, placement, size = "md", ...rest } = props;

package/src/input/AttachedInputs.tsx

@@ -10,7 +10,6 @@ import {
   useRecipe,
 } from "@chakra-ui/react";
 import { ChangeDirectionOutline24Icon } from "@vygruppen/spor-icon-react";
-import { forwardRef } from "react";
 
 import { IconButton } from "@/button";
 import { attachedInputsRecipe } from "@/theme/recipes/attached-inputs";
@@ -43,47 +42,44 @@ export type AttachedInputsProps = RecipeVariantProps<
       }
   );
 
-export const AttachedInputs = forwardRef<HTMLDivElement, AttachedInputsProps>(
-  (props, ref) => {
-    const recipe = useRecipe({ key: "attachedInputs" });
-    const [recipeProps, { onFlip, flipAriaLabel, ...restProps }] =
-      recipe.splitVariantProps(props);
-    const styles = recipe(recipeProps);
-
-    if (!onFlip) {
-      return (
-        <Group
-          ref={ref}
-          css={styles}
-          attached
-          isolation="auto"
-          {...restProps}
-        />
-      );
-    }
+export const AttachedInputs = ({
+  ref,
+  ...props
+}: AttachedInputsProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
+  const recipe = useRecipe({ key: "attachedInputs" });
+  const [recipeProps, { onFlip, flipAriaLabel, ...restProps }] =
+    recipe.splitVariantProps(props);
+  const styles = recipe(recipeProps);
 
+  if (!onFlip) {
     return (
-      <Box position="relative">
-        <Group
-          ref={ref}
-          css={styles}
-          attached
-          isolation="auto"
-          data-with-flip-button
-          {...restProps}
-        />
-        <SwitchButton
-          icon={<ChangeDirectionOutline24Icon />}
-          orientation={props.orientation}
-          variant="tertiary"
-          size={["xs", null, "sm"]}
-          aria-label={flipAriaLabel}
-          onClick={onFlip}
-        />
-      </Box>
+      <Group ref={ref} css={styles} attached isolation="auto" {...restProps} />
     );
-  },
-);
+  }
+
+  return (
+    <Box position="relative">
+      <Group
+        ref={ref}
+        css={styles}
+        attached
+        isolation="auto"
+        data-with-flip-button
+        {...restProps}
+      />
+      <SwitchButton
+        icon={<ChangeDirectionOutline24Icon />}
+        orientation={props.orientation}
+        variant="tertiary"
+        size={["xs", null, "sm"]}
+        aria-label={flipAriaLabel}
+        onClick={onFlip}
+      />
+    </Box>
+  );
+};
 
 const SwitchButton = chakra(
   IconButton,
@@ -117,5 +113,3 @@ const SwitchButton = chakra(
     },
   }),
 );
-
-AttachedInputs.displayName = "AttachedInputs";

package/src/input/Autocomplete.tsx

@@ -8,7 +8,7 @@ import {
   useListCollection,
 } from "@chakra-ui/react";
 import { CheckmarkFill18Icon } from "@vygruppen/spor-icon-react";
-import React, { forwardRef } from "react";
+import React from "react";
 
 import { CloseButton } from "@/button";
 import { ColorSpinner } from "@/loader";
@@ -27,139 +27,131 @@ type Props = {
   loading?: boolean;
   emptyLabel?: React.ReactNode;
   openOnFocus?: boolean;
+  ref?: React.RefObject<HTMLInputElement | null>;
 } & Omit<ComboboxRootProps, "collection"> &
   FieldProps;
 
-export const Autocomplete = forwardRef<HTMLInputElement, Props>(
-  function Autocomplete(
-    {
-      variant = "core",
-      children,
-      css,
-      label,
-      leftIcon,
-      onInputValueChange,
-      invalid,
-      helperText,
-      errorText,
-      required,
-      filteredExternally,
-      loading,
-      disabled,
-      emptyLabel,
-      onFocus,
-      openOnClick = true,
-      openOnFocus = true,
-      ...rest
+export function Autocomplete({
+  variant = "core",
+  children,
+  css,
+  label,
+  leftIcon,
+  onInputValueChange,
+  invalid,
+  helperText,
+  errorText,
+  required,
+  filteredExternally,
+  loading,
+  disabled,
+  emptyLabel,
+  onFocus,
+  openOnClick = true,
+  openOnFocus = true,
+  ref,
+  ...rest
+}: Props) {
+  const { contains } = useFilter({ sensitivity: "base" });
+  const { t } = useTranslation();
+
+  const extractedItems = React.useMemo(
+    () => extractItemsFromChildren(children),
+    [children],
+  );
+
+  const { collection, filter, reset } = useListCollection({
+    initialItems: extractedItems,
+    filter: filteredExternally ? undefined : contains,
+  });
+
+  React.useEffect(() => {
+    if (filteredExternally) reset();
+  }, [extractedItems, reset, filteredExternally]);
+
+  const filteredChildren = React.useMemo(
+    () => filterChildren(children, collection.items),
+    [children, collection.items],
+  );
+
+  const combobox = useCombobox({
+    collection,
+    openOnClick: filteredChildren.length > 0 ? openOnClick : false,
+    onInputValueChange: (event) => {
+      if (!filteredExternally) {
+        filter(event.inputValue);
+      }
+      onInputValueChange?.(event);
     },
-    ref,
-  ) {
-    const { contains } = useFilter({ sensitivity: "base" });
-    const { t } = useTranslation();
-
-    const extractedItems = React.useMemo(
-      () => extractItemsFromChildren(children),
-      [children],
-    );
-
-    const { collection, filter, reset } = useListCollection({
-      initialItems: extractedItems,
-      filter: filteredExternally ? undefined : contains,
-    });
-
-    React.useEffect(() => {
-      if (filteredExternally) reset();
-    }, [extractedItems, reset, filteredExternally]);
-
-    const filteredChildren = React.useMemo(
-      () => filterChildren(children, collection.items),
-      [children, collection.items],
-    );
-
-    const combobox = useCombobox({
-      collection,
-      openOnClick: filteredChildren.length > 0 ? openOnClick : false,
-      onInputValueChange: (event) => {
-        if (!filteredExternally) {
-          filter(event.inputValue);
-        }
-        onInputValueChange?.(event);
+    positioning: {
+      placement: "bottom",
+      offset: {
+        mainAxis: 3,
+        crossAxis: -1,
       },
-      positioning: {
-        placement: "bottom",
-        offset: {
-          mainAxis: 3,
-          crossAxis: -1,
-        },
-        flip: false,
-      },
-      disabled,
-      ...rest,
-    });
-
-    return (
-      <Combobox.RootProvider value={combobox}>
-        <Combobox.Control css={css}>
-          <Combobox.Input asChild>
-            <Input
-              ref={ref}
-              label={<Combobox.Label>{label}</Combobox.Label>}
-              variant={variant}
-              labelAsChild
-              startElement={leftIcon}
-              invalid={invalid}
-              helperText={helperText}
-              errorText={errorText}
-              required={required}
-              onFocus={(event) => {
-                onFocus?.(event);
-                if (openOnFocus && filteredChildren.length > 0)
-                  combobox.setOpen(true);
-              }}
-            />
-          </Combobox.Input>
-          <Combobox.IndicatorGroup>
-            <Combobox.ClearTrigger asChild aria-label={t(texts.clearValue)}>
-              <CloseButton size="xs" tabIndex={0} />
-            </Combobox.ClearTrigger>
-          </Combobox.IndicatorGroup>
-        </Combobox.Control>
-        <Combobox.Positioner>
-          <Combobox.Content>
-            {!loading && (
-              <Combobox.Empty>
-                {emptyLabel ?? t(texts.noItemsFound)}
-              </Combobox.Empty>
-            )}
-            {loading ? <ColorSpinner width="1.5rem" p="2" /> : filteredChildren}
-          </Combobox.Content>
-        </Combobox.Positioner>
-      </Combobox.RootProvider>
-    );
-  },
-);
+      flip: false,
+    },
+    disabled,
+    ...rest,
+  });
+
+  return (
+    <Combobox.RootProvider value={combobox}>
+      <Combobox.Control css={css}>
+        <Combobox.Input asChild>
+          <Input
+            ref={ref}
+            label={<Combobox.Label>{label}</Combobox.Label>}
+            variant={variant}
+            labelAsChild
+            startElement={leftIcon}
+            invalid={invalid}
+            helperText={helperText}
+            errorText={errorText}
+            required={required}
+            onFocus={(event) => {
+              onFocus?.(event);
+              if (openOnFocus && filteredChildren.length > 0)
+                combobox.setOpen(true);
+            }}
+          />
+        </Combobox.Input>
+        <Combobox.IndicatorGroup>
+          <Combobox.ClearTrigger asChild aria-label={t(texts.clearValue)}>
+            <CloseButton size="xs" tabIndex={0} />
+          </Combobox.ClearTrigger>
+        </Combobox.IndicatorGroup>
+      </Combobox.Control>
+      <Combobox.Positioner>
+        <Combobox.Content>
+          {!loading && (
+            <Combobox.Empty>
+              {emptyLabel ?? t(texts.noItemsFound)}
+            </Combobox.Empty>
+          )}
+          {loading ? <ColorSpinner width="1.5rem" p="2" /> : filteredChildren}
+        </Combobox.Content>
+      </Combobox.Positioner>
+    </Combobox.RootProvider>
+  );
+}
 
 export const AutocompleteItemGroup = Combobox.ItemGroup;
 export const AutocompleteItemGroupLabel = Combobox.ItemGroupLabel;
 
-export const AutocompleteItem = forwardRef<HTMLDivElement, ComboboxItemProps>(
-  function AutocompleteItem({
-    children,
-    ...props
-  }: React.PropsWithChildren<ComboboxItemProps>) {
-    const { multiple } = useComboboxContext();
-    return (
-      <Combobox.Item {...props}>
-        {children}
-        {multiple && (
-          <Combobox.ItemIndicator asChild>
-            <CheckmarkFill18Icon />
-          </Combobox.ItemIndicator>
-        )}
-      </Combobox.Item>
-    );
-  },
-);
+export const AutocompleteItem = ({ children, ...props }: ComboboxItemProps) => {
+  const { multiple } = useComboboxContext();
+  return (
+    <Combobox.Item {...props}>
+      {children}
+      {multiple && (
+        <Combobox.ItemIndicator asChild>
+          <CheckmarkFill18Icon />
+        </Combobox.ItemIndicator>
+      )}
+    </Combobox.Item>
+  );
+};
 
 const filterChildren = (
   children: React.ReactNode,
@@ -187,10 +179,7 @@ const filterChildren = (
 
         if (!hasItems) return null;
 
-        return React.cloneElement(child, {
-          ...groupProps,
-          children: filteredGroupChildren,
-        });
+        return React.cloneElement(child, groupProps, ...filteredGroupChildren);
       }
 
       const itemProps = (child.props as { item?: Item })?.item;