@synerise/ds-menu 1.4.31 → 1.4.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/CLAUDE.md +160 -0
- package/package.json +9 -8
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.4.33](https://github.com/Synerise/synerise-design/compare/@synerise/ds-menu@1.4.32...@synerise/ds-menu@1.4.33) (2026-08-11)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-menu
|
|
9
|
+
|
|
10
|
+
## [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)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-menu
|
|
13
|
+
|
|
6
14
|
## [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)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-menu
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
# Menu (`@synerise/ds-menu`)
|
|
2
|
+
|
|
3
|
+
> 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.
|
|
4
|
+
|
|
5
|
+
## Package structure
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
src/
|
|
9
|
+
Menu.tsx — class component; mounts AntdMenu, handles dataSource / children / pagination
|
|
10
|
+
Menu.types.ts — AntdMenuProps, MenuItemProps, SubMenuProps, MenuTexts, Copyable, ItemType, ItemSize, VisibilityTrigger enums
|
|
11
|
+
Menu.styles.ts — AntdMenu styled wrapper with ordered/asDropdownMenu/asInfoCardContainer variants
|
|
12
|
+
index.ts — public exports + MenuStyles namespace
|
|
13
|
+
Elements/
|
|
14
|
+
Item/MenuItem.tsx — primary item renderer; routes to Text/Select/Danger sub-variants
|
|
15
|
+
Item/Text/ — default item type
|
|
16
|
+
Item/Select/ — checkbox-style item type
|
|
17
|
+
Item/Danger/ — destructive item type (red text)
|
|
18
|
+
Item/SubmenuText/ — item used inside sub-menus
|
|
19
|
+
SubMenu/SubMenu.tsx — expandable sub-menu with collapsible children
|
|
20
|
+
Breadcrumb/Breadcrumb.tsx — breadcrumb trail component
|
|
21
|
+
Header/Header.tsx — non-interactive section heading
|
|
22
|
+
Divider/Divider.tsx — visual separator
|
|
23
|
+
style/index.less — Ant Design menu overrides
|
|
24
|
+
__specs__/
|
|
25
|
+
Menu.spec.tsx — Vitest tests
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Public exports
|
|
29
|
+
|
|
30
|
+
### `Menu` (default export)
|
|
31
|
+
|
|
32
|
+
Class component. Props extend Ant Design `MenuProps`.
|
|
33
|
+
|
|
34
|
+
| Prop | Type | Default | Description |
|
|
35
|
+
|------|------|---------|-------------|
|
|
36
|
+
| `dataSource` | `MenuItemProps[]` | — | Items to render; if absent, renders `children` instead |
|
|
37
|
+
| `children` | `ReactNode` | — | Manual items; used when `dataSource` is not provided |
|
|
38
|
+
| `ordered` | `boolean` | — | Prefixes each item with a zero-padded index (`01`, `02`, …) |
|
|
39
|
+
| `asDropdownMenu` | `boolean` | — | Adds dropdown-specific styling to the menu |
|
|
40
|
+
| `asInfoCardContainer` | `boolean` | — | Applies info-card container styles |
|
|
41
|
+
| `showTextTooltip` | `boolean` | — | Wraps each item's `text` in a `Tooltip` with the same text |
|
|
42
|
+
| `maxToShowItems` | `number` | — | Limits visible items; remaining are shown after a toggle button click |
|
|
43
|
+
| `texts` | `Partial<MenuTexts>` | `{ showMore, showLess }` | i18n overrides for the show-more toggle button |
|
|
44
|
+
| `popoverDelay` | `DelayConfig` | `{ open: 100, close: 400 }` | `FloatingDelayGroup` delay for sub-menu popovers |
|
|
45
|
+
| `selectable` | `boolean` | `false` | Ant Design `selectable`; overridden to `false` by default |
|
|
46
|
+
|
|
47
|
+
### `Menu.Item`
|
|
48
|
+
|
|
49
|
+
The primary item component. Key props:
|
|
50
|
+
|
|
51
|
+
| Prop | Type | Default | Description |
|
|
52
|
+
|------|------|---------|-------------|
|
|
53
|
+
| `text` | `ReactNode` | — | Item label |
|
|
54
|
+
| `description` | `ReactNode` | — | Secondary line below the label |
|
|
55
|
+
| `type` | `'default' \| 'select' \| 'danger'` | `'default'` | Visual variant |
|
|
56
|
+
| `size` | `'default' \| 'large'` | `'default'` | Affects min/max height |
|
|
57
|
+
| `prefixel` | `ReactNode \| (hovered: boolean) => ReactNode` | — | Left slot |
|
|
58
|
+
| `suffixel` | `ReactNode \| (hovered: boolean) => ReactNode` | — | Right slot |
|
|
59
|
+
| `prefixVisibilityTrigger` | `'default' \| 'hover'` | `'default'` | When to show the prefix |
|
|
60
|
+
| `suffixVisibilityTrigger` | `'default' \| 'hover'` | `'default'` | When to show the suffix |
|
|
61
|
+
| `highlight` | `string` | — | Substring to highlight in the label |
|
|
62
|
+
| `copyable` | `boolean \| Copyable` | — | Enables copy-to-clipboard; `boolean` is deprecated — pass `Copyable` object |
|
|
63
|
+
| `copyValue` | `string` | — | **`@deprecated`** — use `copyable: Copyable` instead |
|
|
64
|
+
| `copyHint` | `ReactNode` | — | **`@deprecated`** — no longer shown |
|
|
65
|
+
| `copyTooltip` | `ReactNode` | — | **`@deprecated`** — no longer shown |
|
|
66
|
+
| `indentLevel` | `number` | `0` | Indent multiplier for nested manual rendering |
|
|
67
|
+
| `subMenu` | `SubMenuProps[]` | — | Nested items |
|
|
68
|
+
| `parent` | `boolean` | — | Shows expand arrow for parent items |
|
|
69
|
+
| `disabled` | `boolean` | `false` | Disables the item |
|
|
70
|
+
| `checked` | `boolean` | — | Check state for `type="select"` items |
|
|
71
|
+
| `renderHoverTooltip` | `() => JSX.Element` | — | Custom hover tooltip renderer |
|
|
72
|
+
| `popoverProps` | `Pick<PopoverOptions, …>` | — | Overrides for the sub-menu popover |
|
|
73
|
+
|
|
74
|
+
### `Menu.Breadcrumb`
|
|
75
|
+
|
|
76
|
+
Section breadcrumb trail component.
|
|
77
|
+
|
|
78
|
+
### `Menu.Header`
|
|
79
|
+
|
|
80
|
+
Non-interactive section heading row.
|
|
81
|
+
|
|
82
|
+
### `Menu.Divider`
|
|
83
|
+
|
|
84
|
+
Visual separator (`Divider` from `./Elements/Divider/Divider`).
|
|
85
|
+
|
|
86
|
+
### `Menu.SubMenu`
|
|
87
|
+
|
|
88
|
+
Ant Design SubMenu (via `S.AntdMenu.SubMenu`).
|
|
89
|
+
|
|
90
|
+
### `Menu.ItemGroup`
|
|
91
|
+
|
|
92
|
+
Ant Design ItemGroup (via `S.AntdMenu.ItemGroup`).
|
|
93
|
+
|
|
94
|
+
### `MenuStyles`
|
|
95
|
+
|
|
96
|
+
Namespace object containing all internal styled-component exports for consumers who need to override styles:
|
|
97
|
+
|
|
98
|
+
```ts
|
|
99
|
+
MenuStyles.MenuStyles // main menu wrapper styles
|
|
100
|
+
MenuStyles.Breadcrumb
|
|
101
|
+
MenuStyles.Header
|
|
102
|
+
MenuStyles.ItemDanger
|
|
103
|
+
MenuStyles.ItemSelect
|
|
104
|
+
MenuStyles.ItemSubmenuText
|
|
105
|
+
MenuStyles.ItemText
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### `MenuTexts`, `AntdMenuProps`, `MenuItemProps`, `SubMenuProps`, `MenuDividerProps`
|
|
109
|
+
|
|
110
|
+
Type re-exports from `Menu.types.ts`.
|
|
111
|
+
|
|
112
|
+
### Enums: `VisibilityTrigger`, `ItemType`, `ItemSize`
|
|
113
|
+
|
|
114
|
+
Re-exported from `Menu.types.ts`.
|
|
115
|
+
|
|
116
|
+
## Usage patterns
|
|
117
|
+
|
|
118
|
+
```tsx
|
|
119
|
+
import Menu from '@synerise/ds-menu';
|
|
120
|
+
import type { MenuItemProps } from '@synerise/ds-menu';
|
|
121
|
+
|
|
122
|
+
// dataSource mode
|
|
123
|
+
<Menu dataSource={items} maxToShowItems={5} />
|
|
124
|
+
|
|
125
|
+
// children mode (compound)
|
|
126
|
+
<Menu>
|
|
127
|
+
<Menu.Header>Section</Menu.Header>
|
|
128
|
+
<Menu.Item text="Item 1" prefixel={<Icon component={<EditM />} />} />
|
|
129
|
+
<Menu.Divider />
|
|
130
|
+
<Menu.Item text="Danger" type="danger" />
|
|
131
|
+
</Menu>
|
|
132
|
+
|
|
133
|
+
// Copy with new API
|
|
134
|
+
<Menu.Item
|
|
135
|
+
text="Copy me"
|
|
136
|
+
copyable={{ copyValue: 'clipboard text', copiedLabel: 'Copied!' }}
|
|
137
|
+
/>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
## Styling
|
|
141
|
+
|
|
142
|
+
`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.
|
|
143
|
+
|
|
144
|
+
## Key dependencies
|
|
145
|
+
|
|
146
|
+
- `rc-menu` (`~9.6.3`) — underlying menu implementation
|
|
147
|
+
- `antd` — Ant Design `Menu` base
|
|
148
|
+
- `@synerise/ds-popover` (`FloatingDelayGroup`) — delay isolation for nested sub-menu popovers
|
|
149
|
+
- `copy-to-clipboard` — clipboard API for `copyable` items
|
|
150
|
+
- `@synerise/ds-tooltip` — hover tooltips on items
|
|
151
|
+
- `uuid` — unique keys for sub-menu items
|
|
152
|
+
|
|
153
|
+
## Implementation notes
|
|
154
|
+
|
|
155
|
+
- **Class component** — `Menu` is a `React.Component`, not a functional component; `toggleItems` uses `setState`. Converting to functional is a known migration task.
|
|
156
|
+
- **`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).
|
|
157
|
+
- **`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.
|
|
158
|
+
- **Deprecated copy props** — `copyValue`, `copyHint`, `copyTooltip`, `timeToHideTooltip`, `tooltipProps` on `MenuItemProps` are all `@deprecated`; use `copyable: Copyable` instead.
|
|
159
|
+
- **`asDropdownwMenu` typo in README** — the README documents `asDropdownwMenu` (extra `w`) but the actual prop name is `asDropdownMenu`.
|
|
160
|
+
- **Uses Vitest**.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-menu",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.33",
|
|
4
4
|
"description": "[DEPRECATED] Menu UI Component for the Synerise Design System — use @synerise/ds-list-item instead",
|
|
5
5
|
"deprecated": "@synerise/ds-menu is deprecated and will not be migrated off antd. Use @synerise/ds-list-item (ListItem / ListWrapper) instead.",
|
|
6
6
|
"license": "ISC",
|
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
"files": [
|
|
19
19
|
"/dist",
|
|
20
20
|
"CHANGELOG.md",
|
|
21
|
+
"CLAUDE.md",
|
|
21
22
|
"README.md",
|
|
22
23
|
"package.json",
|
|
23
24
|
"LICENSE.md"
|
|
@@ -42,12 +43,12 @@
|
|
|
42
43
|
],
|
|
43
44
|
"types": "dist/index.d.ts",
|
|
44
45
|
"dependencies": {
|
|
45
|
-
"@synerise/ds-button": "^1.5.
|
|
46
|
-
"@synerise/ds-divider": "^1.3.
|
|
47
|
-
"@synerise/ds-icon": "^1.18.
|
|
48
|
-
"@synerise/ds-popover": "^1.6.
|
|
49
|
-
"@synerise/ds-tooltip": "^1.5.
|
|
50
|
-
"@synerise/ds-utils": "^1.10.
|
|
46
|
+
"@synerise/ds-button": "^1.5.36",
|
|
47
|
+
"@synerise/ds-divider": "^1.3.17",
|
|
48
|
+
"@synerise/ds-icon": "^1.18.5",
|
|
49
|
+
"@synerise/ds-popover": "^1.6.3",
|
|
50
|
+
"@synerise/ds-tooltip": "^1.5.5",
|
|
51
|
+
"@synerise/ds-utils": "^1.10.2",
|
|
51
52
|
"classnames": "^2.5.1",
|
|
52
53
|
"rc-menu": "~9.6.3",
|
|
53
54
|
"react-intl": "^6.8.7",
|
|
@@ -64,5 +65,5 @@
|
|
|
64
65
|
"styled-components": "^5.3.3",
|
|
65
66
|
"vitest": "4"
|
|
66
67
|
},
|
|
67
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "6df24ed12cd5f276d8eccde730591807982e3385"
|
|
68
69
|
}
|