box-ui-elements 19.0.0 → 20.0.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "19.0.0",
+    "version": "20.0.0-beta.1",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -282,7 +282,6 @@
         "lodash": "^4.17.15",
         "message-accumulator": "^2.1.1",
         "mini-css-extract-plugin": "^0.9.0",
-        "mocha": "^6.2.2",
         "mousetrap": "^1.6.3",
         "mutationobserver-shim": "^0.3.3",
         "npm-run-all": "^4.1.3",
@@ -307,7 +306,7 @@
         "react-dom": "^17.0.1",
         "react-draggable": "^3.3.0",
         "react-immutable-proptypes": "^2.1.0",
-        "react-intl": "^3.11.0",
+        "react-intl": "6.4.2",
         "react-measure": "^2.3.0",
         "react-modal": "^3.8.1",
         "react-popper": "^1.3.4",
@@ -404,7 +403,8 @@
     },
     "resolutions": {
         "ip": "1.1.8",
-        "terser-webpack-plugin": "^4.2.3"
+        "terser-webpack-plugin": "^4.2.3",
+        "**/react-intl/**/@types/react": "^16.9.18"
     },
     "overrides": {
         "draft-js": {

package/src/components/breadcrumb/Breadcrumb.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import { injectIntl } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import classNames from 'classnames';
 
 import { MenuLinkItem } from '../menu';
@@ -18,6 +18,7 @@ export type BreadcrumbProps = {
     className?: string,
     /** Reverse default overflow breadcrumb ordering to highest to lowest depth */
     hasReverseOverflowOrder?: boolean,
+    intl: IntlShape,
     /** Show number of breadcrumb items before overflow. Default is 1 */
     numItemsBeforeOverflow?: number,
     /** Element to override default overflow menu button */
@@ -26,7 +27,7 @@ export type BreadcrumbProps = {
     threshold?: number,
 };
 
-type Props = BreadcrumbProps & InjectIntlProvidedProps;
+type Props = BreadcrumbProps;
 
 const Breadcrumb = ({
     children,

package/src/components/date-picker/DatePicker.js.flow

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import classNames from 'classnames';
 import Pikaday from 'pikaday';
 import range from 'lodash/range';
@@ -122,6 +122,7 @@ type Props = {
     hideOptionalLabel?: boolean,
     /** Props that will be applied on the input element */
     inputProps?: Object,
+    intl: IntlShape,
     /** Is input clearable */
     isClearable?: boolean,
     /** Is input disabled */
@@ -151,7 +152,7 @@ type Props = {
     /** Date to set the input */
     value?: Date,
     yearRange?: number | Array<number>,
-} & InjectIntlProvidedProps;
+};
 
 class DatePicker extends React.Component<Props> {
     static defaultProps = {

package/src/components/grid-view/GridViewSlider.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import { injectIntl } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import IconPlusThin from '../../icons/general/IconPlusThin';
 import IconMinusThin from '../../icons/general/IconMinusThin';
 import PlainButton from '../plain-button/PlainButton';
@@ -13,9 +13,10 @@ type Props = {
     columnCount: number,
     gridMaxColumns: number,
     gridMinColumns: number,
+    intl: IntlShape,
     maxColumnCount: number,
     onChange: (newSliderValue: number) => void,
-} & InjectIntlProvidedProps;
+};
 
 const GridViewSlider = ({ columnCount, gridMaxColumns, gridMinColumns, intl, maxColumnCount, onChange }: Props) => {
     const { formatMessage } = intl;

package/src/components/i18n/FormattedCompMessage.js

@@ -1,4 +1,5 @@
 // @flow
+// @deprecated, use FormattedMessage from react-intl v6 instead.
 import * as React from 'react';
 import { injectIntl } from 'react-intl';
 import isNaN from 'lodash/isNaN';

package/src/components/i18n/Plural.js

@@ -1,5 +1,5 @@
 // @flow
-// @deprecated, use FormattedPlural from react-intl v3 instead
+// @deprecated, use FormattedPlural from react-intl v6 instead.
 import * as React from 'react';
 
 type Props = {

package/src/components/i18n/README.md

@@ -1,5 +1,9 @@
 ### Examples
 
+<!-- @deprecated, use [FormattedPlural](https://formatjs.io/docs/react-intl/components#formattedplural) or [FormattedMessage](https://formatjs.io/docs/react-intl/components#rich-text-formatting) with rich-text formatting from react-intl v6 instead. 
+@TODO: remove redundant components/code after react-intl upgrade (confirm unusability).  
+-->
+
 ** Basic **
 
 This can be a drop-in replacement for react-intl's FormattedHTMLMessage component:

package/src/components/i18n/index.js

@@ -1,5 +1,5 @@
 // @flow
-// @deprecated, use FormattedPlural or FormattedMessage from react-intl v3 instead
+// @deprecated, use FormattedPlural or FormattedMessage from react-intl v6 instead.
 export { default as Param } from './Param';
 export { default as Plural } from './Plural';
 export { default } from './FormattedCompMessage';

package/src/components/sidebar-toggle-button/SidebarToggleButton.js

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { injectIntl } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 
 import IconHide from '../../icons/general/IconHide';
 import IconShow from '../../icons/general/IconShow';
@@ -19,9 +19,10 @@ const DIRECTION_RIGHT = 'right';
 type Props = {
     className?: string,
     direction?: string,
+    intl: IntlShape,
     isOpen: boolean,
     onClick?: Function,
-} & InjectIntlProvidedProps;
+};
 
 const SidebarToggleButton = ({
     className = '',

package/src/components/time/ReadableTime.js

@@ -3,7 +3,8 @@
 import { injectIntl } from 'react-intl';
 
 import { ONE_HOUR_MS } from '../../constants';
-import { isToday, isYesterday, isCurrentYear } from '../../utils/datetime';
+import { isCurrentYear, isToday, isYesterday } from '../../utils/datetime';
+import timeFromNow from '../../utils/relativeTime';
 
 import messages from './messages';
 
@@ -78,13 +79,8 @@ const ReadableTime = ({
     // print the default time format
     const timeDiff = timestamp - Date.now();
     if (Math.abs(timeDiff) <= relativeThreshold) {
-        if (intl.formatRelativeTime) {
-            // react-intl v3
-            output = intl.formatRelativeTime(timeDiff);
-        } else {
-            // react-intl v2
-            output = intl.formatRelative(timestamp);
-        }
+        const { value, unit } = timeFromNow(timestamp);
+        output = intl.formatRelativeTime(value, unit);
     }
 
     return shouldUppercase ? output.toLocaleUpperCase(intl.locale) : output;

package/src/components/time/__tests__/__snapshots__/ReadableTime.test.js.snap

@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`components/time/ReadableTime should use default relative threshold if not provided 1`] = `"in 1,800,000 seconds"`;
+exports[`components/time/ReadableTime should use default relative threshold if not provided 1`] = `"in 30 minutes"`;
 
-exports[`components/time/ReadableTime timestamp: ms1HourInFuture | allowFutureTimestamps: false | alwaysShowTime: false | showWeekday: false | Today at hh:mm 1`] = `"3,600,000 seconds ago"`;
+exports[`components/time/ReadableTime timestamp: ms1HourInFuture | allowFutureTimestamps: false | alwaysShowTime: false | showWeekday: false | Today at hh:mm 1`] = `"1 hour ago"`;
 
-exports[`components/time/ReadableTime timestamp: ms1HourInFuture | allowFutureTimestamps: false | alwaysShowTime: false | showWeekday: false | Today at hh:mm: uppercase 1`] = `"3,600,000 SECONDS AGO"`;
+exports[`components/time/ReadableTime timestamp: ms1HourInFuture | allowFutureTimestamps: false | alwaysShowTime: false | showWeekday: false | Today at hh:mm: uppercase 1`] = `"1 HOUR AGO"`;
 
 exports[`components/time/ReadableTime timestamp: msBeginningOfCenturyTime | allowFutureTimestamps: true | alwaysShowTime: false | showWeekday: false | mm dd yy at hh:mm 1`] = `"Dec 31, 1999"`;
 
@@ -26,13 +26,13 @@ exports[`components/time/ReadableTime timestamp: relativeThreshold * 2 + now | a
 
 exports[`components/time/ReadableTime timestamp: relativeThreshold * 2 + now | allowFutureTimestamps: true | alwaysShowTime: false | showWeekday: false | Today at hh:mm: uppercase 1`] = `"TODAY AT 5:30 PM"`;
 
-exports[`components/time/ReadableTime timestamp: withinRelativeThresholdAhead | allowFutureTimestamps: true | alwaysShowTime: false | showWeekday: false | in 30 minutes 1`] = `"in 1,800,000 seconds"`;
+exports[`components/time/ReadableTime timestamp: withinRelativeThresholdAhead | allowFutureTimestamps: true | alwaysShowTime: false | showWeekday: false | in 30 minutes 1`] = `"in 30 minutes"`;
 
-exports[`components/time/ReadableTime timestamp: withinRelativeThresholdAhead | allowFutureTimestamps: true | alwaysShowTime: false | showWeekday: false | in 30 minutes: uppercase 1`] = `"IN 1,800,000 SECONDS"`;
+exports[`components/time/ReadableTime timestamp: withinRelativeThresholdAhead | allowFutureTimestamps: true | alwaysShowTime: false | showWeekday: false | in 30 minutes: uppercase 1`] = `"IN 30 MINUTES"`;
 
-exports[`components/time/ReadableTime timestamp: withinRelativeThresholdBehind | allowFutureTimestamps: true | alwaysShowTime: false | showWeekday: false | 30 minutes ago 1`] = `"1,800,000 seconds ago"`;
+exports[`components/time/ReadableTime timestamp: withinRelativeThresholdBehind | allowFutureTimestamps: true | alwaysShowTime: false | showWeekday: false | 30 minutes ago 1`] = `"30 minutes ago"`;
 
-exports[`components/time/ReadableTime timestamp: withinRelativeThresholdBehind | allowFutureTimestamps: true | alwaysShowTime: false | showWeekday: false | 30 minutes ago: uppercase 1`] = `"1,800,000 SECONDS AGO"`;
+exports[`components/time/ReadableTime timestamp: withinRelativeThresholdBehind | allowFutureTimestamps: true | alwaysShowTime: false | showWeekday: false | 30 minutes ago: uppercase 1`] = `"30 MINUTES AGO"`;
 
 exports[`components/time/ReadableTime timestamp: yesterday | allowFutureTimestamps: true | alwaysShowTime: false | showWeekday: false | Yesterday at hh:mm 1`] = `"Yesterday at 3:30 PM"`;
 

package/src/elements/common/breadcrumbs/Breadcrumbs.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { injectIntl } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import Breadcrumb from './Breadcrumb';
 import BreadcrumbDropdown from './BreadcrumbDropdown';
 import BreadcrumbDelimiter from './BreadcrumbDelimiter';
@@ -18,10 +18,11 @@ import './Breadcrumbs.scss';
 type Props = {
     crumbs: Crumb[],
     delimiter: Delimiter,
+    intl: IntlShape,
     isSmall?: boolean,
     onCrumbClick: Function,
     rootId: string,
-} & InjectIntlProvidedProps;
+};
 
 /**
  * Filters out ancestors to root from the crumbs.

package/src/elements/common/create-folder-dialog/CreateFolderDialog.js

@@ -7,7 +7,7 @@
 import React from 'react';
 import Modal from 'react-modal';
 import { injectIntl, FormattedMessage } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import PrimaryButton from '../../../components/primary-button/PrimaryButton';
 import Button from '../../../components/button/Button';
 import messages from '../messages';
@@ -22,12 +22,13 @@ import {
 type Props = {
     appElement: HTMLElement,
     errorCode: string,
+    intl: IntlShape,
     isLoading: boolean,
     isOpen: boolean,
     onCancel: Function,
     onCreate: Function,
     parentElement: HTMLElement,
-} & InjectIntlProvidedProps;
+};
 
 /* eslint-disable jsx-a11y/label-has-for */
 const CreateFolderDialog = ({

package/src/elements/common/date/DateField.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { injectIntl, FormattedMessage } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import { isToday, isYesterday } from '../../../utils/datetime';
 import messages from '../messages';
 import './DateField.scss';
@@ -15,9 +15,10 @@ type Props = {
     capitalize?: boolean,
     date: string,
     dateFormat?: Object,
+    intl: IntlShape,
     omitCommas?: boolean,
     relative?: boolean,
-} & InjectIntlProvidedProps;
+};
 
 const DEFAULT_DATE_FORMAT = {
     weekday: 'short',

package/src/elements/common/share-access-select/ShareAccessSelect.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { injectIntl } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import messages from '../messages';
 import { ACCESS_NONE, ACCESS_OPEN, ACCESS_COLLAB, ACCESS_COMPANY } from '../../../constants';
 import type { BoxItem } from '../../../common/types/core';
@@ -15,9 +15,10 @@ import './ShareAccessSelect.scss';
 type Props = {
     canSetShareAccess: boolean,
     className: string,
+    intl: IntlShape,
     item: BoxItem,
     onChange: Function,
-} & InjectIntlProvidedProps;
+};
 
 const ShareAccessSelect = ({ className, canSetShareAccess, onChange, item, intl }: Props) => {
     const { allowed_shared_link_access_levels: allowedSharedAccessLevels, permissions, shared_link: sharedLink } = item;

package/src/elements/common/sub-header/SubHeaderLeft.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { injectIntl } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import messages from '../messages';
 import { Breadcrumbs } from '../breadcrumbs';
 import { VIEW_SEARCH, VIEW_FOLDER, VIEW_RECENTS, DELIMITER_CARET } from '../../../constants';
@@ -14,12 +14,13 @@ import type { View, Collection } from '../../../common/types/core';
 
 type Props = {
     currentCollection: Collection,
+    intl: IntlShape,
     isSmall: boolean,
     onItemClick: Function,
     rootId: string,
     rootName?: string,
     view: View,
-} & InjectIntlProvidedProps;
+};
 
 const SubHeaderLeft = ({ view, isSmall, rootId, rootName, currentCollection, onItemClick, intl }: Props) => {
     let crumbs;

package/src/elements/common/sub-header/ViewModeChangeButton.js

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { injectIntl } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import classNames from 'classnames';
 import noop from 'lodash/noop';
 
@@ -18,9 +18,10 @@ import './ViewModeChangeButton.scss';
 
 type Props = {
     className?: string,
+    intl: IntlShape,
     onViewModeChange?: (viewMode: ViewMode) => void,
     viewMode: ViewMode,
-} & InjectIntlProvidedProps;
+};
 
 const ViewModeChangeButton = ({ className = '', onViewModeChange = noop, intl, viewMode, ...rest }: Props) => {
     const isGridView = viewMode === VIEW_MODE_GRID;

package/src/elements/common/upload-dialog/UploadDialog.js

@@ -7,7 +7,7 @@
 import React from 'react';
 import Modal from 'react-modal';
 import { injectIntl } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import ContentUploader from '../../content-uploader';
 import messages from '../messages';
 import { CLASS_MODAL_CONTENT_FULL_BLEED, CLASS_MODAL_OVERLAY, CLASS_MODAL } from '../../../constants';
@@ -18,6 +18,7 @@ type Props = {
     appElement: HTMLElement,
     contentUploaderProps: ContentUploaderProps,
     currentFolderId: ?string,
+    intl: IntlShape,
     isOpen: boolean,
     onClose: Function,
     onUpload?: Function,
@@ -28,7 +29,7 @@ type Props = {
     sharedLinkPassword?: string,
     token: Token,
     uploadHost: string,
-} & InjectIntlProvidedProps;
+};
 
 const UploadDialog = ({
     isOpen,

package/src/elements/content-explorer/DeleteConfirmationDialog.js

@@ -7,7 +7,7 @@
 import React from 'react';
 import Modal from 'react-modal';
 import { injectIntl, FormattedMessage } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import PrimaryButton from '../../components/primary-button/PrimaryButton';
 import Button from '../../components/button/Button';
 import messages from '../common/messages';
@@ -18,13 +18,14 @@ import './DeleteConfirmationDialog.scss';
 
 type Props = {
     appElement: HTMLElement,
+    intl: IntlShape,
     isLoading: boolean,
     isOpen: boolean,
     item: BoxItem,
     onCancel: Function,
     onDelete: Function,
     parentElement: HTMLElement,
-} & InjectIntlProvidedProps;
+};
 
 const DeleteConfirmationDialog = ({
     isOpen,

package/src/elements/content-explorer/ItemList.js

@@ -7,7 +7,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { injectIntl } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import { Table, Column } from '@box/react-virtualized/dist/es/Table';
 import AutoSizer from '@box/react-virtualized/dist/es/AutoSizer';
 import KeyBinder from '../common/KeyBinder';
@@ -32,6 +32,7 @@ type Props = {
     canShare: boolean,
     currentCollection: Collection,
     focusedRow: number,
+    intl: IntlShape,
     isMedium: boolean,
     isSmall: boolean,
     isTouch: boolean,
@@ -47,7 +48,7 @@ type Props = {
     rootId: string,
     tableRef: Function,
     view: View,
-} & InjectIntlProvidedProps;
+};
 
 const ItemList = ({
     view,

package/src/elements/content-explorer/PreviewDialog.js

@@ -7,7 +7,7 @@
 import React from 'react';
 import Modal from 'react-modal';
 import { injectIntl } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import cloneDeep from 'lodash/cloneDeep';
 import messages from '../common/messages';
 import ContentPreview from '../content-preview';
@@ -23,6 +23,7 @@ type Props = {
     canDownload: boolean,
     contentPreviewProps: ContentPreviewProps,
     currentCollection: Collection,
+    intl: IntlShape,
     isOpen: boolean,
     isTouch: boolean,
     item: BoxItem,
@@ -38,7 +39,7 @@ type Props = {
     staticHost: string,
     staticPath: string,
     token: Token,
-} & InjectIntlProvidedProps;
+};
 
 const PreviewDialog = ({
     item,

package/src/elements/content-explorer/RenameDialog.js

@@ -7,7 +7,7 @@
 import React from 'react';
 import Modal from 'react-modal';
 import { injectIntl, FormattedMessage } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import PrimaryButton from '../../components/primary-button/PrimaryButton';
 import Button from '../../components/button/Button';
 import messages from '../common/messages';
@@ -23,13 +23,14 @@ import type { BoxItem } from '../../common/types/core';
 type Props = {
     appElement: HTMLElement,
     errorCode: string,
+    intl: IntlShape,
     isLoading: boolean,
     isOpen: boolean,
     item: BoxItem,
     onCancel: Function,
     onRename: Function,
     parentElement: HTMLElement,
-} & InjectIntlProvidedProps;
+};
 
 /* eslint-disable jsx-a11y/label-has-for */
 const RenameDialog = ({

package/src/elements/content-explorer/ShareDialog.js

@@ -8,7 +8,7 @@ import React from 'react';
 import Modal from 'react-modal';
 import noop from 'lodash/noop';
 import { injectIntl, FormattedMessage } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import PrimaryButton from '../../components/primary-button/PrimaryButton';
 import Button from '../../components/button/Button';
 import messages from '../common/messages';
@@ -21,13 +21,14 @@ import './ShareDialog.scss';
 type Props = {
     appElement: HTMLElement,
     canSetShareAccess: boolean,
+    intl: IntlShape,
     isLoading: boolean,
     isOpen: boolean,
     item: BoxItem,
     onCancel: Function,
     onShareAccessChange: Function,
     parentElement: HTMLElement,
-} & InjectIntlProvidedProps;
+};
 
 const ShareDialog = ({
     isOpen,

package/src/elements/content-preview/PreviewNavigation.js

@@ -6,8 +6,8 @@
 
 import * as React from 'react';
 import { injectIntl } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import { Route } from 'react-router-dom';
-import type { InjectIntlProvidedProps } from 'react-intl';
 import IconNavigateLeft from '../../icons/general/IconNavigateLeft';
 import IconNavigateRight from '../../icons/general/IconNavigateRight';
 import PlainButton from '../../components/plain-button/PlainButton';
@@ -17,9 +17,10 @@ import type { BoxItem } from '../../common/types/core';
 type Props = {
     collection: Array<string | BoxItem>,
     currentIndex: number,
+    intl: IntlShape,
     onNavigateLeft: Function,
     onNavigateRight: Function,
-} & InjectIntlProvidedProps;
+};
 
 const PreviewNavigation = ({ collection = [], currentIndex, intl, onNavigateLeft, onNavigateRight }: Props) => {
     const hasLeftNavigation = collection.length > 1 && currentIndex > 0 && currentIndex < collection.length;

package/src/elements/content-preview/preview-header/PreviewHeader.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { injectIntl } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import classNames from 'classnames';
 import getProp from 'lodash/get';
 import AsyncLoad from '../../common/async-load';
@@ -33,13 +33,14 @@ type Props = {
     contentAnswersProps?: ContentAnswersProps,
     contentOpenWithProps?: ContentOpenWithProps,
     file?: BoxItem,
+    intl: IntlShape,
     logoUrl?: string,
     onClose?: Function,
     onDownload: Function,
     onPrint: Function,
     selectedVersion: ?BoxItemVersion,
     token: ?string,
-} & InjectIntlProvidedProps;
+};
 
 const LoadableContentOpenWith = AsyncLoad({
     loader: () => import(/* webpackMode: "lazy", webpackChunkName: "content-open-with" */ '../../content-open-with'),

package/src/elements/content-sidebar/SidebarAccessStats.js

@@ -7,7 +7,7 @@
 import React from 'react';
 import isFinite from 'lodash/isFinite';
 import { injectIntl, FormattedMessage } from 'react-intl';
-import type { MessageDescriptor, InjectIntlProvidedProps } from 'react-intl';
+import type { MessageDescriptor, IntlShape } from 'react-intl';
 import AccessStats from '../../features/access-stats/AccessStats';
 import messages from '../common/messages';
 import { INTERACTION_TARGET, SECTION_TARGETS, DETAILS_TARGETS } from '../common/interactionTargets';
@@ -21,8 +21,9 @@ type Props = {
     accessStats?: FileAccessStats,
     error?: MessageDescriptor,
     file: BoxItem,
+    intl: IntlShape,
     onAccessStatsClick?: Function,
-} & InjectIntlProvidedProps;
+};
 
 const SidebarAccessStats = ({
     onAccessStatsClick,

package/src/elements/content-sidebar/SidebarFileProperties.js

@@ -7,7 +7,7 @@
 import React from 'react';
 import getProp from 'lodash/get';
 import { injectIntl } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import ItemProperties from '../../features/item-details/ItemProperties';
 import LoadingIndicatorWrapper from '../../components/loading-indicator/LoadingIndicatorWrapper';
 import getFileSize from '../../utils/getFileSize';
@@ -22,11 +22,12 @@ type Props = {
     file: BoxItem,
     hasClassification: boolean,
     hasRetentionPolicy: boolean,
+    intl: IntlShape,
     isLoading: boolean,
     onDescriptionChange: Function,
     onRetentionPolicyExtendClick?: Function,
     retentionPolicy?: Object,
-} & InjectIntlProvidedProps;
+};
 
 const SidebarFileProperties = ({
     file,

package/src/elements/content-sidebar/SidebarNav.js

@@ -6,7 +6,7 @@
 
 import * as React from 'react';
 import { injectIntl } from 'react-intl';
-import type { InjectIntlProvidedProps } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import AdditionalTabs from './additional-tabs';
 import IconChatRound from '../../icons/general/IconChatRound';
 import IconDocInfo from '../../icons/general/IconDocInfo';
@@ -37,9 +37,10 @@ type Props = {
     hasDetails: boolean,
     hasMetadata: boolean,
     hasSkills: boolean,
+    intl: IntlShape,
     isOpen?: boolean,
     onNavigate?: (SyntheticEvent<>, NavigateOptions) => void,
-} & InjectIntlProvidedProps;
+};
 
 const SidebarNav = ({
     additionalTabs,