box-ui-elements 16.0.0-beta.9 → 16.0.0

package/src/components/table/makeSelectable.js

@@ -7,7 +7,6 @@ import { FormattedMessage } from 'react-intl';
 
 import { Hotkeys, HotkeyRecord } from '../hotkeys';
 import messages from './messages';
-
 import shiftSelect from './shiftSelect';
 
 const SEARCH_TIMER_DURATION = 1000;
@@ -22,6 +21,8 @@ function makeSelectable(BaseTable) {
             className: PropTypes.string,
             /** Array of unique IDs of the items in the table. Each item should be a string or number, in the order they appear in the table. */
             data: PropTypes.array.isRequired,
+            gridColumnCount: PropTypes.number,
+            isGridView: PropTypes.bool,
             /** Called when focus changes. `(focusedIndex: number) => void` */
             onFocus: PropTypes.func,
             /** Called when selection changes. `(selectedItems: Array<string> | Array<number> | Set<string> | Set<number>) => void` */
@@ -38,6 +39,8 @@ function makeSelectable(BaseTable) {
              * with an ImmutableJS Set.
              */
             selectedItems: PropTypes.oneOfType([PropTypes.array, ImmutablePropTypes.set]),
+            /** Array of unique IDs of the items in the table that are loaded and accessible. If not provided, this will default to all data */
+            loadedData: PropTypes.array,
             enableHotkeys: PropTypes.bool,
             /** Translated type for hotkeys. If not provided, then the hotkeys will not appear in the help modal. */
             hotkeyType: PropTypes.string,
@@ -98,118 +101,261 @@ function makeSelectable(BaseTable) {
             }
         };
 
+        getSharedHotkeyConfigs = () => {
+            const { hotkeyType } = this.props;
+            return [
+                new HotkeyRecord({
+                    key: 'shift+x',
+                    description: <FormattedMessage {...messages.shiftXDescription} />,
+                    handler: () => {
+                        const { focusedIndex } = this.state;
+
+                        if (focusedIndex === undefined) {
+                            return;
+                        }
+
+                        this.selectToggle(focusedIndex);
+                    },
+                    type: hotkeyType,
+                }),
+                new HotkeyRecord({
+                    key: ['meta+a', 'ctrl+a'],
+                    description: <FormattedMessage {...messages.selectAllDescription} />,
+                    handler: event => {
+                        const { data } = this.props;
+
+                        event.preventDefault();
+
+                        this.onSelect(new Set(data), this.state.focusedIndex);
+                    },
+                    type: hotkeyType,
+                }),
+                new HotkeyRecord({
+                    key: 'esc',
+                    description: <FormattedMessage {...messages.deselectAllDescription} />,
+                    handler: () => {
+                        this.onSelect(new Set(), this.state.focusedIndex);
+                    },
+                    type: hotkeyType,
+                }),
+            ];
+        };
+
+        getListViewHotKeyConfigs = () => {
+            const { hotkeyType } = this.props;
+            return [
+                new HotkeyRecord({
+                    key: 'down',
+                    description: <FormattedMessage {...messages.downDescription} />,
+                    handler: event => {
+                        const { data } = this.props;
+                        const { focusedIndex } = this.state;
+
+                        event.preventDefault();
+
+                        const newFocusedIndex =
+                            focusedIndex !== undefined ? Math.min(focusedIndex + 1, data.length - 1) : 0;
+                        this.setState({ focusedIndex: newFocusedIndex });
+                    },
+                    type: hotkeyType,
+                }),
+                new HotkeyRecord({
+                    key: 'up',
+                    description: <FormattedMessage {...messages.upDescription} />,
+                    handler: event => {
+                        const { focusedIndex = 0 } = this.state;
+
+                        event.preventDefault();
+
+                        const newFocusedIndex = Math.max(focusedIndex - 1, 0);
+                        this.setState({ focusedIndex: newFocusedIndex });
+                    },
+                    type: hotkeyType,
+                }),
+                new HotkeyRecord({
+                    key: 'shift+down',
+                    description: <FormattedMessage {...messages.shiftDownDescription} />,
+                    handler: () => {
+                        const { data } = this.props;
+                        const { focusedIndex } = this.state;
+
+                        if (focusedIndex === undefined) {
+                            return;
+                        }
+
+                        const newFocusedIndex = Math.min(focusedIndex + 1, data.length - 1);
+                        this.handleShiftKeyDown(newFocusedIndex, data.length - 1);
+                    },
+                    type: hotkeyType,
+                }),
+                new HotkeyRecord({
+                    key: 'shift+up',
+                    description: <FormattedMessage {...messages.shiftUpDescription} />,
+                    handler: () => {
+                        const { focusedIndex } = this.state;
+
+                        if (focusedIndex === undefined) {
+                            return;
+                        }
+
+                        const newFocusedIndex = Math.max(focusedIndex - 1, 0);
+                        this.handleShiftKeyDown(newFocusedIndex, 0);
+                    },
+                    type: hotkeyType,
+                }),
+            ];
+        };
+
+        getGridViewHotKeyConfigs = () => {
+            const { hotkeyType } = this.props;
+            return [
+                new HotkeyRecord({
+                    key: 'right',
+                    description: <FormattedMessage {...messages.downDescription} />,
+                    handler: event => {
+                        const { data } = this.props;
+                        const { focusedIndex } = this.state;
+
+                        event.preventDefault();
+
+                        const newFocusedIndex =
+                            focusedIndex !== undefined ? Math.min(focusedIndex + 1, data.length - 1) : 0;
+                        this.setState({ focusedIndex: newFocusedIndex });
+                    },
+                    type: hotkeyType,
+                }),
+                new HotkeyRecord({
+                    key: 'left',
+                    description: <FormattedMessage {...messages.upDescription} />,
+                    handler: event => {
+                        const { focusedIndex = 0 } = this.state;
+
+                        event.preventDefault();
+
+                        const newFocusedIndex = Math.max(focusedIndex - 1, 0);
+                        this.setState({ focusedIndex: newFocusedIndex });
+                    },
+                    type: hotkeyType,
+                }),
+                new HotkeyRecord({
+                    key: 'down',
+                    description: <FormattedMessage {...messages.downDescription} />,
+                    handler: event => {
+                        const { data, gridColumnCount } = this.props;
+                        const { focusedIndex } = this.state;
+
+                        event.preventDefault();
+
+                        const newFocusedIndex =
+                            focusedIndex !== undefined ? Math.min(focusedIndex + gridColumnCount, data.length - 1) : 0;
+                        this.setState({ focusedIndex: newFocusedIndex });
+                    },
+                    type: hotkeyType,
+                }),
+                new HotkeyRecord({
+                    key: 'up',
+                    description: <FormattedMessage {...messages.upDescription} />,
+                    handler: event => {
+                        const { gridColumnCount } = this.props;
+                        const { focusedIndex = 0 } = this.state;
+
+                        event.preventDefault();
+
+                        const newFocusedIndex = Math.max(focusedIndex - gridColumnCount, 0);
+                        this.setState({ focusedIndex: newFocusedIndex });
+                    },
+                    type: hotkeyType,
+                }),
+                new HotkeyRecord({
+                    key: 'shift+right',
+                    description: <FormattedMessage {...messages.shiftDownDescription} />,
+                    handler: () => {
+                        const { data } = this.props;
+                        const { focusedIndex } = this.state;
+
+                        if (focusedIndex === undefined) {
+                            return;
+                        }
+
+                        const newFocusedIndex = Math.min(focusedIndex + 1, data.length - 1);
+                        this.handleShiftKeyDownForGrid(newFocusedIndex, data.length - 1);
+                    },
+                    type: hotkeyType,
+                }),
+                new HotkeyRecord({
+                    key: 'shift+left',
+                    description: <FormattedMessage {...messages.shiftUpDescription} />,
+                    handler: () => {
+                        const { focusedIndex } = this.state;
+
+                        if (focusedIndex === undefined) {
+                            return;
+                        }
+
+                        const newFocusedIndex = Math.max(focusedIndex - 1, 0);
+                        this.handleShiftKeyDownForGrid(newFocusedIndex, 0);
+                    },
+                    type: hotkeyType,
+                }),
+                new HotkeyRecord({
+                    key: 'shift+down',
+                    description: <FormattedMessage {...messages.shiftDownDescription} />,
+                    handler: () => {
+                        const { data, gridColumnCount } = this.props;
+                        const { focusedIndex } = this.state;
+
+                        if (focusedIndex === undefined) {
+                            return;
+                        }
+
+                        const newFocusedIndex = Math.min(focusedIndex + gridColumnCount, data.length - 1);
+                        this.handleShiftKeyDownForGrid(newFocusedIndex, data.length - 1);
+                    },
+                    type: hotkeyType,
+                }),
+                new HotkeyRecord({
+                    key: 'shift+up',
+                    description: <FormattedMessage {...messages.shiftUpDescription} />,
+                    handler: () => {
+                        const { gridColumnCount } = this.props;
+                        const { focusedIndex } = this.state;
+
+                        if (focusedIndex === undefined) {
+                            return;
+                        }
+
+                        const newFocusedIndex = Math.max(focusedIndex - gridColumnCount, 0);
+                        this.handleShiftKeyDownForGrid(newFocusedIndex, 0);
+                    },
+                    type: hotkeyType,
+                }),
+            ];
+        };
+
         getHotkeyConfigs = () => {
-            const { enableHotkeys, hotkeyType } = this.props;
+            const { enableHotkeys, isGridView, gridColumnCount } = this.props;
 
             if (!enableHotkeys && !this.hotkeys) {
                 this.hotkeys = [];
             }
 
             if (!this.hotkeys) {
-                this.hotkeys = [
-                    new HotkeyRecord({
-                        key: 'down',
-                        description: <FormattedMessage {...messages.downDescription} />,
-                        handler: event => {
-                            const { data } = this.props;
-                            const { focusedIndex } = this.state;
-
-                            event.preventDefault();
-
-                            const newFocusedIndex =
-                                focusedIndex !== undefined ? Math.min(focusedIndex + 1, data.length - 1) : 0;
-                            this.setState({ focusedIndex: newFocusedIndex });
-                        },
-                        type: hotkeyType,
-                    }),
-                    new HotkeyRecord({
-                        key: 'up',
-                        description: <FormattedMessage {...messages.upDescription} />,
-                        handler: event => {
-                            const { focusedIndex = 0 } = this.state;
-
-                            event.preventDefault();
-
-                            const newFocusedIndex = Math.max(focusedIndex - 1, 0);
-                            this.setState({ focusedIndex: newFocusedIndex });
-                        },
-                        type: hotkeyType,
-                    }),
-                    new HotkeyRecord({
-                        key: 'shift+x',
-                        description: <FormattedMessage {...messages.shiftXDescription} />,
-                        handler: () => {
-                            const { focusedIndex } = this.state;
-
-                            if (focusedIndex === undefined) {
-                                return;
-                            }
-
-                            this.selectToggle(focusedIndex);
-                        },
-                        type: hotkeyType,
-                    }),
-                    new HotkeyRecord({
-                        key: ['meta+a', 'ctrl+a'],
-                        description: <FormattedMessage {...messages.selectAllDescription} />,
-                        handler: event => {
-                            const { data } = this.props;
-
-                            event.preventDefault();
-
-                            this.onSelect(new Set(data), this.state.focusedIndex);
-                        },
-                        type: hotkeyType,
-                    }),
-                    new HotkeyRecord({
-                        key: 'shift+down',
-                        description: <FormattedMessage {...messages.shiftDownDescription} />,
-                        handler: () => {
-                            const { data } = this.props;
-                            const { focusedIndex } = this.state;
-
-                            if (focusedIndex === undefined) {
-                                return;
-                            }
-
-                            const newFocusedIndex = Math.min(focusedIndex + 1, data.length - 1);
-                            this.handleShiftKeyDown(newFocusedIndex, data.length - 1);
-                        },
-                        type: hotkeyType,
-                    }),
-                    new HotkeyRecord({
-                        key: 'shift+up',
-                        description: <FormattedMessage {...messages.shiftUpDescription} />,
-                        handler: () => {
-                            const { focusedIndex } = this.state;
-
-                            if (focusedIndex === undefined) {
-                                return;
-                            }
-
-                            const newFocusedIndex = Math.max(focusedIndex - 1, 0);
-                            this.handleShiftKeyDown(newFocusedIndex, 0);
-                        },
-                        type: hotkeyType,
-                    }),
-                    new HotkeyRecord({
-                        key: 'esc',
-                        description: <FormattedMessage {...messages.deselectAllDescription} />,
-                        handler: () => {
-                            this.onSelect(new Set(), this.state.focusedIndex);
-                        },
-                        type: hotkeyType,
-                    }),
-                ];
+                const viewSpecificHotKeyConfigs =
+                    isGridView && gridColumnCount !== undefined
+                        ? this.getGridViewHotKeyConfigs()
+                        : this.getListViewHotKeyConfigs();
+
+                this.hotkeys = [...this.getSharedHotkeyConfigs(), ...viewSpecificHotKeyConfigs];
             }
 
             return this.hotkeys;
         };
 
         getProcessedProps = () => {
-            const { selectedItems } = this.props;
+            const { data, loadedData, selectedItems } = this.props;
             return {
                 ...this.props,
+                loadedData: loadedData ? Set(loadedData) : Set(data),
                 selectedItems: Set.isSet(selectedItems) ? selectedItems : new Set(selectedItems),
             };
         };
@@ -326,6 +472,61 @@ function makeSelectable(BaseTable) {
             this.onSelect(selectedItems.add(data[focusedIndex]), newFocusedIndex);
         };
 
+        isContiguousSelection = (selectedItemIndecies, sourceIndex, targetIndex) => {
+            if (sourceIndex < targetIndex && selectedItemIndecies.has(sourceIndex - 1)) {
+                return true;
+            }
+            if (targetIndex < sourceIndex && selectedItemIndecies.has(sourceIndex + 1)) {
+                return true;
+            }
+            return false;
+        };
+
+        handleShiftKeyDownForGrid = newFocusedIndex => {
+            const { data, loadedData, selectedItems } = this.getProcessedProps();
+            const { focusedIndex } = this.state;
+
+            const dataSize = data.length;
+            const targetIndex = newFocusedIndex < 0 ? 0 : Math.min(newFocusedIndex, dataSize - 1);
+            const isSourceSelected = selectedItems.has(data[focusedIndex]);
+            const isTargetSelected = selectedItems.has(data[targetIndex]);
+
+            // if data is not loaded, we don't want it to be able to be selected
+            if (!loadedData.has(data[targetIndex])) {
+                return;
+            }
+
+            const selectedItemIndices = new Set(
+                data.reduce((rows, item, i) => {
+                    if (selectedItems.has(item)) {
+                        rows.push(i);
+                    }
+                    return rows;
+                }, []),
+            );
+
+            // reset the anchor on a new selection block
+            if (
+                !isSourceSelected &&
+                !isTargetSelected &&
+                // if we are starting a new mass selection adjacent selected block, we want to connect them
+                !this.isContiguousSelection(selectedItemIndices, focusedIndex, targetIndex)
+            ) {
+                this.anchorIndex = focusedIndex;
+            }
+
+            const newSelectedItemIndices = shiftSelect(
+                selectedItemIndices,
+                focusedIndex,
+                targetIndex,
+                this.anchorIndex,
+            );
+
+            const newSelectedItems = newSelectedItemIndices.map(i => data[i]);
+
+            this.onSelect(newSelectedItems, targetIndex);
+        };
+
         handleKeyboardSearch = event => {
             const { searchStrings } = this.props;
 

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import sinon from 'sinon';
-import 'full-icu';
 import { createIntl } from 'react-intl';
 import russianMessages from '../../../../i18n/ru-RU.js';
 import japaneseMessages from '../../../../i18n/ja-JP.js';

package/src/components/tooltip/Tooltip.tsx

@@ -81,6 +81,8 @@ export type DefaultTooltipProps = {
 };
 
 export type TooltipProps = {
+    /** Sets aria-hidden attribute on tooltip */
+    ariaHidden?: boolean;
     /** An HTML element to append the tooltip container into (otherwise appends to body) */
     bodyElement?: HTMLElement;
     /** A React element to put the tooltip on */
@@ -232,6 +234,7 @@ class Tooltip extends React.Component<TooltipProps, State> {
 
     render() {
         const {
+            ariaHidden,
             bodyElement,
             children,
             className,
@@ -361,7 +364,7 @@ class Tooltip extends React.Component<TooltipProps, State> {
                 <div
                     role={theme === TooltipTheme.ERROR ? undefined : 'tooltip'}
                     aria-live="polite"
-                    aria-hidden={isLabelMatchingTooltipText}
+                    aria-hidden={ariaHidden || isLabelMatchingTooltipText}
                     data-testid="bdl-Tooltip"
                 >
                     {tooltipInner}
@@ -370,7 +373,7 @@ class Tooltip extends React.Component<TooltipProps, State> {
         ) : (
             <div
                 aria-live="polite"
-                aria-hidden={isLabelMatchingTooltipText}
+                aria-hidden={ariaHidden || isLabelMatchingTooltipText}
                 className={classes}
                 data-testid="bdl-Tooltip"
                 id={this.tooltipID}

package/src/components/tooltip/__tests__/Tooltip.test.tsx

@@ -258,6 +258,16 @@ describe('components/tooltip/Tooltip', () => {
             expect(tooltip.prop('aria-hidden')).toBe(true);
         });
 
+        test('should set aria-hidden as true if ariaHidden is true', () => {
+            const wrapper = shallow(
+                <Tooltip isShown text="test" ariaHidden>
+                    <button aria-label="test" />
+                </Tooltip>,
+            );
+            const tooltip = wrapper.childAt(1);
+            expect(tooltip.prop('aria-hidden')).toBe(true);
+        });
+
         test('should set aria-hidden as false if aria-label does not exist', () => {
             const wrapper = shallow(
                 <Tooltip isShown text="hi">

package/src/components/tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`components/tooltip/Tooltip render() should match snapshot when stopBubble is set 1`] = `
 <div
   className="tooltip bdl-Tooltip"
-  id="tooltip24"
+  id="tooltip25"
   onClick={[Function]}
   onContextMenu={[Function]}
   onKeyPress={[Function]}

package/src/constants.js

@@ -35,6 +35,13 @@ export const TYPE_FOLDER: 'folder' = 'folder';
 export const TYPE_FILE: 'file' = 'file';
 export const TYPE_WEBLINK: 'web_link' = 'web_link';
 
+/* ----------------------- Feed Items Types ---------------------------- */
+export const FEED_ITEM_TYPE_APP_ACTIVITY: 'app_activity' = 'app_activity';
+export const FEED_ITEM_TYPE_ANNOTATION: 'annotation' = 'annotation';
+export const FEED_ITEM_TYPE_COMMENT: 'comment' = 'comment';
+export const FEED_ITEM_TYPE_TASK: 'task' = 'task';
+export const FEED_ITEM_TYPE_VERSION: 'file_version' = 'file_version';
+
 /* -------------------- Typed Prefix-------------------------- */
 export const TYPED_ID_FOLDER_PREFIX = 'folder_';
 export const TYPED_ID_FILE_PREFIX = 'file_';
@@ -451,6 +458,10 @@ export const TASK_EDIT_MODE_EDIT: 'EDIT' = 'EDIT';
 /* ----------------- Task Validation ---------------- */
 export const TASK_MAX_GROUP_ASSIGNEES: 250 = 250;
 
+/* ------------------ Comment (and Annotation) Statuses ----------------- */
+export const COMMENT_STATUS_OPEN: 'open' = 'open';
+export const COMMENT_STATUS_RESOLVED: 'resolved' = 'resolved';
+
 /* ----------------- Theme ---------------------------*/
 export const THEME_VERY_DARK = 'vDark';
 export const THEME_DARK = 'dark';