fix(SelectableList): Items in list should be selectable (#566)

* Reflect which item is selected in list

* Make list derived from autocontrolled component

* small fix

* Update ListExampleSelection.tsx

* Update ListExampleSelection.shorthand.tsx

* Small improvement

* Rename *ItemIndex -> *Index

* Names refactoring

* Minor improvements

* update changelog

* Add onSelectedIndexChange

* Add some tests

* Small improvements afer CR

* Small improvements afer CR

* Small improvements afer CR

* create focus handler when List is constructed

* fix changelog

* changelog

Author: sophieH29

CHANGELOG.md

@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Fixes
 - Ensure `Popup` properly flips values of `offset` prop in RTL @kuzhelov ([#612](https://github.com/stardust-ui/react/pull/612))
+- Fix `List` - items should be selectable @sophieH29 ([#566](https://github.com/stardust-ui/react/pull/566))
 
 ### Features
 - Add `color` prop to `Text` component @Bugaa92 ([#597](https://github.com/stardust-ui/react/pull/597))

docs/src/examples/components/List/Content/ListExampleEndMedia.shorthand.tsx

@@ -21,6 +21,6 @@ const items = [
   },
 ]
 
-const ListExample = () => <List items={items} selection />
+const ListExample = () => <List items={items} selectable />
 
 export default ListExample

docs/src/examples/components/List/Content/ListExampleEndMedia.tsx

@@ -8,17 +8,17 @@ const ListExample = () => (
     <List.Item
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
       endMedia={ellipsis}
-      selection
+      selectable
     />
     <List.Item
       content="Use the online FTP application to input the multi-byte application!"
       endMedia={ellipsis}
-      selection
+      selectable
     />
     <List.Item
       content="The GB pixel is down, navigate the virtual interface!"
       endMedia={ellipsis}
-      selection
+      selectable
     />
   </List>
 )

docs/src/examples/components/List/Types/ListExample.shorthand.tsx

@@ -25,6 +25,6 @@ const items = [
   },
 ]
 
-const ListExampleSelection = ({ knobs }) => <List debug={knobs.debug} items={items} />
+const ListExampleSelectable = ({ knobs }) => <List debug={knobs.debug} items={items} />
 
-export default ListExampleSelection
+export default ListExampleSelectable

docs/src/examples/components/List/Types/ListExample.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { List, Image } from '@stardust-ui/react'
 
-const ListExampleSelection = ({ knobs }) => (
+const ListExampleSelectable = ({ knobs }) => (
   <List debug={knobs.debug}>
     <List.Item
       media={<Image src="public/images/avatar/small/matt.jpg" avatar />}
@@ -24,4 +24,4 @@ const ListExampleSelection = ({ knobs }) => (
   </List>
 )
 
-export default ListExampleSelection
+export default ListExampleSelectable

docs/src/examples/components/List/Types/ListExampleSelection.shorthand.tsx renamed to docs/src/examples/components/List/Types/ListExampleSelectable.shorthand.tsx

@@ -25,8 +25,6 @@ const items = [
   },
 ]
 
-const selection = knobs => (knobs === undefined ? true : knobs.selection)
+const ListExampleSelectable = () => <List selectable defaultSelectedIndex={0} items={items} />
 
-const ListExampleSelection = ({ knobs }) => <List selection={selection(knobs)} items={items} />
-
-export default ListExampleSelection
+export default ListExampleSelectable

docs/src/examples/components/List/Types/ListExampleSelection.tsx renamed to docs/src/examples/components/List/Types/ListExampleSelectable.tsx

@@ -1,32 +1,30 @@
 import React from 'react'
 import { List, Image } from '@stardust-ui/react'
 
-const selection = knobs => (knobs === undefined ? true : knobs.selection)
-
-const ListExampleSelection = ({ knobs }) => (
-  <List selection={selection(knobs)}>
+const ListExampleSelectable = () => (
+  <List selectable>
     <List.Item
       media={<Image src="public/images/avatar/small/matt.jpg" avatar />}
       header="Irving Kuhic"
       headerMedia="7:26:56 AM"
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
-      selection={selection(knobs)}
+      selectable
     />
     <List.Item
       media={<Image src="public/images/avatar/small/steve.jpg" avatar />}
       header="Skyler Parks"
       headerMedia="11:30:17 PM"
       content="Use the online FTP application to input the multi-byte application!"
-      selection={selection(knobs)}
+      selectable
     />
     <List.Item
       media={<Image src="public/images/avatar/small/nom.jpg" avatar />}
       header="Dante Schneider"
       headerMedia="5:22:40 PM"
       content="The GB pixel is down, navigate the virtual interface!"
-      selection={selection(knobs)}
+      selectable
     />
   </List>
 )
 
-export default ListExampleSelection
+export default ListExampleSelectable

docs/src/examples/components/List/Types/ListExampleSelectableControlled.shorthand.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react'
+import { List, Image } from '@stardust-ui/react'
+
+class SelectableListControlledExample extends React.Component<any, any> {
+  state = { selectedIndex: -1 }
+
+  items = [
+    {
+      key: 'irving',
+      media: <Image src="public/images/avatar/small/matt.jpg" avatar />,
+      header: 'Irving Kuhic',
+      headerMedia: '7:26:56 AM',
+      content: 'Program the sensor to the SAS alarm through the haptic SQL card!',
+    },
+    {
+      key: 'skyler',
+      media: <Image src="public/images/avatar/small/steve.jpg" avatar />,
+      header: 'Skyler Parks',
+      headerMedia: '11:30:17 PM',
+      content: 'Use the online FTP application to input the multi-byte application!',
+    },
+    {
+      key: 'dante',
+      media: <Image src="public/images/avatar/small/nom.jpg" avatar />,
+      header: 'Dante Schneider',
+      headerMedia: '5:22:40 PM',
+      content: 'The GB pixel is down, navigate the virtual interface!',
+    },
+  ]
+
+  render() {
+    return (
+      <List
+        selectable
+        selectedIndex={this.state.selectedIndex}
+        onSelectedIndexChange={(e, newProps) => {
+          alert(
+            `List is requested to change its selectedIndex state to "${newProps.selectedIndex}"`,
+          )
+          this.setState({ selectedIndex: newProps.selectedIndex })
+        }}
+        items={this.items}
+      />
+    )
+  }
+}
+
+export default SelectableListControlledExample

docs/src/examples/components/List/Types/ListExampleSelection.knobs.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
@@ -10,9 +10,14 @@ const Types = () => (
       examplePath="components/List/Types/ListExample"
     />
     <ComponentExample
-      title="Selection"
+      title="Selectable list"
       description="A list can be formatted to indicate that its items can be selected."
-      examplePath="components/List/Types/ListExampleSelection"
+      examplePath="components/List/Types/ListExampleSelectable"
+    />
+    <ComponentExample
+      title="Controlled selectable list"
+      description="List can handle selected index in controlled mode."
+      examplePath="components/List/Types/ListExampleSelectableControlled"
     />
   </ExampleSection>
 )