deps: Update to latest.

Author: Miles Johnson

package.json

@@ -72,14 +72,14 @@
     "./packages/*"
   ],
   "dependencies": {
-    "@storybook/addon-a11y": "^5.3.12",
-    "@storybook/addon-actions": "^5.3.12",
+    "@storybook/addon-a11y": "^5.3.14",
+    "@storybook/addon-actions": "^5.3.14",
     "@storybook/addon-console": "^1.2.1",
-    "@storybook/addon-contexts": "^5.3.12",
-    "@storybook/addon-links": "^5.3.12",
-    "@storybook/addon-viewport": "^5.3.12",
-    "@storybook/addons": "^5.3.12",
-    "@storybook/react": "^5.3.12",
+    "@storybook/addon-contexts": "^5.3.14",
+    "@storybook/addon-links": "^5.3.14",
+    "@storybook/addon-viewport": "^5.3.14",
+    "@storybook/addons": "^5.3.14",
+    "@storybook/react": "^5.3.14",
     "markdown-to-jsx": "^6.11.0",
     "react-element-to-jsx-string": "^14.3.1"
   },
@@ -100,26 +100,26 @@
     "@types/jscodeshift": "^0.6.3",
     "@types/lodash": "^4.14.149",
     "@types/luxon": "^1.21.0",
-    "@types/node-fetch": "^2.5.4",
+    "@types/node-fetch": "^2.5.5",
     "@types/prop-types": "^15.7.3",
     "@types/react": "^16.9.23",
     "@types/react-dom": "^16.9.5",
     "@types/react-virtualized": "^9.21.8",
     "@types/shallowequal": "^1.1.1",
-    "@types/svgo": "^1.3.0",
-    "@types/uuid": "^3.4.7",
+    "@types/svgo": "^1.3.1",
+    "@types/uuid": "^7.0.0",
     "babel-loader": "^8.0.6",
     "emojibase-test-utils": "^4.2.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.4.4",
     "eslint-plugin-rut": "^1.0.0",
     "fast-glob": "^3.1.1",
-    "filesize": "^6.0.1",
-    "full-icu": "^1.3.0",
+    "filesize": "^6.1.0",
+    "full-icu": "^1.3.1",
     "gh-pages": "^2.2.0",
     "happo-plugin-storybook": "^2.5.3",
-    "happo.io": "^5.1.3",
+    "happo.io": "^5.1.5",
     "jest-rut": "^1.0.0",
     "lerna": "^3.20.2",
     "moment": "^2.24.0",

packages/app-shell/package.json

@@ -26,6 +26,6 @@
   },
   "dependencies": {
     "shallowequal": "^1.1.0",
-    "uuid": "^3.4.0"
+    "uuid": "^7.0.2"
   }
 }

packages/app-shell/src/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import uuid from 'uuid/v4';
+import { v4 as uuid } from 'uuid';
 import Core from '@airbnb/lunar';
 import withBoundary from '@airbnb/lunar/lib/composers/withBoundary';
 import componentName from '@airbnb/lunar/lib/prop-types/componentName';

packages/composer/package.json

@@ -27,6 +27,6 @@
   "dependencies": {
     "@airbnb/lunar-icons": "^2.8.1",
     "lodash": "^4.17.15",
-    "uuid": "^3.4.0"
+    "uuid": "^7.0.2"
   }
 }

packages/composer/src/components/Composer.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useState, useReducer } from 'react';
 import useStyles from '@airbnb/lunar/lib/hooks/useStyles';
 import FormErrorMessage from '@airbnb/lunar/lib/components/FormErrorMessage';
-import uuid from 'uuid/v4';
+import { v4 as uuid } from 'uuid';
 import ComposerContext from '../contexts/ComposerContext';
 import Footer from './Footer';
 import Input, { InputProps } from './Input';

packages/composer/src/components/Preview/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import T from '@airbnb/lunar/lib/components/Translate';
 import Interweave from '@airbnb/lunar/lib/components/Interweave';
 import Menu from '../Menu';
@@ -40,9 +40,11 @@ export default function Preview({
   context.flags.preview = true;
   context.flags.previewConfirm = requireConfirmation;
 
-  if (requireConfirmation) {
-    context.onSubmit(onSubmitShowPreview);
-  }
+  useEffect(() => {
+    if (requireConfirmation) {
+      context.onSubmit(onSubmitShowPreview);
+    }
+  }, [context, requireConfirmation]);
 
   return (
     <>

packages/composer/src/components/Shortcuts.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useState } from 'react';
+import React, { useCallback, useContext, useState, useEffect } from 'react';
 import T from '@airbnb/lunar/lib/components/Translate';
 import Menu from './Menu';
 import SelectList, { Selection } from './SelectList';
@@ -52,8 +52,11 @@ export default function Shortcuts({ shortcuts }: ShortcutsProps) {
 
   // Enable feature
   context.flags.shortcuts = true;
-  context.onChange(onChangeToggleShortcutsMenu);
-  context.onSubmit(handleSubmit);
+
+  useEffect(() => {
+    context.onChange(onChangeToggleShortcutsMenu);
+    context.onSubmit(handleSubmit);
+  }, [context, handleSubmit]);
 
   // If only 1 shortcut, then we have an exact match and can hide the menu
   if (filteredShortcuts.length === 1 && filteredShortcuts[0].name === inputName) {

packages/composer/src/components/Suggestions.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useCallback, useRef } from 'react';
+import React, { useContext, useCallback, useRef, useEffect } from 'react';
 import debounce from 'lodash/debounce';
 import T from '@airbnb/lunar/lib/components/Translate';
 import Hotkey from './Hotkey';
@@ -50,8 +50,11 @@ export default function Suggestions({ noCache = false, throttle = 200, onLoad }:
 
   // Enable feature
   context.flags.suggestions = true;
-  context.onChange(handleLoadSuggestions);
-  context.onChange(handleShadowMatch);
+
+  useEffect(() => {
+    context.onChange(handleLoadSuggestions);
+    context.onChange(handleShadowMatch);
+  }, [context, handleLoadSuggestions, handleShadowMatch]);
 
   return (
     <Hotkey

packages/core/package.json

@@ -35,28 +35,28 @@
     "@types/react": "*",
     "@types/react-dom": "*",
     "@types/react-virtualized": "*",
-    "aesthetic": "^5.1.1",
-    "aesthetic-adapter-aphrodite": "^5.1.0",
-    "aesthetic-react": "^2.1.0",
+    "aesthetic": "^5.1.3",
+    "aesthetic-adapter-aphrodite": "^5.1.1",
+    "aesthetic-react": "^2.1.2",
     "airbnb-prop-types": "^2.15.0",
     "aphrodite": "^2.4.0",
-    "copy-to-clipboard": "^3.2.1",
+    "copy-to-clipboard": "^3.3.1",
     "debounce-promise": "^3.1.2",
     "emojibase": "^3.2.0",
     "emojibase-regex": "^3.2.1",
     "fuse.js": "^3.4.6",
     "hoist-non-react-statics": "^3.3.2",
-    "interweave": "^12.2.1",
-    "interweave-autolink": "^4.1.1",
-    "interweave-emoji": "^5.2.1",
-    "interweave-emoji-picker": "^5.1.1",
+    "interweave": "^12.2.2",
+    "interweave-autolink": "^4.1.2",
+    "interweave-emoji": "^5.2.2",
+    "interweave-emoji-picker": "^5.1.2",
     "lodash": "^4.17.15",
     "luxon": "^1.22.0",
     "ms": "^2.1.2",
     "prop-types": "^15.7.2",
     "react-day-picker": "7.3.2",
     "react-virtualized": "^9.21.2",
     "shallowequal": "^1.1.0",
-    "uuid": "^3.4.0"
+    "uuid": "^7.0.2"
   }
 }

packages/core/src/components/Accordion/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import uuid from 'uuid/v4';
+import { v4 as uuid } from 'uuid';
 import useStyles, { StyleSheet } from '../../hooks/useStyles';
 import Item, { AccordionItemProps } from './Item';
 import { styleSheetAccordion } from './styles';

packages/core/src/components/Autocomplete/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import uuid from 'uuid/v4';
+import { v4 as uuid } from 'uuid';
 import debouncePromise from 'debounce-promise';
 import toMilliseconds from '../../utils/toMilliseconds';
 import BaseInput, { BaseInputProps } from '../private/BaseInput';

packages/core/src/components/CheckBox/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import uuid from 'uuid/v4';
+import { v4 as uuid } from 'uuid';
 import BaseCheckBox, { BaseCheckBoxProps } from '../private/BaseCheckBox';
 import FormField, { FormFieldProps, partitionFieldProps } from '../FormField';
 import Text from '../Text';

packages/core/src/components/CheckBoxController/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import uuid from 'uuid/v4';
+import { v4 as uuid } from 'uuid';
 import shallowEqual from 'shallowequal';
 import proxyComponent from '../../utils/proxyComponent';
 import FormField, { FormFieldProps, partitionFieldProps } from '../FormField';

packages/core/src/components/DatePickerInput/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import uuid from 'uuid/v4';
+import { v4 as uuid } from 'uuid';
 import { DayPickerInputProps } from 'react-day-picker';
 import { BaseInputProps } from '../private/BaseInput';
 import FormField, { FormFieldProps, partitionFieldProps } from '../FormField';

packages/core/src/components/DateTimeSelect/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import uuid from 'uuid/v4';
+import { v4 as uuid } from 'uuid';
 import { DateTime } from 'luxon';
 import withStyles, { WithStylesProps } from '../../composers/withStyles';
 import BaseSelect from '../private/BaseSelect';

packages/core/src/components/FileInput/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import uuid from 'uuid/v4';
+import { v4 as uuid } from 'uuid';
 import IconUpload from '@airbnb/lunar-icons/lib/interface/IconUpload';
 import IconAudio from '@airbnb/lunar-icons/lib/interface/IconAudio';
 import IconPhoto from '@airbnb/lunar-icons/lib/interface/IconPhoto';

packages/core/src/components/Input/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import uuid from 'uuid/v4';
+import { v4 as uuid } from 'uuid';
 import BaseInput, { BaseInputProps } from '../private/BaseInput';
 import FormField, { FormFieldProps, partitionFieldProps } from '../FormField';
 

packages/core/src/components/RadioButton/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import uuid from 'uuid/v4';
+import { v4 as uuid } from 'uuid';
 import { mutuallyExclusiveTrueProps } from 'airbnb-prop-types';
 import BaseRadioButton, { BaseRadioButtonProps } from '../private/BaseRadioButton';
 import FormField, { FormFieldProps, partitionFieldProps } from '../FormField';

packages/core/src/components/RadioButtonController/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import uuid from 'uuid/v4';
+import { v4 as uuid } from 'uuid';
 import proxyComponent from '../../utils/proxyComponent';
 import FormField, { FormFieldProps, partitionFieldProps } from '../FormField';
 import RadioButton, { RadioButtonProps } from '../RadioButton';

packages/core/src/components/Select/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import uuid from 'uuid/v4';
+import { v4 as uuid } from 'uuid';
 import BaseSelect, { BaseSelectProps } from '../private/BaseSelect';
 import FormField, { FormFieldProps, partitionFieldProps } from '../FormField';
 

packages/core/src/components/Switch/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import uuid from 'uuid/v4';
+import { v4 as uuid } from 'uuid';
 import BaseSwitch, { BaseSwitchProps } from '../private/BaseSwitch';
 import FormField, { FormFieldProps, partitionFieldProps } from '../FormField';
 

packages/core/src/components/TextArea/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import uuid from 'uuid/v4';
+import { v4 as uuid } from 'uuid';
 import PropTypes from 'prop-types';
 import { requiredBy } from 'airbnb-prop-types';
 import BaseTextArea, { BaseTextAreaProps } from '../private/BaseTextArea';

packages/core/src/components/ToggleButtonController/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import uuid from 'uuid/v4';
+import { v4 as uuid } from 'uuid';
 import proxyComponent from '../../utils/proxyComponent';
 import FormField, { partitionFieldProps, FormFieldProps } from '../FormField';
 import BaseButton, { ButtonProps } from '../Button';

packages/core/src/components/Tooltip/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 
 import React from 'react';
-import uuid from 'uuid/v4';
+import { v4 as uuid } from 'uuid';
 import Overlay from '../Overlay';
 import Text from '../Text';
 import withStyles, { WithStylesProps } from '../../composers/withStyles';

packages/core/src/components/Tooltip/story.tsx

@@ -79,6 +79,7 @@ export function displaysWhenAnElementIsHovered() {
       <div style={{ textAlign: 'right' }}>
         <Text inline>Also has a tooltip →</Text>
         <Tooltip
+          inverted
           content={
             <Text inverted>
               This uncomfortably wide tooltip should have a right-notch

packages/core/test/components/Tooltip.test.tsx

@@ -7,8 +7,7 @@ import Tooltip, {
   TooltipState,
 } from '../../src/components/Tooltip';
 
-// eslint-disable-next-line unicorn/consistent-function-scoping
-jest.mock('uuid/v4', () => () => 'uuid-test-mock');
+jest.mock('uuid', () => ({ v4: () => 'uuid-test-mock' }));
 
 describe('<Tooltip />', () => {
   let wrapper: Enzyme.ShallowWrapper<TooltipProps, TooltipState, BaseTooltip>;

packages/forms/package.json

@@ -31,6 +31,6 @@
     "final-form": "^4.18.7",
     "lodash": "^4.17.15",
     "shallowequal": "^1.1.0",
-    "uuid": "^3.4.0"
+    "uuid": "^7.0.2"
   }
 }

packages/forms/src/components/Form/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import shallowEqual from 'shallowequal';
-import uuid from 'uuid/v4';
+import { v4 as uuid } from 'uuid';
 import {
   createForm,
   formSubscriptionItems,

packages/metrics/package.json

@@ -23,7 +23,7 @@
     "@airbnb/lunar-test-utils": "^2.4.2"
   },
   "dependencies": {
-    "@sentry/browser": "^5.12.1",
+    "@sentry/browser": "^5.13.0",
     "@types/new-relic-browser": "0.1072.1"
   }
 }

packages/test-utils/package.json

@@ -26,7 +26,7 @@
     "@types/enzyme": "*",
     "@types/jest": "*",
     "@types/react": "*",
-    "aesthetic": "^5.1.1",
-    "aesthetic-react": "^2.1.0"
+    "aesthetic": "^5.1.3",
+    "aesthetic-react": "^2.1.2"
   }
 }