overflow-toolbar 0.1.5 → 0.1.6
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/README.md +24 -0
- package/package.json +7 -2
package/README.md
CHANGED
|
@@ -156,6 +156,30 @@ Framework-agnostic controller class for building custom implementations.
|
|
|
156
156
|
| `disconnect()` | Stop observing and clear all applied styles/attributes |
|
|
157
157
|
| `update()` | Re-scan children and restart (call after DOM changes) |
|
|
158
158
|
|
|
159
|
+
## Important: No Wrapper Elements
|
|
160
|
+
|
|
161
|
+
`OverflowItem` and `OverflowMenu` components **must** be direct children of the `Overflow` container. Do not wrap them in `<div>`, `<span>`, layout components, or any other intermediate elements.
|
|
162
|
+
|
|
163
|
+
The overflow engine scans immediate children for internal role markers to measure, track, and transition items between states. Wrapper elements break this scan, causing items to never collapse, never appear in the menu, or fail to transition between visible/min/hidden states.
|
|
164
|
+
|
|
165
|
+
```tsx
|
|
166
|
+
{/* WRONG — wrapper breaks overflow behavior */}
|
|
167
|
+
<RxOverflow>
|
|
168
|
+
<div className="group">
|
|
169
|
+
<RxOverflowItem menuid="a"><button>A</button></RxOverflowItem>
|
|
170
|
+
<RxOverflowItem menuid="b"><button>B</button></RxOverflowItem>
|
|
171
|
+
</div>
|
|
172
|
+
</RxOverflow>
|
|
173
|
+
|
|
174
|
+
{/* CORRECT — items are direct children */}
|
|
175
|
+
<RxOverflow>
|
|
176
|
+
<RxOverflowItem menuid="a"><button>A</button></RxOverflowItem>
|
|
177
|
+
<RxOverflowItem menuid="b"><button>B</button></RxOverflowItem>
|
|
178
|
+
</RxOverflow>
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
The same rule applies to the vanilla JS variant — `<li>` elements with `data-overflow-role` must be direct children of the `<ul>` container.
|
|
182
|
+
|
|
159
183
|
## Modes
|
|
160
184
|
|
|
161
185
|
### Compact Mode
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "overflow-toolbar",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.6",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Responsive toolbar overflow component — items automatically collapse into a dropdown menu as the container shrinks. Supports visible, icon-only (min), and hidden states. Ships with React (Radix UI), MUI, and vanilla JS implementations.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -110,7 +110,11 @@
|
|
|
110
110
|
"test:unit": "vitest run --project unit",
|
|
111
111
|
"test:coverage": "vitest run --project unit --coverage",
|
|
112
112
|
"typecheck": "tsc -p tsconfig.build.json --noEmit",
|
|
113
|
-
"
|
|
113
|
+
"prepublishOnly": "pnpm run build:lib && pnpm run test:unit",
|
|
114
|
+
"release:patch": "npm version patch && npm publish --access public",
|
|
115
|
+
"release:minor": "npm version minor && npm publish --access public",
|
|
116
|
+
"release:major": "npm version major && npm publish --access public",
|
|
117
|
+
"prepare": "husky"
|
|
114
118
|
},
|
|
115
119
|
"dependencies": {
|
|
116
120
|
"clsx": "^2.0.0",
|
|
@@ -167,6 +171,7 @@
|
|
|
167
171
|
"eslint-plugin-react-refresh": "^0.4.24",
|
|
168
172
|
"eslint-plugin-storybook": "^10.2.14",
|
|
169
173
|
"globals": "^16.5.0",
|
|
174
|
+
"husky": "^9.1.7",
|
|
170
175
|
"jsdom": "^28.1.0",
|
|
171
176
|
"lucide-react": "^0.576.0",
|
|
172
177
|
"playwright": "^1.58.2",
|