@vygruppen/spor-react 12.24.15 → 13.0.0

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/theme/slot-recipes/anatomy.ts

@@ -285,3 +285,17 @@ export const comboboxAnatomy = arkComboboxAnatomy.extendWith(
   "indicatorGroup",
   "empty",
 );
+
+export const menuAnatomy = createAnatomy("menu").parts(
+  "trigger",
+  "content",
+  "item",
+  "itemGroup",
+  "triggerItem",
+  "itemCommand",
+  "itemGroupLabel",
+  "separator",
+  "radioItem",
+  "triggerItem",
+  "checkboxItem",
+);

package/src/theme/slot-recipes/index.ts

@@ -17,6 +17,7 @@ import { lineIconSlotRecipe } from "./line-icon";
 import { listSlotRecipe } from "./list";
 import { listBoxSlotRecipe } from "./listbox";
 import { mediaControllerSlotRecipe } from "./media-controller-button";
+import { menuSlotRecipe } from "./menu";
 import { nativeSelectSlotRecipe } from "./native-select";
 import { numericStepperRecipe } from "./numeric-stepper";
 import { paginationSlotRecipe } from "./pagination";
@@ -69,4 +70,5 @@ export const slotRecipes = {
   checkboxCard: choiceChipSlotRecipe,
   collapsible: collapsibleSlotRecipe,
   tooltip: popoverSlotRecipe,
+  menu: menuSlotRecipe,
 };

package/src/theme/slot-recipes/menu.ts

@@ -0,0 +1,111 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+
+import { menuAnatomy } from "./anatomy";
+
+export const menuSlotRecipe = defineSlotRecipe({
+  className: "menu",
+  slots: menuAnatomy.keys(),
+  base: {
+    content: {
+      bg: "bg",
+      borderRadius: "sm",
+      boxShadow: "sm",
+      width: "fit-content",
+      padding: "1",
+
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5",
+      zIndex: "dropdown",
+
+      _open: {
+        animationStyle: "slide-fade-in",
+        animationDuration: "fast",
+        zIndex: "popover",
+        outline: "none",
+      },
+    },
+    itemGroup: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5",
+    },
+    item: {
+      borderRadius: "9px",
+      padding: "2",
+      display: "flex",
+      justifyContent: "space-between",
+      gap: 1.5,
+
+      _hover: {
+        backgroundColor: "accent.surface.hover",
+      },
+
+      "&:active": {
+        backgroundColor: "accent.surface.active",
+      },
+
+      _checked: {
+        backgroundColor: "accent.surface",
+      },
+
+      _highlighted: {
+        backgroundColor: "ghost.surface.hover",
+      },
+    },
+    itemGroupLabel: {
+      paddingY: "1",
+      fontWeight: "bold",
+      fontSize: "xs",
+    },
+    itemCommand: {
+      fontSize: "2xs",
+    },
+    separator: {
+      color: "outline",
+    },
+    radioItem: {
+      display: "flex",
+      justifyContent: "space-between",
+      gap: 2,
+    },
+    triggerItem: {
+      display: "flex",
+      justifyContent: "space-between",
+      gap: 1.5,
+      alignItems: "center",
+    },
+    checkboxItem: {
+      display: "flex",
+      gap: 2,
+      alignItems: "center",
+      width: "full",
+    },
+  },
+  variants: {
+    variant: {
+      core: {
+        content: {
+          border: "1px solid",
+          borderColor: "core.outline",
+        },
+      },
+      accent: {
+        content: {
+          border: "1px solid",
+          borderColor: "core.outline",
+        },
+      },
+      floating: {
+        content: {
+          border: "sm",
+          borderColor: "floating.outline",
+          boxShadow: "lg",
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "core",
+  },
+});

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.RefObject<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.RefObject<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.RefObject<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.RefObject<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.RefObject<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.RefObject<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/*"]
     },