@vygruppen/spor-react 12.24.15 → 12.24.16

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.24.15",
+  "version": "12.24.16",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -46,8 +46,8 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-design-tokens": "4.3.3",
     "@vygruppen/spor-icon-react": "4.5.3",
+    "@vygruppen/spor-design-tokens": "4.3.3",
     "@vygruppen/spor-loader": "0.7.0"
   },
   "devDependencies": {

package/src/input/Menu.tsx

@@ -0,0 +1,234 @@
+"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 { forwardRef, ReactNode } 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 = 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 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";
+
+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";
+
+export type MenuTriggerItemProps = {
+  /* Display icon to the left */
+  leftIcon?: React.ReactNode;
+  /* Display icon to the right */
+  rightIcon?: React.ReactNode;
+} & ChakraMenuTriggerItemProps;
+
+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 }) => {
+  return (
+    <ChakraMenu.RadioItemGroup {...props}>{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 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) => {
+  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>
+  );
+});
+
+MenuCheckboxItem.displayName = "MenuCheckboxItem";
+
+export const MenuSeparator = forwardRef<MenuSeparatorProps>(({ ...props }) => {
+  return <ChakraMenu.Separator {...props} />;
+});
+MenuSeparator.displayName = "MenuSeparator";

package/src/input/index.ts

@@ -9,6 +9,7 @@ export * from "./Field";
 export * from "./Fieldset";
 export * from "./Input";
 export * from "./ListBox";
+export * from "./Menu";
 export * from "./NativeSelect";
 export * from "./NumericStepper";
 export * from "./PasswordInput";

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",
+  },
+});