@vygruppen/spor-react 12.24.16 → 13.0.1

package/src/stepper/Stepper.tsx

@@ -6,7 +6,7 @@ import {
   useSlotRecipe,
 } from "@chakra-ui/react";
 import { ArrowLeftFill24Icon } from "@vygruppen/spor-icon-react";
-import { forwardRef, PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 
 import { Box, createTexts, IconButton, Text, useTranslation } from "..";
 import { stepperSlotRecipe } from "../theme/slot-recipes/stepper";
@@ -58,90 +58,93 @@ type StepperProps = PropsWithChildren<StepperVariantProps> & {
  * ```
  **/
 
-export const Stepper = forwardRef<HTMLDivElement, StepperProps>(
-  function Stepper(props, ref) {
-    const {
-      onClick = () => {},
-      onBackButtonClick,
-      steps,
-      activeStep: activeStepAsStringOrNumber,
-      heading,
-      headingLevel,
-      variant,
-      disabled,
-      css,
-    } = props;
-    const recipe = useSlotRecipe({ key: "stepper" });
-    const style = recipe({ variant });
-    const numberOfSteps = steps.length;
-    const activeStep = Number(activeStepAsStringOrNumber);
-    const { t } = useTranslation();
-    const hideBackButtonOnFirstStep = activeStep === 1 && !onBackButtonClick;
+export const Stepper = function Stepper({
+  ref,
+  ...props
+}: StepperProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}) {
+  const {
+    onClick = () => {},
+    onBackButtonClick,
+    steps,
+    activeStep: activeStepAsStringOrNumber,
+    heading,
+    headingLevel,
+    variant,
+    disabled,
+    css,
+  } = props;
+  const recipe = useSlotRecipe({ key: "stepper" });
+  const style = recipe({ variant });
+  const numberOfSteps = steps.length;
+  const activeStep = Number(activeStepAsStringOrNumber);
+  const { t } = useTranslation();
+  const hideBackButtonOnFirstStep = activeStep === 1 && !onBackButtonClick;
 
-    return (
-      <Box css={{ ...style.root, ...css }} ref={ref}>
-        <StepperProvider
-          onClick={onClick}
-          activeStep={activeStep}
-          variant={variant}
-          numberOfSteps={numberOfSteps}
-        >
-          <Box css={style.container} data-part="root">
-            <Box css={style.innerContainer}>
-              <Flex
-                justifyContent="space-between"
-                alignItems="center"
-                gap={2}
-                flex={1}
-              >
-                <IconButton
-                  aria-label={t(texts.back)}
-                  icon={<ArrowLeftFill24Icon />}
-                  variant="ghost"
-                  size="sm"
-                  visibility={hideBackButtonOnFirstStep ? "hidden" : "visible"}
-                  onClick={() => {
-                    const stepToGoTo = activeStep - 1;
-                    if (onBackButtonClick) {
-                      onBackButtonClick(stepToGoTo);
-                    }
-                    onClick(stepToGoTo);
-                  }}
-                />
-                {heading && (
-                  <Text
-                    variant="sm"
-                    as={headingLevel}
-                    css={style.title}
-                    data-part="title"
-                  >
-                    {heading}
-                  </Text>
-                )}
-                <Box css={style.stepCounter} data-part="step-counter">
-                  {t(texts.stepsOf(activeStep, numberOfSteps))}
-                </Box>
-              </Flex>
-            </Box>
-            <Flex justifyContent="center" display={["none", null, "flex"]}>
-              {steps.map((step, index) => (
-                <StepperStep
-                  key={index}
-                  stepNumber={index + 1}
-                  variant={variant}
-                  aria-current={index + 1 === activeStep ? "step" : undefined}
-                  disabled={disabled}
+  return (
+    <Box css={{ ...style.root, ...css }} ref={ref}>
+      <StepperProvider
+        onClick={onClick}
+        activeStep={activeStep}
+        variant={variant}
+        numberOfSteps={numberOfSteps}
+      >
+        <Box css={style.container} data-part="root">
+          <Box css={style.innerContainer}>
+            <Flex
+              justifyContent="space-between"
+              alignItems="center"
+              gap={2}
+              flex={1}
+            >
+              <IconButton
+                aria-label={t(texts.back)}
+                icon={<ArrowLeftFill24Icon />}
+                variant="ghost"
+                size="sm"
+                visibility={hideBackButtonOnFirstStep ? "hidden" : "visible"}
+                onClick={() => {
+                  const stepToGoTo = activeStep - 1;
+                  if (onBackButtonClick) {
+                    onBackButtonClick(stepToGoTo);
+                  }
+                  onClick(stepToGoTo);
+                }}
+              />
+              {heading && (
+                <Text
+                  variant="sm"
+                  as={headingLevel}
+                  css={style.title}
+                  data-part="title"
                 >
-                  {step}
-                </StepperStep>
-              ))}
+                  {heading}
+                </Text>
+              )}
+              <Box css={style.stepCounter} data-part="step-counter">
+                {t(texts.stepsOf(activeStep, numberOfSteps))}
+              </Box>
             </Flex>
           </Box>
-        </StepperProvider>
-      </Box>
-    );
-  },
-);
+          <Flex justifyContent="center" display={["none", null, "flex"]}>
+            {steps.map((step, index) => (
+              <StepperStep
+                key={index}
+                stepNumber={index + 1}
+                variant={variant}
+                aria-current={index + 1 === activeStep ? "step" : undefined}
+                disabled={disabled}
+              >
+                {step}
+              </StepperStep>
+            ))}
+          </Flex>
+        </Box>
+      </StepperProvider>
+    </Box>
+  );
+};
 
 const texts = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({

package/src/tab/Tabs.tsx

@@ -4,7 +4,7 @@ import {
   Tabs as ChakraTabs,
   TabsRootProps as ChakraTabsRootProps,
 } from "@chakra-ui/react";
-import { forwardRef, PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 
 import { tabsSlotRecipe } from "../theme/slot-recipes/tabs";
 
@@ -58,11 +58,15 @@ export type TabsProps = Exclude<
     /** Defaults to `start` */
     justify?: "start" | "center" | "end";
   };
-export const Tabs = forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
+export const Tabs = ({
+  ref,
+  ...props
+}: TabsProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}) => {
   const { variant = "core", size = "sm" } = props;
   return <ChakraTabs.Root {...props} ref={ref} variant={variant} size={size} />;
-});
-Tabs.displayName = "Tabs";
+};
 
 export const TabsList = ChakraTabs.List;
 export const TabsTrigger = ChakraTabs.Trigger;

package/src/table/Table.tsx

@@ -16,7 +16,6 @@ import {
 } from "@vygruppen/spor-icon-react";
 import {
   createContext,
-  forwardRef,
   PropsWithChildren,
   useContext,
   useLayoutEffect,
@@ -52,75 +51,58 @@ export type TableProps = Exclude<ChakraTableProps, "variant" | "colorPalette"> &
     variant?: "ghost" | "core";
     colorPalette?: "grey" | "green" | "white";
     sortable?: boolean;
+    ref?: React.Ref<HTMLTableElement>;
   };
 
-/**
- * The `Table` component has support for two different variants - `ghost` and `core`. The `ghost` variant has basic lines between rows, while the `core` variant has borders for each cell.
- *
- * You can also specify a `grey` or `green` `colorPalette` prop. Use `green` if you want to place the table on a light green background.
- *
- * Finally, there are three different `size` props you can specify - `sm`, `md` and `lg`.
- *
- * ```tsx
- * <Table variant="core" size="lg">
- *   <Thead>
- *    ...
- *   </Thead>
- *   ...
- * </Table>
- * ```
- */
-export const Table = forwardRef<HTMLTableElement, TableProps>(
-  (
-    {
-      variant = "ghost",
-      size,
-      colorPalette = "green",
-      children,
-      sortable = false,
-      ...rest
-    },
-    ref,
-  ) => {
-    const [sortState, setSortState] = useState<SortState>({
-      direction: "asc",
-      columnIndex: null,
-    });
-
-    const handleSort = (columnIndex: number) => {
-      if (!sortable) return;
-      setSortState(getNextSortState(sortState, columnIndex));
-    };
-
-    const recipe = useSlotRecipe({ key: "table" });
-    const styles = recipe({ variant, size });
-
-    return (
-      <ChakraTable.Root
-        variant={variant}
-        size={size}
-        colorPalette={colorPalette}
-        css={styles}
-        ref={ref}
-        {...rest}
+export const Table = ({
+  variant = "ghost",
+  size,
+  colorPalette = "green",
+  children,
+  sortable = false,
+  ref,
+  ...rest
+}: TableProps) => {
+  const [sortState, setSortState] = useState<SortState>({
+    direction: "asc",
+    columnIndex: null,
+  });
+
+  const handleSort = (columnIndex: number) => {
+    if (!sortable) return;
+    setSortState(getNextSortState(sortState, columnIndex));
+  };
+
+  const recipe = useSlotRecipe({ key: "table" });
+  const styles = recipe({ variant, size });
+
+  return (
+    <ChakraTable.Root
+      variant={variant}
+      size={size}
+      colorPalette={colorPalette}
+      css={styles}
+      ref={ref}
+      {...rest}
+    >
+      <SortContext.Provider
+        value={{ enabled: sortable, sortState, onSort: handleSort }}
       >
-        <SortContext.Provider
-          value={{ enabled: sortable, sortState, onSort: handleSort }}
-        >
-          {children}
-        </SortContext.Provider>
-      </ChakraTable.Root>
-    );
-  },
-);
-Table.displayName = "Table";
-
-export type TableColumnHeaderProps = ChakraTableColumnHeaderProps;
-
-export const TableColumnHeader = forwardRef<
-  HTMLTableCellElement,
-  TableColumnHeaderProps
->(({ children, ...rest }, ref) => {
+        {children}
+      </SortContext.Provider>
+    </ChakraTable.Root>
+  );
+};
+
+export type TableColumnHeaderProps = ChakraTableColumnHeaderProps & {
+  ref?: React.Ref<HTMLTableCellElement>;
+};
+
+export const TableColumnHeader = ({
+  children,
+  ref,
+  ...rest
+}: TableColumnHeaderProps) => {
   const { enabled, sortState, onSort } = useTableSort();
   const [columnIndex, setColumnIndex] = useState<number | null>(null);
   const props = rest as Record<string, unknown>;
@@ -165,45 +147,43 @@ export const TableColumnHeader = forwardRef<
       </HStack>
     </ChakraTable.ColumnHeader>
   );
-});
-TableColumnHeader.displayName = "ColumnHeader";
-
-export type TableBodyProps = ChakraTableBodyProps;
-
-export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
-  ({ children, ...rest }, ref) => {
-    const { sortState } = useTableSort();
-    const tbodyRef = useRef<HTMLTableSectionElement | null>(null);
-    const originalOrder = useRef<HTMLTableRowElement[]>([]);
-    const previousChildren = useRef(children);
-
-    useLayoutEffect(() => {
-      const tbody = tbodyRef.current;
-      if (!tbody) return;
-
-      if (
-        previousChildren.current !== children ||
-        originalOrder.current.length === 0
-      ) {
-        originalOrder.current = captureRowOrder(tbody);
-        previousChildren.current = children;
-      }
-
-      applyDomSort(tbody, sortState, originalOrder.current);
-    }, [sortState, children]);
-
-    return (
-      <ChakraTable.Body
-        ref={(element: HTMLTableSectionElement) => {
-          tbodyRef.current = element;
-          if (typeof ref === "function") ref(element);
-          else if (ref) ref.current = element;
-        }}
-        {...rest}
-      >
-        {children}
-      </ChakraTable.Body>
-    );
-  },
-);
-TableBody.displayName = "TableBody";
+};
+
+export type TableBodyProps = ChakraTableBodyProps & {
+  ref?: React.Ref<HTMLTableSectionElement>;
+};
+
+export const TableBody = ({ children, ref, ...rest }: TableBodyProps) => {
+  const { sortState } = useTableSort();
+  const tbodyRef = useRef<HTMLTableSectionElement | null>(null);
+  const originalOrder = useRef<HTMLTableRowElement[]>([]);
+  const previousChildren = useRef(children);
+
+  useLayoutEffect(() => {
+    const tbody = tbodyRef.current;
+    if (!tbody) return;
+
+    if (
+      previousChildren.current !== children ||
+      originalOrder.current.length === 0
+    ) {
+      originalOrder.current = captureRowOrder(tbody);
+      previousChildren.current = children;
+    }
+
+    applyDomSort(tbody, sortState, originalOrder.current);
+  }, [sortState, children]);
+
+  return (
+    <ChakraTable.Body
+      ref={(element: HTMLTableSectionElement) => {
+        tbodyRef.current = element;
+        if (typeof ref === "function") ref(element);
+        else if (ref) ref.current = element;
+      }}
+      {...rest}
+    >
+      {children}
+    </ChakraTable.Body>
+  );
+};

package/src/tooltip.tsx

@@ -1,14 +1,16 @@
 "use client";
 
 import { Portal, Tooltip as ChakraTooltip } from "@chakra-ui/react";
-import { forwardRef } from "react";
 
 export const Tooltip = ChakraTooltip.Root;
 
-export const TooltipTrigger = forwardRef<
-  HTMLButtonElement,
-  ChakraTooltip.TriggerProps
->(({ children, ...props }, ref) => {
+export const TooltipTrigger = ({
+  ref,
+  children,
+  ...props
+}: ChakraTooltip.TriggerProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}) => {
   const isStringChild = typeof children === "string";
 
   return (
@@ -16,23 +18,25 @@ export const TooltipTrigger = forwardRef<
       {children}
     </ChakraTooltip.Trigger>
   );
-});
-TooltipTrigger.displayName = "TooltipTrigger";
+};
 
 export type TooltipProps = ChakraTooltip.ContentProps;
 
-export const TooltipContent = forwardRef<HTMLDivElement, TooltipProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <Portal>
-        <ChakraTooltip.Positioner>
-          <ChakraTooltip.Content ref={ref} {...props}>
-            <ChakraTooltip.Arrow />
-            <ChakraTooltip.Content {...props}>{children}</ChakraTooltip.Content>
-          </ChakraTooltip.Content>
-        </ChakraTooltip.Positioner>
-      </Portal>
-    );
-  },
-);
-TooltipContent.displayName = "TooltipContent";
+export const TooltipContent = ({
+  ref,
+  children,
+  ...props
+}: TooltipProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}) => {
+  return (
+    <Portal>
+      <ChakraTooltip.Positioner>
+        <ChakraTooltip.Content ref={ref} {...props}>
+          <ChakraTooltip.Arrow />
+          <ChakraTooltip.Content {...props}>{children}</ChakraTooltip.Content>
+        </ChakraTooltip.Content>
+      </ChakraTooltip.Positioner>
+    </Portal>
+  );
+};

package/src/typography/Badge.tsx

@@ -5,20 +5,23 @@ import {
   Box,
 } from "@chakra-ui/react";
 import { IconComponent } from "@vygruppen/spor-icon-react";
-import { forwardRef } from "react";
 
 export type BadgeProps = ChakraBadgeProps & {
   icon?: IconComponent;
 };
 
-export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
-  { icon, children, ...props },
+export const Badge = function Badge({
   ref,
-) {
+  icon,
+  children,
+  ...props
+}: BadgeProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}) {
   return (
     <ChakraBadge ref={ref} {...props}>
       {children}
       {icon && <Box as={icon} />}
     </ChakraBadge>
   );
-});
+};

package/src/typography/Code.tsx

@@ -14,8 +14,11 @@ type CodeVariantProps = RecipeVariantProps<typeof codeRecipie> & CodeProps;
 
 const StyledCode = chakra(ChakraCode, codeRecipie);
 
-export const Code = React.forwardRef<HTMLElement, CodeVariantProps>(
-  function Code(props, ref) {
-    return <StyledCode {...props} ref={ref} />;
-  },
-);
+export const Code = function Code({
+  ref,
+  ...props
+}: CodeVariantProps & {
+  ref?: React.Ref<HTMLElement>;
+}) {
+  return <StyledCode {...props} ref={ref} />;
+};

package/src/typography/Heading.tsx

@@ -4,7 +4,7 @@ import {
   HeadingProps as ChakraHeadingProps,
   Text,
 } from "@chakra-ui/react";
-import { forwardRef, useId } from "react";
+import { useId } from "react";
 
 import { slugify } from "..";
 
@@ -42,28 +42,27 @@ export type HeadingProps = Omit<ChakraHeadingProps, "textStyle" | "as"> & {
  * ```
  */
 
-export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
-  function Heading(props, ref) {
-    const {
-      as,
-      variant = "xl-display",
-      autoId = false,
-      id: externalId,
-      ...rest
-    } = props;
+export const Heading = function Heading({
+  ref,
+  ...props
+}: HeadingProps & {
+  ref?: React.Ref<HTMLHeadingElement>;
+}) {
+  const {
+    as,
+    variant = "xl-display",
+    autoId = false,
+    id: externalId,
+    ...rest
+  } = props;
 
-    const reactId = useId();
+  const reactId = useId();
 
-    function getId() {
-      if (externalId !== undefined) return externalId;
-      if (!autoId) return;
-      return typeof rest.children === "string"
-        ? slugify(rest.children)
-        : reactId;
-    }
+  function getId() {
+    if (externalId !== undefined) return externalId;
+    if (!autoId) return;
+    return typeof rest.children === "string" ? slugify(rest.children) : reactId;
+  }
 
-    return (
-      <Text as={as} textStyle={variant} id={getId()} ref={ref} {...rest} />
-    );
-  },
-);
+  return <Text as={as} textStyle={variant} id={getId()} ref={ref} {...rest} />;
+};

package/src/typography/Text.tsx

@@ -3,7 +3,6 @@ import {
   Text as ChakraText,
   TextProps as ChakraTextProps,
 } from "@chakra-ui/react";
-import { forwardRef } from "react";
 
 export type TextProps = Omit<ChakraTextProps, "textStyle"> & {
   /** The size and style of the text.
@@ -45,11 +44,14 @@ function resolveTextProps({
  * <Text>Welcome to this paragraph of text.</Text>
  * ```
  */
-export const Text = forwardRef<HTMLParagraphElement, TextProps>(
-  function Text(props, ref) {
-    const { variant, lineHeight, fontSize, ...rest } = props;
-    const resolvedProps = resolveTextProps({ variant, fontSize, lineHeight });
-
-    return <ChakraText {...resolvedProps} {...rest} ref={ref} />;
-  },
-);
+export const Text = function Text({
+  ref,
+  ...props
+}: TextProps & {
+  ref?: React.Ref<HTMLParagraphElement>;
+}) {
+  const { variant, lineHeight, fontSize, ...rest } = props;
+  const resolvedProps = resolveTextProps({ variant, fontSize, lineHeight });
+
+  return <ChakraText {...resolvedProps} {...rest} ref={ref} />;
+};

package/tsconfig.json

@@ -5,6 +5,7 @@
   "compilerOptions": {
     "lib": ["dom", "es2023"],
     "rootDir": ".",
+
     "paths": {
       "@/*": ["./src/*"]
     },