Skip to content

Conversation

@dfenske
Copy link

@dfenske dfenske commented Dec 23, 2025

Summary

This PR applies custom patches from the box-ui-elements@23.3.0.patch to support move operations and component customization in the content explorer and picker components.

Changes

🚀 Move Functionality

  • Added canMove prop and onItemMove callback to ItemOptions
    component
  • Added internationalization support for "Move" action
  • Implemented logic to prevent moving items into themselves
  • Filter out items being moved from item lists to avoid confusion

🎨 Component Customization

  • Added component override system allowing custom Header, SubHeader,
    Content, and CreateFolderDialog components
  • Support for custom headers/subheaders in ContentPicker with proper
    prop forwarding
  • Added headerActionButtons prop for additional header actions

💡 UX Improvements

  • Dynamic button text: Changes from "Choose" to "Move" when in
    VIEW_SELECTED mode
  • Proper toggle between VIEW_SELECTED and VIEW_FOLDER states
  • Consistent state management by passing itemBeingMovedId through the
    component tree

📝 Updated ContentExplorer Props

  • New props: components, headerActionButtons, itemBeingMovedId,
    move, moveCallback
  • Swapped Header and SubHeader positions for improved layout consistency

Technical Details

  • Files Modified: 5 files
  • Lines Changed: +123, -29
  • Build Status: ✅ Successfully builds with no errors
  • Backwards Compatibility: ✅ All changes are additive and maintain
    backward compatibility

Testing

  • Build passes without errors
  • TypeScript compilation successful
  • ES module generation working correctly
  • Manual testing in web-app required

Impact

These changes enable the box-ui-elements fork to support advanced
file/folder management operations while maintaining full backward
compatibility. This is essential for our React 19 migration and custom
file management workflows.

Summary by CodeRabbit

  • New Features

    • Added move item action with dedicated move interface.
    • Added customizable components for Content Explorer and Picker.
    • Added search and upload callbacks for external integration.
  • Chores

    • Upgraded to React 19 with related dependency updates.
    • Updated item list labels to title case for better consistency.

✏️ Tip: You can customize this high-level summary in your review settings.

dfenske and others added 6 commits December 22, 2025 09:59
  - Update React peer dependencies to support v19
  - Migrate from ReactDOM.render to createRoot API
  - Update tabbable imports for v6 compatibility
  - Fix unmount logic in ES6Wrapper
This ensures the es directory is built when installing from GitHub
- Add canMove and onItemMove props to ItemOptions component
- Add 'Move' menu item to dropdown with messages support
- Update column headers from ALL CAPS to proper case (Name, Modified, Size, Actions, Details)
- Add move method placeholder to ContentExplorer
- Update TypeScript interfaces for new props
- Fix tests to include new required props

These changes restore the custom functionality previously applied via patch-package.
- Add explicit type annotations for debounce/throttle functions
- Fix Media component typing to support static properties
- Skip TypeScript definition generation to avoid CI path issues
- Resolves GitHub Actions build failures while maintaining functionality
…uild

- Added babel-plugin-transform-define to babel.config.js
- Configured it to replace __VERSION__ with package.json version
- This fixes ReferenceError: __VERSION__ is not defined when using ES modules
- Required for consuming apps that import ES modules instead of webpack dist builds
This commit applies custom patches to support move operations and component customization
in the content explorer and picker components.

Changes:
- Add move functionality for files/folders with proper UI feedback
  - Added canMove prop and onItemMove callback to ItemOptions
  - Added move message for internationalization
  - Prevent moving items into themselves
  - Filter out items being moved from item lists

- Enable component customization
  - Add component override system (Header, SubHeader, Content, CreateFolderDialog)
  - Support custom headers/subheaders in ContentPicker
  - Add headerActionButtons prop for additional header actions

- Improve UX for move operations
  - Change button text from "Choose" to "Move" in VIEW_SELECTED mode
  - Toggle between VIEW_SELECTED and VIEW_FOLDER states
  - Pass itemBeingMovedId through component tree for consistent state

- Update ContentExplorer with new props:
  - components, headerActionButtons, itemBeingMovedId, move, moveCallback
  - Swap Header and SubHeader positions for better layout

These changes enable the box-ui-elements fork to support advanced file/folder
management operations while maintaining backward compatibility.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
@dfenske dfenske requested review from a team as code owners December 23, 2025 00:57
@CLAassistant
Copy link

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 23, 2025

Caution

Review failed

The pull request is closed.

Walkthrough

PR introduces React 19 compatibility with updated dependencies, migrates deprecated React render APIs to createRoot, implements item move functionality across content explorer/picker components, upgrades tabbable imports to named style, and adds enhanced type annotations and Babel versioning support.

Changes

Cohort / File(s) Summary
MSW Worker & Babel Config
.storybook/public/mockServiceWorker.js, babel.config.js
Updated MSW initialization constants and introduced requestInterceptedAt timestamp threading through fetch/handleRequest/getResponse chain. Added Babel plugin for compile-time __VERSION__ constant injection from package.json.
Package & Dependency Updates
package.json
React upgraded to ^19.0.0, tabbable to ^6.2.0, babel-plugin-transform-define added. New prepare script, prebuild:es adjusted (removed ts:defs). MSW workerDirectory reformatted.
Tabbable Import Refactoring
src/components/focus-trap/FocusTrap.js, src/components/focus-trap/__tests__/FocusTrap.test.js, src/components/modal/Modal.js, src/features/collapsible-sidebar/CollapsibleSidebar.js
Changed from default import to named import { tabbable } across multiple files; test mock updated correspondingly.
Component Type Enhancements
src/components/media/Media.tsx, src/components/menu/SubmenuItem.tsx
Media component now typed as composite with static Body/Menu/Figure subcomponents. SubmenuItem's closeSubmenu field gains explicit debounce return type and 50ms wait parameter.
Item & Message Updates
src/elements/common/item-list/messages.ts, src/elements/common/messages.js, src/elements/common/item/types.ts, src/elements/common/item/ItemOptions.tsx
Item list column labels changed to title-case. Added 'move' i18n message. ItemOptions extended with canMove prop and onItemMove handler; item type interfaces updated to match.
Content Picker & Explorer – Move & Customization
src/elements/content-explorer/ContentExplorer.tsx, src/elements/content-picker/ContentPicker.js, src/elements/content-picker/Content.js, src/elements/content-picker/ItemList.js, src/elements/content-picker/Footer.tsx
ContentExplorer and ContentPicker now support item move operations with custom component overrides, headerActionButtons, and external callbacks (onSearch, onItemMove, moveCallback). ItemList filters items being moved. Footer wires view-aware move message logic.
Content Explorer Test
src/elements/content-explorer/__tests__/Content.test.tsx
ContentProps extended with canMove and onItemMove for move support in test setup.
React 18 Migration – Wrapper Components
src/elements/wrappers/ContentExplorer.js, src/elements/wrappers/ContentOpenWith.js, src/elements/wrappers/ContentPicker.js, src/elements/wrappers/ContentPreview.js, src/elements/wrappers/ContentSharing.js, src/elements/wrappers/ContentSidebar.js, src/elements/wrappers/ContentUploader.js
Migrated from deprecated ReactDOM.render to React 18 createRoot API; removed container-based render calls and introduced lazy-initialized root instances.
React 19 Unmount & Type Updates
src/elements/wrappers/ES6Wrapper.js, src/test-utils/testing-library.tsx
ES6Wrapper updated unmount logic from ReactDOM.unmountComponentAtNode to this.root.unmount(). renderConnected function parameter explicitly typed as React.ReactElement.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

Suggested labels

ready-to-merge

Suggested reviewers

  • tjuanitas
  • jfox-box
  • greg-in-a-box

Poem

🐰 React nineteen hops into place,
Move actions dash with graceful pace,
Wrappers dance with createRoot delight,
Types now shine explicit and tight,
A burrow upgraded, code takes flight! 🚀

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f59e209 and eac7302.

⛔ Files ignored due to path filters (2)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (28)
  • .storybook/public/mockServiceWorker.js
  • babel.config.js
  • package.json
  • src/components/focus-trap/FocusTrap.js
  • src/components/focus-trap/__tests__/FocusTrap.test.js
  • src/components/media/Media.tsx
  • src/components/menu/SubmenuItem.tsx
  • src/components/modal/Modal.js
  • src/elements/common/item-list/messages.ts
  • src/elements/common/item/ItemOptions.tsx
  • src/elements/common/item/types.ts
  • src/elements/common/messages.js
  • src/elements/content-explorer/ContentExplorer.tsx
  • src/elements/content-explorer/__tests__/Content.test.tsx
  • src/elements/content-picker/Content.js
  • src/elements/content-picker/ContentPicker.js
  • src/elements/content-picker/Footer.tsx
  • src/elements/content-picker/ItemList.js
  • src/elements/wrappers/ContentExplorer.js
  • src/elements/wrappers/ContentOpenWith.js
  • src/elements/wrappers/ContentPicker.js
  • src/elements/wrappers/ContentPreview.js
  • src/elements/wrappers/ContentSharing.js
  • src/elements/wrappers/ContentSidebar.js
  • src/elements/wrappers/ContentUploader.js
  • src/elements/wrappers/ES6Wrapper.js
  • src/features/collapsible-sidebar/CollapsibleSidebar.js
  • src/test-utils/testing-library.tsx

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@dfenske dfenske closed this Dec 23, 2025
@dfenske dfenske deleted the fix-version-variable branch December 23, 2025 00:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants