@redsift/design-system 11.6.0-muiv5-alpha.5 → 11.6.0-muiv5-alpha.7

package/_internal/useFocusOnList.js

@@ -1,5 +1,420 @@
-import React, { RefObject } from 'react';
-import { f as FocusWithinGroupProps, F as FocusWithinGroupState, e as FocusWithinGroupContextProps, c as FocusWithinGroupAction, U as UseFocusWithinGroupProps, d as UseFocusGroupProps } from './types13.js';
+import { _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
+import React__default, { useReducer, useEffect, useMemo, useContext, useCallback } from 'react';
+import { F as FocusWithinGroupActionType, N as Navigation, E as EventKey, a as FOCUS_WITHING_GROUP_INITIAL_STATE, b as FocusWithinGroupContext } from './useFocusOnListItem.js';
+
+const DOCUMENT_POSITION_FOLLOWING = 4;
+const FocusWithinGroupReducer = (state, action) => {
+  switch (action.type) {
+    case FocusWithinGroupActionType.REGISTER_TAB_STOP:
+      {
+        const newTabStop = action.payload;
+        if (!newTabStop.domElementRef.current) {
+          return state;
+        }
+
+        // Iterate backwards through state.tabStops since it is
+        // most likely that the tab stop will need to be inserted
+        // at the end of that array.
+        let indexToInsertAt = -1;
+        for (let i = state.tabStops.length - 1; i >= 0; --i) {
+          const loopTabStop = state.tabStops[i];
+          if (loopTabStop.id === newTabStop.id) {
+            // console.warn(false, `'${newTabStop.id}' tab stop already registered`);
+            return state;
+          }
+          // The compareDocumentPosition condition is true
+          // if newTabStop follows loopTabStop:
+          if (indexToInsertAt === -1 && loopTabStop.domElementRef.current && !!(loopTabStop.domElementRef.current.compareDocumentPosition(newTabStop.domElementRef.current) & DOCUMENT_POSITION_FOLLOWING)) {
+            indexToInsertAt = i + 1;
+            break;
+          }
+        }
+
+        // The indexToInsertAt is -1 when newTabStop should be inserted
+        // at the start of tabStops (the compareDocumentPosition condition
+        // always returns false in that case).
+        if (indexToInsertAt === -1) {
+          indexToInsertAt = 0;
+        }
+        const newTabStops = state.tabStops.slice();
+        newTabStops.splice(indexToInsertAt, 0, newTabStop);
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          selectedId: state.focusOnInit ? getUpdatedSelectedId(newTabStops, state.selectedId) : null,
+          tabStops: newTabStops,
+          rowStartMap: null
+        });
+      }
+    case FocusWithinGroupActionType.UNREGISTER_TAB_STOP:
+      {
+        const id = action.payload.id;
+        const newTabStops = state.tabStops.filter(tabStop => tabStop.id !== id);
+        if (newTabStops.length === state.tabStops.length) {
+          // console.warn(false, `'${id}' tab stop already unregistered`);
+          return state;
+        }
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          selectedId: state.focusOnInit ? getUpdatedSelectedId(newTabStops, state.selectedId) : null,
+          tabStops: newTabStops,
+          rowStartMap: null
+        });
+      }
+    case FocusWithinGroupActionType.TAB_STOP_UPDATED:
+      {
+        const {
+          id,
+          rowIndex,
+          isDisabled,
+          value
+        } = action.payload;
+        const index = state.tabStops.findIndex(tabStop => tabStop.id === id);
+        if (index === -1) {
+          console.warn(false, `'${id}' tab stop not registered`);
+          return state;
+        }
+        const tabStop = state.tabStops[index];
+        if (tabStop.isDisabled === isDisabled && tabStop.rowIndex === rowIndex && tabStop.value === value) {
+          // Nothing to do so short-circuit.
+          return state;
+        }
+        const newTabStop = _objectSpread2(_objectSpread2({}, tabStop), {}, {
+          rowIndex,
+          isDisabled,
+          value
+        });
+        const newTabStops = state.tabStops.slice();
+        newTabStops.splice(index, 1, newTabStop);
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          selectedId: state.focusOnInit ? getUpdatedSelectedId(newTabStops, state.selectedId) : null,
+          tabStops: newTabStops,
+          rowStartMap: null
+        });
+      }
+    case FocusWithinGroupActionType.KEY_DOWN_ON_ITEM:
+      {
+        const {
+          id,
+          key,
+          ctrlKey
+        } = action.payload;
+        const index = state.tabStops.findIndex(tabStop => tabStop.id === id);
+        if (index === -1) {
+          console.warn(false, `'${id}' tab stop not registered`);
+          return state;
+        }
+        return moveSelectionFromKey(state, index, key, ctrlKey);
+      }
+    case FocusWithinGroupActionType.CLICK_ON_ITEM:
+      {
+        const id = action.payload.id;
+        const index = state.tabStops.findIndex(tabStop => tabStop.id === id);
+        if (index === -1) {
+          console.warn(false, `'${id}' tab stop not registered`);
+          return state;
+        }
+        const currentTabStop = state.tabStops[index];
+        return currentTabStop.isDisabled ? state : selectTabStop(state, currentTabStop, undefined, state.focusOnClick);
+      }
+    case FocusWithinGroupActionType.FOCUS_ON_LIST:
+      {
+        var _action$payload$id, _state$tabStops$;
+        const id = (_action$payload$id = action.payload.id) !== null && _action$payload$id !== void 0 ? _action$payload$id : (_state$tabStops$ = state.tabStops[0]) === null || _state$tabStops$ === void 0 ? void 0 : _state$tabStops$.id;
+        const index = state.tabStops.findIndex(tabStop => tabStop.id === id);
+        if (index === -1) {
+          return state;
+        }
+        const currentTabStop = state.tabStops[index];
+        return currentTabStop.isDisabled ? _objectSpread2(_objectSpread2({}, state), {}, {
+          delayedAction: undefined
+        }, action.payload) : selectTabStop(_objectSpread2(_objectSpread2({}, state), {}, {
+          delayedAction: undefined
+        }, action.payload), currentTabStop, undefined, state.focusOnClick);
+      }
+    case FocusWithinGroupActionType.BLUR_ON_LIST:
+      {
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          activedescendant: ['', '']
+        });
+      }
+    case FocusWithinGroupActionType.KEY_DOWN_ON_LIST:
+      {
+        const {
+          key,
+          ctrlKey
+        } = action.payload;
+        let index = state.tabStops.findIndex(tabStop => tabStop.id === state.selectedId);
+        if (index === -1) {
+          if (state.focusOnInit) {
+            console.warn(false, `'${state.selectedId}' tab stop not registered`);
+            return _objectSpread2(_objectSpread2({}, state), {}, {
+              delayedAction: undefined
+            });
+          } else {
+            index = 0;
+          }
+        }
+        return moveSelectionFromKey(_objectSpread2(_objectSpread2({}, state), {}, {
+          delayedAction: undefined
+        }), index, key, ctrlKey);
+      }
+    case FocusWithinGroupActionType.OPTIONS_UPDATED:
+      return _objectSpread2(_objectSpread2({}, state), action.payload);
+    case FocusWithinGroupActionType.FILTER_LIST:
+      return _objectSpread2(_objectSpread2({}, state), {}, {
+        selectedId: null
+      }, action.payload);
+    case FocusWithinGroupActionType.DELAY_ACTION:
+      return _objectSpread2(_objectSpread2({}, state), {}, {
+        delayedAction: action.payload
+      });
+    /* istanbul ignore next */
+    default:
+      return state;
+  }
+};
+function findIndexOfVeryFirstActiveTabStop(tabStops) {
+  return tabStops.findIndex(tabStop => !tabStop.isDisabled);
+}
+function findIndexOfVeryLastActiveTabStop(tabStops) {
+  for (let i = tabStops.length - 1; i >= 0; --i) {
+    const tabStop = tabStops[i];
+    if (!tabStop.isDisabled) {
+      return i;
+    }
+  }
+  return -1;
+}
+
+// Determine the updated value for selectedId:
+function getUpdatedSelectedId(tabStops, currentSelectedId) {
+  if (currentSelectedId === null) {
+    // There is not currently selected tab stop, so find
+    // the first tab stop that is not isDisabled and return
+    // its id, otherwise return null.
+    const index = tabStops.findIndex(tabStop => !tabStop.isDisabled);
+    return index === -1 ? null : tabStops[index].id;
+  }
+  let index = tabStops.findIndex(tabStop => tabStop.id === currentSelectedId);
+  if (index !== -1 && !tabStops[index].isDisabled) {
+    // The current selected id is still valid, so return it.
+    return currentSelectedId;
+  }
+
+  // Finds the first tab stop that is not isDisabled and return
+  // its id, otherwise return null.
+  index = tabStops.findIndex(tabStop => !tabStop.isDisabled);
+  return index === -1 ? null : tabStops[index].id;
+}
+
+// Translates the user key down event info into a navigation instruction.
+function getNavigationValue(key, ctrlKey, isGrid, direction, loopAround, isFirst, isLast) {
+  switch (key) {
+    case EventKey.ArrowLeft:
+      if (isGrid || direction === 'horizontal' || direction === 'both') {
+        return !isGrid && loopAround && isFirst ? Navigation.VERY_LAST : Navigation.PREVIOUS;
+      }
+      return null;
+    case EventKey.ArrowRight:
+      if (isGrid || direction === 'horizontal' || direction === 'both') {
+        return !isGrid && loopAround && isLast ? Navigation.VERY_FIRST : Navigation.NEXT;
+      }
+      return null;
+    case EventKey.ArrowUp:
+      if (isGrid) {
+        return Navigation.PREVIOUS_ROW;
+      } else if (direction === 'vertical' || direction === 'both') {
+        return loopAround && isFirst ? Navigation.VERY_LAST : Navigation.PREVIOUS;
+      }
+      return null;
+    case EventKey.ArrowDown:
+      if (isGrid) {
+        return Navigation.NEXT_ROW;
+      } else if (direction === 'vertical' || direction === 'both') {
+        return loopAround && isLast ? Navigation.VERY_FIRST : Navigation.NEXT;
+      }
+      return null;
+    case EventKey.Home:
+      return !isGrid || ctrlKey ? Navigation.VERY_FIRST : Navigation.FIRST_IN_ROW;
+    case EventKey.End:
+      return !isGrid || ctrlKey ? Navigation.VERY_LAST : Navigation.LAST_IN_ROW;
+    /* istanbul ignore next */
+    default:
+      return null;
+  }
+}
+
+// Creates the new state for a tab stop when it becomes the selected one.
+function selectTabStop(state, tabStop, rowStartMap) {
+  let allowFocusing = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+  return _objectSpread2(_objectSpread2({}, state), {}, {
+    allowFocusing,
+    selectedId: tabStop.id,
+    rowStartMap: rowStartMap || state.rowStartMap,
+    activedescendant: state.focusType === 'virtual-focus' ? [tabStop.id, tabStop.value] : undefined
+  });
+}
+
+// Creates the row start index lookup map
+// for the currently registered tab stops.
+function createRowStartMap(state) {
+  const map = new Map();
+  for (let i = 0; i < state.tabStops.length; ++i) {
+    const {
+      rowIndex
+    } = state.tabStops[i];
+    if (rowIndex !== null && !map.has(rowIndex)) {
+      map.set(rowIndex, i);
+    }
+  }
+  return map;
+}
+function moveSelectionFromKey(state, index, key, ctrlKey) {
+  const currentTabStop = state.tabStops[index];
+  if (currentTabStop.isDisabled) {
+    return state;
+  }
+  const isGrid = currentTabStop.rowIndex !== null;
+  const isFirst = index === findIndexOfVeryFirstActiveTabStop(state.tabStops);
+  const isLast = index === findIndexOfVeryLastActiveTabStop(state.tabStops);
+  const navigation = getNavigationValue(key, ctrlKey, isGrid, state.direction, state.loopAround, isFirst, isLast);
+  if (!navigation) {
+    return state;
+  }
+  switch (navigation) {
+    case Navigation.NEXT:
+      {
+        for (let i = index + 1; i < state.tabStops.length; ++i) {
+          const tabStop = state.tabStops[i];
+          if (isGrid && tabStop.rowIndex !== currentTabStop.rowIndex) {
+            break;
+          }
+          if (!tabStop.isDisabled) {
+            return selectTabStop(state, tabStop);
+          }
+        }
+      }
+      break;
+    case Navigation.PREVIOUS:
+      {
+        for (let i = index - 1; i >= 0; --i) {
+          const tabStop = state.tabStops[i];
+          if (isGrid && tabStop.rowIndex !== currentTabStop.rowIndex) {
+            break;
+          }
+          if (!tabStop.isDisabled) {
+            return selectTabStop(state, tabStop);
+          }
+        }
+      }
+      break;
+    case Navigation.VERY_FIRST:
+      {
+        const index = findIndexOfVeryFirstActiveTabStop(state.tabStops);
+        if (index > -1) {
+          return selectTabStop(state, state.tabStops[index]);
+        }
+      }
+      break;
+    case Navigation.VERY_LAST:
+      {
+        const index = findIndexOfVeryLastActiveTabStop(state.tabStops);
+        if (index > -1) {
+          return selectTabStop(state, state.tabStops[index]);
+        }
+      }
+      break;
+    case Navigation.PREVIOUS_ROW:
+      {
+        if (currentTabStop.rowIndex === null || currentTabStop.rowIndex === 0) {
+          return state;
+        }
+        const rowStartMap = state.rowStartMap || createRowStartMap(state);
+        const rowStartIndex = rowStartMap.get(currentTabStop.rowIndex);
+        if (rowStartIndex === undefined) {
+          return state;
+        }
+        const columnOffset = index - rowStartIndex;
+        for (let i = currentTabStop.rowIndex - 1; i >= 0; --i) {
+          const rowStartIndex = rowStartMap.get(i);
+          if (rowStartIndex === undefined) {
+            return state;
+          }
+          const rowTabStop = state.tabStops[rowStartIndex + columnOffset];
+          if (rowTabStop && !rowTabStop.isDisabled) {
+            return selectTabStop(state, rowTabStop, rowStartMap);
+          }
+        }
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          allowFocusing: true,
+          rowStartMap
+        });
+      }
+    case Navigation.NEXT_ROW:
+      {
+        const maxRowIndex = state.tabStops[state.tabStops.length - 1].rowIndex;
+        if (currentTabStop.rowIndex === null || maxRowIndex === null || currentTabStop.rowIndex === maxRowIndex) {
+          return state;
+        }
+        const rowStartMap = state.rowStartMap || createRowStartMap(state);
+        const rowStartIndex = rowStartMap.get(currentTabStop.rowIndex);
+        if (rowStartIndex === undefined) {
+          return state;
+        }
+        const columnOffset = index - rowStartIndex;
+        for (let i = currentTabStop.rowIndex + 1; i <= maxRowIndex; ++i) {
+          const rowStartIndex = rowStartMap.get(i);
+          if (rowStartIndex === undefined) {
+            return state;
+          }
+          const rowTabStop = state.tabStops[rowStartIndex + columnOffset];
+          if (rowTabStop && !rowTabStop.isDisabled) {
+            return selectTabStop(state, rowTabStop, rowStartMap);
+          }
+        }
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          allowFocusing: true,
+          rowStartMap
+        });
+      }
+    case Navigation.FIRST_IN_ROW:
+      {
+        if (currentTabStop.rowIndex === null) {
+          return state;
+        }
+        const rowStartMap = state.rowStartMap || createRowStartMap(state);
+        const rowStartIndex = rowStartMap.get(currentTabStop.rowIndex);
+        if (rowStartIndex === undefined) {
+          return state;
+        }
+        for (let i = rowStartIndex; i < state.tabStops.length; ++i) {
+          const tabStop = state.tabStops[i];
+          if (tabStop.rowIndex !== currentTabStop.rowIndex) {
+            break;
+          } else if (!tabStop.isDisabled) {
+            return selectTabStop(state, state.tabStops[i], rowStartMap);
+          }
+        }
+      }
+      break;
+    case Navigation.LAST_IN_ROW:
+      {
+        if (currentTabStop.rowIndex === null) {
+          return state;
+        }
+        const rowStartMap = state.rowStartMap || createRowStartMap(state);
+        const rowEndIndex = rowStartMap.has(currentTabStop.rowIndex + 1) ? (rowStartMap.get(currentTabStop.rowIndex + 1) || 0) - 1 : state.tabStops.length - 1;
+        for (let i = rowEndIndex; i >= 0; --i) {
+          const tabStop = state.tabStops[i];
+          if (tabStop.rowIndex !== currentTabStop.rowIndex) {
+            break;
+          } else if (!tabStop.isDisabled) {
+            return selectTabStop(state, state.tabStops[i], rowStartMap);
+          }
+        }
+      }
+      break;
+  }
+  return state;
+}
 
 /**
  * The FocusWithinGroup component.
@@ -36,48 +451,91 @@ import { f as FocusWithinGroupProps, F as FocusWithinGroupState, e as FocusWithi
  * Note that this option does not apply if the roving tabindex
  * is being used on a grid.
  */
-declare const FocusWithinGroup: React.FC<FocusWithinGroupProps>;
-
-declare const FOCUS_WITHING_GROUP_INITIAL_STATE: FocusWithinGroupState;
-declare const FocusWithinGroupContext: React.Context<FocusWithinGroupContextProps>;
+const FocusWithinGroup = props => {
+  const {
+    children,
+    direction,
+    focusOnClick,
+    loopAround,
+    focusType,
+    listRole,
+    focusOnInit,
+    activedescendant,
+    maxOptionsLength
+  } = props;
+  const [state, dispatch] = useReducer(FocusWithinGroupReducer, _objectSpread2(_objectSpread2({}, FOCUS_WITHING_GROUP_INITIAL_STATE), {}, {
+    direction,
+    focusOnClick,
+    loopAround,
+    focusType,
+    listRole,
+    focusOnInit,
+    activedescendant,
+    maxOptionsLength
+  }));
 
-declare const FocusWithinGroupReducer: (state: FocusWithinGroupState, action: FocusWithinGroupAction) => FocusWithinGroupState;
-
-declare function uniqueId(): string;
-/**
- * Includes the given DOM element in the current roving tabindex.
- * @param {RefObject<Element>} domElementRef The DOM element to include.
- * This must be the same DOM element for the lifetime of the containing
- * component.
- * @param {boolean} isDisabled Whether or not the DOM element is currently
- * enabled. This value can be updated as appropriate throughout the lifetime
- * of the containing component.
- * @param {number?} rowIndex An optional integer value that must be
- * populated if the roving tabindex is being used in a grid. In that case,
- * set it to the zero-based index of the row that the given DOM element
- * is currently part of. You can update this row index as appropriate
- * throughout the lifetime of the containing component, for example if
- * the shape of the grid can change dynamically.
- * @returns A tuple of values to be applied by the containing
- * component for the roving tabindex to work correctly.
- * First tuple value: The tabIndex value to apply to the tab stop
- * element.
- * Second tuple value: Whether or not focus() should be invoked on the
- * tab stop element.
- * Third tuple value: The onKeyDown callback to apply to the tab
- * stop element. If the key press is relevant to the hook then
- * event.preventDefault() will be invoked on the event.
- * Fourth tuple value: The onClick callback to apply to the tab
- * stop element.
- */
-declare function useFocusOnListItem(props: {
-    domElementRef: RefObject<Element>;
-    isDisabled: boolean;
-    id?: string;
-    value?: string;
-    rowIndex?: number | null;
-}): UseFocusWithinGroupProps;
+  // Update the options whenever they change:
+  useEffect(() => {
+    dispatch({
+      type: FocusWithinGroupActionType.OPTIONS_UPDATED,
+      payload: {
+        direction: direction !== null && direction !== void 0 ? direction : FOCUS_WITHING_GROUP_INITIAL_STATE.direction,
+        focusOnClick: focusOnClick !== null && focusOnClick !== void 0 ? focusOnClick : FOCUS_WITHING_GROUP_INITIAL_STATE.focusOnClick,
+        loopAround: loopAround !== null && loopAround !== void 0 ? loopAround : FOCUS_WITHING_GROUP_INITIAL_STATE.loopAround,
+        focusType: focusType !== null && focusType !== void 0 ? focusType : FOCUS_WITHING_GROUP_INITIAL_STATE.focusType,
+        listRole: listRole !== null && listRole !== void 0 ? listRole : FOCUS_WITHING_GROUP_INITIAL_STATE.listRole,
+        focusOnInit: focusOnInit !== null && focusOnInit !== void 0 ? focusOnInit : FOCUS_WITHING_GROUP_INITIAL_STATE.focusOnInit,
+        activedescendant: activedescendant !== null && activedescendant !== void 0 ? activedescendant : FOCUS_WITHING_GROUP_INITIAL_STATE.activedescendant,
+        maxOptionsLength: maxOptionsLength !== null && maxOptionsLength !== void 0 ? maxOptionsLength : FOCUS_WITHING_GROUP_INITIAL_STATE.maxOptionsLength
+      }
+    });
+  }, [direction, focusOnClick, focusOnInit, loopAround, focusType, listRole, activedescendant, maxOptionsLength]);
+  const context = useMemo(() => ({
+    state,
+    dispatch
+  }), [state]);
+  return /*#__PURE__*/React__default.createElement(FocusWithinGroupContext.Provider, {
+    value: context
+  }, children);
+};
 
-declare function useFocusOnList(): UseFocusGroupProps;
+function useFocusOnList() {
+  const context = useContext(FocusWithinGroupContext);
+  const handleKeyDown = useCallback(event => {
+    const key = EventKey[event.key];
+    if (!key) {
+      return;
+    }
+    context.dispatch({
+      type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
+      payload: {
+        key,
+        ctrlKey: event.ctrlKey
+      }
+    });
+    event.preventDefault();
+  }, []);
+  const handleFocus = useCallback(() => {
+    context.dispatch({
+      type: FocusWithinGroupActionType.FOCUS_ON_LIST,
+      payload: {
+        id: context.state.selectedId
+      }
+    });
+  }, [context.state.selectedId]);
+  const handleBlur = useCallback(() => {
+    context.dispatch({
+      type: FocusWithinGroupActionType.BLUR_ON_LIST,
+      payload: {}
+    });
+  }, []);
+  return {
+    activedescendant: context.state.activedescendant,
+    handleKeyDown,
+    handleFocus,
+    handleBlur
+  };
+}
 
-export { FocusWithinGroup as F, FOCUS_WITHING_GROUP_INITIAL_STATE as a, FocusWithinGroupContext as b, FocusWithinGroupReducer as c, useFocusOnListItem as d, useFocusOnList as e, uniqueId as u };
+export { FocusWithinGroup as F, FocusWithinGroupReducer as a, useFocusOnList as u };
+//# sourceMappingURL=useFocusOnList.js.map