feat(tree-view): update typings, enhance callback details, and simplify stories

Author: var-poro

packages/ods-react/src/components/tree-view/src/components/tree-view/TreeView.tsx

@@ -9,6 +9,10 @@ interface TreeViewValueChangeDetail {
   value: string[];
 }
 
+interface TreeViewExpandedChangeDetail {
+  expandedValue: string[];
+}
+
 /**
  * @inheritDoc TreeViewRootProp
  */
@@ -64,7 +68,7 @@ const TreeView: FC<TreeViewProp> = forwardRef(({
     onValueChange({ value: details.checkedValue });
   }
 
-  function handleExpandedChange(details: { expandedValue: string[] }): void {
+  function handleExpandedChange(details: TreeViewExpandedChangeDetail): void {
     if (!onExpandedChange) {
       return;
     }
@@ -110,5 +114,6 @@ TreeView.displayName = 'TreeView';
 export {
   TreeView,
   type TreeViewProp,
+  type TreeViewExpandedChangeDetail,
   type TreeViewValueChangeDetail,
 };

packages/ods-react/src/components/tree-view/src/contexts/useTreeView.tsx

@@ -1,5 +1,5 @@
 import { type JSX, type ReactNode, createContext, useContext } from 'react';
-import { type TreeViewValueChangeDetail } from '../components/tree-view/TreeView';
+import { type TreeViewExpandedChangeDetail, type TreeViewValueChangeDetail } from '../components/tree-view/TreeView';
 
 type CustomData = Record<string, any>; // eslint-disable-line @typescript-eslint/no-explicit-any
 
@@ -47,7 +47,7 @@ type TreeViewRootProp = {
   /**
    * Callback fired when the expanded value(s) changes.
    */
-  onExpandedChange?: (details: { expandedValue: string[] }) => void;
+  onExpandedChange?: (details: TreeViewExpandedChangeDetail) => void;
   /**
    * Callback fired when the value(s) changes.
    */

packages/ods-react/src/components/tree-view/src/index.ts

@@ -1,4 +1,4 @@
-export { TreeView, type TreeViewProp, type TreeViewValueChangeDetail } from './components/tree-view/TreeView';
+export { TreeView, type TreeViewProp, type TreeViewExpandedChangeDetail, type TreeViewValueChangeDetail } from './components/tree-view/TreeView';
 export { TreeViewNode, type TreeViewNodeProp } from './components/tree-view-node/TreeViewNode';
 export { TreeViewNodes, type TreeViewNodesProp } from './components/tree-view-nodes/TreeViewNodes';
 export { type TreeViewCustomRendererArg, type TreeViewItem } from './contexts/useTreeView';

packages/storybook/stories/components/tree-view/technical-information.mdx

@@ -30,10 +30,6 @@ import * as TreeViewStories from './tree-view.stories';
 
 <OdsCanvas of={ TreeViewStories.Default } sourceState="shown" />
 
-<Heading label="Default expand all" level={ 3 } />
-
-<OdsCanvas of={ TreeViewStories.DefaultExpandAll } sourceState="shown" />
-
 <Heading label="Multiple" level={ 3 } />
 
 <OdsCanvas of={ TreeViewStories.Multiple } sourceState="shown" />

packages/storybook/stories/components/tree-view/tree-view.stories.tsx

@@ -11,12 +11,13 @@ import {
   type TreeViewValueChangeDetail,
 } from '../../../../ods-react/src/components/tree-view/src';
 import { CONTROL_CATEGORY } from '../../../src/constants/controls';
-import { orderControls } from '../../../src/helpers/controls';
+import { excludeFromDemoControls, orderControls } from '../../../src/helpers/controls';
 import { staticSourceRenderConfig } from '../../../src/helpers/source';
 
 type Story = StoryObj<TreeViewProp>;
 
 const meta: Meta<TreeViewProp> = {
+  argTypes: excludeFromDemoControls(['defaultExpandedValue', 'defaultValue', 'items', 'onExpandedChange', 'onValueChange', 'expandedValue', 'value']),
   component: TreeView,
   subcomponents: { TreeViewNode },
   title: 'React Components/Tree View',
@@ -63,24 +64,12 @@ export const Demo: Story = {
     );
   },
   argTypes: orderControls({
-    defaultExpandedValue: {
-      table: {
-        category: CONTROL_CATEGORY.general,
-      },
-      control: 'object',
-    },
     disabled: {
       table: {
         category: CONTROL_CATEGORY.general,
       },
       control: 'boolean',
     },
-    expandedValue: {
-      table: {
-        category: CONTROL_CATEGORY.general,
-      },
-      control: 'object',
-    },
     multiple: {
       table: {
         category: CONTROL_CATEGORY.general,