@sproutsocial/seeds-react-menu 1.16.11 → 1.16.14

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.
Files changed (4) hide show
  1. package/.turbo/turbo-build.log +8 -8
  2. package/BUNDLE_OPTIMIZATION.md +28 -6
  3. package/CHANGELOG.md +55 -0
  4. package/package.json +14 -14
package/.turbo/turbo-build.log CHANGED
@@ -14,22 +14,22 @@ $ tsup --dts
14
14
  CJS dist/index.js.map 180.28 KB
15
15
  CJS dist/v3/index.js.map 213.07 KB
16
16
  CJS dist/v2/index.js.map 152.19 KB
17
- CJS ⚡️ Build success in 71ms
17
+ CJS ⚡️ Build success in 128ms
18
18
  ESM dist/esm/index.js 73.60 KB
19
- ESM dist/esm/v3/index.js 108.01 KB
20
- ESM dist/esm/chunk-ROQATIB7.js 9.15 KB
21
19
  ESM dist/esm/v2/index.js 62.63 KB
20
+ ESM dist/esm/chunk-ROQATIB7.js 9.15 KB
21
+ ESM dist/esm/v3/index.js 108.01 KB
22
22
  ESM dist/esm/index.js.map 156.29 KB
23
- ESM dist/esm/v3/index.js.map 213.12 KB
24
- ESM dist/esm/chunk-ROQATIB7.js.map 22.93 KB
25
23
  ESM dist/esm/v2/index.js.map 132.57 KB
26
- ESM ⚡️ Build success in 71ms
24
+ ESM dist/esm/chunk-ROQATIB7.js.map 22.93 KB
25
+ ESM dist/esm/v3/index.js.map 213.12 KB
26
+ ESM ⚡️ Build success in 128ms
27
27
  DTS Build start
28
- DTS ⚡️ Build success in 7374ms
28
+ DTS ⚡️ Build success in 7209ms
29
29
  DTS dist/index.d.ts 39.12 KB
30
30
  DTS dist/v2/index.d.ts 5.55 KB
31
31
  DTS dist/v3/index.d.ts 23.92 KB
32
32
  DTS dist/index.d.mts 39.12 KB
33
33
  DTS dist/v2/index.d.mts 5.55 KB
34
34
  DTS dist/v3/index.d.mts 23.92 KB
35
- Done in 8.11s.
35
+ Done in 8.00s.
package/BUNDLE_OPTIMIZATION.md CHANGED
@@ -15,6 +15,7 @@ This document outlines the bundle size optimization work for the `seeds-react-me
15
15
  ### Changes Made
16
16
 
17
17
  1. **Updated tsup.config.ts** - Externalized critical dependencies:
18
+
18
19
  - `styled-system` (previously bundled ~25 KB)
19
20
  - `styled-components`
20
21
  - All `@sproutsocial/*` packages (monorepo optimization)
@@ -40,6 +41,7 @@ This document outlines the bundle size optimization work for the `seeds-react-me
40
41
  ### 2.1 Remove or Deprecate styled-system Usage
41
42
 
42
43
  **Current Issue**: Five files import styled-system functions to enable runtime style props:
44
+
43
45
  - `/Users/ozzy/code/seeds/seeds-react/seeds-react-menu/src/MenuItem/styles.tsx` (lines 105-110)
44
46
  - `/Users/ozzy/code/seeds/seeds-react/seeds-react-menu/src/MenuHeader/styles.tsx`
45
47
  - `/Users/ozzy/code/seeds/seeds-react/seeds-react-menu/src/MenuContent/styles.tsx`
@@ -49,11 +51,13 @@ This document outlines the bundle size optimization work for the `seeds-react-me
49
51
  These files use styled-system's `border`, `color`, `flexbox`, `grid`, `layout`, and `space` functions.
50
52
 
51
53
  **Options**:
54
+
52
55
  - **Option A**: Remove styled-system props entirely (breaking change, requires major version)
53
56
  - **Option B**: Keep but document as deprecated for v3 (non-breaking)
54
57
  - **Option C**: Remove from internal components only, keep on public APIs (hybrid approach)
55
58
 
56
59
  **Recommendation**:
60
+
57
61
  1. First, audit usage in consuming applications to understand impact
58
62
  2. Start with Option C - remove from internal components
59
63
  3. If usage is minimal, consider Option A for v3.0
@@ -61,6 +65,7 @@ These files use styled-system's `border`, `color`, `flexbox`, `grid`, `layout`,
61
65
  **Expected Savings**: ~10-15 KB
62
66
 
63
67
  **Implementation Steps**:
68
+
64
69
  1. Run analytics or search consuming apps for usage of system props on Menu components
65
70
  2. If usage < 5%, proceed with removal
66
71
  3. If usage > 5%, add deprecation warnings in v2.x
@@ -68,6 +73,7 @@ These files use styled-system's `border`, `color`, `flexbox`, `grid`, `layout`,
68
73
  5. Replace system props with direct CSS-in-JS styling
69
74
 
70
75
  **Example Refactor**:
76
+
71
77
  ```typescript
72
78
  // BEFORE
73
79
  export const StyledMenuItem = styled.button<{...}>`
@@ -109,6 +115,7 @@ export const StyledTitle = styled.h3`
109
115
  **Expected Savings**: ~3-5 KB
110
116
 
111
117
  **Implementation Steps**:
118
+
112
119
  1. Identify all Text component styles in `MenuGroup/styles.tsx`
113
120
  2. Replace with equivalent theme-based styles
114
121
  3. Test visual regression in Storybook
@@ -151,18 +158,21 @@ export const StyledTitle = styled.h3`
151
158
  ```
152
159
 
153
160
  **Benefits**:
161
+
154
162
  - Consumers only bundle what they use
155
163
  - Single select menu import: ~20-25 KB total instead of 90 KB
156
164
  - Clear deprecation path for v1 vs v2
157
165
  - Easier to maintain and reason about
158
166
 
159
167
  **Migration Path**:
168
+
160
169
  1. Release new packages alongside existing package
161
170
  2. Mark old package as deprecated but maintain for 6-12 months
162
171
  3. Provide codemod for automated migration
163
172
  4. Update documentation and examples
164
173
 
165
174
  **Considerations**:
175
+
166
176
  - Increased maintenance overhead (multiple packages)
167
177
  - Need clear documentation on which package to use when
168
178
  - Requires monorepo tooling updates
@@ -171,6 +181,7 @@ export const StyledTitle = styled.h3`
171
181
  ### 3.2 Consolidate v1 and v2 Implementations
172
182
 
173
183
  **Current State**:
184
+
174
185
  - Main export (`src/index.ts`) exports ALL v1 components (80 files)
175
186
  - V2 export (`src/v2/index.ts`) exports v2 components (25 files)
176
187
  - Both versions share some code but have duplicate implementations
@@ -178,6 +189,7 @@ export const StyledTitle = styled.h3`
178
189
  **Proposal**: Treat v2 as the future, deprecate v1
179
190
 
180
191
  **Timeline**:
192
+
181
193
  1. **v3.0.0**: Mark v1 as deprecated, promote v2 to stable
182
194
  2. **v3.x**: Maintain both but encourage migration
183
195
  3. **v4.0.0**: Remove v1 entirely
@@ -185,6 +197,7 @@ export const StyledTitle = styled.h3`
185
197
  **Expected Savings**: ~25-30 KB (eliminating duplicate implementations)
186
198
 
187
199
  **Migration Support**:
200
+
188
201
  - Provide detailed migration guide
189
202
  - Create codemod to automate v1 → v2 migration
190
203
  - Maintain v2.x branch for critical security fixes
@@ -193,6 +206,7 @@ export const StyledTitle = styled.h3`
193
206
  ### 3.3 Evaluate Dependency Alternatives
194
207
 
195
208
  **Downshift Analysis** (`downshift@9.0.4`)
209
+
196
210
  - Currently used for menu state management
197
211
  - Likely contributes significantly to bundle size
198
212
  - Consider alternatives:
@@ -201,12 +215,14 @@ export const StyledTitle = styled.h3`
201
215
  - Headless UI
202
216
 
203
217
  **Action Items**:
218
+
204
219
  1. Analyze Downshift's actual bundle contribution with bundle analyzer
205
220
  2. Prototype custom state management solution
206
221
  3. Compare API complexity vs bundle savings
207
222
  4. Make decision based on maintenance overhead vs size benefit
208
223
 
209
224
  **Motion Library Analysis** (`motion@12.6.3`)
225
+
210
226
  - Only used in v2 and NestedMenu
211
227
  - Consider lazy-loading for those specific use cases
212
228
  - Evaluate if animation is critical or can be simplified
@@ -239,6 +255,7 @@ grep -r "@sproutsocial" dist/*.js
239
255
  ### Consumer Impact Testing
240
256
 
241
257
  Test in reference applications:
258
+
242
259
  1. Build consuming app and check bundle size
243
260
  2. Use webpack-bundle-analyzer or similar
244
261
  3. Verify no duplicate dependencies
@@ -248,12 +265,12 @@ Test in reference applications:
248
265
 
249
266
  ## Success Metrics
250
267
 
251
- | Phase | Target Size (CJS) | Target Size (ESM) | % Reduction | Status |
252
- |-------|------------------|-------------------|-------------|--------|
253
- | Baseline | 124 KB | 70 KB | - | - |
254
- | **Phase 1** | **90 KB** | **71 KB** | **27%** | **✓ Completed** |
255
- | Phase 2 | 35-45 KB | 25-30 KB | 65-72% | Planned |
256
- | Phase 3 | 20-30 KB | 15-20 KB | 76-84% | Future |
268
+ | Phase | Target Size (CJS) | Target Size (ESM) | % Reduction | Status |
269
+ | ----------- | ----------------- | ----------------- | ----------- | --------------- |
270
+ | Baseline | 124 KB | 70 KB | - | - |
271
+ | **Phase 1** | **90 KB** | **71 KB** | **27%** | **✓ Completed** |
272
+ | Phase 2 | 35-45 KB | 25-30 KB | 65-72% | Planned |
273
+ | Phase 3 | 20-30 KB | 15-20 KB | 76-84% | Future |
257
274
 
258
275
  ---
259
276
 
@@ -262,10 +279,12 @@ Test in reference applications:
262
279
  ### Consumer Bundle Size vs Package Size
263
280
 
264
281
  It's important to distinguish between:
282
+
265
283
  - **Package distribution size**: What gets downloaded from npm
266
284
  - **Consumer bundle size**: What actually ends up in the consuming application
267
285
 
268
286
  Phase 1 optimizations help both, but especially consumer bundle size by:
287
+
269
288
  - Avoiding duplicate @sproutsocial packages in monorepo
270
289
  - Ensuring styled-system is shared across all Seeds components
271
290
  - Leveraging tree-shaking in modern bundlers
@@ -273,6 +292,7 @@ Phase 1 optimizations help both, but especially consumer bundle size by:
273
292
  ### Monorepo Considerations
274
293
 
275
294
  Since this package is part of the Seeds monorepo:
295
+
276
296
  - Externalizing @sproutsocial packages is critical to avoid duplication
277
297
  - Consumers using multiple Seeds packages benefit significantly
278
298
  - Consider monorepo-wide bundle analysis for full picture
@@ -280,6 +300,7 @@ Since this package is part of the Seeds monorepo:
280
300
  ### Testing Strategy
281
301
 
282
302
  For any optimization work:
303
+
283
304
  1. **Unit Tests**: All existing tests must pass
284
305
  2. **Visual Regression**: Storybook snapshots unchanged
285
306
  3. **Integration Tests**: Test in reference applications
@@ -299,6 +320,7 @@ For any optimization work:
299
320
  ## Questions or Concerns?
300
321
 
301
322
  If you're planning to tackle Phase 2 or 3 optimizations, please:
323
+
302
324
  1. Review this document and the original analysis
303
325
  2. Coordinate with the team on breaking changes
304
326
  3. Create RFCs for major architectural changes (Phase 3)
package/CHANGELOG.md CHANGED
@@ -1,5 +1,60 @@
1
1
  # @sproutsocial/seeds-react-menu
2
2
 
3
+ ## 1.16.14
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [3371484]
8
+ - @sproutsocial/seeds-react-icon@2.5.0
9
+ - @sproutsocial/seeds-react-theme@4.4.0
10
+ - @sproutsocial/seeds-react-button@2.3.6
11
+ - @sproutsocial/seeds-react-checkbox@1.3.52
12
+ - @sproutsocial/seeds-react-input@1.5.39
13
+ - @sproutsocial/seeds-react-switch@1.2.50
14
+ - @sproutsocial/seeds-react-token-input@1.4.61
15
+ - @sproutsocial/seeds-react-box@1.1.30
16
+ - @sproutsocial/seeds-react-label@1.0.32
17
+ - @sproutsocial/seeds-react-popout@2.5.20
18
+ - @sproutsocial/seeds-react-radio@1.3.33
19
+
20
+ ## 1.16.13
21
+
22
+ ### Patch Changes
23
+
24
+ - Updated dependencies [56661b6]
25
+ - Updated dependencies [40c02c4]
26
+ - Updated dependencies [56661b6]
27
+ - Updated dependencies [9bd3606]
28
+ - @sproutsocial/seeds-react-button@2.3.5
29
+ - @sproutsocial/seeds-react-system-props@3.2.0
30
+ - @sproutsocial/seeds-react-theme@4.3.2
31
+ - @sproutsocial/seeds-react-input@1.5.38
32
+ - @sproutsocial/seeds-react-popout@2.5.19
33
+ - @sproutsocial/seeds-react-box@1.1.29
34
+ - @sproutsocial/seeds-react-checkbox@1.3.51
35
+ - @sproutsocial/seeds-react-icon@2.4.9
36
+ - @sproutsocial/seeds-react-label@1.0.31
37
+ - @sproutsocial/seeds-react-radio@1.3.32
38
+ - @sproutsocial/seeds-react-switch@1.2.49
39
+ - @sproutsocial/seeds-react-token-input@1.4.60
40
+
41
+ ## 1.16.12
42
+
43
+ ### Patch Changes
44
+
45
+ - Updated dependencies [ef91a0d]
46
+ - @sproutsocial/seeds-react-system-props@3.1.4
47
+ - @sproutsocial/seeds-react-box@1.1.28
48
+ - @sproutsocial/seeds-react-button@2.3.4
49
+ - @sproutsocial/seeds-react-checkbox@1.3.50
50
+ - @sproutsocial/seeds-react-icon@2.4.8
51
+ - @sproutsocial/seeds-react-input@1.5.37
52
+ - @sproutsocial/seeds-react-label@1.0.30
53
+ - @sproutsocial/seeds-react-popout@2.5.18
54
+ - @sproutsocial/seeds-react-radio@1.3.31
55
+ - @sproutsocial/seeds-react-switch@1.2.48
56
+ - @sproutsocial/seeds-react-token-input@1.4.59
57
+
3
58
  ## 1.16.11
4
59
 
5
60
  ### Patch Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/seeds-react-menu",
3
- "version": "1.16.11",
3
+ "version": "1.16.14",
4
4
  "description": "Seeds React Menu",
5
5
  "author": "Sprout Social, Inc.",
6
6
  "license": "MIT",
@@ -36,18 +36,18 @@
36
36
  },
37
37
  "dependencies": {
38
38
  "@radix-ui/react-popover": "^1.1.2",
39
- "@sproutsocial/seeds-react-box": "^1.1.27",
40
- "@sproutsocial/seeds-react-button": "^2.3.3",
41
- "@sproutsocial/seeds-react-checkbox": "^1.3.49",
42
- "@sproutsocial/seeds-react-icon": "^2.4.7",
43
- "@sproutsocial/seeds-react-input": "^1.5.36",
44
- "@sproutsocial/seeds-react-label": "^1.0.29",
45
- "@sproutsocial/seeds-react-popout": "^2.5.17",
46
- "@sproutsocial/seeds-react-radio": "^1.3.30",
47
- "@sproutsocial/seeds-react-switch": "^1.2.47",
48
- "@sproutsocial/seeds-react-system-props": "^3.1.3",
49
- "@sproutsocial/seeds-react-theme": "^4.3.1",
50
- "@sproutsocial/seeds-react-token-input": "^1.4.58",
39
+ "@sproutsocial/seeds-react-box": "^1.1.30",
40
+ "@sproutsocial/seeds-react-button": "^2.3.6",
41
+ "@sproutsocial/seeds-react-checkbox": "^1.3.52",
42
+ "@sproutsocial/seeds-react-icon": "^2.5.0",
43
+ "@sproutsocial/seeds-react-input": "^1.5.39",
44
+ "@sproutsocial/seeds-react-label": "^1.0.32",
45
+ "@sproutsocial/seeds-react-popout": "^2.5.20",
46
+ "@sproutsocial/seeds-react-radio": "^1.3.33",
47
+ "@sproutsocial/seeds-react-switch": "^1.2.50",
48
+ "@sproutsocial/seeds-react-system-props": "^3.2.0",
49
+ "@sproutsocial/seeds-react-theme": "^4.4.0",
50
+ "@sproutsocial/seeds-react-token-input": "^1.4.61",
51
51
  "@sproutsocial/seeds-react-utilities": "^4.3.0",
52
52
  "@base-ui/react": "^1.3.0",
53
53
  "@tanstack/react-virtual": "^3.13.12",
@@ -57,7 +57,7 @@
57
57
  "styled-system": "^5.1.5"
58
58
  },
59
59
  "devDependencies": {
60
- "@sproutsocial/seeds-react-tooltip": "^1.1.34",
60
+ "@sproutsocial/seeds-react-tooltip": "^1.1.37",
61
61
  "@sproutsocial/eslint-config-seeds": "*",
62
62
  "@sproutsocial/seeds-react-testing-library": "*",
63
63
  "@sproutsocial/seeds-testing": "*",