@synerise/ds-menu 1.4.31 → 1.4.32

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.4.32](https://github.com/Synerise/synerise-design/compare/@synerise/ds-menu@1.4.31...@synerise/ds-menu@1.4.32) (2026-07-23)
+
+**Note:** Version bump only for package @synerise/ds-menu
+
 ## [1.4.31](https://github.com/Synerise/synerise-design/compare/@synerise/ds-menu@1.4.30...@synerise/ds-menu@1.4.31) (2026-07-16)
 
 **Note:** Version bump only for package @synerise/ds-menu

package/CLAUDE.md

@@ -0,0 +1,160 @@
+# Menu (`@synerise/ds-menu`)
+
+> A feature-rich vertical menu wrapping Ant Design / `rc-menu`, supporting items with icons, descriptions, copy-to-clipboard, sub-menus, breadcrumbs, headers, ordered numbering, and show-more pagination.
+
+## Package structure
+
+```
+src/
+ Menu.tsx — class component; mounts AntdMenu, handles dataSource / children / pagination
+ Menu.types.ts — AntdMenuProps, MenuItemProps, SubMenuProps, MenuTexts, Copyable, ItemType, ItemSize, VisibilityTrigger enums
+ Menu.styles.ts — AntdMenu styled wrapper with ordered/asDropdownMenu/asInfoCardContainer variants
+ index.ts — public exports + MenuStyles namespace
+ Elements/
+ Item/MenuItem.tsx — primary item renderer; routes to Text/Select/Danger sub-variants
+ Item/Text/ — default item type
+ Item/Select/ — checkbox-style item type
+ Item/Danger/ — destructive item type (red text)
+ Item/SubmenuText/ — item used inside sub-menus
+ SubMenu/SubMenu.tsx — expandable sub-menu with collapsible children
+ Breadcrumb/Breadcrumb.tsx — breadcrumb trail component
+ Header/Header.tsx — non-interactive section heading
+ Divider/Divider.tsx — visual separator
+ style/index.less — Ant Design menu overrides
+ __specs__/
+ Menu.spec.tsx — Vitest tests
+```
+
+## Public exports
+
+### `Menu` (default export)
+
+Class component. Props extend Ant Design `MenuProps`.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `dataSource` | `MenuItemProps[]` | — | Items to render; if absent, renders `children` instead |
+| `children` | `ReactNode` | — | Manual items; used when `dataSource` is not provided |
+| `ordered` | `boolean` | — | Prefixes each item with a zero-padded index (`01`, `02`, …) |
+| `asDropdownMenu` | `boolean` | — | Adds dropdown-specific styling to the menu |
+| `asInfoCardContainer` | `boolean` | — | Applies info-card container styles |
+| `showTextTooltip` | `boolean` | — | Wraps each item's `text` in a `Tooltip` with the same text |
+| `maxToShowItems` | `number` | — | Limits visible items; remaining are shown after a toggle button click |
+| `texts` | `Partial<MenuTexts>` | `{ showMore, showLess }` | i18n overrides for the show-more toggle button |
+| `popoverDelay` | `DelayConfig` | `{ open: 100, close: 400 }` | `FloatingDelayGroup` delay for sub-menu popovers |
+| `selectable` | `boolean` | `false` | Ant Design `selectable`; overridden to `false` by default |
+
+### `Menu.Item`
+
+The primary item component. Key props:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `text` | `ReactNode` | — | Item label |
+| `description` | `ReactNode` | — | Secondary line below the label |
+| `type` | `'default' \| 'select' \| 'danger'` | `'default'` | Visual variant |
+| `size` | `'default' \| 'large'` | `'default'` | Affects min/max height |
+| `prefixel` | `ReactNode \| (hovered: boolean) => ReactNode` | — | Left slot |
+| `suffixel` | `ReactNode \| (hovered: boolean) => ReactNode` | — | Right slot |
+| `prefixVisibilityTrigger` | `'default' \| 'hover'` | `'default'` | When to show the prefix |
+| `suffixVisibilityTrigger` | `'default' \| 'hover'` | `'default'` | When to show the suffix |
+| `highlight` | `string` | — | Substring to highlight in the label |
+| `copyable` | `boolean \| Copyable` | — | Enables copy-to-clipboard; `boolean` is deprecated — pass `Copyable` object |
+| `copyValue` | `string` | — | **`@deprecated`** — use `copyable: Copyable` instead |
+| `copyHint` | `ReactNode` | — | **`@deprecated`** — no longer shown |
+| `copyTooltip` | `ReactNode` | — | **`@deprecated`** — no longer shown |
+| `indentLevel` | `number` | `0` | Indent multiplier for nested manual rendering |
+| `subMenu` | `SubMenuProps[]` | — | Nested items |
+| `parent` | `boolean` | — | Shows expand arrow for parent items |
+| `disabled` | `boolean` | `false` | Disables the item |
+| `checked` | `boolean` | — | Check state for `type="select"` items |
+| `renderHoverTooltip` | `() => JSX.Element` | — | Custom hover tooltip renderer |
+| `popoverProps` | `Pick<PopoverOptions, …>` | — | Overrides for the sub-menu popover |
+
+### `Menu.Breadcrumb`
+
+Section breadcrumb trail component.
+
+### `Menu.Header`
+
+Non-interactive section heading row.
+
+### `Menu.Divider`
+
+Visual separator (`Divider` from `./Elements/Divider/Divider`).
+
+### `Menu.SubMenu`
+
+Ant Design SubMenu (via `S.AntdMenu.SubMenu`).
+
+### `Menu.ItemGroup`
+
+Ant Design ItemGroup (via `S.AntdMenu.ItemGroup`).
+
+### `MenuStyles`
+
+Namespace object containing all internal styled-component exports for consumers who need to override styles:
+
+```ts
+MenuStyles.MenuStyles // main menu wrapper styles
+MenuStyles.Breadcrumb
+MenuStyles.Header
+MenuStyles.ItemDanger
+MenuStyles.ItemSelect
+MenuStyles.ItemSubmenuText
+MenuStyles.ItemText
+```
+
+### `MenuTexts`, `AntdMenuProps`, `MenuItemProps`, `SubMenuProps`, `MenuDividerProps`
+
+Type re-exports from `Menu.types.ts`.
+
+### Enums: `VisibilityTrigger`, `ItemType`, `ItemSize`
+
+Re-exported from `Menu.types.ts`.
+
+## Usage patterns
+
+```tsx
+import Menu from '@synerise/ds-menu';
+import type { MenuItemProps } from '@synerise/ds-menu';
+
+// dataSource mode
+<Menu dataSource={items} maxToShowItems={5} />
+
+// children mode (compound)
+<Menu>
+ <Menu.Header>Section</Menu.Header>
+ <Menu.Item text="Item 1" prefixel={<Icon component={<EditM />} />} />
+ <Menu.Divider />
+ <Menu.Item text="Danger" type="danger" />
+</Menu>
+
+// Copy with new API
+<Menu.Item
+ text="Copy me"
+ copyable={{ copyValue: 'clipboard text', copiedLabel: 'Copied!' }}
+/>
+```
+
+## Styling
+
+`Menu.styles.ts` wraps Ant Design's `Menu` in a styled component. Applies ordered numbering via CSS counters when `ordered={true}`. Dropdown-specific overrides applied when `asDropdownMenu={true}`. Uses `rc-menu` for the underlying implementation.
+
+## Key dependencies
+
+- `rc-menu` (`~9.6.3`) — underlying menu implementation
+- `antd` — Ant Design `Menu` base
+- `@synerise/ds-popover` (`FloatingDelayGroup`) — delay isolation for nested sub-menu popovers
+- `copy-to-clipboard` — clipboard API for `copyable` items
+- `@synerise/ds-tooltip` — hover tooltips on items
+- `uuid` — unique keys for sub-menu items
+
+## Implementation notes
+
+- **Class component** — `Menu` is a `React.Component`, not a functional component; `toggleItems` uses `setState`. Converting to functional is a known migration task.
+- **`dataSource` vs `children`** — both modes work but are mutually exclusive. When `dataSource` is provided, `children` is ignored for the item list (the toggle button still renders after).
+- **`maxToShowItems` with `children`** — when using `children` mode (not `dataSource`), pagination slices `Children.toArray(children)` by index, so any non-item children (e.g. `Menu.Header`) count against the limit.
+- **Deprecated copy props** — `copyValue`, `copyHint`, `copyTooltip`, `timeToHideTooltip`, `tooltipProps` on `MenuItemProps` are all `@deprecated`; use `copyable: Copyable` instead.
+- **`asDropdownwMenu` typo in README** — the README documents `asDropdownwMenu` (extra `w`) but the actual prop name is `asDropdownMenu`.
+- **Uses Vitest**.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-menu",
-  "version": "1.4.31",
+  "version": "1.4.32",
   "description": "[DEPRECATED] Menu UI Component for the Synerise Design System — use @synerise/ds-list-item instead",
   "deprecated": "@synerise/ds-menu is deprecated and will not be migrated off antd. Use @synerise/ds-list-item (ListItem / ListWrapper) instead.",
   "license": "ISC",
@@ -18,6 +18,7 @@
   "files": [
     "/dist",
     "CHANGELOG.md",
+    "CLAUDE.md",
     "README.md",
     "package.json",
     "LICENSE.md"
@@ -42,12 +43,12 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.5.34",
-    "@synerise/ds-divider": "^1.3.15",
-    "@synerise/ds-icon": "^1.18.4",
-    "@synerise/ds-popover": "^1.6.1",
-    "@synerise/ds-tooltip": "^1.5.3",
-    "@synerise/ds-utils": "^1.10.1",
+    "@synerise/ds-button": "^1.5.35",
+    "@synerise/ds-divider": "^1.3.16",
+    "@synerise/ds-icon": "^1.18.5",
+    "@synerise/ds-popover": "^1.6.2",
+    "@synerise/ds-tooltip": "^1.5.4",
+    "@synerise/ds-utils": "^1.10.2",
     "classnames": "^2.5.1",
     "rc-menu": "~9.6.3",
     "react-intl": "^6.8.7",
@@ -64,5 +65,5 @@
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "a81ab6519d49a3dea9c0cfebcdc9104cbb4f4226"
+  "gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
 }