@elastic/eui 12.2.0 → 12.4.0

package/es/components/icon/assets/logo_xpack.js

@@ -1,39 +0,0 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import React from 'react';
-
-var EuiIconLogoXpack = function EuiIconLogoXpack(props) {
-  return React.createElement("svg", _extends({
-    width: 32,
-    height: 32,
-    viewBox: "0 0 32 32",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), React.createElement("g", {
-    fill: "none"
-  }, React.createElement("path", {
-    fill: "#FDD10D",
-    d: "M27.309 3.136l1.054 1.055a4.503 4.503 0 0 1 .008 6.36l-6.182 6.182-7.273-7.273 6.32-6.32a4.297 4.297 0 0 1 6.077 0l-.004-.004z"
-  }), React.createElement("path", {
-    fill: "#0479A1",
-    d: "M7.634 16.731l-6.24 6.235a4.411 4.411 0 0 0 0 6.24l1.04 1.04a4.411 4.411 0 0 0 6.24 0L14.91 24l-7.275-7.269z"
-  }), React.createElement("path", {
-    fill: "#17A8E0",
-    d: "M21.143 15.691L8.674 3.211a4.411 4.411 0 0 0-6.24 0l-1.04 1.04a4.411 4.411 0 0 0 0 6.24l6.24 6.24 1.04-1.04a8.823 8.823 0 0 1 12.469 0z"
-  }), React.createElement("path", {
-    className: "euiIcon__fillNegative",
-    d: "M21.143 15.691a8.823 8.823 0 0 0-12.474 0l-1.04 1.04L14.909 24l7.28-7.269-1.046-1.04z"
-  }), React.createElement("path", {
-    fill: "#20BBB1",
-    d: "M28.429 22.966l-4.16-4.16-7.28 7.28 4.154 4.16a4.411 4.411 0 0 0 6.24 0l1.04-1.04a4.411 4.411 0 0 0 .006-6.24z"
-  }), React.createElement("path", {
-    fill: "#009B8F",
-    d: "M14.913 24.006l7.277-7.277 2.08 2.081-7.276 7.277z"
-  })));
-};
-
-export var icon = EuiIconLogoXpack;
-EuiIconLogoXpack.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "EuiIconLogoXpack"
-};

package/lib/components/icon/assets/logo_xpack.js

@@ -1,49 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.icon = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-var EuiIconLogoXpack = function EuiIconLogoXpack(props) {
-  return _react.default.createElement("svg", _extends({
-    width: 32,
-    height: 32,
-    viewBox: "0 0 32 32",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _react.default.createElement("g", {
-    fill: "none"
-  }, _react.default.createElement("path", {
-    fill: "#FDD10D",
-    d: "M27.309 3.136l1.054 1.055a4.503 4.503 0 0 1 .008 6.36l-6.182 6.182-7.273-7.273 6.32-6.32a4.297 4.297 0 0 1 6.077 0l-.004-.004z"
-  }), _react.default.createElement("path", {
-    fill: "#0479A1",
-    d: "M7.634 16.731l-6.24 6.235a4.411 4.411 0 0 0 0 6.24l1.04 1.04a4.411 4.411 0 0 0 6.24 0L14.91 24l-7.275-7.269z"
-  }), _react.default.createElement("path", {
-    fill: "#17A8E0",
-    d: "M21.143 15.691L8.674 3.211a4.411 4.411 0 0 0-6.24 0l-1.04 1.04a4.411 4.411 0 0 0 0 6.24l6.24 6.24 1.04-1.04a8.823 8.823 0 0 1 12.469 0z"
-  }), _react.default.createElement("path", {
-    className: "euiIcon__fillNegative",
-    d: "M21.143 15.691a8.823 8.823 0 0 0-12.474 0l-1.04 1.04L14.909 24l7.28-7.269-1.046-1.04z"
-  }), _react.default.createElement("path", {
-    fill: "#20BBB1",
-    d: "M28.429 22.966l-4.16-4.16-7.28 7.28 4.154 4.16a4.411 4.411 0 0 0 6.24 0l1.04-1.04a4.411 4.411 0 0 0 .006-6.24z"
-  }), _react.default.createElement("path", {
-    fill: "#009B8F",
-    d: "M14.913 24.006l7.277-7.277 2.08 2.081-7.276 7.277z"
-  })));
-};
-
-var icon = EuiIconLogoXpack;
-exports.icon = icon;
-EuiIconLogoXpack.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "EuiIconLogoXpack"
-};

package/lib/components/icon/assets/logo_xpack.svg

@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-  <g fill="none">
-    <path fill="#FDD10D" d="M22.380643,1.80024088 L23.8720716,1.80024088 C26.3544746,1.80023288 28.3686282,3.80927442 28.3749287,6.29166945 L28.3749287,15.0345266 L18.0892144,15.0345266 L18.0892144,6.09738374 C18.0892144,3.72413727 20.0131108,1.80024088 22.3863573,1.80024088 L22.380643,1.80024088 Z" transform="rotate(45 23.232 8.417)"/>
-    <path fill="#0479A1" d="M7.63428571,16.7314286 L1.39428571,22.9657143 C0.566585321,23.7930703 0.101559123,24.9154126 0.101559123,26.0857143 C0.101559123,27.2560159 0.566585321,28.3783582 1.39428571,29.2057143 L2.43428571,30.2457143 C3.26164176,31.0734147 4.38398406,31.5384409 5.55428571,31.5384409 C6.72458737,31.5384409 7.84692967,31.0734147 8.67428571,30.2457143 L14.9085714,24 L7.63428571,16.7314286 Z"/>
-    <path fill="#17A8E0" d="M21.1428571,15.6914286 L8.67428571,3.21142857 C7.84692967,2.38372818 6.72458737,1.91870198 5.55428571,1.91870198 C4.38398406,1.91870198 3.26164176,2.38372818 2.43428571,3.21142857 L1.39428571,4.25142857 C0.566585321,5.07878462 0.101559123,6.20112692 0.101559123,7.37142857 C0.101559123,8.54173023 0.566585321,9.66407253 1.39428571,10.4914286 L7.63428571,16.7314286 L8.67428571,15.6914286 C12.118813,12.2517729 17.6983299,12.2517729 21.1428571,15.6914286 Z"/>
-    <path class="euiIcon__fillNegative" d="M21.1428571,15.6914286 C17.6976741,12.247967 12.1137545,12.247967 8.66857143,15.6914286 L7.62857143,16.7314286 L14.9085714,24 L22.1885714,16.7314286 L21.1428571,15.6914286 Z"/>
-    <path fill="#20BBB1" d="M28.4285714,22.9657143 L24.2685714,18.8057143 L16.9885714,26.0857143 L21.1428571,30.2457143 C21.9702132,31.0734147 23.0925555,31.5384409 24.2628571,31.5384409 C25.4331588,31.5384409 26.5555011,31.0734147 27.3828571,30.2457143 L28.4228571,29.2057143 C29.2513156,28.3791165 29.7173699,27.2571999 29.7184416,26.0868981 C29.7195133,24.9165963 29.2555146,23.7938281 28.4285714,22.9657143 Z"/>
-    <polygon fill="#009B8F" points="14.447 19.937 24.738 19.937 24.738 22.88 14.447 22.88" transform="rotate(-45 19.592 21.409)"/>
-  </g>
-</svg>

package/src/components/accessibility/__snapshots__/keyboard_accessible.test.tsx.snap

@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EuiKeyboardAccessible adds accessibility attributes tabindex and role 1`] = `
-<div
-  role="button"
-  tabindex="0"
-/>
-`;
-
-exports[`EuiKeyboardAccessible doesn't override pre-existing accessibility attributes role 1`] = `
-<div
-  role="button"
-  tabindex="0"
-/>
-`;
-
-exports[`EuiKeyboardAccessible doesn't override pre-existing accessibility attributes tabindex 1`] = `
-<div
-  role="button"
-  tabindex="1"
-/>
-`;

package/src/components/accessibility/__snapshots__/screen_reader.test.tsx.snap

@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EuiScreenReaderOnly adds an accessibility class to a child element and combines other classNames (foo, bar) given as props on the child 1`] = `
-<p
-  class="euiScreenReaderOnly foo bar"
->
-  This paragraph is not visibile to sighted users but will be read by screenreaders.
-</p>
-`;
-
-exports[`EuiScreenReaderOnly adds an accessibility class to a child element when used with no props 1`] = `
-<p
-  class="euiScreenReaderOnly"
->
-  This paragraph is not visibile to sighted users but will be read by screenreaders.
-</p>
-`;

package/src/components/accessibility/index.ts

@@ -1,2 +0,0 @@
-export { EuiKeyboardAccessible } from './keyboard_accessible';
-export { EuiScreenReaderOnly } from './screen_reader';

package/src/components/accessibility/keyboard_accessible.test.tsx

@@ -1,236 +0,0 @@
-import React from 'react';
-import { render, shallow } from 'enzyme';
-
-import { EuiKeyboardAccessible } from './keyboard_accessible';
-
-import { keyCodes } from '../../services';
-
-const noop = () => {
-  // eslint-disable-line no-empty
-};
-
-describe('EuiKeyboardAccessible', () => {
-  describe('throws an error', () => {
-    // tslint:disable-next-line:no-console
-    const oldConsoleError = console.error;
-    let consoleStub: jest.Mock<typeof console.error>;
-
-    beforeEach(() => {
-      // We don't use jest.spyOn() here, because EUI's tests apply a global
-      // console.error() override that throws an exception. For these
-      // tests, we just want to know if console.error() was called.
-
-      // tslint:disable-next-line:no-console
-      console.error = consoleStub = jest.fn();
-    });
-
-    afterEach(() => {
-      // tslint:disable-next-line:no-console
-      console.error = oldConsoleError;
-    });
-
-    test("when there's no child", () => {
-      // @ts-ignore unused var
-      const component = <EuiKeyboardAccessible />; // eslint-disable-line @typescript-eslint/no-unused-vars
-
-      expect(consoleStub).toBeCalled();
-      expect(consoleStub.mock.calls[0][0]).toMatch(
-        'needs to wrap an element with which the user interacts.'
-      );
-    });
-
-    test('when the child is a button', () => {
-      // @ts-ignore unused var
-      const component = ( // eslint-disable-line @typescript-eslint/no-unused-vars
-        <EuiKeyboardAccessible>
-          <button onClick={noop} />
-        </EuiKeyboardAccessible>
-      );
-
-      expect(consoleStub).toBeCalled();
-      expect(consoleStub.mock.calls[0][0]).toMatch(
-        "doesn't need to be used on a button."
-      );
-    });
-
-    test('when the child is a link with an href', () => {
-      // @ts-ignore unused var
-      const component = ( // eslint-disable-line @typescript-eslint/no-unused-vars
-        <EuiKeyboardAccessible>
-          <a href="#" onClick={noop}>
-            Click me
-          </a>
-        </EuiKeyboardAccessible>
-      );
-
-      expect(consoleStub).toBeCalled();
-      expect(consoleStub.mock.calls[0][0]).toMatch(
-        "doesn't need to be used on a link if it has a href attribute."
-      );
-    });
-
-    test("when the child doesn't have an onClick prop", () => {
-      // @ts-ignore unused var
-      const component = ( // eslint-disable-line @typescript-eslint/no-unused-vars
-        <EuiKeyboardAccessible>
-          <div />
-        </EuiKeyboardAccessible>
-      );
-
-      expect(consoleStub).toBeCalled();
-      expect(consoleStub.mock.calls[0][0]).toMatch(
-        'needs to wrap an element which has an onClick prop assigned.'
-      );
-    });
-
-    test("when the child's onClick prop isn't a function", () => {
-      // @ts-ignore unused var
-      const component = ( // eslint-disable-line @typescript-eslint/no-unused-vars
-        <EuiKeyboardAccessible>
-          <div
-            // @ts-ignore not a valid prop type
-            onClick="notAFunction"
-          />
-        </EuiKeyboardAccessible>
-      );
-
-      expect(consoleStub).toBeCalled();
-      expect(consoleStub.mock.calls[0][0]).toMatch(
-        "child's onClick prop needs to be a function."
-      );
-    });
-  });
-
-  describe("doesn't throw an error", () => {
-    let oldConsoleError: typeof console.error;
-    let consoleStub: jest.Mock<typeof console.error>;
-
-    beforeEach(() => {
-      // tslint:disable-next-line:no-console
-      oldConsoleError = console.error;
-      // tslint:disable-next-line:no-console
-      console.error = consoleStub = jest.fn();
-    });
-
-    afterEach(() => {
-      // tslint:disable-next-line:no-console
-      console.error = oldConsoleError;
-    });
-
-    test('when the element is a link without an href', () => {
-      // @ts-ignore unused var
-      const component = ( // eslint-disable-line @typescript-eslint/no-unused-vars
-        <EuiKeyboardAccessible>
-          <a onClick={noop}>Click me</a>
-        </EuiKeyboardAccessible>
-      );
-
-      expect(consoleStub).not.toBeCalled();
-    });
-  });
-
-  describe('adds accessibility attributes', () => {
-    test('tabindex and role', () => {
-      const $button = render(
-        <EuiKeyboardAccessible>
-          <div onClick={noop} />
-        </EuiKeyboardAccessible>
-      );
-
-      expect($button).toMatchSnapshot();
-    });
-  });
-
-  describe("doesn't override pre-existing accessibility attributes", () => {
-    test('tabindex', () => {
-      const $button = render(
-        <EuiKeyboardAccessible>
-          <div
-            onClick={noop}
-            tabIndex={1} // eslint-disable-line jsx-a11y/tabindex-no-positive
-          />
-        </EuiKeyboardAccessible>
-      );
-
-      expect($button).toMatchSnapshot();
-    });
-
-    test('role', () => {
-      const $button = render(
-        <EuiKeyboardAccessible>
-          <div onClick={noop} role="button" tabIndex={0} />
-        </EuiKeyboardAccessible>
-      );
-
-      expect($button).toMatchSnapshot();
-    });
-  });
-
-  describe('calls onClick', () => {
-    test('on ENTER keyup', () => {
-      const onClickHandler = jest.fn();
-
-      const $button = shallow(
-        <EuiKeyboardAccessible>
-          <div data-div onClick={onClickHandler} />
-        </EuiKeyboardAccessible>
-      );
-
-      $button.find('[data-div]').simulate('keyup', {
-        keyCode: keyCodes.ENTER,
-      });
-
-      expect(onClickHandler).toBeCalled();
-    });
-
-    test('on SPACE keyup', () => {
-      const onClickHandler = jest.fn();
-
-      const $button = shallow(
-        <EuiKeyboardAccessible>
-          <div data-div onClick={onClickHandler} />
-        </EuiKeyboardAccessible>
-      );
-
-      $button.find('[data-div]').simulate('keyup', {
-        keyCode: keyCodes.SPACE,
-      });
-
-      expect(onClickHandler).toBeCalled();
-    });
-  });
-
-  describe("child's props", () => {
-    test('onKeyUp handler is called', () => {
-      const onKeyUpHandler = jest.fn();
-
-      const $button = shallow(
-        <EuiKeyboardAccessible>
-          <div data-div onKeyUp={onKeyUpHandler} />
-        </EuiKeyboardAccessible>
-      );
-
-      $button.find('[data-div]').simulate('keyup', {
-        keyCode: 0,
-      });
-
-      expect(onKeyUpHandler).toBeCalled();
-    });
-
-    test('onKeyDown handler is called', () => {
-      const onKeyDownHandler = jest.fn();
-
-      const $button = shallow(
-        <EuiKeyboardAccessible>
-          <div data-div onKeyDown={onKeyDownHandler} />
-        </EuiKeyboardAccessible>
-      );
-
-      $button.find('[data-div]').simulate('keydown', {
-        keyCode: 0,
-      });
-
-      expect(onKeyDownHandler).toBeCalled();
-    });
-  });
-});

package/src/components/accessibility/keyboard_accessible.ts

@@ -1,116 +0,0 @@
-/**
- * Interactive elements must be able to receive focus.
- *
- * Ideally, this means using elements that are natively keyboard accessible (<a href="">,
- * <input type="button">, or <button>). Note that links should be used when navigating and buttons
- * should be used when performing an action on the page.
- *
- * If, however, you need to use elements that aren't natively keyboard accessible (for example, <div>,
- * <p>, or <a> without the href attribute), then you need to allow them to receive focus and to
- * respond to keyboard input. The workaround is to:
- *
- *   - Give the element tabindex="0" so that it can receive keyboard focus.
- *   - Add a JavaScript onkeyup event handler that triggers element functionality if the Enter key
- *     is pressed while the element is focused. This is necessary because some browsers do not trigger
- *    onclick events for such elements when activated via the keyboard.
- *   - If the item is meant to function as a button, the onkeyup event handler should also detect the
- *     Spacebar in addition to the Enter key, and the element should be given role="button".
- *
- * Wrap any such elements that aren't natively keyboard accessible in this component to automatically
- * apply the above workaround to them.
- */
-
-import { Component, cloneElement, KeyboardEvent, ReactElement } from 'react';
-
-import { keyCodes } from '../../services';
-
-interface Props {
-  children: ReactElement<any>;
-}
-
-export class EuiKeyboardAccessible extends Component<Props> {
-  onKeyDown = (e: KeyboardEvent<any>) => {
-    // Prevent a scroll from occurring if the user has hit space.
-    if (e.keyCode === keyCodes.SPACE) {
-      e.preventDefault();
-    }
-
-    if (this.props.children.props.onKeyDown) {
-      this.props.children.props.onKeyDown(e);
-    }
-  };
-
-  onKeyUp = (e: KeyboardEvent<any>) => {
-    // Support keyboard accessibility by emulating mouse click on ENTER or SPACE keypress.
-    if (e.keyCode === keyCodes.ENTER || e.keyCode === keyCodes.SPACE) {
-      // Delegate to the click handler on the element.
-      this.props.children.props.onClick(e);
-    }
-
-    if (this.props.children.props.onKeyUp) {
-      this.props.children.props.onKeyUp(e);
-    }
-  };
-
-  applyKeyboardAccessibility = (child: ReactElement<any>) => {
-    // Add attributes required for accessibility unless they are already specified.
-    const props = {
-      tabIndex: '0',
-      role: 'button',
-      ...child.props,
-      onKeyDown: this.onKeyDown,
-      onKeyUp: this.onKeyUp,
-    };
-
-    return cloneElement(child, props);
-  };
-
-  render() {
-    return this.applyKeyboardAccessibility(this.props.children);
-  }
-}
-
-// @ts-ignore defining this as a static on EuiKeyboardAccessible breaks the
-// tests
-EuiKeyboardAccessible.propTypes = {
-  children: keyboardInaccessibleElement,
-};
-
-function keyboardInaccessibleElement(
-  props: Props,
-  propName: string,
-  componentName: string
-) {
-  const child = props.children;
-
-  if (!child) {
-    throw new Error(
-      `${componentName} needs to wrap an element with which the user interacts.`
-    );
-  }
-
-  // The whole point of this component is to hack in functionality that native buttons provide
-  // by default.
-  if (child.type === 'button') {
-    throw new Error(`${componentName} doesn't need to be used on a button.`);
-  }
-
-  if (child.type === 'a' && child.props.href !== undefined) {
-    throw new Error(
-      `${componentName} doesn't need to be used on a link if it has a href attribute.`
-    );
-  }
-
-  // We're emulating a click action, so we should already have a regular click handler defined.
-  if (!child.props.onClick) {
-    throw new Error(
-      `${componentName} needs to wrap an element which has an onClick prop assigned.`
-    );
-  }
-
-  if (typeof child.props.onClick !== 'function') {
-    throw new Error(
-      `${componentName}'s child's onClick prop needs to be a function.`
-    );
-  }
-}

package/src/components/accessibility/screen_reader.test.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { render } from 'enzyme';
-
-import { EuiScreenReaderOnly } from './screen_reader';
-
-describe('EuiScreenReaderOnly', () => {
-  describe('adds an accessibility class to a child element', () => {
-    test('when used with no props', () => {
-      const $paragraph = render(
-        <EuiScreenReaderOnly>
-          <p>
-            This paragraph is not visibile to sighted users but will be read by
-            screenreaders.
-          </p>
-        </EuiScreenReaderOnly>
-      );
-
-      expect($paragraph).toMatchSnapshot();
-    });
-    test('and combines other classNames (foo, bar) given as props on the child', () => {
-      const $paragraph = render(
-        <EuiScreenReaderOnly>
-          <p className="foo bar">
-            This paragraph is not visibile to sighted users but will be read by
-            screenreaders.
-          </p>
-        </EuiScreenReaderOnly>
-      );
-
-      expect($paragraph).toMatchSnapshot();
-    });
-  });
-});

package/src/components/accessibility/screen_reader.tsx

@@ -1,19 +0,0 @@
-import { cloneElement, ReactElement, FunctionComponent } from 'react';
-import classNames from 'classnames';
-
-export interface EuiScreenReaderOnlyProps {
-  children: ReactElement<any>;
-}
-
-export const EuiScreenReaderOnly: FunctionComponent<
-  EuiScreenReaderOnlyProps
-> = ({ children }) => {
-  const classes = classNames('euiScreenReaderOnly', children.props.className);
-
-  const props = {
-    ...children.props,
-    className: classes,
-  };
-
-  return cloneElement(children, props);
-};