feat(useFocusTrap): expose updateContainerElements for dynamic contai…

[PeikyLiu]

🚀 Feature: Expose updateContainerElements method in useFocusTrap

Description

This PR exposes the updateContainerElements method from the underlying focus-trap library, allowing users to dynamically update focus trap containers while the trap is active.

Related Issues

resolve #4848

📋 Changes

• Added updateContainerElements method to UseFocusTrapReturn interface
• Created ContainerElements type alias using Parameters<FocusTrap['updateContainerElements']>[0]
• Updated return type to handle undefined case when trap is not initialized
• Added basic container switching demo in demo.vue

🔧 Technical Details

• Uses TypeScript's Parameters utility type to automatically inherit parameter types from focus-trap library
• Ensures type consistency with the underlying focus-trap library

📚 Example Usage

const { updateContainerElements, activate } = useFocusTrap(target)
activate()
updateContainerElements(target2.value) // Switch to different container

🔄 Breaking Changes

None - this is a purely additive change.

[OrbisK]

I think we dont want to expose this, but watch the target and updateContaienrElements when target changes (instead of activate/deactivate)? wdyt @ilyaliao

[ilyaliao]

I think we dont want to expose this, but watch the target and updateContaienrElements when target changes (instead of activate/deactivate)? wdyt @ilyaliao

Yes, that's what I initially had in mind as well. We could initialize once with createFocusTrap, and then update the element via updateContainerElements afterwards. But I haven’t looked into the feasibility of this approach in depth yet.

[OrbisK]

@PeikyLiu wdyt?

[PeikyLiu]

ok,I'll try based your idea,but it will be take some time

[PeikyLiu]

I think we dont want to expose this, but watch the target and updateContaienrElements when target changes (instead of activate/deactivate)? wdyt @ilyaliao

To summarize: you suggest using watch to monitor target changes inside the hook, while keeping the activate/deactivate methods exposed, right?

[OrbisK]

we always want to use the target thats passed to the composable. If we want to change the target we want to update the target ref. So we can use updateContainerElements, we should do this while watching target 😄