Revert "add onClick() actions for PicklistItems"

This reverts commit 174e7f4.

Author: msmx-mnakagawa

stories/Picklist.stories.tsx

@@ -1,17 +1,11 @@
-import React, { ComponentProps } from 'react';
+import React from 'react';
 import { Picklist, PicklistItem } from '../src/scripts';
-import { Meta, StoryObj } from '@storybook/react';
-
-type StoryProps = ComponentProps<typeof Picklist> & {
-  picklistItem1_onClick: ComponentProps<typeof PicklistItem>['onClick'];
-  picklistItem2_onClick: ComponentProps<typeof PicklistItem>['onClick'];
-  picklistItem3_onClick: ComponentProps<typeof PicklistItem>['onClick'];
-};
+import { ComponentMeta, ComponentStoryObj } from '@storybook/react';
 
 /**
  *
  */
-const meta: Meta<StoryProps> = {
+const meta: ComponentMeta<typeof Picklist> = {
   title: 'Picklist',
   component: Picklist,
   subcomponents: { PicklistItem },
@@ -20,9 +14,6 @@ const meta: Meta<StoryProps> = {
     onValueChange: { action: 'valueChange' },
     onBlur: { action: 'blur' },
     onComplete: { action: 'complete' },
-    picklistItem1_onClick: { action: 'picklistItem1_click' },
-    picklistItem2_onClick: { action: 'picklistItem2_click' },
-    picklistItem3_onClick: { action: 'picklistItem3_click' },
   },
   parameters: {
     docs: {
@@ -36,37 +27,15 @@ export default meta;
 /**
  *
  */
-export const ControlledWithKnobs: StoryObj<StoryProps> = {
+export const ControlledWithKnobs: ComponentStoryObj<typeof Picklist> = {
   name: 'Controlled with knobs',
-  render: ({
-    picklistItem1_onClick,
-    picklistItem2_onClick,
-    picklistItem3_onClick,
-    ...args
-  }) => (
-    <Picklist {...args}>
-      <PicklistItem
-        key='1'
-        label='Picklist Item One'
-        value='1'
-        onClick={picklistItem1_onClick}
-      />
-      <PicklistItem
-        key='2'
-        label='Picklist Item Two'
-        value='2'
-        onClick={picklistItem2_onClick}
-      />
-      <PicklistItem
-        key='3'
-        label='Picklist Item Three'
-        value='3'
-        onClick={picklistItem3_onClick}
-      />
-    </Picklist>
-  ),
   args: {
     label: 'Picklist Label',
+    children: [
+      <PicklistItem key='1' label='Picklist Item One' value='1' />,
+      <PicklistItem key='2' label='Picklist Item Two' value='2' />,
+      <PicklistItem key='3' label='Picklist Item Three' value='3' />,
+    ],
   },
   parameters: {
     docs: {
@@ -80,8 +49,7 @@ export const ControlledWithKnobs: StoryObj<StoryProps> = {
 /**
  *
  */
-export const Default: StoryObj<StoryProps> = {
-  render: ControlledWithKnobs.render,
+export const Default: ComponentStoryObj<typeof Picklist> = {
   args: {
     ...ControlledWithKnobs.args,
     selectedText: 'Select item from here',
@@ -99,8 +67,7 @@ export const Default: StoryObj<StoryProps> = {
 /**
  *
  */
-export const Required: StoryObj<StoryProps> = {
-  render: ControlledWithKnobs.render,
+export const Required: ComponentStoryObj<typeof Picklist> = {
   args: {
     ...ControlledWithKnobs.args,
     required: true,
@@ -118,8 +85,7 @@ export const Required: StoryObj<StoryProps> = {
 /**
  *
  */
-export const Error: StoryObj<StoryProps> = {
-  render: ControlledWithKnobs.render,
+export const Error: ComponentStoryObj<typeof Picklist> = {
   args: {
     ...ControlledWithKnobs.args,
     required: true,
@@ -138,40 +104,15 @@ export const Error: StoryObj<StoryProps> = {
 /**
  *
  */
-export const DisabledItems: StoryObj<StoryProps> = {
-  render: ({
-    picklistItem1_onClick,
-    picklistItem2_onClick,
-    picklistItem3_onClick,
-    ...args
-  }) => (
-    <Picklist {...args}>
-      <PicklistItem
-        key='1'
-        label='Picklist Item One'
-        value='1'
-        onClick={picklistItem1_onClick}
-        disabled
-      />
-      <PicklistItem
-        key='2'
-        label='Picklist Item Two'
-        value='2'
-        onClick={picklistItem2_onClick}
-        disabled
-      />
-      <PicklistItem
-        key='3'
-        label='Picklist Item Three'
-        value='3'
-        onClick={picklistItem3_onClick}
-        disabled
-      />
-    </Picklist>
-  ),
+export const DisabledItems: ComponentStoryObj<typeof Picklist> = {
   args: {
     label: 'Picklist Label',
     defaultOpened: true,
+    children: [
+      <PicklistItem label='Picklist Item One' value='1' key='1' disabled />,
+      <PicklistItem label='Picklist Item Two' value='2' key='2' disabled />,
+      <PicklistItem label='Picklist Item Three' value='3' key='3' disabled />,
+    ],
   },
   parameters: {
     docs: {
@@ -185,8 +126,7 @@ export const DisabledItems: StoryObj<StoryProps> = {
 /**
  *
  */
-export const Disabled: StoryObj<StoryProps> = {
-  render: ControlledWithKnobs.render,
+export const Disabled: ComponentStoryObj<typeof Picklist> = {
   args: {
     ...ControlledWithKnobs.args,
     disabled: true,
@@ -203,8 +143,7 @@ export const Disabled: StoryObj<StoryProps> = {
 /**
  *
  */
-export const MenuSizeMedium: StoryObj<StoryProps> = {
-  render: ControlledWithKnobs.render,
+export const MenuSizeMedium: ComponentStoryObj<typeof Picklist> = {
   name: 'Menu Size - Medium',
   args: {
     ...ControlledWithKnobs.args,
@@ -224,8 +163,7 @@ export const MenuSizeMedium: StoryObj<StoryProps> = {
 /**
  *
  */
-export const MenuSizeLarge: StoryObj<StoryProps> = {
-  render: ControlledWithKnobs.render,
+export const MenuSizeLarge: ComponentStoryObj<typeof Picklist> = {
   name: 'Menu Size - Large',
   args: {
     ...ControlledWithKnobs.args,
@@ -245,8 +183,7 @@ export const MenuSizeLarge: StoryObj<StoryProps> = {
 /**
  *
  */
-export const SingleItemSelected: StoryObj<StoryProps> = {
-  render: ControlledWithKnobs.render,
+export const SingleItemSelected: ComponentStoryObj<typeof Picklist> = {
   name: 'Single item selected',
   args: {
     ...ControlledWithKnobs.args,
@@ -265,8 +202,7 @@ export const SingleItemSelected: StoryObj<StoryProps> = {
 /**
  *
  */
-export const MultipleItemsSelected: StoryObj<StoryProps> = {
-  render: ControlledWithKnobs.render,
+export const MultipleItemsSelected: ComponentStoryObj<typeof Picklist> = {
   name: 'Multiple items selected',
   args: {
     ...ControlledWithKnobs.args,
@@ -287,7 +223,7 @@ export const MultipleItemsSelected: StoryObj<StoryProps> = {
 /**
  *
  */
-export const DropdownScroll: StoryObj<StoryProps> = {
+export const DropdownScroll: ComponentStoryObj<typeof Picklist> = {
   args: {
     ...ControlledWithKnobs.args,
     selectedText: 'Select item from here',
@@ -318,8 +254,7 @@ export const DropdownScroll: StoryObj<StoryProps> = {
 /**
  *
  */
-export const WithTooltip: StoryObj<StoryProps> = {
-  render: ControlledWithKnobs.render,
+export const WithTooltip: ComponentStoryObj<typeof Picklist> = {
   name: 'With tooltip',
   args: {
     ...ControlledWithKnobs.args,
@@ -337,40 +272,26 @@ export const WithTooltip: StoryObj<StoryProps> = {
 /**
  *
  */
-export const WithDividers: StoryObj<StoryProps> = {
+export const WithDividers: ComponentStoryObj<typeof Picklist> = {
   name: 'With Dividers',
-  render: ({
-    picklistItem1_onClick,
-    picklistItem2_onClick,
-    picklistItem3_onClick,
-    ...args
-  }) => (
-    <Picklist {...args}>
+  args: {
+    label: 'Picklist Label',
+    defaultOpened: true,
+    children: [
       <PicklistItem
         key='1'
         label='Picklist Item One'
         value='1'
-        onClick={picklistItem1_onClick}
         divider='bottom'
-      />
-      <PicklistItem
-        key='2'
-        label='Picklist Item Two'
-        value='2'
-        onClick={picklistItem2_onClick}
-      />
+      />,
+      <PicklistItem key='2' label='Picklist Item Two' value='2' />,
       <PicklistItem
         key='3'
         label='Picklist Item Three'
         value='3'
-        onClick={picklistItem3_onClick}
         divider='top'
-      />
-    </Picklist>
-  ),
-  args: {
-    label: 'Picklist Label',
-    defaultOpened: true,
+      />,
+    ],
   },
   parameters: {
     docs: {