@synerise/ds-sidebar-object 1.1.49 → 1.1.50
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 +4 -0
- package/CLAUDE.md +122 -0
- package/package.json +16 -15
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
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.1.50](https://github.com/Synerise/synerise-design/compare/@synerise/ds-sidebar-object@1.1.49...@synerise/ds-sidebar-object@1.1.50) (2026-07-23)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-sidebar-object
|
|
9
|
+
|
|
6
10
|
## [1.1.49](https://github.com/Synerise/synerise-design/compare/@synerise/ds-sidebar-object@1.1.48...@synerise/ds-sidebar-object@1.1.49) (2026-07-16)
|
|
7
11
|
|
|
8
12
|
**Note:** Version bump only for package @synerise/ds-sidebar-object
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
# SidebarObject (`@synerise/ds-sidebar-object`)
|
|
2
|
+
|
|
3
|
+
> A drawer-style object detail sidebar combining a header (editable/readonly title, navigation/action buttons, dropdown menu), tab navigation, scrollable tab content, and an optional footer.
|
|
4
|
+
|
|
5
|
+
## Package structure
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
src/
|
|
9
|
+
SidebarObject.tsx — main component; assembles Header + Scrollbar + tabs content + footer
|
|
10
|
+
SidebarObject.types.ts — SidebarObjectProps, FolderItem
|
|
11
|
+
SidebarObject.style.ts — FooterContainer, SidebarObjectWrapper, ContentContainer
|
|
12
|
+
Elements/
|
|
13
|
+
Header/
|
|
14
|
+
Header.tsx — title (readonly/editable), action buttons, dropdown menu
|
|
15
|
+
Header.types.ts — HeaderProps, HeaderTexts, HeaderType enum, ButtonVariant enum
|
|
16
|
+
Header.style.ts — DrawerHeaderBar, StyledInlineEdit, ButtonWrapper, etc.
|
|
17
|
+
Content/
|
|
18
|
+
Content.tsx — Drawer.DrawerBody with folder selection, tags, description
|
|
19
|
+
Content.types.ts — ContentProps (uses deep import for SubtleTextAreaProps)
|
|
20
|
+
Content.style.ts — ContentWrapper, TagsWrapper, InlineEditWrapper
|
|
21
|
+
Overview/
|
|
22
|
+
Overview.tsx — folder dropdown + Content + ObjectSummary composition
|
|
23
|
+
Overview.types.tsx — OverviewObjectProps, OverviewTexts
|
|
24
|
+
ObjectSummary/
|
|
25
|
+
ObjectSummary.tsx — renders inputObject as Description key-value rows
|
|
26
|
+
ObjectSummary.types.ts — ObjectSummaryProps
|
|
27
|
+
__specs__/SidebarObject.spec.tsx
|
|
28
|
+
index.ts — default export only
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Public exports
|
|
32
|
+
|
|
33
|
+
### `SidebarObject` (default export)
|
|
34
|
+
|
|
35
|
+
| Prop | Type | Default | Description |
|
|
36
|
+
|------|------|---------|-------------|
|
|
37
|
+
| `headerTabs` | `(TabItem & { content?: ReactNode })[]` | — | **Required.** Tab definitions; `content` is the tab body rendered in the scrollable area |
|
|
38
|
+
| `inputObject` | `{ [key: string]: string \| ReactNode } & object` | — | **Required.** Object whose keys are displayed in `ObjectSummary` |
|
|
39
|
+
| `texts` | `Partial<HeaderTexts>` | — | **Required.** Header labels (button texts, icon tooltips, etc.) |
|
|
40
|
+
| `name` | `string` | — | Object name shown in the title |
|
|
41
|
+
| `activeTab` | `number` | `0` | Index of the active tab |
|
|
42
|
+
| `headerType` | `'readonly' \| 'editable'` | `'readonly'` | Editable renders an `InlineEdit` for the title; readonly renders a plain text title |
|
|
43
|
+
| `typeButtons` | `'twoButtons' \| 'withNavigation'` | — | `'withNavigation'`: up/down arrows + options menu + close. `'twoButtons'`: cancel + apply buttons |
|
|
44
|
+
| `avatar` | `ReactNode` | — | Avatar element in the header |
|
|
45
|
+
| `headerPreffix` | `ReactNode` | — | Element to the left of the avatar in the header |
|
|
46
|
+
| `additionalNode` | `ReactNode` | — | Extra content rendered below the title bar but above tabs |
|
|
47
|
+
| `inlineEditInputProps` | `Partial<InputProps>` | — | Extra props for the `InlineEdit` input (only when `headerType='editable'`) |
|
|
48
|
+
| `inputObjectIdKey` | `string` | `'id'` | Key in `inputObject` used as the "Copy ID" value |
|
|
49
|
+
| `onEdit` | `(inputObject: object) => void` | — | Shows "Edit" in the options dropdown menu |
|
|
50
|
+
| `onDuplicate` | `(inputObject: object) => void` | — | Shows "Duplicate" in the options dropdown menu |
|
|
51
|
+
| `onMove` | `(inputObject: object) => void` | — | Shows "Move" in the options dropdown menu |
|
|
52
|
+
| `onDelete` | `(inputObject: object) => void` | — | Shows "Delete" in the options dropdown menu |
|
|
53
|
+
| `onId` | `(inputObject: object) => void` | — | Shows "Copy ID" in the options dropdown menu |
|
|
54
|
+
| `onRename` | `(name: string) => void` | — | Called when inline edit value changes (only when `headerType='editable'`) |
|
|
55
|
+
| `onCloseClick` | `() => void` | — | Close button handler (shown in `withNavigation` mode) |
|
|
56
|
+
| `onCancelClick` | `() => void` | — | Cancel button handler (shown in `twoButtons` mode) |
|
|
57
|
+
| `onApplyClick` | `() => void` | — | Apply button handler (shown in `twoButtons` mode) |
|
|
58
|
+
| `onArrowUp` | `() => void` | — | Up navigation button handler (shown in `withNavigation` mode when provided) |
|
|
59
|
+
| `onArrowDown` | `() => void` | — | Down navigation button handler (shown in `withNavigation` mode when provided) |
|
|
60
|
+
| `withScrollbar` | `boolean` | — | Enables vertical scroll on content area |
|
|
61
|
+
| `handleTabClick` | `(index: number) => void` | — | Called when a tab is clicked |
|
|
62
|
+
| `footer` | `ReactNode` | — | Footer rendered at the bottom outside the scroll area |
|
|
63
|
+
|
|
64
|
+
**Note:** `texts` is `Partial<HeaderTexts>` — all fields are optional. `HeaderTexts` has: `name`, `inlineEditPlaceholder`, `deleteIcon`, `duplicateIcon`, `moveIcon`, `editIcon`, `singleTitle`, `cancelButton`, `applyButton`, `addFolder`.
|
|
65
|
+
|
|
66
|
+
#### `ButtonVariant` enum values
|
|
67
|
+
|
|
68
|
+
| Enum value | Prop string | Description |
|
|
69
|
+
|-----------|-------------|-------------|
|
|
70
|
+
| `ButtonVariant.TWO_BUTTONS` | `'twoButtons'` | Cancel + Apply buttons |
|
|
71
|
+
| `ButtonVariant.WITH_NAVIGATION` | `'withNavigation'` | Arrow up/down + options menu + close |
|
|
72
|
+
|
|
73
|
+
#### `HeaderType` enum values
|
|
74
|
+
|
|
75
|
+
| Enum value | Prop string |
|
|
76
|
+
|-----------|-------------|
|
|
77
|
+
| `HeaderType.READONLY` | `'readonly'` |
|
|
78
|
+
| `HeaderType.EDITABLE` | `'editable'` |
|
|
79
|
+
|
|
80
|
+
## Usage patterns
|
|
81
|
+
|
|
82
|
+
```tsx
|
|
83
|
+
import SidebarObject from '@synerise/ds-sidebar-object';
|
|
84
|
+
import { ButtonVariant } from '@synerise/ds-sidebar-object/dist/Elements/Header/Header.types'; // deep import
|
|
85
|
+
|
|
86
|
+
<SidebarObject
|
|
87
|
+
name="My Object"
|
|
88
|
+
headerType="editable"
|
|
89
|
+
typeButtons="withNavigation"
|
|
90
|
+
headerTabs={[
|
|
91
|
+
{ label: 'Overview', content: <OverviewContent /> },
|
|
92
|
+
{ label: 'Settings', content: <SettingsContent /> },
|
|
93
|
+
]}
|
|
94
|
+
inputObject={{ id: '123', Status: 'active' }}
|
|
95
|
+
texts={{ editIcon: 'Edit', deleteIcon: 'Delete' }}
|
|
96
|
+
onEdit={(obj) => console.log(obj)}
|
|
97
|
+
onCloseClick={() => setOpen(false)}
|
|
98
|
+
/>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
## Styling
|
|
102
|
+
|
|
103
|
+
Styles in `SidebarObject.style.ts`. Uses `theme.palette` tokens for footer background (`grey-050`), border (`grey-100`). Component assumes `height: 100vh` for full-height layout. The `Scrollbar` component is configured with `absolute` and `maxHeight: 100vh`.
|
|
104
|
+
|
|
105
|
+
## Key dependencies
|
|
106
|
+
|
|
107
|
+
- `@synerise/ds-drawer` — `Drawer.DrawerHeaderWithoutPadding`, `Drawer.DrawerHeader`, `Drawer.DrawerBody`
|
|
108
|
+
- `@synerise/ds-tabs` — `Tabs` component for header tabs
|
|
109
|
+
- `@synerise/ds-scrollbar` — scrollable content area
|
|
110
|
+
- `@synerise/ds-inline-edit` — editable title (`headerType='editable'`)
|
|
111
|
+
- `@synerise/ds-dropdown` — options dropdown in the header
|
|
112
|
+
- `@synerise/ds-description` — `ObjectSummary` key-value display
|
|
113
|
+
|
|
114
|
+
## Implementation notes
|
|
115
|
+
|
|
116
|
+
- **`ButtonVariant` and `HeaderType` enums are not exported from `index.ts`**: consumers must pass string literals (`'twoButtons'`, `'withNavigation'`, `'readonly'`, `'editable'`) or use a deep import.
|
|
117
|
+
- **Deep imports for types**: `@synerise/ds-tabs/dist/Tabs.types` (for `TabItem`), `@synerise/ds-inline-edit/dist/InlineEdit.types` (for `InputProps`), `@synerise/ds-subtle-form/dist/Elements/TextArea/TextArea.types` (for `SubtleTextAreaProps`) — all fragile dist paths.
|
|
118
|
+
- **`@ts-expect-error`** in `SidebarObject.tsx` for Scrollbar `options.suppressScrollY` — the type doesn't expose this prop.
|
|
119
|
+
- **`// TODO: fix handler type`** with `any` cast in `Content.tsx` for `SubtleForm.TextArea onChange` handler.
|
|
120
|
+
- **Options dropdown visibility**: the dropdown menu only renders if at least one of `onEdit`, `onDuplicate`, `onMove`, `onDelete`, `onId` is provided.
|
|
121
|
+
- **`onScrollbar` in README** is wrong — the actual prop is `withScrollbar: boolean`.
|
|
122
|
+
- **Uses Vitest** for testing.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-sidebar-object",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.50",
|
|
4
4
|
"description": "SidebarObject UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
"files": [
|
|
18
18
|
"/dist",
|
|
19
19
|
"CHANGELOG.md",
|
|
20
|
+
"CLAUDE.md",
|
|
20
21
|
"README.md",
|
|
21
22
|
"package.json",
|
|
22
23
|
"LICENSE.md"
|
|
@@ -41,19 +42,19 @@
|
|
|
41
42
|
],
|
|
42
43
|
"types": "dist/index.d.ts",
|
|
43
44
|
"dependencies": {
|
|
44
|
-
"@synerise/ds-button": "^1.5.
|
|
45
|
-
"@synerise/ds-description": "^1.3.
|
|
46
|
-
"@synerise/ds-drawer": "^1.1.
|
|
47
|
-
"@synerise/ds-dropdown": "^1.3.
|
|
48
|
-
"@synerise/ds-icon": "^1.18.
|
|
49
|
-
"@synerise/ds-inline-edit": "^1.1.
|
|
50
|
-
"@synerise/ds-menu": "^1.4.
|
|
51
|
-
"@synerise/ds-result": "^1.0.
|
|
52
|
-
"@synerise/ds-scrollbar": "^1.5.
|
|
53
|
-
"@synerise/ds-subtle-form": "^1.2.
|
|
54
|
-
"@synerise/ds-tabs": "^1.2.
|
|
55
|
-
"@synerise/ds-typography": "^1.1.
|
|
56
|
-
"@synerise/ds-utils": "^1.10.
|
|
45
|
+
"@synerise/ds-button": "^1.5.35",
|
|
46
|
+
"@synerise/ds-description": "^1.3.16",
|
|
47
|
+
"@synerise/ds-drawer": "^1.1.6",
|
|
48
|
+
"@synerise/ds-dropdown": "^1.3.20",
|
|
49
|
+
"@synerise/ds-icon": "^1.18.5",
|
|
50
|
+
"@synerise/ds-inline-edit": "^1.1.48",
|
|
51
|
+
"@synerise/ds-menu": "^1.4.32",
|
|
52
|
+
"@synerise/ds-result": "^1.0.66",
|
|
53
|
+
"@synerise/ds-scrollbar": "^1.5.2",
|
|
54
|
+
"@synerise/ds-subtle-form": "^1.2.8",
|
|
55
|
+
"@synerise/ds-tabs": "^1.2.6",
|
|
56
|
+
"@synerise/ds-typography": "^1.1.27",
|
|
57
|
+
"@synerise/ds-utils": "^1.10.2"
|
|
57
58
|
},
|
|
58
59
|
"peerDependencies": {
|
|
59
60
|
"@synerise/ds-core": "*",
|
|
@@ -62,5 +63,5 @@
|
|
|
62
63
|
"styled-components": "^5.3.3",
|
|
63
64
|
"vitest": "4"
|
|
64
65
|
},
|
|
65
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
|
|
66
67
|
}
|