feat: add classname split-view-sash-dragging to top-level container

[percy507]

The split-view-sash-dragging classname will be useful to add animation for pane when toggle the visibility of pane.

[netlify]

✅ Deploy Preview for allotment-storybook ready!

Name	Link
🔨 Latest commit	dd2ab68
🔍 Latest deploy log	https://app.netlify.com/sites/allotment-storybook/deploys/63d6330fe557b100091c0d76
😎 Deploy Preview	https://deploy-preview-536--allotment-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for allotment-website canceled.

Name	Link
🔨 Latest commit	dd2ab68
🔍 Latest deploy log	https://app.netlify.com/sites/allotment-website/deploys/63d6330fd8d83e000929efd3

[johnwalley]

The split-view-sash-dragging classname will be useful to add animation for pane when toggle the visibility of pane.

Thanks for the PR. Looks like a good improvement! I'll take a proper look in the next few days and get this released 👍

[livwvil]

There is a visual flaw with this approach. Panels are always in an animated state. This can be seen in related story if you change the size of the container. This side effect is not acceptable in my application. By sacrificing an additional renderer, I had to solve a similar problem like this:

  const [animated, setAnimated] = useAutoResetter(false, 150);

  const setExpanded = useCallback(
    (id: SectionsItem['id'], isExpanded: boolean) => {
      expand(sidebarId, id, isExpanded);
      setAnimated(true);
    },
    [expand, setAnimated],
  );
  
<Allotment.Pane
  key={item.id}
  className={classNames(animated && 'transition-all')}
  preferredSize={item.preferredSize}
  minSize={isExpanded ? EXPANDED_MIN_HEIGHT : COLLAPSED_MIN_HEIGHT}
  maxSize={isExpanded ? Infinity : COLLAPSED_MIN_HEIGHT}
>