@k8slens/lds 0.58.1 → 0.58.2

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/llms.txt CHANGED
@@ -45,7 +45,7 @@ import "@k8slens/lds/lib/es/typography.css";
45
45
  All components are exported from the package root:
46
46
 
47
47
  ```typescript
48
- import { Button, Input, Modal, Select, Avatar, Badge, Textarea } from "@k8slens/lds";
48
+ import { Button, Input, Modal, Select, Avatar, Badge, ContextMenu, Textarea } from "@k8slens/lds";
49
49
  ```
50
50
 
51
51
  ## TypeScript Types
@@ -117,6 +117,36 @@ import { Checkbox } from "@k8slens/lds";
117
117
  <Checkbox value={checked} onChange={setChecked} />
118
118
  ```
119
119
 
120
+ ### ContextMenu
121
+
122
+ A dropdown context menu triggered by an icon button. Uses dot notation API for sub-components. Built with Headless UI v2 Menu for accessibility.
123
+
124
+ ```tsx
125
+ import { ContextMenu } from "@k8slens/lds";
126
+
127
+ <ContextMenu>
128
+ <ContextMenu.Item onClick={handleEdit} icon={EditIcon}>Edit</ContextMenu.Item>
129
+ <ContextMenu.Item onClick={handleDelete} disabled>Delete</ContextMenu.Item>
130
+ </ContextMenu>
131
+ ```
132
+
133
+ **ContextMenu Props:**
134
+ - `children` (required) - Menu items rendered inside the dropdown
135
+ - `icon` (default: ContextMenuIcon) - Icon component for the trigger button
136
+ - `position` (default: "right") - "left" or "right" alignment of the dropdown
137
+ - `disabled` (default: false) - Whether the menu is disabled
138
+
139
+ **ContextMenu.Item Props:**
140
+ - `children` (required) - Content displayed inside the menu item
141
+ - `icon` - Optional icon rendered before the content
142
+ - `onClick` - Click handler
143
+ - `disabled` (default: false) - Whether the item is disabled
144
+ - `className` - Optional class name
145
+
146
+ **Implementation Notes:**
147
+ - Uses Headless UI v2 API: `transition` prop on `MenuItems` enables built-in transitions
148
+ - Dropdown transitions use data-attribute selectors (`[data-closed]`, `[data-leave]`) for opacity and scale animations
149
+
120
150
  ### ConfirmDialog
121
151
 
122
152
  A modal dialog that asks the user to confirm an action. Use with `useConfirmDialog` hook.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@k8slens/lds",
3
- "version": "0.58.1",
3
+ "version": "0.58.2",
4
4
  "description": "Lens Design System – Core React Component Library",
5
5
  "author": "Mirantis Inc",
6
6
  "license": "MIT",
@@ -29,7 +29,7 @@
29
29
  "format": "oxlint --fix . && prettier --write ."
30
30
  },
31
31
  "devDependencies": {
32
- "@k8slens/lds-tokens": "^0.59.1",
32
+ "@k8slens/lds-tokens": "^0.59.2",
33
33
  "@storybook/react": "6.5.16",
34
34
  "@testing-library/react": "14.0.0",
35
35
  "@types/randomcolor": "0.5.9",
@@ -64,5 +64,5 @@
64
64
  "\\.svg": "<rootDir>/../../__mocks__/SVGStub.js"
65
65
  }
66
66
  },
67
- "gitHead": "5eda1efad729aad60ce149aeca5e9dbd7f92ec3a"
67
+ "gitHead": "1f889df45a91e8b67494c6e5e45197639861a84f"
68
68
  }