@elastic/eui 12.2.0 → 12.4.0

package/src/components/nav_drawer/nav_drawer.js

@@ -1,280 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { EuiListGroup, EuiListGroupItem } from '../list_group';
-import { EuiNavDrawerFlyout } from './nav_drawer_flyout';
-import { EuiOutsideClickDetector } from '../outside_click_detector';
-import { EuiI18n } from '../i18n';
-import { EuiFlexItem } from '../flex';
-
-export class EuiNavDrawer extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      isCollapsed: true,
-      flyoutIsCollapsed: true,
-      outsideClickDisabled: true,
-      isManagingFocus: false,
-      toolTipsEnabled: true,
-    };
-  }
-
-  timeoutID;
-
-  toggleOpen = () => {
-    this.setState({
-      isCollapsed: !this.state.isCollapsed,
-    });
-
-    setTimeout(() => {
-      this.setState({
-        outsideClickDisabled: this.state.isCollapsed ? true : false,
-        toolTipsEnabled: this.state.isCollapsed ? true : false,
-      });
-    }, 150);
-  };
-
-  expandDrawer = () => {
-    this.setState({
-      isCollapsed: false,
-      outsideClickDisabled: false,
-    });
-
-    setTimeout(() => {
-      this.setState({
-        toolTipsEnabled: false,
-      });
-    }, 150);
-  };
-
-  collapseDrawer = () => {
-    this.setState({
-      isCollapsed: true,
-      outsideClickDisabled: this.state.flyoutIsCollapsed ? true : false,
-      toolTipsEnabled: true,
-    });
-
-    // Scrolls the menu and flyout back to top when the nav drawer collapses
-    setTimeout(() => {
-      document.getElementById('navDrawerMenu').scrollTop = 0;
-    }, 50);
-  };
-
-  manageFocus = () => {
-    // This prevents the drawer from collapsing when tabbing through children
-    // by clearing the timeout thus cancelling the onBlur event (see focusOut).
-    // This means isManagingFocus remains true as long as a child element
-    // has focus. This is the case since React bubbles up onFocus and onBlur
-    // events from the child elements.
-    clearTimeout(this.timeoutID);
-
-    if (!this.state.isManagingFocus) {
-      this.setState({
-        isManagingFocus: true,
-      });
-    }
-  };
-
-  focusOut = () => {
-    // This collapses the drawer when no children have focus (i.e. tabbed out).
-    // In other words, if focus does not bubble up from a child element, then
-    // the drawer will collapse. See the corresponding block in expandDrawer
-    // (called by onFocus) which cancels this operation via clearTimeout.
-    this.timeoutID = setTimeout(() => {
-      if (this.state.isManagingFocus) {
-        this.setState({
-          isManagingFocus: false,
-        });
-
-        this.closeBoth();
-      }
-    }, 0);
-  };
-
-  expandFlyout = (links, title) => {
-    const content = links;
-
-    if (this.state.navFlyoutTitle === title) {
-      this.collapseFlyout();
-    } else {
-      this.setState({
-        flyoutIsCollapsed: false,
-        navFlyoutTitle: title,
-        navFlyoutContent: content,
-        isCollapsed: true,
-        toolTipsEnabled: false,
-        outsideClickDisabled: false,
-      });
-    }
-  };
-
-  collapseFlyout = () => {
-    this.setState({
-      flyoutIsCollapsed: true,
-      navFlyoutTitle: null,
-      navFlyoutContent: null,
-      toolTipsEnabled: true,
-    });
-  };
-
-  closeBoth = () => {
-    this.collapseDrawer();
-    this.collapseFlyout();
-  };
-
-  handleDrawerMenuClick = e => {
-    // walk up e.target until either:
-    // 1. a[href] - close the menu
-    // 2. document.body - do nothing
-
-    let element = e.target;
-    while (
-      element !== undefined &&
-      element !== document.body &&
-      (element.tagName !== 'A' || element.getAttribute('href') === undefined)
-    ) {
-      element = element.parentElement;
-    }
-
-    if (element !== document.body) {
-      // this is an anchor with an href
-      this.closeBoth();
-    }
-  };
-
-  render() {
-    const {
-      children,
-      className,
-      showExpandButton,
-      showToolTips,
-      ...rest
-    } = this.props;
-
-    const classes = classNames(
-      'euiNavDrawer',
-      {
-        'euiNavDrawer-isCollapsed': this.state.isCollapsed,
-        'euiNavDrawer-isExpanded': !this.state.isCollapsed,
-        'euiNavDrawer-flyoutIsCollapsed': this.state.flyoutIsCollapsed,
-        'euiNavDrawer-flyoutIsExpanded': !this.state.flyoutIsCollapsed,
-      },
-      className
-    );
-
-    let footerContent;
-    if (showExpandButton) {
-      footerContent = (
-        <EuiListGroup className="euiNavDrawer__expandButton" flush>
-          <EuiI18n
-            tokens={[
-              'euiNavDrawer.sideNavCollapse',
-              'euiNavDrawer.sideNavExpand',
-            ]}
-            defaults={['Collapse', 'Expand']}>
-            {([sideNavCollapse, sideNavExpand]) => (
-              <EuiListGroupItem
-                label={this.state.isCollapsed ? sideNavExpand : sideNavCollapse}
-                iconType={this.state.isCollapsed ? 'menuRight' : 'menuLeft'}
-                size="s"
-                showToolTip={this.state.isCollapsed}
-                onClick={
-                  this.state.isCollapsed
-                    ? () => {
-                        this.expandDrawer();
-                        this.collapseFlyout();
-                      }
-                    : () => this.collapseDrawer()
-                }
-                data-test-subj={
-                  this.state.isCollapsed
-                    ? 'navDrawerExpandButton-isCollapsed'
-                    : 'navDrawerExpandButton-isExpanded'
-                }
-              />
-            )}
-          </EuiI18n>
-        </EuiListGroup>
-      );
-    }
-
-    const flyoutContent = (
-      <EuiNavDrawerFlyout
-        id="navDrawerFlyout"
-        title={this.state.navFlyoutTitle}
-        isCollapsed={this.state.flyoutIsCollapsed}
-        listItems={this.state.navFlyoutContent}
-        wrapText
-      />
-    );
-
-    // Add an onClick that expands the flyout sub menu for any list items (links)
-    // that have a flyoutMenu prop (sub links)
-    let modifiedChildren = children;
-
-    // 1. Loop through the EuiNavDrawer children (EuiListGroup, EuiHorizontalRules, etc)
-    modifiedChildren = React.Children.map(this.props.children, child => {
-      // 2. Check if child is an EuiNavDrawerGroup and if it does have a flyout, add the expand function
-      if (child.type.name === 'EuiNavDrawerGroup') {
-        const item = React.cloneElement(child, {
-          flyoutMenuButtonClick: this.expandFlyout,
-          showToolTips: this.state.toolTipsEnabled && showToolTips,
-        });
-        return item;
-      } else {
-        return child;
-      }
-    });
-
-    const menuClasses = classNames('euiNavDrawerMenu', {
-      'euiNavDrawerMenu-hasFooter': footerContent,
-    });
-
-    return (
-      <EuiOutsideClickDetector
-        onOutsideClick={() => this.closeBoth()}
-        isDisabled={this.state.outsideClickDisabled}>
-        <div
-          className={classes}
-          onBlur={this.focusOut}
-          onFocus={this.manageFocus}
-          {...rest}>
-          <EuiFlexItem grow={false}>
-            <div
-              id="navDrawerMenu"
-              className={menuClasses}
-              onClick={this.handleDrawerMenuClick}>
-              {/* Put expand button first so it's first in tab order then on toggle starts the tabbing of the items from the top */}
-              {/* TODO: Add a "skip navigation" keyboard only button */}
-              {footerContent}
-              {modifiedChildren}
-            </div>
-          </EuiFlexItem>
-
-          {flyoutContent}
-        </div>
-      </EuiOutsideClickDetector>
-    );
-  }
-}
-
-EuiNavDrawer.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-
-  /**
-   * Adds fixed toggle button to bottom of menu area
-   */
-  showExpandButton: PropTypes.bool,
-
-  /**
-   * Display tooltips on side nav items
-   */
-  showToolTips: PropTypes.bool,
-};
-
-EuiNavDrawer.defaultProps = {
-  showExpandButton: true,
-  showToolTips: true,
-};

package/src/components/nav_drawer/nav_drawer_flyout.js

@@ -1,58 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import { EuiTitle } from '../title';
-import { EuiNavDrawerGroup } from './nav_drawer_group';
-import { EuiListGroup } from '../list_group/list_group';
-
-export const EuiNavDrawerFlyout = ({
-  className,
-  title,
-  isCollapsed,
-  listItems,
-  wrapText,
-  ...rest
-}) => {
-  const classes = classNames(
-    'euiNavDrawerFlyout',
-    {
-      'euiNavDrawerFlyout-isCollapsed': isCollapsed,
-      'euiNavDrawerFlyout-isExpanded': !isCollapsed,
-    },
-    className
-  );
-
-  return (
-    <div className={classes} aria-labelledby="navDrawerFlyoutTitle" {...rest}>
-      <EuiTitle className="euiNavDrawerFlyout__title" tabIndex="-1" size="xxs">
-        <div id="navDrawerFlyoutTitle">{title}</div>
-      </EuiTitle>
-      <EuiNavDrawerGroup
-        className="euiNavDrawerFlyout__listGroup"
-        listItems={listItems}
-        wrapText={wrapText}
-      />
-    </div>
-  );
-};
-
-EuiNavDrawerFlyout.propTypes = {
-  className: PropTypes.string,
-  listItems: EuiListGroup.propTypes.listItems,
-  wrapText: EuiListGroup.propTypes.wrapText,
-
-  /**
-   * Display a title atop the flyout
-   */
-  title: PropTypes.string,
-
-  /**
-   * Toggle the nav drawer between collapsed and expanded
-   */
-  isCollapsed: PropTypes.bool,
-};
-
-EuiNavDrawerFlyout.defaultProps = {
-  isCollapsed: true,
-};

package/src/components/nav_drawer/nav_drawer_group.js

@@ -1,72 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import { EuiListGroup } from '../list_group/list_group';
-import { toInitials } from '../../services';
-
-export const EuiNavDrawerGroup = ({
-  className,
-  listItems,
-  flyoutMenuButtonClick,
-  ...rest
-}) => {
-  const classes = classNames('euiNavDrawerGroup', className);
-
-  const listItemsExists = listItems && !!listItems.length;
-
-  // Alter listItems object with prop flyoutMenu and extra props
-  const newListItems = !listItemsExists
-    ? undefined
-    : listItems.map(item => {
-        // If the flyout menu exists, pass back the list of times and the title with the onClick handler of the item
-        const { flyoutMenu, ...itemProps } = item;
-        if (flyoutMenu && flyoutMenuButtonClick) {
-          const items = [...flyoutMenu.listItems];
-          const title = `${flyoutMenu.title}`;
-          itemProps.onClick = () => flyoutMenuButtonClick(items, title);
-        }
-
-        // Make some declarations of props for the side nav implementation
-        itemProps.className = classNames(
-          'euiNavDrawerGroup__item',
-          item.className
-        );
-        itemProps.size = item.size || 's';
-        itemProps['aria-label'] = item['aria-label'] || item.label;
-
-        // Add an avatar in place of non-existent icons
-        const itemProvidesIcon = !!item.iconType || !!item.icon;
-        if (!itemProvidesIcon) {
-          itemProps.icon = (
-            <span className="euiNavDrawerGroup__itemDefaultIcon">
-              {toInitials(item.label)}
-            </span>
-          );
-        }
-
-        // And return the item with conditional `onClick` and without `flyoutMenu`
-        return { ...itemProps };
-      });
-
-  return (
-    <EuiListGroup className={classes} listItems={newListItems} {...rest} />
-  );
-};
-
-EuiNavDrawerGroup.propTypes = {
-  listItems: PropTypes.arrayOf(
-    PropTypes.shape({
-      ...EuiListGroup.propTypes.listItems[0],
-      flyoutMenu: PropTypes.shape({
-        title: PropTypes.string.isRequired,
-        listItems: EuiListGroup.propTypes.listItems.isRequired,
-      }),
-    })
-  ),
-  /**
-   * While not normally required, it is required to pass a function for handling
-   * of the flyout menu button click
-   */
-  flyoutMenuButtonClick: PropTypes.func,
-};

package/src/components/observer/mutation_observer/index.ts

@@ -1 +0,0 @@
-export { EuiMutationObserver } from './mutation_observer';

package/src/components/observer/mutation_observer/mutation_observer.test.tsx

@@ -1,43 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { mount } from 'enzyme';
-import { EuiMutationObserver } from './mutation_observer';
-
-async function sleep(duration: number) {
-  return new Promise(resolve => {
-    setTimeout(resolve, duration);
-  });
-}
-
-export async function waitforMutationObserver(period = 30) {
-  // `period` defaults to 30 because its the delay used by the MutationObserver polyfill
-  await sleep(period);
-}
-
-describe('EuiMutationObserver', () => {
-  it('watches for a mutation', async () => {
-    expect.assertions(1);
-    const onMutation = jest.fn();
-
-    const Wrapper: FunctionComponent<{ value: number }> = ({ value }) => {
-      return (
-        <EuiMutationObserver
-          observerOptions={{ attributes: true }}
-          onMutation={onMutation}>
-          {mutationRef => (
-            <div ref={mutationRef} data-test-ref={value}>
-              Hello World
-            </div>
-          )}
-        </EuiMutationObserver>
-      );
-    };
-
-    const component = mount(<Wrapper value={5} />);
-
-    component.setProps({ value: 6 });
-
-    await waitforMutationObserver();
-
-    expect(onMutation).toHaveBeenCalledTimes(1);
-  });
-});

package/src/components/observer/mutation_observer/mutation_observer.ts

@@ -1,18 +0,0 @@
-import { ReactNode } from 'react';
-
-import { EuiObserver } from '../observer';
-
-interface Props {
-  children: (ref: (e: HTMLElement | null) => void) => ReactNode;
-  onMutation: MutationCallback;
-  observerOptions?: MutationObserverInit;
-}
-
-export class EuiMutationObserver extends EuiObserver<Props> {
-  name = 'EuiMutationObserver';
-
-  beginObserve = () => {
-    this.observer = new MutationObserver(this.props.onMutation);
-    this.observer.observe(this.childNode!, this.props.observerOptions);
-  };
-}

package/src/components/observer/observer.ts

@@ -1,52 +0,0 @@
-import { Component, ReactNode } from 'react';
-
-interface BaseProps {
-  children: (ref: any) => ReactNode;
-}
-
-interface Observer {
-  disconnect: () => void;
-  observe: (element: Element, options?: { [key: string]: any }) => void;
-}
-
-export class EuiObserver<Props extends BaseProps> extends Component<Props> {
-  protected name: string = 'EuiObserver';
-  protected childNode: null | Element = null;
-  protected observer: null | Observer = null;
-
-  componentDidMount() {
-    if (this.childNode == null) {
-      throw new Error(`${this.name} did not receive a ref`);
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.observer != null) {
-      this.observer.disconnect();
-    }
-  }
-
-  updateChildNode = (ref: Element) => {
-    if (this.childNode === ref) return; // node hasn't changed
-
-    // if there's an existing observer disconnect it
-    if (this.observer != null) {
-      this.observer.disconnect();
-      this.observer = null;
-    }
-
-    this.childNode = ref;
-
-    if (this.childNode != null) {
-      this.beginObserve();
-    }
-  };
-
-  beginObserve: () => void = () => {
-    throw new Error('EuiObserver has no default observation method');
-  };
-
-  render() {
-    return this.props.children(this.updateChildNode);
-  }
-}

package/src/components/observer/resize_observer/index.ts

@@ -1 +0,0 @@
-export { EuiResizeObserver } from './resize_observer';

package/src/components/observer/resize_observer/resize_observer.test.tsx

@@ -1,47 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { mount } from 'enzyme';
-import { EuiResizeObserver } from './resize_observer';
-
-async function sleep(duration: number) {
-  return new Promise(resolve => {
-    setTimeout(resolve, duration);
-  });
-}
-
-export async function waitforResizeObserver(period = 30) {
-  // `period` defaults to 30 because its the delay used by the ResizeObserver polyfill
-  await sleep(period);
-}
-
-describe('EuiResizeObserver', () => {
-  it('watches for a resize', async () => {
-    expect.assertions(1);
-    const onResize = jest.fn();
-
-    const Wrapper: FunctionComponent<{}> = ({ children }) => {
-      return (
-        <EuiResizeObserver onResize={onResize}>
-          {(resizeRef: (e: HTMLElement | null) => void) => (
-            <div ref={resizeRef}>{children}</div>
-          )}
-        </EuiResizeObserver>
-      );
-    };
-
-    const component = mount(<Wrapper children={<div>Hello World</div>} />);
-
-    component.setProps({
-      children: (
-        <div>
-          <div>Hello World</div>
-          <div>Hello Again</div>
-        </div>
-      ),
-    });
-
-    await waitforResizeObserver();
-
-    // Expect 2 calls because it's called once on mount
-    expect(onResize).toHaveBeenCalledTimes(2);
-  });
-});

package/src/components/observer/resize_observer/resize_observer.tsx

@@ -1,47 +0,0 @@
-import { ReactNode } from 'react';
-
-import { EuiObserver } from '../observer';
-
-interface Props {
-  children: (ref: (e: HTMLElement | null) => void) => ReactNode;
-  onResize: (dimensions: { height: number; width: number }) => void;
-}
-
-export class EuiResizeObserver extends EuiObserver<Props> {
-  name = 'EuiResizeObserver';
-
-  // Only Chrome and Opera support the `ResizeObserver` API at the time of writing
-  hasResizeObserver = typeof window.ResizeObserver !== 'undefined';
-
-  onResize = () => {
-    if (this.childNode != null) {
-      // Eventually use `clientRect` on the `entries[]` returned natively
-      const { height, width } = this.childNode.getBoundingClientRect();
-      this.props.onResize({
-        height,
-        width,
-      });
-    }
-  };
-
-  beginObserve = () => {
-    let observerOptions;
-    if (this.hasResizeObserver) {
-      this.observer = new window.ResizeObserver(this.onResize);
-    } else {
-      // MutationObserver fallback
-      observerOptions = {
-        // [MutationObserverInit](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit)
-        attributes: true, // Account for style changes from `className` or `style`
-        characterData: true, // Account for text content size differences
-        childList: true, // Account for adding/removing child nodes
-        subtree: true, // Account for deep child nodes
-      };
-      this.observer = new MutationObserver(this.onResize);
-      requestAnimationFrame(this.onResize); // Mimic ResizeObserver behavior of triggering a resize event on init
-    }
-    // The superclass checks that childNode is not null before invoking
-    // beginObserve()
-    this.observer.observe(this.childNode!, observerOptions);
-  };
-}

package/src/components/outside_click_detector/__snapshots__/outside_click_detector.test.js.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EuiOutsideClickDetector is rendered 1`] = `<div />`;

package/src/components/outside_click_detector/index.js

@@ -1 +0,0 @@
-export { EuiOutsideClickDetector } from './outside_click_detector';