📝 Changeset (#3414)

navikt · Nov 29, 2024 · efc1446 · efc1446
1 parent 6d74cb7
commit efc1446
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 33 deletions.
diff --git a/.changeset/red-trains-sit.md b/.changeset/red-trains-sit.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": minor
+---
+
+ActionMenu: Added 'align'-prop to 'ActionMenu.Content'. This allows menu to 'start' or 'end' align in reference to anchor.
diff --git a/@navikt/core/react/src/overlays/action-menu/ActionMenu.stories.tsx b/@navikt/core/react/src/overlays/action-menu/ActionMenu.stories.tsx
@@ -560,6 +560,48 @@ export const Links: Story = {
   decorators: [DemoDecorator],
 };
 
+export const Align: Story = {
+  render: (props) => {
+    return (
+      <HStack gap="24">
+        <ActionMenu open={props.open}>
+          <ActionMenu.Trigger>
+            <button>Start</button>
+          </ActionMenu.Trigger>
+          <ActionMenu.Content align="start">
+            <ActionMenu.Item onSelect={() => console.log("Item 1 clicked")}>
+              Item 1
+            </ActionMenu.Item>
+            <ActionMenu.Item onSelect={() => console.log("Item 2 clicked")}>
+              Item 2
+            </ActionMenu.Item>
+            <ActionMenu.Item onSelect={() => console.log("Item 3 clicked")}>
+              Item 3
+            </ActionMenu.Item>
+          </ActionMenu.Content>
+        </ActionMenu>
+        <ActionMenu open={props.open}>
+          <ActionMenu.Trigger>
+            <button>End</button>
+          </ActionMenu.Trigger>
+          <ActionMenu.Content align="end">
+            <ActionMenu.Item onSelect={() => console.log("Item 1 clicked")}>
+              Item 1
+            </ActionMenu.Item>
+            <ActionMenu.Item onSelect={() => console.log("Item 2 clicked")}>
+              Item 2
+            </ActionMenu.Item>
+            <ActionMenu.Item onSelect={() => console.log("Item 3 clicked")}>
+              Item 3
+            </ActionMenu.Item>
+          </ActionMenu.Content>
+        </ActionMenu>
+      </HStack>
+    );
+  },
+  decorators: [DemoDecorator],
+};
+
 export const Chromatic: Story = {
   render: (args, context) => {
     const newArgs = { ...args, open: true };
@@ -608,6 +650,10 @@ export const Chromatic: Story = {
             {Disabled.render?.(newArgs, context)}
           </div>
         </HStack>
+        <div style={{ marginBottom: "10rem" }}>
+          <h2>Align</h2>
+          {Align.render?.(newArgs, context)}
+        </div>
       </VStack>
     );
   },

diff --git a/@navikt/core/react/src/overlays/action-menu/ActionMenu.tsx b/@navikt/core/react/src/overlays/action-menu/ActionMenu.tsx
@@ -333,44 +333,56 @@ export const ActionMenuTrigger = forwardRef<
 interface ActionMenuContentProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, "id"> {
   children?: React.ReactNode;
+  align?: "start" | "end";
 }
 
 export const ActionMenuContent = forwardRef<
   HTMLDivElement,
   ActionMenuContentProps
->(({ children, className, style, ...rest }: ActionMenuContentProps, ref) => {
-  const context = useActionMenuContext();
+>(
+  (
+    {
+      children,
+      className,
+      style,
+      align = "start",
+      ...rest
+    }: ActionMenuContentProps,
+    ref,
+  ) => {
+    const context = useActionMenuContext();
 
-  return (
-    <Menu.Portal rootElement={context.rootElement} asChild>
-      <Menu.Content
-        ref={ref}
-        id={context.contentId}
-        aria-labelledby={context.triggerId}
-        className={cl("navds-action-menu__content", className)}
-        {...rest}
-        align="start"
-        sideOffset={4}
-        collisionPadding={10}
-        onCloseAutoFocus={() => {
-          context.triggerRef.current?.focus();
-        }}
-        safeZone={{ anchor: context.triggerRef.current }}
-        style={{
-          ...style,
-          ...{
-            "--__ac-action-menu-content-transform-origin":
-              "var(--ac-floating-transform-origin)",
-            "--__ac-action-menu-content-available-height":
-              "var(--ac-floating-available-height)",
-          },
-        }}
-      >
-        <div className="navds-action-menu__content-inner">{children}</div>
-      </Menu.Content>
-    </Menu.Portal>
-  );
-});
+    return (
+      <Menu.Portal rootElement={context.rootElement} asChild>
+        <Menu.Content
+          ref={ref}
+          id={context.contentId}
+          aria-labelledby={context.triggerId}
+          className={cl("navds-action-menu__content", className)}
+          {...rest}
+          align={align}
+          sideOffset={4}
+          collisionPadding={10}
+          onCloseAutoFocus={() => {
+            context.triggerRef.current?.focus();
+          }}
+          safeZone={{ anchor: context.triggerRef.current }}
+          style={{
+            ...style,
+            ...{
+              "--__ac-action-menu-content-transform-origin":
+                "var(--ac-floating-transform-origin)",
+              "--__ac-action-menu-content-available-height":
+                "var(--ac-floating-available-height)",
+            },
+          }}
+        >
+          <div className="navds-action-menu__content-inner">{children}</div>
+        </Menu.Content>
+      </Menu.Portal>
+    );
+  },
+);
 
 /* -------------------------------------------------------------------------- */
 /*                              ActionMenuLabel                               */
@@ -977,11 +989,11 @@ ActionMenu.SubTrigger = ActionMenuSubTrigger;
 ActionMenu.SubContent = ActionMenuSubContent;
 
 export type {
-  ActionMenuItemProps,
   ActionMenuCheckboxItemProps,
   ActionMenuContentProps,
   ActionMenuDividerProps,
   ActionMenuGroupProps,
+  ActionMenuItemProps,
   ActionMenuLabelProps,
   ActionMenuProps,
   ActionMenuRadioGroupProps,