@wallarm-org/design-system 0.85.1 → 0.86.0

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -20,6 +20,14 @@ interface DropdownMenuProps extends TestableProps {
     onHighlightChange?: (details: Menu.HighlightChangeDetails) => void;
     /** Whether selecting an item closes the menu (default true) */
     closeOnSelect?: boolean;
+    /**
+     * Override the trigger element's id. Pass the same id to another
+     * compound component's `ids.trigger` (e.g. `Tooltip`, `Popover`) to
+     * compose their triggers on one element via nested `asChild` without an
+     * extra wrapper node — otherwise the outer trigger's id wins and the
+     * other component can't find its own anchor.
+     */
+    ids?: Menu.RootProps['ids'];
 }
 export declare const DropdownMenu: FC<DropdownMenuProps>;
 export {};

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -15,7 +15,7 @@ const SUB_POSITIONING = {
         crossAxis: -9
     }
 };
-const DropdownMenu = ({ children, open, defaultOpen, onOpenChange, anchorPoint, positioning, highlightedValue, onHighlightChange, closeOnSelect, 'data-testid': testIdProp, ...props })=>{
+const DropdownMenu = ({ children, open, defaultOpen, onOpenChange, anchorPoint, positioning, highlightedValue, onHighlightChange, closeOnSelect, ids, 'data-testid': testIdProp, ...props })=>{
     const inheritedTestId = useTestId();
     const testId = testIdProp ?? inheritedTestId;
     const parent = useDropdownMenuContext();
@@ -45,6 +45,7 @@ const DropdownMenu = ({ children, open, defaultOpen, onOpenChange, anchorPoint,
         open: open,
         defaultOpen: defaultOpen,
         onOpenChange: handleOpenChange,
+        ids: ids,
         lazyMount: true,
         unmountOnExit: true,
         children: children

package/dist/components/Popover/Popover.d.ts

@@ -1,8 +1,17 @@
 import type { FC, ReactNode } from 'react';
+import { Popover as ArkUiPopover } from '@ark-ui/react';
 import { type TestableProps } from '../../utils/testId';
 export interface PopoverProps extends TestableProps {
     children: ReactNode;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Override the trigger element's id. Pass the same id to another
+     * compound component's `ids.trigger` (e.g. `Tooltip`, `DropdownMenu`) to
+     * compose their triggers on one element via nested `asChild` without an
+     * extra wrapper node — otherwise the outer trigger's id wins and the
+     * other component can't find its own anchor.
+     */
+    ids?: ArkUiPopover.RootProps['ids'];
 }
 export declare const Popover: FC<PopoverProps>;

package/dist/components/Popover/Popover.js

@@ -7,7 +7,7 @@ const POPOVER_POSITIONING_DEFAULT = {
         mainAxis: 12
     }
 };
-const Popover_Popover = ({ children, open, onOpenChange, 'data-testid': testIdProp })=>{
+const Popover_Popover = ({ children, open, onOpenChange, ids, 'data-testid': testIdProp })=>{
     const inheritedTestId = useTestId();
     const testId = testIdProp ?? inheritedTestId;
     const handleOpenChange = ({ open })=>{
@@ -19,6 +19,7 @@ const Popover_Popover = ({ children, open, onOpenChange, 'data-testid': testIdPr
             positioning: POPOVER_POSITIONING_DEFAULT,
             open: open,
             onOpenChange: handleOpenChange,
+            ids: ids,
             lazyMount: true,
             unmountOnExit: true,
             children: children

package/dist/components/Table/TableColumnMenu/TableColumnMenu.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useId, useState } from "react";
 import { Check, ChevronsDown, Ellipsis } from "../../../icons/index.js";
 import { cn } from "../../../utils/cn.js";
 import { useTestId } from "../../../utils/testId.js";
@@ -22,6 +22,7 @@ const TableColumnMenu = ({ column, children, className, 'data-testid': testIdPro
     const ctx = useTableContext();
     const testId = useTestId('column-menu', testIdProp);
     const [menuOpen, setMenuOpen] = useState(false);
+    const triggerId = useId();
     const isAlwaysPinned = ctx.alwaysPinnedLeft.includes(column.id);
     const canSort = ctx.sortingEnabled && column.getCanSort();
     const canPin = ctx.pinningEnabled && column.getCanPin() && !isAlwaysPinned;
@@ -36,9 +37,15 @@ const TableColumnMenu = ({ column, children, className, 'data-testid': testIdPro
             className: "shrink-0 inline-flex opacity-0 group-hover:opacity-100 has-[>_[data-state=open]]:opacity-100 transition-opacity",
             children: /*#__PURE__*/ jsxs(Tooltip, {
                 disabled: menuOpen,
+                ids: {
+                    trigger: triggerId
+                },
                 children: [
                     /*#__PURE__*/ jsxs(DropdownMenu, {
                         onOpenChange: setMenuOpen,
+                        ids: {
+                            trigger: triggerId
+                        },
                         children: [
                             /*#__PURE__*/ jsx(DropdownMenuTrigger, {
                                 asChild: true,

package/dist/components/Tooltip/Tooltip.d.ts

@@ -14,5 +14,13 @@ export interface TooltipProps extends TestableProps {
     interactive?: boolean;
     disabled?: boolean;
     positioning?: ArkUiTooltip.RootProps['positioning'];
+    /**
+     * Override the trigger element's id. Pass the same id to another
+     * compound component's `ids.trigger` (e.g. `Popover`, `DropdownMenu`) to
+     * compose their triggers on one element via nested `asChild` without an
+     * extra wrapper node — otherwise the outer trigger's id wins and this
+     * tooltip can't find its anchor, mispositioning at the viewport origin.
+     */
+    ids?: ArkUiTooltip.RootProps['ids'];
 }
 export declare const Tooltip: FC<TooltipProps>;

package/dist/components/Tooltip/Tooltip.js

@@ -7,7 +7,7 @@ const TOOLTIP_POSITIONING_DEFAULT = {
     },
     overflowPadding: 8
 };
-const Tooltip_Tooltip = ({ children, open, defaultOpen, onOpenChange, openDelay, closeDelay, closeOnPointerDown, closeOnEscape, closeOnScroll, interactive, disabled, positioning, 'data-testid': testIdProp })=>{
+const Tooltip_Tooltip = ({ children, open, defaultOpen, onOpenChange, openDelay, closeDelay, closeOnPointerDown, closeOnEscape, closeOnScroll, interactive, disabled, positioning, ids, 'data-testid': testIdProp })=>{
     const inheritedTestId = useTestId();
     const testId = testIdProp ?? inheritedTestId;
     const handleOpenChange = (details)=>{
@@ -27,6 +27,7 @@ const Tooltip_Tooltip = ({ children, open, defaultOpen, onOpenChange, openDelay,
             interactive: interactive,
             disabled: disabled,
             positioning: positioning ?? TOOLTIP_POSITIONING_DEFAULT,
+            ids: ids,
             lazyMount: true,
             unmountOnExit: true,
             children: children

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.85.0",
-  "generatedAt": "2026-08-06T10:28:02.611Z",
+  "version": "0.85.1",
+  "generatedAt": "2026-08-07T06:49:22.264Z",
   "components": [
     {
       "name": "Accordion",
@@ -5665,6 +5665,12 @@
               "type": "boolean | undefined",
               "required": false,
               "description": "Whether selecting an item closes the menu (default true)"
+            },
+            {
+              "name": "ids",
+              "type": "complex",
+              "required": false,
+              "description": "Override the trigger element's id. Pass the same id to another\ncompound component's `ids.trigger` (e.g. `Tooltip`, `Popover`) to\ncompose their triggers on one element via nested `asChild` without an\nextra wrapper node — otherwise the outer trigger's id wins and the\nother component can't find its own anchor."
             }
           ]
         },
@@ -48333,6 +48339,10 @@
           "name": "Basic",
           "code": "() => (\n  <Popover data-testid='popover'>\n    <PopoverTrigger asChild>\n      <Button variant='outline' color='neutral'>\n        Click me\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent>\n      <VStack gap={12}>\n        <Text size='sm'>This action will remove all and every bit!</Text>\n\n        <Alert color='warning'>\n          <AlertIcon />\n          <AlertContent>\n            <AlertTitle>Message goes here</AlertTitle>\n            <AlertDescription>\n              {'Description goes here \\nDescription goes here \\nDescription goes here'}\n            </AlertDescription>\n            <AlertControls>\n              <Button variant='secondary' color='neutral' size='small'>\n                Button\n              </Button>\n              <Button variant='secondary' color='neutral' size='small'>\n                Button\n              </Button>\n            </AlertControls>\n          </AlertContent>\n        </Alert>\n      </VStack>\n    </PopoverContent>\n  </Popover>\n)"
         },
+        {
+          "name": "WithTooltip",
+          "code": "() => {\n  const triggerId = useId();\n  const [open, setOpen] = useState(false);\n\n  return (\n    <Popover\n      data-testid='with-tooltip-popover'\n      open={open}\n      onOpenChange={setOpen}\n      ids={{ trigger: triggerId }}\n    >\n      {/* Sharing `ids.trigger` lets both machines resolve the same DOM node as\n          their own anchor, so the tooltip positions correctly with no wrapper. */}\n      <Tooltip data-testid='with-tooltip-tooltip' disabled={open} ids={{ trigger: triggerId }}>\n        <PopoverTrigger asChild>\n          <TooltipTrigger asChild>\n            <Button data-testid='popover-tooltip-trigger' variant='outline' color='neutral'>\n              Actions\n            </Button>\n          </TooltipTrigger>\n        </PopoverTrigger>\n        <TooltipContent>More actions</TooltipContent>\n      </Tooltip>\n      <PopoverContent>\n        <Text size='sm'>Popover content</Text>\n      </PopoverContent>\n    </Popover>\n  );\n}"
+        },
         {
           "name": "MinMaxWidth",
           "code": "() => (\n  <VStack gap={32}>\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant='outline' color='neutral'>\n          Min Width\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent>\n        <Text size='xs' weight='medium'>\n          Lorem Ipsum\n        </Text>\n      </PopoverContent>\n    </Popover>\n\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant='outline' color='neutral'>\n          Max Width\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent>\n        <Text size='xs' weight='medium'>\n          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has\n          been the industry's standard dummy text ever since the 1500s, when an unknown printer took\n          a galley of type and scrambled it to make a type specimen book. It has survived not only\n          five centuries, but also the leap into electronic typesetting, remaining essentially\n          unchanged. It was popularised in the 1960s with the release of Letraset sheets containing\n          Lorem Ipsum passages, and more recently with desktop publishing software like Aldus\n          PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established\n          fact that a reader will be distracted by the readable content of a page when looking at\n          its layout.\n        </Text>\n      </PopoverContent>\n    </Popover>\n  </VStack>\n)"
@@ -82150,6 +82160,12 @@
           "name": "positioning",
           "type": "PositioningOptions | undefined",
           "required": false
+        },
+        {
+          "name": "ids",
+          "type": "Partial<{ trigger: string | ((value?: string | undefined) => string); content: string; arrow: string; positioner: string; }> | undefined",
+          "required": false,
+          "description": "Override the trigger element's id. Pass the same id to another\ncompound component's `ids.trigger` (e.g. `Popover`, `DropdownMenu`) to\ncompose their triggers on one element via nested `asChild` without an\nextra wrapper node — otherwise the outer trigger's id wins and this\ntooltip can't find its anchor, mispositioning at the viewport origin."
         }
       ],
       "variants": [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.85.1",
+  "version": "0.86.0",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",