improve split panel

[hamed-musallam]

1. Add an interactionKind Property

• Current issue:
  When a user interacts with the splitter (e.g., clicks the "..." button), the closed property no longer controls the panel's open/close state.

• Proposed solution:
  Introduce an optional property called interactionKind, which can take one of two values:
  1- forced: Ensures the panel behavior is fully controlled programmatically.
  2- undefined: Allows default behavior without restrictions.

2. Refactor the closed property:

• Current issue:
  The closed property is overloaded with two types of values:
  Boolean: Directly controls whether the panel is open or closed.
  String: Represents a size threshold for automatic closing.

• Proposed solution:
  The closed property should only accept a boolean value for controlling the open/close state.
  Introduce a new property closeThreshold to handle automatic closure based on panel size.

3. Add an onClose Callback:

• Current issue:
  When using the size threshold for automatic closing, there’s no way to track whether the panel is currently closed.

• Proposed solution:
  Add an onClose callback function that triggers whenever the panel is closed, regardless of whether it was closed manually or automatically.

4. Improve automatic close behavior (I'm not sure what is the best way):

• The automatic closing feature should always be active, based on the closeThreshold. I think we need to differentiate between two scenarios:
  1- User Interaction: When the user changes the panel size using the "..." button.
  2- Container Resizing: If the container size causes the panel to shrink below the threshold, it should automatically close.

• feat: implement right-side panels bar cheminfo/nmrium#3318

[stropitek]

1. Add an interactionKind Property

• Current issue:
  When a user interacts with the splitter (e.g., clicks the "..." button), the closed property no longer controls the panel's open/close state.
• Proposed solution:
  Introduce an optional property called interactionKind, which can take one of two values:
  1- forced: Ensures the panel behavior is fully controlled programmatically.
  2- undefined: Allows default behavior without restrictions.

I prefer that we use this typical react pattern:

• If the property is undefined, it is uncontrolled (which means automatically controlled by the component)
• If the property is defined, it is controlled. We must introduce a callback prop (something like onClosedChange) which is called when we click the separator or when the closed value changes for any other reason (like the example with the closeThreshold).
• The component is not supposed to switch from being uncontrolled to controlled and vice versa (print a warning if that happens).

2. Refactor the closed property:

SGTM

3. Add an onClose Callback:

SGTM, as also proposed above. Would use onClosedChange, the change suffix being typically used in this controlled / uncontrolled pattern.

4. Improve automatic close behavior (I'm not sure what is the best way):

Maybe explain exactly what is not working in the current implementation and create a separate issue for that.

[stropitek]

@hamed-musallam Do you plan to work on this?

Seemed like a good idea in the first place.