chore: fix onStateChange prop bug in sidebar (#37710)

/ok-to-test tags="@tag.Anvil"

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

- **New Features**
- Introduced a new `ControlledStateSidebar` component for better
management of sidebar state.
- Added a new story, `WithControlledState`, to demonstrate the
`ControlledStateSidebar` functionality.

- **Bug Fixes**
- Improved the state update flow in the `SidebarProvider` for more
reliable state management.

- **Documentation**
- Enhanced organization of import statements in the sidebar stories for
better readability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/12030926462>
> Commit: 20a4c3d9872aaf47a4344a25b1ef62d4b35695d0
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12030926462&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Tue, 26 Nov 2024 13:11:30 UTC
<!-- end of auto-generated comment: Cypress test results  -->

app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarProvider.tsx

@@ -33,11 +33,8 @@ export const _SidebarProvider = (
     (value: SidebarState | ((value: SidebarState) => SidebarState)) => {
       const computedState = typeof value === "function" ? value(state) : value;
 
-      if (setStateProp) {
-        setStateProp(computedState);
-      } else {
-        _setState(computedState);
-      }
+      _setState(computedState);
+      setStateProp?.(computedState);
     },
     [setStateProp, state],
   );

app/client/packages/design-system/widgets/src/components/Sidebar/stories/ControlledStateSidebar.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+import {
+  Sidebar,
+  SidebarTrigger,
+  SidebarProvider,
+  type SidebarState,
+  type SidebarProps,
+} from "../src/index";
+import { Flex } from "../../Flex";
+
+type ControlledStateSidebarProps = SidebarProps & {
+  children: React.ReactNode;
+};
+
+export const ControlledStateSidebar = (props: ControlledStateSidebarProps) => {
+  const { children, ...sidebarProps } = props;
+  const [state, setState] = useState<SidebarState>("collapsed");
+
+  return (
+    <SidebarProvider
+      onStateChange={setState}
+      side="start"
+      state={state}
+      style={{
+        height: "50vh",
+        border: "1px solid var(--color-bd-elevation-1)",
+      }}
+    >
+      <Sidebar {...sidebarProps}>{children}</Sidebar>
+      <Flex alignItems="start" margin="spacing-4" width="100%">
+        <SidebarTrigger />
+      </Flex>
+    </SidebarProvider>
+  );
+};

app/client/packages/design-system/widgets/src/components/Sidebar/stories/Sidebar.stories.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Sidebar, SidebarTrigger, SidebarProvider } from "../src/index";
-import { Flex } from "../../Flex";
-import { Text, Icon } from "@appsmith/wds";
+import { Text, Icon, Flex } from "@appsmith/wds";
+
+import { ControlledStateSidebar } from "./ControlledStateSidebar";
 
 const meta: Meta<typeof Sidebar> = {
   component: Sidebar,
@@ -126,3 +127,13 @@ export const WithRenderProps: Story = {
     </SidebarProvider>
   ),
 };
+
+export const WithControlledState: Story = {
+  render: (args) => {
+    return (
+      <ControlledStateSidebar {...args}>
+        <DemoContent />
+      </ControlledStateSidebar>
+    );
+  },
+};