@elastic/eui 12.2.0 → 12.4.0

package/src/components/date_picker/react-datepicker.d.ts

@@ -1,114 +0,0 @@
-// Type definitions for react-datepicker 1.8
-// Project: https://github.com/Hacker0x01/react-datepicker
-// Definitions by: Rajab Shakirov <https://github.com/radziksh>,
-//                 Andrey Balokha <https://github.com/andrewBalekha>,
-//                 Greg Smith <https://github.com/smrq>,
-//                 Platon Pronko <https://github.com/Rogach>
-//                 Roy Xue <https://github.com/royxue>
-//                 Koala Human <https://github.com/KoalaHuman>
-//                 Sean Kelley <https://github.com/seansfkelley>
-//                 Justin Grant <https://github.com/justingrant>
-// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.8
-
-import * as React from 'react';
-import * as moment from 'moment';
-
-export interface ReactDatePickerProps {
-  adjustDateOnChange?: boolean;
-  allowSameDay?: boolean;
-  autoComplete?: string;
-  autoFocus?: boolean;
-  calendarClassName?: string;
-  children?: React.ReactNode;
-  className?: string;
-  customInput?: React.ReactNode;
-  customInputRef?: string;
-  dateFormat?: string | string[];
-  dateFormatCalendar?: string;
-  dayClassName?(date: moment.Moment): string | null;
-  disabled?: boolean;
-  disabledKeyboardNavigation?: boolean;
-  dropdownMode?: 'scroll' | 'select';
-  endDate?: moment.Moment;
-  excludeDates?: moment.Moment[];
-  excludeTimes?: moment.Moment[];
-  filterDate?(date: moment.Moment): boolean;
-  fixedHeight?: boolean;
-  forceShowMonthNavigation?: boolean;
-  formatWeekNumber?(date: moment.Moment): string | number;
-  highlightDates?: moment.Moment[];
-  id?: string;
-  includeDates?: moment.Moment[];
-  includeTimes?: moment.Moment[];
-  inline?: boolean;
-  isClearable?: boolean;
-  locale?: string;
-  maxDate?: moment.Moment;
-  maxTime?: moment.Moment;
-  minDate?: moment.Moment;
-  minTime?: moment.Moment;
-  monthsShown?: number;
-  name?: string;
-  onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
-  onChange(
-    date: moment.Moment | null,
-    event: React.SyntheticEvent<any> | undefined
-  ): void;
-  onChangeRaw?(event: React.FocusEvent<HTMLInputElement>): void;
-  onClickOutside?(event: React.MouseEvent<HTMLDivElement>): void;
-  onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
-  onKeyDown?(event: React.KeyboardEvent<HTMLDivElement>): void;
-  onMonthChange?(date: moment.Moment): void;
-  onSelect?(
-    date: moment.Moment,
-    event: React.SyntheticEvent<any> | undefined
-  ): void;
-  onWeekSelect?(
-    firstDayOfWeek: moment.Moment,
-    weekNumber: string | number,
-    event: React.SyntheticEvent<any> | undefined
-  ): void;
-  onYearChange?(date: moment.Moment): void;
-  openToDate?: moment.Moment;
-  peekNextMonth?: boolean;
-  placeholderText?: string;
-  popperClassName?: string;
-  popperContainer?(props: { children: React.ReactNode[] }): React.ReactNode;
-  popperPlacement?: string;
-  preventOpenOnFocus?: boolean;
-  readOnly?: boolean;
-  required?: boolean;
-  scrollableMonthYearDropdown?: boolean;
-  scrollableYearDropdown?: boolean;
-  selected?: moment.Moment | null;
-  selectsEnd?: boolean;
-  selectsStart?: boolean;
-  shouldCloseOnSelect?: boolean;
-  showDisabledMonthNavigation?: boolean;
-  showMonthDropdown?: boolean;
-  showMonthYearDropdown?: boolean;
-  showTimeSelect?: boolean;
-  showTimeSelectOnly?: boolean;
-  showWeekNumbers?: boolean;
-  showYearDropdown?: boolean;
-  startDate?: moment.Moment;
-  startOpen?: boolean;
-  tabIndex?: number;
-  timeCaption?: string;
-  timeFormat?: string;
-  timeIntervals?: number;
-  title?: string;
-  todayButton?: string;
-  useShortMonthInDropdown?: boolean;
-  useWeekdaysShort?: boolean;
-  utcOffset?: number;
-  value?: string;
-  weekLabel?: string;
-  withPortal?: boolean;
-  yearDropdownItemNumber?: number;
-}
-declare const ReactDatePicker: React.ClassicComponentClass<
-  ReactDatePickerProps
->;
-export default ReactDatePicker;

package/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.js.snap

@@ -1,106 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EuiSuperDatePicker is rendered 1`] = `
-<EuiFlexGroup
-  className="euiSuperDatePicker__flexWrapper"
-  gutterSize="s"
-  responsive={false}
->
-  <EuiFlexItem>
-    <EuiFormControlLayout
-      className="euiSuperDatePicker"
-      compressed={false}
-      isLoading={false}
-      prepend={
-        <EuiQuickSelectPopover
-          applyRefreshInterval={null}
-          applyTime={[Function]}
-          commonlyUsedRanges={
-            Array [
-              Object {
-                "end": "now/d",
-                "label": "Today",
-                "start": "now/d",
-              },
-              Object {
-                "end": "now-1d/d",
-                "label": "Yesterday",
-                "start": "now-1d/d",
-              },
-              Object {
-                "end": "now/w",
-                "label": "This week",
-                "start": "now/w",
-              },
-              Object {
-                "end": "now",
-                "label": "Week to date",
-                "start": "now/w",
-              },
-              Object {
-                "end": "now/M",
-                "label": "This month",
-                "start": "now/M",
-              },
-              Object {
-                "end": "now",
-                "label": "Month to date",
-                "start": "now/M",
-              },
-              Object {
-                "end": "now/y",
-                "label": "This year",
-                "start": "now/y",
-              },
-              Object {
-                "end": "now",
-                "label": "Year to date",
-                "start": "now/y",
-              },
-            ]
-          }
-          dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
-          end="now"
-          isAutoRefreshOnly={false}
-          isPaused={true}
-          recentlyUsedRanges={Array []}
-          refreshInterval={0}
-          start="now-15m"
-        />
-      }
-    >
-      <EuiDatePickerRange
-        className="euiDatePickerRange--inGroup"
-        endDateControl={<div />}
-        iconType={false}
-        isCustom={true}
-        startDateControl={<div />}
-      >
-        <button
-          className="euiSuperDatePicker__prettyFormat"
-          data-test-subj="superDatePickerShowDatesButton"
-          onClick={[Function]}
-        >
-          Last 15 minutes
-          <span
-            className="euiSuperDatePicker__prettyFormatLink"
-          >
-            Show dates
-          </span>
-        </button>
-      </EuiDatePickerRange>
-    </EuiFormControlLayout>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  >
-    <EuiSuperUpdateButton
-      data-test-subj="superDatePickerApplyTimeButton"
-      isDisabled={false}
-      isLoading={false}
-      needsUpdate={false}
-      onClick={[Function]}
-    />
-  </EuiFlexItem>
-</EuiFlexGroup>
-`;

package/src/components/date_picker/super_date_picker/__snapshots__/super_update_button.test.js.snap

@@ -1,111 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EuiSuperUpdateButton is rendered 1`] = `
-<EuiToolTip
-  delay="regular"
-  position="bottom"
->
-  <EuiButton
-    className="euiSuperUpdateButton"
-    color="primary"
-    fill={true}
-    iconSide="left"
-    iconType="refresh"
-    isDisabled={false}
-    isLoading={false}
-    onClick={[Function]}
-    size="m"
-    textProps={
-      Object {
-        "className": "euiSuperUpdateButton__text",
-      }
-    }
-    type="button"
-  >
-    Refresh
-  </EuiButton>
-</EuiToolTip>
-`;
-
-exports[`EuiSuperUpdateButton isDisabled 1`] = `
-<EuiToolTip
-  content="Cannot update"
-  delay="regular"
-  position="bottom"
->
-  <EuiButton
-    className="euiSuperUpdateButton"
-    color="primary"
-    fill={true}
-    iconSide="left"
-    iconType="refresh"
-    isDisabled={true}
-    isLoading={false}
-    onClick={[Function]}
-    size="m"
-    textProps={
-      Object {
-        "className": "euiSuperUpdateButton__text",
-      }
-    }
-    type="button"
-  >
-    Refresh
-  </EuiButton>
-</EuiToolTip>
-`;
-
-exports[`EuiSuperUpdateButton isLoading 1`] = `
-<EuiToolTip
-  delay="regular"
-  position="bottom"
->
-  <EuiButton
-    className="euiSuperUpdateButton"
-    color="secondary"
-    fill={true}
-    iconSide="left"
-    iconType="kqlFunction"
-    isDisabled={false}
-    isLoading={true}
-    onClick={[Function]}
-    size="m"
-    textProps={
-      Object {
-        "className": "euiSuperUpdateButton__text",
-      }
-    }
-    type="button"
-  >
-    Updating
-  </EuiButton>
-</EuiToolTip>
-`;
-
-exports[`EuiSuperUpdateButton needsUpdate 1`] = `
-<EuiToolTip
-  content="Click to apply"
-  delay="regular"
-  position="bottom"
->
-  <EuiButton
-    className="euiSuperUpdateButton"
-    color="secondary"
-    fill={true}
-    iconSide="left"
-    iconType="kqlFunction"
-    isDisabled={false}
-    isLoading={false}
-    onClick={[Function]}
-    size="m"
-    textProps={
-      Object {
-        "className": "euiSuperUpdateButton__text",
-      }
-    }
-    type="button"
-  >
-    Update
-  </EuiButton>
-</EuiToolTip>
-`;

package/src/components/date_picker/super_date_picker/async_interval.js

@@ -1,22 +0,0 @@
-export class AsyncInterval {
-  timeoutId = null;
-  isStopped = false;
-
-  constructor(fn, refreshInterval) {
-    this.setAsyncInterval(fn, refreshInterval);
-  }
-
-  setAsyncInterval = (fn, ms) => {
-    if (!this.isStopped) {
-      this.timeoutId = window.setTimeout(async () => {
-        this.__pendingFn = await fn();
-        this.setAsyncInterval(fn, ms);
-      }, ms);
-    }
-  };
-
-  stop = () => {
-    this.isStopped = true;
-    window.clearTimeout(this.timeoutId);
-  };
-}

package/src/components/date_picker/super_date_picker/async_interval.test.js

@@ -1,95 +0,0 @@
-import { AsyncInterval } from './async_interval';
-import { times } from 'lodash';
-
-describe('AsyncInterval', () => {
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    jest.useRealTimers();
-  });
-
-  // Advances time and awaits any pending promises after every 100ms
-  // This helper makes it easier to advance time without worrying
-  // whether tasks are still lingering on the event loop
-  async function andvanceTimerAndAwaitFn(instance, ms) {
-    const iterations = times(Math.floor(ms / 100));
-    const remainder = ms % 100;
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    for (const item of iterations) {
-      await instance.__pendingFn;
-      jest.advanceTimersByTime(100);
-      await instance.__pendingFn;
-    }
-    jest.advanceTimersByTime(remainder);
-    await instance.__pendingFn;
-  }
-
-  describe('when creating a 1000ms interval', async () => {
-    let instance;
-    let spy;
-    beforeEach(() => {
-      spy = jest.fn();
-      instance = new AsyncInterval(spy, 1000);
-    });
-
-    it('should not call fn immediately', async () => {
-      await andvanceTimerAndAwaitFn(instance, 0);
-      expect(spy).toHaveBeenCalledTimes(0);
-    });
-
-    it('should have called fn once after 1000ms', async () => {
-      await andvanceTimerAndAwaitFn(instance, 1000);
-      expect(spy).toHaveBeenCalledTimes(1);
-    });
-
-    it('should have called fn twice after 2000ms', async () => {
-      await andvanceTimerAndAwaitFn(instance, 2000);
-      expect(spy).toHaveBeenCalledTimes(2);
-    });
-
-    it('should have called fn three times after 3000ms', async () => {
-      await andvanceTimerAndAwaitFn(instance, 3000);
-      expect(spy).toHaveBeenCalledTimes(3);
-    });
-
-    it('should not call fn after stop has been invoked', async () => {
-      await andvanceTimerAndAwaitFn(instance, 1000);
-      expect(spy).toHaveBeenCalledTimes(1);
-      instance.stop();
-      await andvanceTimerAndAwaitFn(instance, 1000);
-      expect(spy).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('when creating a 1000ms interval that calls a fn that takes 2000ms to complete', async () => {
-    let instance;
-    let spy;
-    beforeEach(() => {
-      const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
-      spy = jest.fn(async () => await sleep(2000));
-      instance = new AsyncInterval(spy, 1000);
-    });
-
-    it('should not call fn immediately', async () => {
-      await andvanceTimerAndAwaitFn(instance, 0);
-      expect(spy).toHaveBeenCalledTimes(0);
-    });
-
-    it('should have called fn once after 1000ms', async () => {
-      await andvanceTimerAndAwaitFn(instance, 1000);
-      expect(spy).toHaveBeenCalledTimes(1);
-    });
-
-    it('should have called fn twice after 4000ms', async () => {
-      await andvanceTimerAndAwaitFn(instance, 4000);
-      expect(spy).toHaveBeenCalledTimes(2);
-    });
-
-    it('should have called fn tree times after 7000ms', async () => {
-      await andvanceTimerAndAwaitFn(instance, 7000);
-      expect(spy).toHaveBeenCalledTimes(3);
-    });
-  });
-});

package/src/components/date_picker/super_date_picker/date_modes.js

@@ -1,35 +0,0 @@
-import dateMath from '@elastic/datemath';
-import {
-  parseRelativeParts,
-  toRelativeStringFromParts,
-} from './relative_utils';
-
-export const DATE_MODES = {
-  ABSOLUTE: 'absolute',
-  RELATIVE: 'relative',
-  NOW: 'now',
-};
-
-export function getDateMode(value) {
-  if (value === 'now') {
-    return DATE_MODES.NOW;
-  }
-
-  if (value.includes('now')) {
-    return DATE_MODES.RELATIVE;
-  }
-
-  return DATE_MODES.ABSOLUTE;
-}
-
-export function toAbsoluteString(value, roundUp) {
-  const valueAsMoment = dateMath.parse(value, { roundUp });
-  if (!valueAsMoment) {
-    return value;
-  }
-  return valueAsMoment.toISOString();
-}
-
-export function toRelativeString(value) {
-  return toRelativeStringFromParts(parseRelativeParts(value));
-}

package/src/components/date_picker/super_date_picker/date_popover/absolute_tab.js

@@ -1,95 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-
-import moment from 'moment';
-
-import dateMath from '@elastic/datemath';
-
-import { EuiDatePicker } from '../../date_picker';
-import { EuiFormRow, EuiFieldText, EuiFormLabel } from '../../../form';
-import { toSentenceCase } from '../../../../services/string/to_case';
-
-const INPUT_DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss.SSS';
-
-export class EuiAbsoluteTab extends Component {
-  constructor(props) {
-    super(props);
-
-    const parsedValue = dateMath.parse(props.value, { roundUp: props.roundUp });
-    const valueAsMoment =
-      parsedValue && parsedValue.isValid() ? parsedValue : moment();
-    const sentenceCasedPosition = toSentenceCase(props.position);
-
-    this.state = {
-      valueAsMoment,
-      textInputValue: valueAsMoment.format(INPUT_DATE_FORMAT),
-      isTextInvalid: false,
-      sentenceCasedPosition,
-    };
-  }
-
-  handleChange = date => {
-    this.props.onChange(date.toISOString());
-    this.setState({
-      valueAsMoment: date,
-      textInputValue: date.format(INPUT_DATE_FORMAT),
-      isTextInvalid: false,
-    });
-  };
-
-  handleTextChange = evt => {
-    const date = moment(evt.target.value, INPUT_DATE_FORMAT, true);
-    const updatedState = {
-      textInputValue: evt.target.value,
-      isTextInvalid: !date.isValid(),
-    };
-    if (date.isValid()) {
-      this.props.onChange(date.toISOString());
-      updatedState.valueAsMoment = date;
-    }
-
-    this.setState(updatedState);
-  };
-
-  render() {
-    return (
-      <div>
-        <EuiDatePicker
-          inline
-          showTimeSelect
-          shadow={false}
-          selected={this.state.valueAsMoment}
-          onChange={this.handleChange}
-        />
-        <EuiFormRow
-          className="euiDatePopoverContent__padded"
-          isInvalid={this.state.isTextInvalid}
-          error={
-            this.state.isTextInvalid
-              ? `Expected format ${INPUT_DATE_FORMAT}`
-              : undefined
-          }>
-          <EuiFieldText
-            isInvalid={this.state.isTextInvalid}
-            value={this.state.textInputValue}
-            onChange={this.handleTextChange}
-            data-test-subj={'superDatePickerAbsoluteDateInput'}
-            prepend={
-              <EuiFormLabel>
-                {this.state.sentenceCasedPosition} date
-              </EuiFormLabel>
-            }
-          />
-        </EuiFormRow>
-      </div>
-    );
-  }
-}
-
-EuiAbsoluteTab.propTypes = {
-  dateFormat: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  roundUp: PropTypes.bool.isRequired,
-  position: PropTypes.oneOf(['start', 'end']),
-};

package/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js

@@ -1,87 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import classNames from 'classnames';
-
-import { EuiPopover } from '../../../popover';
-
-import { formatTimeString } from '../pretty_duration';
-import { EuiDatePopoverContent } from './date_popover_content';
-
-export function EuiDatePopoverButton(props) {
-  const {
-    position,
-    isInvalid,
-    needsUpdating,
-    value,
-    buttonProps,
-    roundUp,
-    onChange,
-    dateFormat,
-    isOpen,
-    onPopoverToggle,
-    onPopoverClose,
-    ...rest
-  } = props;
-
-  const classes = classNames([
-    'euiDatePopoverButton',
-    `euiDatePopoverButton--${position}`,
-    {
-      'euiDatePopoverButton-isSelected': isOpen,
-      'euiDatePopoverButton-isInvalid': isInvalid,
-      'euiDatePopoverButton-needsUpdating': needsUpdating,
-    },
-  ]);
-
-  let title = value;
-  if (isInvalid) {
-    title = `Invalid date: ${title}`;
-  } else if (needsUpdating) {
-    title = `Update needed: ${title}`;
-  }
-
-  const button = (
-    <button
-      onClick={onPopoverToggle}
-      className={classes}
-      title={title}
-      data-test-subj={`superDatePicker${position}DatePopoverButton`}
-      {...buttonProps}>
-      {formatTimeString(value, dateFormat, roundUp)}
-    </button>
-  );
-
-  return (
-    <EuiPopover
-      className="euiDatePopoverButton__popover"
-      button={button}
-      isOpen={isOpen}
-      closePopover={onPopoverClose}
-      anchorPosition={position === 'start' ? 'downLeft' : 'downRight'}
-      anchorClassName="euiDatePopoverButton__popoverAnchor"
-      panelPaddingSize="none"
-      ownFocus
-      {...rest}>
-      <EuiDatePopoverContent
-        value={value}
-        roundUp={roundUp}
-        onChange={onChange}
-        dateFormat={dateFormat}
-        position={position}
-      />
-    </EuiPopover>
-  );
-}
-
-EuiDatePopoverButton.propTypes = {
-  position: PropTypes.oneOf(['start', 'end']),
-  isInvalid: PropTypes.bool,
-  needsUpdating: PropTypes.bool,
-  value: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  dateFormat: PropTypes.string.isRequired,
-  roundUp: PropTypes.bool,
-  isOpen: PropTypes.bool.isRequired,
-  onPopoverToggle: PropTypes.func.isRequired,
-  onPopoverClose: PropTypes.func.isRequired,
-};