fix: reintroduce dropped typeahead stories (#721)

During a refactor a few of these examples got dropped and stopped
functioning. Adding them back in to help with regression testing of the
downshift upgrade.

Additionally I discovered that the complex list items example doesn't
work even when adding back in args to the default. This apparently has
not worked since some time in 2019, as of the following commit 1c01ea9

Thus, I removed it completely rather than trying to untangle it. We
evidently have not needed it.

packages/textInput/stories/helpers/TextInputWithBadgesTypeaheadStoryHelper.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { Item } from "../../../typeahead/components/Typeahead";
 import { BadgeDatum } from "../../components/TextInputWithBadges";
-import { items } from "../../../typeahead/stories/helpers/itemMocks";
 
 interface RenderProps {
  selectedItems: string[];

packages/typeahead/stories/Typeahead.stories.tsx

@@ -4,13 +4,21 @@ import { Typeahead, TextInput } from "../../index";
 import MultiselectTypeahead from "./helpers/MultiselectTypeahead";
 import FilteredListTypeahead from "./helpers/FilteredListTypeahead";
 import { padding } from "../../shared/styles/styleUtils";
-import { complexItems, items } from "./helpers/itemMocks";
 import { css } from "@emotion/css";
 
 const storyWrapper = css`
  width: 300px;
 `;
 
+const items = [
+ { label: "Exosphere", value: "Exosphere" },
+ { label: "Thermosphere", value: "Thermosphere" },
+ { label: "Mesosphere", value: "Mesosphere" },
+ { label: "Stratosphere", value: "Stratosphere" },
+ { label: "Ozone Layer", value: "Ozone Layer" },
+ { label: "Troposphere", value: "Troposphere" }
+];
+
 export default {
  title: "Forms/Typeahead",
  component: Typeahead,
@@ -23,14 +31,22 @@ const Template: Story = args => (
  textField={
  <TextInput id="default" inputLabel="Default" placeholder="Placeholder" />
  }
+ {...args}
  />
 );
 
 export const Default = Template.bind({});
 
 export const MenuHasMaxHeight = Template.bind({});
 MenuHasMaxHeight.args = {
- menuMaxHeight: 100
+ menuMaxHeight: 100,
+ textField: (
+ <TextInput
+ id="maxHeight"
+ inputLabel="Menu max height"
+ placeholder="Placeholder"
+ />
+ )
 };
 
 export const PreFilledSelectedItem = args => (
@@ -50,45 +66,55 @@ export const PreFilledSelectedItem = args => (
  />
 );
 
-export const Multiselect = () => (
- <div className={storyWrapper}>
- <MultiselectTypeahead>
- {({ items, selectHandler, selectedItems }) => (
- <Typeahead
- items={items}
- selectedItems={selectedItems}
- multiSelect={true}
- textField={
- <TextInput
- id="multiselect"
- inputLabel="Multiselectable"
- placeholder="Placeholder"
- />
- }
- onSelect={selectHandler}
- />
- )}
- </MultiselectTypeahead>
- </div>
-);
-
 const onSelectHandler = selectedItems => {
  alert(`${selectedItems[0]} selected`);
 };
+
 export const WithOnSelectCallback = Template.bind({});
 WithOnSelectCallback.args = {
  onSelect: onSelectHandler,
- items
+ textField: (
+ <TextInput id="onselect" inputLabel="onSelect" placeholder="Placeholder" />
+ )
 };
 
-export const ComplexListItems = Template.bind({});
-ComplexListItems.args = {
- items: complexItems
-};
+export const Multiselect = () => (
+ <MultiselectTypeahead>
+ {({ onSelect, selectedItems }) => (
+ <Typeahead
+ items={items}
+ selectedItems={selectedItems}
+ multiSelect={true}
+ textField={
+ <TextInput
+ id="multiselect"
+ inputLabel="Multiselectable"
+ placeholder="Placeholder"
+ />
+ }
+ onSelect={onSelect}
+ />
+ )}
+ </MultiselectTypeahead>
+);
 
 export const WithDisabledItem = Template.bind({});
 WithDisabledItem.args = {
- items: [...items, { label: "K8sphere", value: "K8sphere", disabled: true }]
+ items: [...items, { label: "K8sphere", value: "K8sphere", disabled: true }],
+ textField: (
+ <TextInput
+ id="withdisabled"
+ inputLabel="With a disabled item"
+ placeholder="Placeholder"
+ />
+ )
 };
 
 export const FilterWhileTyping = () => <FilteredListTypeahead items={items} />;
+
+export const CustomMenuEmptyState = () => (
+ <FilteredListTypeahead
+ menuEmptyState={<div className={padding("all")}>Nothing to show</div>}
+ items={items}
+ />
+);

packages/typeahead/stories/helpers/MultiselectTypeahead.tsx

@@ -1,69 +1,46 @@
 import * as React from "react";
 import { cx } from "@emotion/css";
-import { Item } from "../../components/Typeahead";
 import {
  flex,
  flexItem,
  padding,
  textWeight
 } from "../../../shared/styles/styleUtils";
-import { items } from "./itemMocks";
 
 interface RenderProps {
- items: Item[];
  selectedItems: string[];
- selectHandler: (selectedItems: string[]) => void;
+ onSelect: (selectedItems: string[]) => void;
 }
 
 interface MultiselectTypeaheadProps {
  children: (renderProps: RenderProps) => React.ReactNode;
 }
 
-interface MultiselectTypeaheadState {
- selectedItems: string[];
-}
-
-class MultiselectTypeahead extends React.PureComponent<
- MultiselectTypeaheadProps,
- MultiselectTypeaheadState
-> {
- constructor(props) {
- super(props);
-
- this.selectHandler = this.selectHandler.bind(this);
+const MultiSelectTypeahead = ({ children }: MultiselectTypeaheadProps) => {
+ const [selectedItems, setSelectedItems] = React.useState<string[]>([]);
 
- this.state = {
- selectedItems: props.selectedItems || []
- };
- }
+ const handleSelect = newlySelectedItems => {
+ setSelectedItems(newlySelectedItems);
+ };
 
- selectHandler(selectedItems) {
- this.setState({ selectedItems });
- }
-
- render() {
- const { children } = this.props;
-
- return (
- <div className={flex()}>
- <div className={flexItem("grow")}>
- {children({
- selectedItems: this.state.selectedItems,
- selectHandler: this.selectHandler,
- items
- })}
- </div>
- <div className={cx(flexItem("grow"), padding("left"))}>
- <span className={textWeight("medium")}>Selections:</span>
- <ul>
- {this.state.selectedItems.map((item, i) => (
- <li key={i}>{item}</li>
- ))}
- </ul>
- </div>
+ return (
+ <div className={flex()}>
+ <div className={flexItem("grow")}>
+ {children({
+ selectedItems,
+ onSelect: handleSelect
+ })}
  </div>
- );
- }
-}
+ <div className={cx(flexItem("grow"), padding("left"))}>
+ <span className={textWeight("medium")}>Selections:</span>
+ <ul>
+ {selectedItems.map((item, i) => (
+ <li key={i}>{item}</li>
+ ))}
+ </ul>
+ </div>
+ </div>
+ );
+};
 
-export default MultiselectTypeahead;
+export default React.memo(MultiSelectTypeahead);