Remove keyOfStringsOnly option from tsconfig.json

CHANGELOG.md

@@ -15,6 +15,10 @@
 - Replaced the following SASS mixins `euiOverflowShadowTop`, `euiOverflowShadowBottom` with `euiOverflowShadow`. ([#1829](https://github.com/elastic/eui/pull/1829))
 
 
+**Breaking changes**
+
+- Removed transitional `keyOfStringsOnly` option from TypeScript configuration ([#1814](https://github.com/elastic/eui/pull/1814))
+
 ## [`9.9.1`](https://github.com/elastic/eui/tree/v9.9.1)
 
 - Re-enabled installation of `@elastic/eui` via npm ([#1811](https://github.com/elastic/eui/pull/1811))

scripts/compile-eui.js

@@ -44,10 +44,10 @@ function compileBundle() {
   shell.mkdir('-p', 'dist');
 
   console.log('Building bundle...');
-  execSync('webpack --config=src/webpack.config.js');
+  execSync('webpack --config=src/webpack.config.js', { stdio: 'inherit' });
 
   console.log('Building minified bundle...');
-  execSync('NODE_ENV=production webpack --config=src/webpack.config.js');
+  execSync('NODE_ENV=production webpack --config=src/webpack.config.js', { stdio: 'inherit' });
 }
 
 compileLib();

src/components/badge/index.d.ts

@@ -1,11 +1,15 @@
-import { IconType } from '../icon'
+import { IconType } from '../icon';
 /// <reference path="../tool_tip/index.d.ts" />
 
-import { HTMLAttributes, MouseEventHandler, FunctionComponent, ReactNode } from 'react';
-import { CommonProps } from '../common';
+import {
+  HTMLAttributes,
+  MouseEventHandler,
+  FunctionComponent,
+  ReactNode,
+} from 'react';
+import { CommonProps, Omit } from '../common';
 
 declare module '@elastic/eui' {
-
   type IconSide = 'left' | 'right';
 
   export interface EuiBadgeProps {
@@ -20,7 +24,10 @@ declare module '@elastic/eui' {
   }
 
   export const EuiBadge: FunctionComponent<
-    CommonProps & HTMLAttributes<HTMLSpanElement> & HTMLAttributes<HTMLButtonElement> & EuiBadgeProps
+    CommonProps &
+      Omit<HTMLAttributes<HTMLSpanElement>, 'color'> &
+      Omit<HTMLAttributes<HTMLButtonElement>, 'color'> &
+      EuiBadgeProps
   >;
 
   export interface EuiBetaBadgeProps {

src/components/badge/notification_badge/badge_notification.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes, ReactNode, FunctionComponent } from 'react';
 import classNames from 'classnames';
-import { CommonProps, keysOf } from '../../common';
+import { CommonProps, Omit, keysOf } from '../../common';
 
 const colorToClassMap: { [color: string]: string | null } = {
   accent: null,
@@ -20,7 +20,7 @@ export type BadgeNotificationSize = keyof typeof sizeToClassNameMap;
 
 export interface EuiNotificationBadgeProps
   extends CommonProps,
-    HTMLAttributes<HTMLSpanElement> {
+    Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
   children: ReactNode;
   size?: BadgeNotificationSize;
   color?: BadgeNotificationColor;

src/components/drag_and_drop/drag_drop_context.tsx

@@ -9,7 +9,15 @@ import {
 
 // export interface EuiDragDropContextProps extends DragDropContextProps {}
 
-export const EuiDragDropContextContext = React.createContext({
+type EuiDraggingType = string | null;
+
+interface EuiDraggingContext {
+  isDraggingType: EuiDraggingType;
+}
+
+export const EuiDragDropContextContext = React.createContext<
+  EuiDraggingContext
+>({
   isDraggingType: null,
 });
 
@@ -21,7 +29,7 @@ export const EuiDragDropContext: FunctionComponent<DragDropContextProps> = ({
   children,
   ...rest
 }) => {
-  const [isDraggingType, setIsDraggingType] = useState();
+  const [isDraggingType, setIsDraggingType] = useState<EuiDraggingType>(null);
   const euiOnDragStart = (
     start: DragStart,
     provided: ResponderProvided

src/components/flex/flex_grid.tsx

@@ -32,8 +32,8 @@ const columnsToClassNameMap = {
   4: 'euiFlexGrid--fourths',
 };
 
-export const COLUMNS = keysOf(columnsToClassNameMap).map(columns =>
-  parseInt(columns, 10)
+export const COLUMNS = Object.keys(columnsToClassNameMap).map(
+  (columns: string) => parseInt(columns, 10)
 ) as FlexGridColumns[];
 
 export const EuiFlexGrid: FunctionComponent<

src/components/icon/icon.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, SVGAttributes } from 'react';
 import classNames from 'classnames';
 
-import { CommonProps, keysOf } from '../common';
+import { CommonProps, Omit, keysOf } from '../common';
 
 import addDataApp from './assets/app_add_data.svg';
 import advancedSettingsApp from './assets/app_advanced_settings.svg';
@@ -643,7 +643,9 @@ export interface EuiIconProps {
   size?: IconSize;
 }
 
-type Props = CommonProps & SVGAttributes<SVGElement> & EuiIconProps;
+type Props = CommonProps &
+  Omit<SVGAttributes<SVGElement>, 'color'> &
+  EuiIconProps;
 
 export const EuiIcon: FunctionComponent<Props> = ({
   type,

src/services/format/format_date.ts

@@ -5,12 +5,12 @@ type CalendarOptions = CalendarSpec & {
   refTime?: MomentInput;
 };
 
-const calendar = (value: Date, options: CalendarOptions = {}) => {
+const calendar = (value: MomentInput, options: CalendarOptions = {}) => {
   const refTime = options.refTime;
   return moment(value).calendar(refTime, options);
 };
 
-export const dateFormatAliases: { [alias: string]: any } = {
+export const dateFormatAliases = {
   date: 'D MMM YYYY',
   longDate: 'DD MMMM YYYY',
   shortDate: 'D MMM YY',
@@ -21,7 +21,7 @@ export const dateFormatAliases: { [alias: string]: any } = {
   dobLong: 'Do MMMM YYYY',
   iso8601: 'YYYY-MM-DDTHH:mm:ss.SSSZ',
   calendar,
-  calendarDateTime: (value: Date, options: CalendarSpec) => {
+  calendarDateTime: (value: MomentInput, options: CalendarSpec) => {
     return calendar(value, {
       sameDay: '[Today at] H:mmA',
       nextDay: '[Tomorrow at] H:mmA',
@@ -32,7 +32,7 @@ export const dateFormatAliases: { [alias: string]: any } = {
       ...options,
     });
   },
-  calendarDate: (value: Date, options: CalendarSpec) => {
+  calendarDate: (value: MomentInput, options: CalendarSpec) => {
     return calendar(value, {
       sameDay: '[Today]',
       nextDay: '[Tomorrow]',
@@ -53,6 +53,19 @@ interface FormatDateConfig {
   options: any;
 }
 
+function isStringADateFormat(x: string): x is DateFormat {
+  return dateFormatAliases.hasOwnProperty(x);
+}
+
+function instanceOfFormatDateConfig(x: any): x is Partial<FormatDateConfig> {
+  return (
+    typeof x === 'object' &&
+    (x.hasOwnProperty('format') ||
+      x.hasOwnProperty('nil') ||
+      x.hasOwnProperty('options'))
+  );
+}
+
 export const formatDate = (
   value?: MomentInput,
   dateFormatKeyOrConfig:
@@ -65,23 +78,34 @@ export const formatDate = (
       return '';
     }
 
-    const dateFormatStr =
-      dateFormatAliases[dateFormatKeyOrConfig] || dateFormatKeyOrConfig;
+    const dateFormatStrOrFunc = isStringADateFormat(dateFormatKeyOrConfig)
+      ? dateFormatAliases[dateFormatKeyOrConfig]
+      : dateFormatKeyOrConfig;
 
-    return moment(value).format(dateFormatStr);
+    if (isFunction(dateFormatStrOrFunc)) {
+      return dateFormatStrOrFunc(value, {});
+    }
+
+    if (isString(dateFormatStrOrFunc)) {
+      return moment(value).format(dateFormatStrOrFunc);
+    }
   }
 
-  const { format = 'dateTime', nil = '', options } = dateFormatKeyOrConfig;
+  if (instanceOfFormatDateConfig(dateFormatKeyOrConfig)) {
+    const { format = 'dateTime', nil = '', options } = dateFormatKeyOrConfig;
 
-  const dateFormat = dateFormatAliases[format] || format;
+    const dateFormat = dateFormatAliases[format] || format;
 
-  if (isNil(value)) {
-    return nil;
-  }
+    if (isNil(value)) {
+      return nil;
+    }
 
-  if (isFunction(dateFormat)) {
-    return dateFormat(value, options);
-  }
+    if (isFunction(dateFormat)) {
+      return dateFormat(value, options);
+    }
 
-  return moment(value).format(dateFormat);
+    if (isString(dateFormat)) {
+      return moment(value).format(dateFormat);
+    }
+  }
 };

src/services/predicate/common_predicates.ts

@@ -4,23 +4,23 @@ export const always = (value?: any) => true;
 
 export const never = (value?: any) => false;
 
-export const isUndefined = (value: any) => {
+export const isUndefined = (value: any): value is undefined => {
   return value === undefined;
 };
 
-export const isNull = (value: any) => {
+export const isNull = (value: any): value is null => {
   return value === null;
 };
 
-export const isNil = (value: any) => {
+export const isNil = (value: any): value is null | undefined => {
   return isUndefined(value) || isNull(value);
 };
 
 export const isMoment = (value: any) => {
   return moment.isMoment(value);
 };
 
-export const isDate = (value: any) => {
+export const isDate = (value: any): value is Date => {
   return moment.isDate(value);
 };
 

src/services/predicate/lodash_predicates.ts

@@ -9,7 +9,8 @@ import _isNaN from 'lodash/isNaN';
 // exported, which can conflict with the lodash namespace if other versions are used
 
 // tslint:disable-next-line:ban-types
-export const isFunction = (value: any): value is Function => _isFunction(value);
+export const isFunction = (value: any): value is (...args: any[]) => any =>
+  _isFunction(value);
 export const isArray = (value: any): value is any[] => _isArray(value);
 export const isString = (value: any): value is string => _isString(value);
 export const isBoolean = (value: any): value is boolean => _isBoolean(value);

tsconfig.json

@@ -37,9 +37,6 @@
     // Disallow inconsistently-cased references to the same file.
     "forceConsistentCasingInFileNames": true,
 
-    // Disable the breaking keyof behaviour introduced in TS 2.9.2 until EUI is updated to support that too
-    "keyofStringsOnly": true,
-
     // enables "core language features"
     "lib": [
       // ESNext auto includes previous versions all the way back to es5