@elastic/eui 12.2.0 → 12.4.0

package/src/services/window_event/window_event.ts

@@ -1,40 +0,0 @@
-import { Component } from 'react';
-
-type EventNames = keyof WindowEventMap;
-
-interface Props<Ev extends EventNames> {
-  event: Ev;
-  handler: (this: Window, ev: WindowEventMap[Ev]) => any;
-}
-
-export class EuiWindowEvent<E extends EventNames> extends Component<Props<E>> {
-  componentDidMount() {
-    this.addEvent(this.props);
-  }
-
-  componentDidUpdate(prevProps: Props<E>) {
-    if (
-      prevProps.event !== this.props.event ||
-      prevProps.handler !== this.props.handler
-    ) {
-      this.removeEvent(prevProps);
-      this.addEvent(this.props);
-    }
-  }
-
-  componentWillUnmount() {
-    this.removeEvent(this.props);
-  }
-
-  addEvent<Ev extends EventNames>({ event, handler }: Props<Ev>) {
-    window.addEventListener(event, handler);
-  }
-
-  removeEvent<Ev extends EventNames>({ event, handler }: Props<Ev>) {
-    window.removeEventListener(event, handler);
-  }
-
-  render() {
-    return null;
-  }
-}

package/src/test/find_test_subject.test.js

@@ -1,56 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-
-import { findTestSubject } from './find_test_subject';
-
-describe('findTestSubject', () => {
-  test('finds the specified element in a mounted component', () => {
-    const TestComponent = () => <div data-test-subj="test" />;
-    const component = mount(<TestComponent />);
-    const element = findTestSubject(component, 'test');
-
-    expect(element.length).toBe(1);
-  });
-
-  test('finds the specified element even if it has multiple identifiers', () => {
-    const TestComponent = () => <div data-test-subj="test1 test2" />;
-    const component = mount(<TestComponent />);
-    const element = findTestSubject(component, 'test2');
-
-    expect(element.length).toBe(1);
-  });
-
-  test('finds multiple elements with the same identifier', () => {
-    const TestComponent = () => (
-      <div>
-        <div data-test-subj="test" />
-        <div data-test-subj="test" />
-      </div>
-    );
-    const component = mount(<TestComponent />);
-    const element = findTestSubject(component, 'test');
-
-    expect(element.length).toBe(2);
-  });
-
-  describe('matcher optional argument', () => {
-    test('finds multiple elements with identifiers beginning with the same string', () => {
-      const TestComponent = () => (
-        <div>
-          <div data-test-subj="test1" />
-          <div data-test-subj="test2" />
-        </div>
-      );
-      const component = mount(<TestComponent />);
-      const element = findTestSubject(component, 'test', '^=');
-
-      expect(element.length).toBe(2);
-    });
-
-    test('throws an error if unsupported matcher is provided', () => {
-      const TestComponent = () => <div data-test-subj="test" />;
-      const component = mount(<TestComponent />);
-      expect(() => findTestSubject(component, 'test', '===')).toThrow();
-    });
-  });
-});

package/src/test/find_test_subject.ts

@@ -1,48 +0,0 @@
-import { ReactWrapper, ShallowWrapper } from 'enzyme';
-
-type FindTestSubject<T extends ShallowWrapper | ReactWrapper> = (
-  mountedComponent: T,
-  testSubjectSelector: string
-) => ReturnType<T['find']>;
-
-/**
- * Find node which matches a specific test subject selector. Returns ReactWrappers around DOM element,
- * https://github.com/airbnb/enzyme/tree/master/docs/api/ReactWrapper.
- * Common use cases include calling simulate or getDOMNode on the returned ReactWrapper.
- *
- * The ~= matcher looks for the value in space-separated list, allowing support for multiple data-test-subj
- * values on a single element. See https://www.w3.org/TR/selectors-3/#attribute-selectors for more
- * info on the other possible matchers.
- */
-
-const MATCHERS = [
-  '=', // Exact match
-  '~=', // Exists in a space-separated list
-  '|=', // Begins with substring, followed by '-'
-  '^=', // Begins with substring
-  '$=', // Ends with substring
-  '*=', // Contains substring
-];
-
-export const findTestSubject: FindTestSubject<ShallowWrapper | ReactWrapper> = (
-  mountedComponent,
-  testSubjectSelector,
-  matcher = '~='
-) => {
-  if (!MATCHERS.includes(matcher)) {
-    throw new Error(
-      `Matcher ${matcher} not found in list of allowed matchers: ${MATCHERS.join(
-        ' '
-      )}`
-    );
-  }
-
-  const testSubject = mountedComponent.find(
-    `[data-test-subj${matcher}"${testSubjectSelector}"]`
-  );
-
-  // Restores Enzyme 2's find behavior, which was to only return ReactWrappers around DOM elements.
-  // Enzyme 3 returns ReactWrappers around both DOM elements and React components.
-  // https://github.com/airbnb/enzyme/issues/1174
-  return testSubject.hostNodes();
-};

package/src/test/index.ts

@@ -1,7 +0,0 @@
-export { requiredProps } from './required_props';
-export { takeMountedSnapshot } from './take_mounted_snapshot';
-export { findTestSubject } from './find_test_subject';
-export {
-  startThrowingReactWarnings,
-  stopThrowingReactWarnings,
-} from './react_warnings';

package/src/test/patch_random.ts

@@ -1,10 +0,0 @@
-const originalMathRandom = Math.random;
-
-export function patchRandom() {
-  let x = 0;
-  Math.random = () => (x += 0.00001);
-}
-
-export function unpatchRandom() {
-  Math.random = originalMathRandom;
-}

package/src/test/react_warnings.ts

@@ -1,26 +0,0 @@
-/* tslint:disable:no-console */
-
-/*
-  Use this utility to throw errors whenever React complains via the console
-  about things like invalid propTypes. This lets us assert that a propType
-  check works correctly with `toThrow`.
-
-  Usage looks like:
-
-  beforeAll(startThrowingReactWarnings);
-  afterAll(stopThrowingReactWarnings);
-*/
-
-const consoleWarn = console.warn;
-const consoleError = console.error;
-
-export const startThrowingReactWarnings = () => {
-  console.warn = console.error = (msg: any) => {
-    throw msg;
-  };
-};
-
-export const stopThrowingReactWarnings = () => {
-  console.warn = consoleWarn;
-  console.error = consoleError;
-};

package/src/test/required_props.ts

@@ -1,7 +0,0 @@
-// We expect all React components to be able to support these props,
-// which will be rendered as HTML attributes.
-export const requiredProps = {
-  'aria-label': 'aria-label',
-  className: 'testClass1 testClass2',
-  'data-test-subj': 'test subject string',
-};

package/src/test/take_mounted_snapshot.ts

@@ -1,17 +0,0 @@
-import { ReactWrapper } from 'enzyme';
-import { Component } from 'react';
-
-/**
- * Use this function to generate a Jest snapshot of components that have been fully rendered
- * using Enzyme's `mount` method. Typically, a mounted component will result in a snapshot
- * containing both React components and HTML elements. This function removes the React components,
- * leaving only HTML elements in the snapshot.
- */
-export const takeMountedSnapshot = (
-  mountedComponent: ReactWrapper<{}, {}, Component>
-) => {
-  const html = mountedComponent.html();
-  const template = document.createElement('template');
-  template.innerHTML = html;
-  return template.content.firstChild;
-};

package/src/test/time_execution.ts

@@ -1,25 +0,0 @@
-export function timeExecution(fn: () => void) {
-  const start = process.hrtime();
-  fn();
-  const [seconds, nanoseconds] = process.hrtime(start);
-  const milliseconds = seconds * 1000 + nanoseconds / 1000000;
-  return milliseconds;
-}
-
-export function benchmarkFunction(
-  fn: () => void,
-  warmupRuns = 3,
-  benchmarkRuns = 3
-) {
-  // warmup v8 optimizations, cache, etc
-  for (let i = 0; i < warmupRuns; i++) {
-    fn();
-  }
-
-  const runTimes = [];
-  for (let i = 0; i < benchmarkRuns; i++) {
-    runTimes.push(timeExecution(fn));
-  }
-
-  return Math.min.apply(null, runTimes);
-}

package/src/themes/index.d.ts

@@ -1,4 +0,0 @@
-declare module '@elastic/eui/dist/eui_theme_*.json' {
-  const value: any;
-  export default value;
-}

package/src/utils/index.ts

@@ -1 +0,0 @@
-export * from './prop_types';

package/src/utils/prop_types/__snapshots__/with_required_prop.test.ts.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`withRequiredProp warns when the base prop is present and valid but the required prop is missing 1`] = `"Warning: Failed exampleProp type: Property \\"exampleProp\\" was passed without corresponding property \\"requiredProp\\""`;
-
-exports[`withRequiredProp warns when the underlying prop validator fails 1`] = `"Warning: Failed exampleProp type: Invalid exampleProp \`exampleProp\` of type \`number\` supplied to \`ExampleComponent\`, expected \`string\`."`;
-
-exports[`withRequiredProp warns with a custom message when validation fails 1`] = `"Warning: Failed exampleProp type: Property \\"exampleProp\\" was passed without corresponding property \\"requiredProp\\"; a custom message"`;

package/src/utils/prop_types/index.ts

@@ -1,7 +0,0 @@
-import { is } from './is';
-import { withRequiredProp } from './with_required_prop';
-
-export const EuiPropTypes = {
-  is,
-  withRequiredProp,
-};

package/src/utils/prop_types/is.ts

@@ -1,30 +0,0 @@
-import { isNil } from '../../services/predicate';
-
-export const is = <T>(expectedValue: any) => {
-  const validator = (props: T, propName: keyof T, componentName: string) => {
-    const compName = componentName || 'ANONYMOUS';
-    const value = props[propName];
-    if (value !== expectedValue) {
-      return new Error(`[${propName}] property in [${compName}] component is expected to equal [${expectedValue}] but
-         [${value}] was provided instead.`);
-    }
-    return null;
-  };
-
-  validator.isRequired = (
-    props: T,
-    propName: keyof T,
-    componentName: string
-  ) => {
-    const compName = componentName || 'ANONYMOUS';
-    const value = props[propName];
-    if (isNil(value)) {
-      return new Error(
-        `[${propName}] property in [${compName}] component is required but seems to be missing`
-      );
-    }
-    return validator(props, propName, componentName);
-  };
-
-  return validator;
-};

package/src/utils/prop_types/with_required_prop.test.ts

@@ -1,83 +0,0 @@
-import { withRequiredProp } from './with_required_prop';
-import PropTypes from 'prop-types';
-
-describe('withRequiredProp', () => {
-  it('warns when the underlying prop validator fails', () => {
-    expect(() => {
-      PropTypes.checkPropTypes(
-        {
-          exampleProp: withRequiredProp(PropTypes.string, 'requiredProp'),
-        },
-        {
-          exampleProp: 15,
-        },
-        'exampleProp',
-        'ExampleComponent'
-      );
-    }).toThrowErrorMatchingSnapshot();
-  });
-
-  it('warns when the base prop is present and valid but the required prop is missing', () => {
-    expect(() => {
-      PropTypes.checkPropTypes(
-        {
-          exampleProp: withRequiredProp(PropTypes.string, 'requiredProp'),
-        },
-        {
-          exampleProp: 'hello',
-        },
-        'exampleProp',
-        'ExampleComponent'
-      );
-    }).toThrowErrorMatchingSnapshot();
-  });
-
-  it('warns with a custom message when validation fails', () => {
-    expect(() => {
-      PropTypes.checkPropTypes(
-        {
-          exampleProp: withRequiredProp(
-            PropTypes.string,
-            'requiredProp',
-            'a custom message'
-          ),
-        },
-        {
-          exampleProp: 'hello',
-        },
-        'exampleProp',
-        'ExampleComponent'
-      );
-    }).toThrowErrorMatchingSnapshot();
-  });
-
-  it('does not warn when the base property is missing', () => {
-    expect(() => {
-      PropTypes.checkPropTypes(
-        {
-          exampleProp: withRequiredProp(PropTypes.string, 'requiredProp'),
-        },
-        {},
-        'exampleProp',
-        'ExampleComponent'
-      );
-    }).not.toThrow();
-  });
-
-  it('does not warn when both the base property and required properties exist', () => {
-    expect(() => {
-      PropTypes.checkPropTypes(
-        {
-          exampleProp: withRequiredProp(PropTypes.string, 'requiredProp'),
-          requiredProp: PropTypes.number,
-        },
-        {
-          exampleProp: 'hello',
-          requiredProp: 5,
-        },
-        'exampleProp',
-        'ExampleComponent'
-      );
-    }).not.toThrow();
-  });
-});

package/src/utils/prop_types/with_required_prop.ts

@@ -1,40 +0,0 @@
-/**
- * PropType validation that, if the property is present,
- * validates against a proptype and verifies that another property exists
- *
- * example:
- * ExampleComponent.propTypes = {
- *   items: PropTypes.array,
- *   itemId: withRequiredProp(PropTypes.string, 'items', 'itemId is required to extract the ID from an item')
- * }
- *
- * this validator warns if ExampleComponent is passed an `items` prop but not `itemId`
- */
-export const withRequiredProp = (
-  proptype: any,
-  requiredPropName: string,
-  messageDescription?: string
-) => {
-  const validator = (...args: any[]) => {
-    const [props, propName] = args;
-
-    // run the proptype for this property
-    let result = proptype(...args);
-
-    // if the property type checking passed then check for the required prop
-    if (result == null) {
-      // if this property was passed, check that the required property also exists
-      if (props[propName] != null && props[requiredPropName] == null) {
-        result = new Error(
-          `Property "${propName}" was passed without corresponding property "${requiredPropName}"${
-            messageDescription ? `; ${messageDescription}` : ''
-          }`
-        );
-      }
-    }
-
-    return result;
-  };
-
-  return validator;
-};

package/src/webpack.config.js

@@ -1,95 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-
-const path = require('path');
-const webpack = require('webpack');
-const CircularDependencyPlugin = require('circular-dependency-plugin');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-
-const isProduction = process.env.NODE_ENV === 'production';
-
-const plugins = [
-  new webpack.NoEmitOnErrorsPlugin(),
-  new CircularDependencyPlugin({
-    exclude: /node_modules/,
-    failOnError: true,
-  }),
-  // run TypeScript during webpack build
-  new ForkTsCheckerWebpackPlugin({
-    tsconfig: path.resolve(__dirname, '..', 'tsconfig.json'),
-    async: false, // makes errors more visible, but potentially less performant
-  }),
-
-  // Force EuiIcon's dynamic imports to be included in the single eui.js build,
-  // instead of being split out into multiple files
-  new webpack.optimize.LimitChunkCountPlugin({
-    maxChunks: 1,
-  }),
-];
-
-module.exports = {
-  mode: isProduction ? 'production' : 'development',
-
-  devtool: isProduction ? 'source-map' : 'cheap-module-source-map',
-
-  entry: {
-    guide: './index.js',
-  },
-
-  context: __dirname,
-
-  output: {
-    path: path.resolve(__dirname, '../dist'),
-    filename: `eui${isProduction ? '.min' : ''}.js`,
-  },
-
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.json'],
-  },
-
-  // Specify where these libraries should be found
-  externals: {
-    moment: 'window.moment',
-    'prop-types': 'window.PropTypes',
-    react: 'window.React',
-    'react-dom': 'window.ReactDOM',
-  },
-
-  module: {
-    rules: [
-      {
-        test: /\.(js|tsx?)$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.scss$/,
-        loaders: [
-          'style-loader',
-          'css-loader',
-          'postcss-loader',
-          'sass-loader',
-        ],
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.(woff|woff2|ttf|eot|ico|png|gif|jpg|jpeg)(\?|$)/,
-        loader: 'file-loader',
-      },
-    ],
-  },
-
-  plugins,
-};
-
-if (isProduction) {
-  const optimization = (module.exports.optimization =
-    module.exports.optimization || {});
-  optimization.minimizer = [
-    new UglifyJsPlugin({
-      uglifyOptions: {
-        sourceMap: true,
-      },
-    }),
-  ];
-}

package/tsconfig-builttypes.json

@@ -1,6 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "include": [
-    "eui.d.ts"
-  ]
-}

package/tsconfig.json

@@ -1,60 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "rootDir": ".",
-
-    // emit files to the `types` dir, these are ignored by everything but TS needs _somewhere_ to emit
-    "outDir": "types",
-
-    // generate declaration files
-    "declaration": true,
-
-    // don't allow un-used variables
-    "noUnusedLocals": true,
-
-    // Enables all strict type checking options.
-    "strict": true,
-
-    // Output as ES Modules & esnext code, webpack will handle further conversion
-    "module": "esnext",
-    "target": "esnext",
-
-    // Allows default imports from modules with no default export. This does not affect code emit, just type checking.
-    // We have to enable this option explicitly since `esModuleInterop` doesn't enable it automatically when ES2015 or
-    // ESNext module format is used.
-    "allowSyntheticDefaultImports": true,
-
-    // Support .tsx files and transform JSX into calls to React.createElement
-    "jsx": "react",
-
-    // Emits __importStar and __importDefault helpers for runtime babel ecosystem compatibility.
-    "esModuleInterop": true,
-
-    // Resolve modules in the same way as Node.js. Aka make `require` works the
-    // same in TypeScript as it does in Node.js.
-    "moduleResolution": "node",
-
-    // Disallow inconsistently-cased references to the same file.
-    "forceConsistentCasingInFileNames": true,
-
-    // enables "core language features"
-    "lib": [
-      // ESNext auto includes previous versions all the way back to es5
-      "esnext",
-      // includes support for browser APIs
-      "dom"
-    ],
-
-    // Specifies where to find library definitions. When this is explicitly set,
-    // it has to include the default location i.e. node_modules/@types
-    "typeRoots": ["node_modules/@types", "src/custom_typings", "src-framer/custom_typings"]
-  },
-  "include": [
-    "./src/**/*",
-    "./src-docs/**/*",
-    "./src-framer/**/*"
-  ],
-  "exclude": [
-    "./src-framer/code/canvas.tsx"
-  ]
-}