From 6e8a1eab0e43f9e4f001e9ea6450fc0e2a0daa8d Mon Sep 17 00:00:00 2001
From: Rafal Lesniak <rafallesniak24@gmail.com>
Date: Mon, 3 Feb 2020 19:54:04 +0100
Subject: [PATCH 1/7] Convert SideNav to Typescript

---
 package.json                                  |   2 +-
 .../side_nav/{index.js => index.ts}           |   0
 .../{side_nav.test.js => side_nav.test.tsx}   |   8 +-
 .../side_nav/{side_nav.js => side_nav.tsx}    | 142 +++++++++++-------
 ...av_item.test.js => side_nav_item.test.tsx} |   0
 .../{side_nav_item.js => side_nav_item.tsx}   |  68 +++++----
 6 files changed, 134 insertions(+), 86 deletions(-)
 rename src/components/side_nav/{index.js => index.ts} (100%)
 rename src/components/side_nav/{side_nav.test.js => side_nav.test.tsx} (95%)
 rename src/components/side_nav/{side_nav.js => side_nav.tsx} (60%)
 rename src/components/side_nav/{side_nav_item.test.js => side_nav_item.test.tsx} (100%)
 rename src/components/side_nav/{side_nav_item.js => side_nav_item.tsx} (68%)

diff --git a/package.json b/package.json
index 83544a032ba..fa81da4043b 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "lint-sass-fix": "sass-lint-auto-fix -c ./.sass-lint-fix.yml",
     "test": "yarn lint && yarn test-unit",
     "test-unit": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.json",
-    "test-staged": "yarn lint && node scripts/test-staged.js",
+    "test-staged": "yarn lint",
     "start-test-server": "webpack-dev-server --config src-docs/webpack.config.js --port 9999",
     "test-visual": "wdio test/wdio.conf.js",
     "yo-component": "yo ./generator-eui/app/component.js",
diff --git a/src/components/side_nav/index.js b/src/components/side_nav/index.ts
similarity index 100%
rename from src/components/side_nav/index.js
rename to src/components/side_nav/index.ts
diff --git a/src/components/side_nav/side_nav.test.js b/src/components/side_nav/side_nav.test.tsx
similarity index 95%
rename from src/components/side_nav/side_nav.test.js
rename to src/components/side_nav/side_nav.test.tsx
index 72e876eebaa..66f89fa1575 100644
--- a/src/components/side_nav/side_nav.test.js
+++ b/src/components/side_nav/side_nav.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
 
@@ -109,7 +109,11 @@ describe('EuiSideNav', () => {
           },
         ];
 
-        const renderItem = ({ href, className, children }) => (
+        const renderItem: ComponentProps<typeof EuiSideNav>['renderItem'] = ({
+          href,
+          className,
+          children,
+        }) => (
           <a data-test-id="my-custom-element" href={href} className={className}>
             {children}
           </a>
diff --git a/src/components/side_nav/side_nav.js b/src/components/side_nav/side_nav.tsx
similarity index 60%
rename from src/components/side_nav/side_nav.js
rename to src/components/side_nav/side_nav.tsx
index 060bb4ff797..8e179ed814a 100644
--- a/src/components/side_nav/side_nav.js
+++ b/src/components/side_nav/side_nav.tsx
@@ -1,13 +1,91 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, {
+  Component,
+  ReactNode,
+  MouseEvent,
+  ReactElement,
+  ComponentProps,
+} from 'react';
 import classNames from 'classnames';
 
+import { CommonProps } from '../common';
+
 import { EuiIcon } from '../icon';
 
 import { EuiSideNavItem } from './side_nav_item';
 
-export class EuiSideNav extends Component {
-  isItemOpen = item => {
+interface Item {
+  /**
+   * A value that is passed to React as the `key` for this item
+   */
+  id: string | number;
+  /**
+   * If set to true it will force the item to display in an "open" state at all times.
+   */
+  forceOpen?: boolean;
+  /**
+   * Is an optional string to be passed as the navigation item's `href` prop, and by default it will force rendering of the item as an `<a>`.
+   */
+  href?: string;
+  /**
+   * React node which will be rendered as a small icon to the left of the navigation item text.
+   */
+  icon?: ReactElement;
+  /**
+   * If set to true it will render the item in a visible "selected" state, and will force all ancestor navigation items to render in an "open" state.
+   */
+  isSelected?: boolean;
+  /**
+   * Array containing additional item objects, representing nested children of this navigation item.
+   */
+  items?: Item[];
+  /**
+   * React node representing the text to render for this item (usually a string will suffice).
+   */
+  name: ReactNode;
+  /**
+   * Callback function to be passed as the navigation item's `onClick` prop, and by default it will force rendering of the item as a `<button>` instead of a link.
+   */
+  onClick?: (e: MouseEvent) => void;
+  /**
+   * Function overriding default rendering for this navigation item — when called, it should return a React node representing a replacement navigation item.
+   */
+  renderItem?: ComponentProps<typeof EuiSideNavItem>['renderItem'];
+}
+
+interface EuiSideNavProps extends CommonProps {
+  children?: ReactNode;
+  /**
+   * Class names to be merged into the final `className` property.
+   */
+  className?: string;
+  /**
+   * When called, toggles visibility of the navigation menu at mobile responsive widths. The callback should set the `isOpenOnMobile` prop to actually toggle navigation visibility.
+   */
+  toggleOpenOnMobile?: (e: MouseEvent) => void;
+  /**
+   * If `true`, the navigation menu will be open at mobile device widths. Use in conjunction with the `toggleOpenOnMobile` prop.
+   */
+  isOpenOnMobile?: boolean;
+  /**
+   * A React node to render at mobile responsive widths, representing the title of this navigation menu.
+   */
+  mobileTitle?: ReactNode;
+  /**
+   * `items` is an array of objects (navigation menu `item`s).
+   */
+  items: Item[];
+  /**
+   * Overrides default navigation menu item rendering. When called, it should return a React node representing a replacement navigation item.
+   */
+  renderItem?: ComponentProps<typeof EuiSideNavItem>['renderItem'];
+}
+
+export class EuiSideNav extends Component<EuiSideNavProps> {
+  static defaultProps = {
+    items: [],
+  };
+
+  isItemOpen = (item: Item) => {
     // The developer can force the item to be open.
     if (item.forceOpen) {
       return true;
@@ -22,9 +100,11 @@ export class EuiSideNav extends Component {
     if (item.items) {
       return item.items.some(this.isItemOpen);
     }
+
+    return false;
   };
 
-  renderTree = (items, depth = 0) => {
+  renderTree = (items: Item[], depth = 0) => {
     const { renderItem } = this.props;
 
     return items.map(item => {
@@ -111,55 +191,3 @@ export class EuiSideNav extends Component {
     );
   }
 }
-
-EuiSideNav.propTypes = {
-  /**
-   * `children` are not rendered. Use `items` to specify navigation items instead.
-   */
-  children: PropTypes.node,
-  /**
-   * Class names to be merged into the final `className` property.
-   */
-  className: PropTypes.string,
-  /**
-   * When called, toggles visibility of the navigation menu at mobile responsive widths. The callback should set the `isOpenOnMobile` prop to actually toggle navigation visibility.
-   */
-  toggleOpenOnMobile: PropTypes.func,
-  /**
-   * If `true`, the navigation menu will be open at mobile device widths. Use in conjunction with the `toggleOpenOnMobile` prop.
-   */
-  isOpenOnMobile: PropTypes.bool,
-  /**
-   * A React node to render at mobile responsive widths, representing the title of this navigation menu.
-   */
-  mobileTitle: PropTypes.node,
-  /**
-   * `items` is an array of objects (navigation menu `item`s).
-   * Each `item` may contain the following properties (this is an incomplete list):
-   * `item.id` is a required value that is passed to React as the `key` for this item
-   * `item.forceOpen` is an optional boolean; if set to true it will force the item to display in an "open" state at all times.
-   * `item.href` is an optional string to be passed as the navigation item's `href` prop, and by default it will force rendering of the item as an `<a>`.
-   * `item.icon` is an optional React node which will be rendered as a small icon to the left of the navigation item text.
-   * `item.isSelected` is an optional boolean; if set to true it will render the item in a visible "selected" state, and will force all ancestor navigation items to render in an "open" state.
-   * `item.items` is an optional array containing additional item objects, representing nested children of this navigation item.
-   * `item.name` is a required React node representing the text to render for this item (usually a string will suffice).
-   * `item.onClick` is an optional callback function to be passed as the navigation item's `onClick` prop, and by default it will force rendering of the item as a `<button>` instead of a link.
-   * `item.renderItem` is an optional function overriding default rendering for this navigation item — when called, it should return a React node representing a replacement navigation item.
-   */
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.oneOfType([
-        PropTypes.string.isRequired,
-        PropTypes.number.isRequired,
-      ]).isRequired,
-    }).isRequired
-  ),
-  /**
-   * Overrides default navigation menu item rendering. When called, it should return a React node representing a replacement navigation item.
-   */
-  renderItem: PropTypes.func,
-};
-
-EuiSideNav.defaultProps = {
-  items: [],
-};
diff --git a/src/components/side_nav/side_nav_item.test.js b/src/components/side_nav/side_nav_item.test.tsx
similarity index 100%
rename from src/components/side_nav/side_nav_item.test.js
rename to src/components/side_nav/side_nav_item.test.tsx
diff --git a/src/components/side_nav/side_nav_item.js b/src/components/side_nav/side_nav_item.tsx
similarity index 68%
rename from src/components/side_nav/side_nav_item.js
rename to src/components/side_nav/side_nav_item.tsx
index e006c774643..bc6c74f77b4 100644
--- a/src/components/side_nav/side_nav_item.js
+++ b/src/components/side_nav/side_nav_item.tsx
@@ -1,10 +1,38 @@
-import React, { cloneElement } from 'react';
-import PropTypes from 'prop-types';
+import React, {
+  cloneElement,
+  ReactNode,
+  MouseEvent,
+  ReactElement,
+} from 'react';
 import classNames from 'classnames';
 
+import { CommonProps } from '../common';
+
 import { EuiIcon } from '../icon';
 
-const defaultRenderItem = ({ href, onClick, className, children, ...rest }) => {
+type ItemProps = CommonProps & {
+  href?: string;
+  onClick?: (e: MouseEvent) => void;
+  children: ReactNode;
+};
+
+type EuiSideNavItemProps = ItemProps & {
+  isOpen?: boolean;
+  isSelected?: boolean;
+  isParent?: boolean;
+  icon?: ReactElement;
+  items?: ReactNode;
+  depth?: number;
+  renderItem?: (props: ItemProps) => JSX.Element;
+};
+
+const DefaultRenderItem = ({
+  href,
+  onClick,
+  className,
+  children,
+  ...rest
+}: ItemProps) => {
   if (href) {
     return (
       <a className={className} href={href} onClick={onClick} {...rest}>
@@ -37,10 +65,10 @@ export const EuiSideNavItem = ({
   href,
   items,
   children,
-  depth,
-  renderItem = defaultRenderItem,
+  depth = 0,
+  renderItem: RenderItem = DefaultRenderItem,
   ...rest
-}) => {
+}: EuiSideNavItemProps) => {
   let childItems;
 
   if (items && isOpen) {
@@ -87,27 +115,15 @@ export const EuiSideNavItem = ({
 
   return (
     <div className={classes}>
-      {renderItem({
-        href,
-        onClick,
-        className: buttonClasses,
-        children: buttonContent,
-        ...rest,
-      })}
+      <RenderItem
+        href={href}
+        onClick={onClick}
+        className={buttonClasses}
+        {...rest}>
+        {buttonContent}
+      </RenderItem>
+
       {childItems}
     </div>
   );
 };
-
-EuiSideNavItem.propTypes = {
-  isOpen: PropTypes.bool,
-  isSelected: PropTypes.bool,
-  isParent: PropTypes.bool,
-  icon: PropTypes.node,
-  onClick: PropTypes.func,
-  href: PropTypes.string,
-  items: PropTypes.node,
-  children: PropTypes.node,
-  depth: PropTypes.number,
-  renderItem: PropTypes.func,
-};

From 3eb20afc596c939c63ddc05ef92f978efd8d577b Mon Sep 17 00:00:00 2001
From: Rafal Lesniak <rafallesniak24@gmail.com>
Date: Mon, 3 Feb 2020 20:05:24 +0100
Subject: [PATCH 2/7] up changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0b64116b287..838896d6b2a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - Changed SASS comments to non-compiled comments in invisibles files ([#2807](https://github.com/elastic/eui/pull/2807))
 - Added `rowHeader` prop to `EuiBasicTable` to allow consumers to set the identifying cell in a row ([#2802](https://github.com/elastic/eui/pull/2802))
 - Improved `EuiDescribedFormGroup` accessibility by avoiding duplicated output in screen readers ([#2783](https://github.com/elastic/eui/pull/2783))
+- Converted `EuiSideNav` to TypeScript ([#2659](https://github.com/elastic/eui/issues/2659))
 
 **Bug fixes**
 

From 2dedb95d3b9c465673e5abe1fbc6199adcfd2646 Mon Sep 17 00:00:00 2001
From: Rafal Lesniak <rafallesniak24@gmail.com>
Date: Tue, 4 Feb 2020 20:38:29 +0100
Subject: [PATCH 3/7] PR updates

---
 CHANGELOG.md                                  |  2 +-
 src-docs/src/views/side_nav/props.tsx         |  5 ++
 .../src/views/side_nav/side_nav_example.js    |  4 +-
 src/components/side_nav/index.ts              |  2 +
 src/components/side_nav/side_nav.test.tsx     |  6 +-
 src/components/side_nav/side_nav.tsx          | 67 ++++---------------
 src/components/side_nav/side_nav_item.tsx     |  6 +-
 src/components/side_nav/side_nav_types.ts     | 42 ++++++++++++
 8 files changed, 72 insertions(+), 62 deletions(-)
 create mode 100644 src-docs/src/views/side_nav/props.tsx
 create mode 100644 src/components/side_nav/side_nav_types.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 838896d6b2a..f65aa2e188a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,7 @@
 - Changed SASS comments to non-compiled comments in invisibles files ([#2807](https://github.com/elastic/eui/pull/2807))
 - Added `rowHeader` prop to `EuiBasicTable` to allow consumers to set the identifying cell in a row ([#2802](https://github.com/elastic/eui/pull/2802))
 - Improved `EuiDescribedFormGroup` accessibility by avoiding duplicated output in screen readers ([#2783](https://github.com/elastic/eui/pull/2783))
-- Converted `EuiSideNav` to TypeScript ([#2659](https://github.com/elastic/eui/issues/2659))
+- Converted `EuiSideNav` to TypeScript ([#2818](https://github.com/elastic/eui/issues/2818))
 
 **Bug fixes**
 
diff --git a/src-docs/src/views/side_nav/props.tsx b/src-docs/src/views/side_nav/props.tsx
new file mode 100644
index 00000000000..45511337092
--- /dev/null
+++ b/src-docs/src/views/side_nav/props.tsx
@@ -0,0 +1,5 @@
+import React, { FunctionComponent } from 'react';
+import { EuiSideNavItemType } from '../../../../src/components/side_nav/side_nav_types';
+// import { EuiDataGridColumn } from '../../../../src/components/datagrid/data_grid_types';
+
+export const SideNavItem: FunctionComponent<EuiSideNavItemType> = () => <div />;
diff --git a/src-docs/src/views/side_nav/side_nav_example.js b/src-docs/src/views/side_nav/side_nav_example.js
index 3c677bebefd..3665c350ce6 100644
--- a/src-docs/src/views/side_nav/side_nav_example.js
+++ b/src-docs/src/views/side_nav/side_nav_example.js
@@ -18,6 +18,8 @@ import SideNavForceOpen from './side_nav_force_open';
 const sideNavForceOpenSource = require('!!raw-loader!./side_nav_force_open');
 const sideNavForceOpenHtml = renderToHtml(SideNavForceOpen);
 
+import { SideNavItem } from './props';
+
 export const SideNavExample = {
   title: 'Side Nav',
   sections: [
@@ -48,7 +50,7 @@ export const SideNavExample = {
           </p>
         </div>
       ),
-      props: { EuiSideNav },
+      props: { EuiSideNav, EuiSideNavItem: SideNavItem },
       demo: <SideNav />,
     },
     {
diff --git a/src/components/side_nav/index.ts b/src/components/side_nav/index.ts
index dde1392991d..357b03d4f6e 100644
--- a/src/components/side_nav/index.ts
+++ b/src/components/side_nav/index.ts
@@ -1 +1,3 @@
 export { EuiSideNav } from './side_nav';
+
+export * from './side_nav_types';
diff --git a/src/components/side_nav/side_nav.test.tsx b/src/components/side_nav/side_nav.test.tsx
index 66f89fa1575..33a759a5026 100644
--- a/src/components/side_nav/side_nav.test.tsx
+++ b/src/components/side_nav/side_nav.test.tsx
@@ -1,8 +1,8 @@
-import React, { ComponentProps } from 'react';
+import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
 
-import { EuiSideNav } from './side_nav';
+import { EuiSideNav, EuiSideNavProps } from './side_nav';
 
 describe('EuiSideNav', () => {
   test('is rendered', () => {
@@ -109,7 +109,7 @@ describe('EuiSideNav', () => {
           },
         ];
 
-        const renderItem: ComponentProps<typeof EuiSideNav>['renderItem'] = ({
+        const renderItem: EuiSideNavProps['renderItem'] = ({
           href,
           className,
           children,
diff --git a/src/components/side_nav/side_nav.tsx b/src/components/side_nav/side_nav.tsx
index 8e179ed814a..0d70e6cd30d 100644
--- a/src/components/side_nav/side_nav.tsx
+++ b/src/components/side_nav/side_nav.tsx
@@ -1,59 +1,18 @@
-import React, {
-  Component,
-  ReactNode,
-  MouseEvent,
-  ReactElement,
-  ComponentProps,
-} from 'react';
+import React, { Component, ReactNode, MouseEventHandler } from 'react';
 import classNames from 'classnames';
 
 import { CommonProps } from '../common';
 
 import { EuiIcon } from '../icon';
 
-import { EuiSideNavItem } from './side_nav_item';
+import { EuiSideNavItem, EuiSideNavItemProps } from './side_nav_item';
+import { EuiSideNavItemType } from './side_nav_types';
 
-interface Item {
+export type EuiSideNavProps = CommonProps & {
   /**
-   * A value that is passed to React as the `key` for this item
+   * `children` are not rendered. Use `items` to specify navigation items instead.
    */
-  id: string | number;
-  /**
-   * If set to true it will force the item to display in an "open" state at all times.
-   */
-  forceOpen?: boolean;
-  /**
-   * Is an optional string to be passed as the navigation item's `href` prop, and by default it will force rendering of the item as an `<a>`.
-   */
-  href?: string;
-  /**
-   * React node which will be rendered as a small icon to the left of the navigation item text.
-   */
-  icon?: ReactElement;
-  /**
-   * If set to true it will render the item in a visible "selected" state, and will force all ancestor navigation items to render in an "open" state.
-   */
-  isSelected?: boolean;
-  /**
-   * Array containing additional item objects, representing nested children of this navigation item.
-   */
-  items?: Item[];
-  /**
-   * React node representing the text to render for this item (usually a string will suffice).
-   */
-  name: ReactNode;
-  /**
-   * Callback function to be passed as the navigation item's `onClick` prop, and by default it will force rendering of the item as a `<button>` instead of a link.
-   */
-  onClick?: (e: MouseEvent) => void;
-  /**
-   * Function overriding default rendering for this navigation item — when called, it should return a React node representing a replacement navigation item.
-   */
-  renderItem?: ComponentProps<typeof EuiSideNavItem>['renderItem'];
-}
-
-interface EuiSideNavProps extends CommonProps {
-  children?: ReactNode;
+  children?: never;
   /**
    * Class names to be merged into the final `className` property.
    */
@@ -61,7 +20,7 @@ interface EuiSideNavProps extends CommonProps {
   /**
    * When called, toggles visibility of the navigation menu at mobile responsive widths. The callback should set the `isOpenOnMobile` prop to actually toggle navigation visibility.
    */
-  toggleOpenOnMobile?: (e: MouseEvent) => void;
+  toggleOpenOnMobile?: MouseEventHandler<HTMLButtonElement>;
   /**
    * If `true`, the navigation menu will be open at mobile device widths. Use in conjunction with the `toggleOpenOnMobile` prop.
    */
@@ -71,21 +30,21 @@ interface EuiSideNavProps extends CommonProps {
    */
   mobileTitle?: ReactNode;
   /**
-   * `items` is an array of objects (navigation menu `item`s).
+   *  An array of #EuiSideNavItemType objects. Lists navigation menu items.
    */
-  items: Item[];
+  items: EuiSideNavItemType[];
   /**
    * Overrides default navigation menu item rendering. When called, it should return a React node representing a replacement navigation item.
    */
-  renderItem?: ComponentProps<typeof EuiSideNavItem>['renderItem'];
-}
+  renderItem?: EuiSideNavItemProps['renderItem'];
+};
 
 export class EuiSideNav extends Component<EuiSideNavProps> {
   static defaultProps = {
     items: [],
   };
 
-  isItemOpen = (item: Item) => {
+  isItemOpen = (item: EuiSideNavItemType) => {
     // The developer can force the item to be open.
     if (item.forceOpen) {
       return true;
@@ -104,7 +63,7 @@ export class EuiSideNav extends Component<EuiSideNavProps> {
     return false;
   };
 
-  renderTree = (items: Item[], depth = 0) => {
+  renderTree = (items: EuiSideNavItemType[], depth = 0) => {
     const { renderItem } = this.props;
 
     return items.map(item => {
diff --git a/src/components/side_nav/side_nav_item.tsx b/src/components/side_nav/side_nav_item.tsx
index bc6c74f77b4..82d2f7ef826 100644
--- a/src/components/side_nav/side_nav_item.tsx
+++ b/src/components/side_nav/side_nav_item.tsx
@@ -1,8 +1,8 @@
 import React, {
   cloneElement,
   ReactNode,
-  MouseEvent,
   ReactElement,
+  MouseEventHandler,
 } from 'react';
 import classNames from 'classnames';
 
@@ -12,11 +12,11 @@ import { EuiIcon } from '../icon';
 
 type ItemProps = CommonProps & {
   href?: string;
-  onClick?: (e: MouseEvent) => void;
+  onClick?: MouseEventHandler<HTMLButtonElement | HTMLElement>;
   children: ReactNode;
 };
 
-type EuiSideNavItemProps = ItemProps & {
+export type EuiSideNavItemProps = ItemProps & {
   isOpen?: boolean;
   isSelected?: boolean;
   isParent?: boolean;
diff --git a/src/components/side_nav/side_nav_types.ts b/src/components/side_nav/side_nav_types.ts
new file mode 100644
index 00000000000..d02b78cee4f
--- /dev/null
+++ b/src/components/side_nav/side_nav_types.ts
@@ -0,0 +1,42 @@
+import { ReactElement, ReactNode, MouseEventHandler } from 'react';
+
+// import { EuiSideNavItemProps } from './side_nav_item';
+
+export interface EuiSideNavItemType {
+  /**
+   * A value that is passed to React as the `key` for this item
+   */
+  id: string | number;
+  /**
+   * If set to true it will force the item to display in an "open" state at all times.
+   */
+  forceOpen?: boolean;
+  /**
+   * Is an optional string to be passed as the navigation item's `href` prop, and by default it will force rendering of the item as an `<a>`.
+   */
+  href?: string;
+  /**
+   * React node which will be rendered as a small icon to the left of the navigation item text.
+   */
+  icon?: ReactElement;
+  /**
+   * If set to true it will render the item in a visible "selected" state, and will force all ancestor navigation items to render in an "open" state.
+   */
+  isSelected?: boolean;
+  /**
+   * Array containing additional item objects, representing nested children of this navigation item.
+   */
+  items?: EuiSideNavItemType[];
+  /**
+   * React node representing the text to render for this item (usually a string will suffice).
+   */
+  name: ReactNode;
+  /**
+   * Callback function to be passed as the navigation item's `onClick` prop, and by default it will force rendering of the item as a `<button>` instead of a link.
+   */
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  /**
+   * Function overriding default rendering for this navigation item — when called, it should return a React node representing a replacement navigation item.
+   */
+  renderItem?: any;
+}

From daeb80da800d24bd3d7c73c031552824965df5f9 Mon Sep 17 00:00:00 2001
From: Rafal Lesniak <rafallesniak24@gmail.com>
Date: Wed, 5 Feb 2020 12:13:30 +0100
Subject: [PATCH 4/7] Update props and nap

---
 package.json                                              | 2 +-
 src-docs/src/views/side_nav/props.tsx                     | 1 -
 .../{side_nav.test.js.snap => side_nav.test.tsx.snap}     | 0
 ..._nav_item.test.js.snap => side_nav_item.test.tsx.snap} | 8 ++++----
 src/components/side_nav/side_nav.tsx                      | 2 +-
 src/components/side_nav/side_nav_types.ts                 | 4 ++--
 6 files changed, 8 insertions(+), 9 deletions(-)
 rename src/components/side_nav/__snapshots__/{side_nav.test.js.snap => side_nav.test.tsx.snap} (100%)
 rename src/components/side_nav/__snapshots__/{side_nav_item.test.js.snap => side_nav_item.test.tsx.snap} (88%)

diff --git a/package.json b/package.json
index fa81da4043b..83544a032ba 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "lint-sass-fix": "sass-lint-auto-fix -c ./.sass-lint-fix.yml",
     "test": "yarn lint && yarn test-unit",
     "test-unit": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.json",
-    "test-staged": "yarn lint",
+    "test-staged": "yarn lint && node scripts/test-staged.js",
     "start-test-server": "webpack-dev-server --config src-docs/webpack.config.js --port 9999",
     "test-visual": "wdio test/wdio.conf.js",
     "yo-component": "yo ./generator-eui/app/component.js",
diff --git a/src-docs/src/views/side_nav/props.tsx b/src-docs/src/views/side_nav/props.tsx
index 45511337092..79863b83124 100644
--- a/src-docs/src/views/side_nav/props.tsx
+++ b/src-docs/src/views/side_nav/props.tsx
@@ -1,5 +1,4 @@
 import React, { FunctionComponent } from 'react';
 import { EuiSideNavItemType } from '../../../../src/components/side_nav/side_nav_types';
-// import { EuiDataGridColumn } from '../../../../src/components/datagrid/data_grid_types';
 
 export const SideNavItem: FunctionComponent<EuiSideNavItemType> = () => <div />;
diff --git a/src/components/side_nav/__snapshots__/side_nav.test.js.snap b/src/components/side_nav/__snapshots__/side_nav.test.tsx.snap
similarity index 100%
rename from src/components/side_nav/__snapshots__/side_nav.test.js.snap
rename to src/components/side_nav/__snapshots__/side_nav.test.tsx.snap
diff --git a/src/components/side_nav/__snapshots__/side_nav_item.test.js.snap b/src/components/side_nav/__snapshots__/side_nav_item.test.tsx.snap
similarity index 88%
rename from src/components/side_nav/__snapshots__/side_nav_item.test.js.snap
rename to src/components/side_nav/__snapshots__/side_nav_item.test.tsx.snap
index fbd52c9f2f5..6c9c73dc1b4 100644
--- a/src/components/side_nav/__snapshots__/side_nav_item.test.js.snap
+++ b/src/components/side_nav/__snapshots__/side_nav_item.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`EuiSideNavItem is rendered 1`] = `
 <div
-  class="euiSideNavItem"
+  class="euiSideNavItem euiSideNavItem--root"
 >
   <div
     class="euiSideNavItemButton"
@@ -26,7 +26,7 @@ exports[`EuiSideNavItem is rendered 1`] = `
 
 exports[`EuiSideNavItem isSelected defaults to false 1`] = `
 <div
-  class="euiSideNavItem"
+  class="euiSideNavItem euiSideNavItem--root"
 >
   <div
     class="euiSideNavItemButton"
@@ -46,7 +46,7 @@ exports[`EuiSideNavItem isSelected defaults to false 1`] = `
 
 exports[`EuiSideNavItem isSelected is rendered when specified as true 1`] = `
 <div
-  class="euiSideNavItem"
+  class="euiSideNavItem euiSideNavItem--root"
 >
   <div
     class="euiSideNavItemButton euiSideNavItemButton-isSelected"
@@ -66,7 +66,7 @@ exports[`EuiSideNavItem isSelected is rendered when specified as true 1`] = `
 
 exports[`EuiSideNavItem preserves child's classes 1`] = `
 <div
-  class="euiSideNavItem"
+  class="euiSideNavItem euiSideNavItem--root"
 >
   <div
     class="euiSideNavItemButton"
diff --git a/src/components/side_nav/side_nav.tsx b/src/components/side_nav/side_nav.tsx
index 0d70e6cd30d..e5ce52c055a 100644
--- a/src/components/side_nav/side_nav.tsx
+++ b/src/components/side_nav/side_nav.tsx
@@ -30,7 +30,7 @@ export type EuiSideNavProps = CommonProps & {
    */
   mobileTitle?: ReactNode;
   /**
-   *  An array of #EuiSideNavItemType objects. Lists navigation menu items.
+   *  An array of #EuiSideNavItem objects. Lists navigation menu items.
    */
   items: EuiSideNavItemType[];
   /**
diff --git a/src/components/side_nav/side_nav_types.ts b/src/components/side_nav/side_nav_types.ts
index d02b78cee4f..cdfdc101310 100644
--- a/src/components/side_nav/side_nav_types.ts
+++ b/src/components/side_nav/side_nav_types.ts
@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode, MouseEventHandler } from 'react';
 
-// import { EuiSideNavItemProps } from './side_nav_item';
+import { EuiSideNavItemProps } from './side_nav_item';
 
 export interface EuiSideNavItemType {
   /**
@@ -38,5 +38,5 @@ export interface EuiSideNavItemType {
   /**
    * Function overriding default rendering for this navigation item — when called, it should return a React node representing a replacement navigation item.
    */
-  renderItem?: any;
+  renderItem?: EuiSideNavItemProps['renderItem'];
 }

From ed0034ac6321e23dc01f26cf9ab8c9aa6e99cf49 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Wed, 5 Feb 2020 12:40:21 -0700
Subject: [PATCH 5/7] Add proper typing for EuiSubNav's renderItem

---
 src-docs/src/views/side_nav/props.tsx     |  4 +-
 src/components/side_nav/side_nav.test.tsx |  9 +--
 src/components/side_nav/side_nav.tsx      | 71 ++++++++++++-----------
 src/components/side_nav/side_nav_item.tsx | 54 ++++++++++++-----
 src/components/side_nav/side_nav_types.ts |  8 +--
 5 files changed, 86 insertions(+), 60 deletions(-)

diff --git a/src-docs/src/views/side_nav/props.tsx b/src-docs/src/views/side_nav/props.tsx
index 79863b83124..050c4fab8a7 100644
--- a/src-docs/src/views/side_nav/props.tsx
+++ b/src-docs/src/views/side_nav/props.tsx
@@ -1,4 +1,6 @@
 import React, { FunctionComponent } from 'react';
 import { EuiSideNavItemType } from '../../../../src/components/side_nav/side_nav_types';
 
-export const SideNavItem: FunctionComponent<EuiSideNavItemType> = () => <div />;
+export const SideNavItem: FunctionComponent<EuiSideNavItemType<any>> = () => (
+  <div />
+);
diff --git a/src/components/side_nav/side_nav.test.tsx b/src/components/side_nav/side_nav.test.tsx
index 33a759a5026..4b900ba7243 100644
--- a/src/components/side_nav/side_nav.test.tsx
+++ b/src/components/side_nav/side_nav.test.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
 
-import { EuiSideNav, EuiSideNavProps } from './side_nav';
+import { EuiSideNav } from './side_nav';
+import { RenderItem } from './side_nav_item';
 
 describe('EuiSideNav', () => {
   test('is rendered', () => {
@@ -109,11 +110,7 @@ describe('EuiSideNav', () => {
           },
         ];
 
-        const renderItem: EuiSideNavProps['renderItem'] = ({
-          href,
-          className,
-          children,
-        }) => (
+        const renderItem: RenderItem<{}> = ({ href, className, children }) => (
           <a data-test-id="my-custom-element" href={href} className={className}>
             {children}
           </a>
diff --git a/src/components/side_nav/side_nav.tsx b/src/components/side_nav/side_nav.tsx
index e5ce52c055a..9ca83c0bda4 100644
--- a/src/components/side_nav/side_nav.tsx
+++ b/src/components/side_nav/side_nav.tsx
@@ -5,46 +5,47 @@ import { CommonProps } from '../common';
 
 import { EuiIcon } from '../icon';
 
-import { EuiSideNavItem, EuiSideNavItemProps } from './side_nav_item';
+import { EuiSideNavItem, RenderItem } from './side_nav_item';
 import { EuiSideNavItemType } from './side_nav_types';
 
-export type EuiSideNavProps = CommonProps & {
-  /**
-   * `children` are not rendered. Use `items` to specify navigation items instead.
-   */
-  children?: never;
-  /**
-   * Class names to be merged into the final `className` property.
-   */
-  className?: string;
-  /**
-   * When called, toggles visibility of the navigation menu at mobile responsive widths. The callback should set the `isOpenOnMobile` prop to actually toggle navigation visibility.
-   */
-  toggleOpenOnMobile?: MouseEventHandler<HTMLButtonElement>;
-  /**
-   * If `true`, the navigation menu will be open at mobile device widths. Use in conjunction with the `toggleOpenOnMobile` prop.
-   */
-  isOpenOnMobile?: boolean;
-  /**
-   * A React node to render at mobile responsive widths, representing the title of this navigation menu.
-   */
-  mobileTitle?: ReactNode;
-  /**
-   *  An array of #EuiSideNavItem objects. Lists navigation menu items.
-   */
-  items: EuiSideNavItemType[];
-  /**
-   * Overrides default navigation menu item rendering. When called, it should return a React node representing a replacement navigation item.
-   */
-  renderItem?: EuiSideNavItemProps['renderItem'];
-};
-
-export class EuiSideNav extends Component<EuiSideNavProps> {
+export type EuiSideNavProps<T> = T &
+  CommonProps & {
+    /**
+     * `children` are not rendered. Use `items` to specify navigation items instead.
+     */
+    children?: never;
+    /**
+     * Class names to be merged into the final `className` property.
+     */
+    className?: string;
+    /**
+     * When called, toggles visibility of the navigation menu at mobile responsive widths. The callback should set the `isOpenOnMobile` prop to actually toggle navigation visibility.
+     */
+    toggleOpenOnMobile?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * If `true`, the navigation menu will be open at mobile device widths. Use in conjunction with the `toggleOpenOnMobile` prop.
+     */
+    isOpenOnMobile?: boolean;
+    /**
+     * A React node to render at mobile responsive widths, representing the title of this navigation menu.
+     */
+    mobileTitle?: ReactNode;
+    /**
+     *  An array of #EuiSideNavItem objects. Lists navigation menu items.
+     */
+    items: Array<EuiSideNavItemType<T>>;
+    /**
+     * Overrides default navigation menu item rendering. When called, it should return a React node representing a replacement navigation item.
+     */
+    renderItem?: RenderItem<T>;
+  };
+
+export class EuiSideNav<T> extends Component<EuiSideNavProps<T>> {
   static defaultProps = {
     items: [],
   };
 
-  isItemOpen = (item: EuiSideNavItemType) => {
+  isItemOpen = (item: EuiSideNavItemType<T>) => {
     // The developer can force the item to be open.
     if (item.forceOpen) {
       return true;
@@ -63,7 +64,7 @@ export class EuiSideNav extends Component<EuiSideNavProps> {
     return false;
   };
 
-  renderTree = (items: EuiSideNavItemType[], depth = 0) => {
+  renderTree = (items: Array<EuiSideNavItemType<T>>, depth = 0) => {
     const { renderItem } = this.props;
 
     return items.map(item => {
diff --git a/src/components/side_nav/side_nav_item.tsx b/src/components/side_nav/side_nav_item.tsx
index 82d2f7ef826..c5d3e917ccb 100644
--- a/src/components/side_nav/side_nav_item.tsx
+++ b/src/components/side_nav/side_nav_item.tsx
@@ -16,16 +16,40 @@ type ItemProps = CommonProps & {
   children: ReactNode;
 };
 
-export type EuiSideNavItemProps = ItemProps & {
+interface SideNavItemProps {
   isOpen?: boolean;
   isSelected?: boolean;
   isParent?: boolean;
   icon?: ReactElement;
   items?: ReactNode;
   depth?: number;
-  renderItem?: (props: ItemProps) => JSX.Element;
+}
+
+type ExcludeEuiSideNavItemProps<T> = Pick<
+  T,
+  Exclude<keyof T, keyof SideNavItemProps | 'renderItem'>
+>;
+type OmitEuiSideNavItemProps<T> = {
+  [K in keyof ExcludeEuiSideNavItemProps<T>]: T[K]
 };
 
+interface GuaranteedRenderItemProps {
+  href: string | undefined;
+  onClick: ItemProps['onClick'] | undefined;
+  className: string;
+  children: ReactNode;
+}
+export type RenderItem<T> = (
+  // argument is the set of extra component props + GuaranteedRenderItemProps
+  props: OmitEuiSideNavItemProps<T> & GuaranteedRenderItemProps
+) => JSX.Element;
+
+type WithOrWithoutRenderItem<T> = T extends { renderItem: Function }
+  ? T & { renderItem: RenderItem<T> }
+  : T;
+
+export type EuiSideNavItemProps<T> = WithOrWithoutRenderItem<T>;
+
 const DefaultRenderItem = ({
   href,
   onClick,
@@ -56,7 +80,10 @@ const DefaultRenderItem = ({
   );
 };
 
-export const EuiSideNavItem = ({
+export function EuiSideNavItem<
+  T extends ItemProps &
+    SideNavItemProps & { renderItem?: (props: any) => JSX.Element }
+>({
   isOpen,
   isSelected,
   isParent,
@@ -65,10 +92,10 @@ export const EuiSideNavItem = ({
   href,
   items,
   children,
-  depth = 0,
   renderItem: RenderItem = DefaultRenderItem,
+  depth = 0,
   ...rest
-}: EuiSideNavItemProps) => {
+}: EuiSideNavItemProps<T>) {
   let childItems;
 
   if (items && isOpen) {
@@ -113,17 +140,16 @@ export const EuiSideNavItem = ({
     </span>
   );
 
+  const renderItemProps: GuaranteedRenderItemProps = {
+    href,
+    onClick,
+    className: buttonClasses,
+    children: buttonContent,
+  };
   return (
     <div className={classes}>
-      <RenderItem
-        href={href}
-        onClick={onClick}
-        className={buttonClasses}
-        {...rest}>
-        {buttonContent}
-      </RenderItem>
-
+      <RenderItem {...renderItemProps} {...rest} />
       {childItems}
     </div>
   );
-};
+}
diff --git a/src/components/side_nav/side_nav_types.ts b/src/components/side_nav/side_nav_types.ts
index cdfdc101310..a06de80710c 100644
--- a/src/components/side_nav/side_nav_types.ts
+++ b/src/components/side_nav/side_nav_types.ts
@@ -1,8 +1,8 @@
 import { ReactElement, ReactNode, MouseEventHandler } from 'react';
 
-import { EuiSideNavItemProps } from './side_nav_item';
+import { RenderItem } from './side_nav_item';
 
-export interface EuiSideNavItemType {
+export interface EuiSideNavItemType<T> {
   /**
    * A value that is passed to React as the `key` for this item
    */
@@ -26,7 +26,7 @@ export interface EuiSideNavItemType {
   /**
    * Array containing additional item objects, representing nested children of this navigation item.
    */
-  items?: EuiSideNavItemType[];
+  items?: Array<EuiSideNavItemType<T>>;
   /**
    * React node representing the text to render for this item (usually a string will suffice).
    */
@@ -38,5 +38,5 @@ export interface EuiSideNavItemType {
   /**
    * Function overriding default rendering for this navigation item — when called, it should return a React node representing a replacement navigation item.
    */
-  renderItem?: EuiSideNavItemProps['renderItem'];
+  renderItem?: RenderItem<T>;
 }

From 5deb96c6643e0062a02633c74d830bda837a8efb Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Wed, 5 Feb 2020 12:49:42 -0700
Subject: [PATCH 6/7] Small type cleanup

---
 src/components/side_nav/side_nav_item.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/side_nav/side_nav_item.tsx b/src/components/side_nav/side_nav_item.tsx
index c5d3e917ccb..eb30faaec36 100644
--- a/src/components/side_nav/side_nav_item.tsx
+++ b/src/components/side_nav/side_nav_item.tsx
@@ -44,12 +44,10 @@ export type RenderItem<T> = (
   props: OmitEuiSideNavItemProps<T> & GuaranteedRenderItemProps
 ) => JSX.Element;
 
-type WithOrWithoutRenderItem<T> = T extends { renderItem: Function }
+export type EuiSideNavItemProps<T> = T extends { renderItem: Function }
   ? T & { renderItem: RenderItem<T> }
   : T;
 
-export type EuiSideNavItemProps<T> = WithOrWithoutRenderItem<T>;
-
 const DefaultRenderItem = ({
   href,
   onClick,

From 80c46c048064695b1562e0da30e00c1a0eee6088 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Wed, 5 Feb 2020 14:19:06 -0700
Subject: [PATCH 7/7] PR feedback

---
 src/components/side_nav/side_nav_item.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/side_nav/side_nav_item.tsx b/src/components/side_nav/side_nav_item.tsx
index eb30faaec36..e2e47a80ff0 100644
--- a/src/components/side_nav/side_nav_item.tsx
+++ b/src/components/side_nav/side_nav_item.tsx
@@ -34,8 +34,8 @@ type OmitEuiSideNavItemProps<T> = {
 };
 
 interface GuaranteedRenderItemProps {
-  href: string | undefined;
-  onClick: ItemProps['onClick'] | undefined;
+  href?: string;
+  onClick?: ItemProps['onClick'];
   className: string;
   children: ReactNode;
 }