@react-aria/selection 3.0.0-alpha.1 → 3.0.0-nightly-641446f65-240905

package/dist/module.js

@@ -1,370 +1,9 @@
-import { useEffect, useRef, useMemo } from "react";
-import { mergeProps, focusWithoutScrolling } from "@react-aria/utils";
-import _babelRuntimeHelpersEsmDefineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { useCollator } from "@react-aria/i18n";
-export function useTypeSelect(options) {
-  let {
-    keyboardDelegate,
-    selectionManager,
-    onTypeSelect
-  } = options;
-  let state = useRef({
-    search: '',
-    timeout: null
-  }).current;
-
-  let onKeyDown = e => {
-    let character = $c52757753013b75867e6437272e1c64e$var$getStringForKey(e.key);
-
-    if (!character) {
-      return;
-    }
-
-    state.search += character; // Use the delegate to find a key to focus.
-    // Prioritize items after the currently focused item, falling back to searching the whole list.
-
-    let key = keyboardDelegate.getKeyForSearch(state.search, selectionManager.focusedKey);
-
-    if (!key) {
-      key = keyboardDelegate.getKeyForSearch(state.search);
-    }
-
-    if (key) {
-      selectionManager.setFocusedKey(key);
-
-      if (onTypeSelect) {
-        onTypeSelect(key);
-      }
-    }
-
-    clearTimeout(state.timeout);
-    state.timeout = setTimeout(() => {
-      state.search = '';
-    }, 500);
-  };
-
-  return {
-    typeSelectProps: {
-      onKeyDown: keyboardDelegate.getKeyForSearch ? onKeyDown : null
-    }
-  };
-}
-
-function $c52757753013b75867e6437272e1c64e$var$getStringForKey(key) {
-  // If the key is of length 1, it is an ASCII value.
-  // Otherwise, if there are no ASCII characters in the key name,
-  // it is a Unicode character.
-  // See https://www.w3.org/TR/uievents-key/
-  if (key.length === 1 || !/^[A-Z]/i.test(key)) {
-    return key;
-  }
-
-  return '';
-}
-
-const $bcc7c0067661ae56b1d5dd7c698d093$var$isMac = typeof window !== 'undefined' && window.navigator != null ? /^Mac/.test(window.navigator.platform) : false;
-
-function $bcc7c0067661ae56b1d5dd7c698d093$var$isCtrlKeyPressed(e) {
-  if ($bcc7c0067661ae56b1d5dd7c698d093$var$isMac) {
-    return e.metaKey;
-  }
-
-  return e.ctrlKey;
-}
-
-export function useSelectableCollection(options) {
-  let {
-    selectionManager: manager,
-    keyboardDelegate: delegate,
-    autoFocus = false,
-    shouldFocusWrap = false,
-    disallowEmptySelection = false,
-    disallowSelectAll = false
-  } = options;
-
-  let onKeyDown = e => {
-    switch (e.key) {
-      case 'ArrowDown':
-        {
-          if (delegate.getKeyBelow) {
-            e.preventDefault();
-            let nextKey = delegate.getKeyBelow(manager.focusedKey);
-
-            if (nextKey) {
-              manager.setFocusedKey(nextKey);
-            } else if (shouldFocusWrap) {
-              manager.setFocusedKey(delegate.getFirstKey());
-            }
-
-            if (e.shiftKey && manager.selectionMode === 'multiple') {
-              manager.extendSelection(nextKey);
-            }
-          }
-
-          break;
-        }
-
-      case 'ArrowUp':
-        {
-          if (delegate.getKeyAbove) {
-            e.preventDefault();
-            let nextKey = delegate.getKeyAbove(manager.focusedKey);
-
-            if (nextKey) {
-              manager.setFocusedKey(nextKey);
-            } else if (shouldFocusWrap) {
-              manager.setFocusedKey(delegate.getLastKey());
-            }
-
-            if (e.shiftKey && manager.selectionMode === 'multiple') {
-              manager.extendSelection(nextKey);
-            }
-          }
-
-          break;
-        }
-
-      case 'ArrowLeft':
-        {
-          if (delegate.getKeyLeftOf) {
-            e.preventDefault();
-            let nextKey = delegate.getKeyLeftOf(manager.focusedKey);
-
-            if (nextKey) {
-              manager.setFocusedKey(nextKey);
-            }
-
-            if (e.shiftKey && manager.selectionMode === 'multiple') {
-              manager.extendSelection(nextKey);
-            }
-          }
-
-          break;
-        }
-
-      case 'ArrowRight':
-        {
-          if (delegate.getKeyRightOf) {
-            e.preventDefault();
-            let nextKey = delegate.getKeyRightOf(manager.focusedKey);
-
-            if (nextKey) {
-              manager.setFocusedKey(nextKey);
-            }
-
-            if (e.shiftKey && manager.selectionMode === 'multiple') {
-              manager.extendSelection(nextKey);
-            }
-          }
-
-          break;
-        }
-
-      case 'Home':
-        if (delegate.getFirstKey) {
-          e.preventDefault();
-          let firstKey = delegate.getFirstKey();
-          manager.setFocusedKey(firstKey);
-
-          if ($bcc7c0067661ae56b1d5dd7c698d093$var$isCtrlKeyPressed(e) && e.shiftKey && manager.selectionMode === 'multiple') {
-            manager.extendSelection(firstKey);
-          }
-        }
-
-        break;
-
-      case 'End':
-        if (delegate.getLastKey) {
-          e.preventDefault();
-          let lastKey = delegate.getLastKey();
-          manager.setFocusedKey(lastKey);
-
-          if ($bcc7c0067661ae56b1d5dd7c698d093$var$isCtrlKeyPressed(e) && e.shiftKey && manager.selectionMode === 'multiple') {
-            manager.extendSelection(lastKey);
-          }
-        }
-
-        break;
-
-      case 'PageDown':
-        if (delegate.getKeyPageBelow) {
-          e.preventDefault();
-          let nextKey = delegate.getKeyPageBelow(manager.focusedKey);
-
-          if (nextKey) {
-            manager.setFocusedKey(nextKey);
-
-            if (e.shiftKey && manager.selectionMode === 'multiple') {
-              manager.extendSelection(nextKey);
-            }
-          }
-        }
-
-        break;
-
-      case 'PageUp':
-        if (delegate.getKeyPageAbove) {
-          e.preventDefault();
-          let nextKey = delegate.getKeyPageAbove(manager.focusedKey);
-
-          if (nextKey) {
-            manager.setFocusedKey(nextKey);
-
-            if (e.shiftKey && manager.selectionMode === 'multiple') {
-              manager.extendSelection(nextKey);
-            }
-          }
-        }
-
-        break;
-
-      case 'a':
-        if ($bcc7c0067661ae56b1d5dd7c698d093$var$isCtrlKeyPressed(e) && manager.selectionMode === 'multiple' && disallowSelectAll !== true) {
-          e.preventDefault();
-          manager.selectAll();
-        }
-
-        break;
-
-      case 'Escape':
-        e.preventDefault();
-
-        if (!disallowEmptySelection) {
-          manager.clearSelection();
-        }
-
-        break;
-    }
-  };
-
-  let onFocus = e => {
-    manager.setFocused(true);
-
-    if (manager.focusedKey == null && e.target === e.currentTarget) {
-      // If the user hasn't yet interacted with the collection, there will be no focusedKey set.
-      // Attempt to detect whether the user is tabbing forward or backward into the collection
-      // and either focus the first or last item accordingly.
-      let relatedTarget = e.relatedTarget;
-
-      if (relatedTarget && e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING) {
-        manager.setFocusedKey(delegate.getLastKey());
-      } else {
-        manager.setFocusedKey(delegate.getFirstKey());
-      }
-    }
-  };
-
-  let onBlur = () => {
-    manager.setFocused(false);
-  };
-
-  useEffect(() => {
-    if (autoFocus) {
-      manager.setFocused(true); // By default, select first item for focus target
-
-      let focusedKey = delegate.getFirstKey();
-      let selectedKeys = manager.selectedKeys; // Set the last item as the new focus target if autoFocus is 'last' (i.e. ArrowUp opening the menu)
-
-      if (autoFocus === 'last') {
-        focusedKey = delegate.getLastKey();
-      } // If there are any selected keys, make the first one the new focus target
-
-
-      if (selectedKeys.size) {
-        focusedKey = selectedKeys.values().next().value;
-      }
-
-      manager.setFocusedKey(focusedKey);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, []);
-  let {
-    typeSelectProps
-  } = useTypeSelect({
-    keyboardDelegate: delegate,
-    selectionManager: manager
-  });
-  return {
-    collectionProps: mergeProps(typeSelectProps, {
-      onKeyDown,
-      onFocus,
-      onBlur
-    })
-  };
-}
-export function useSelectableItem(options) {
-  let {
-    selectionManager: manager,
-    itemKey,
-    itemRef,
-    shouldSelectOnPressUp,
-    isVirtualized
-  } = options;
-
-  let onSelect = e => {
-    if (manager.selectionMode === 'none') {
-      return;
-    }
-
-    if (manager.selectionMode === 'single') {
-      if (manager.selectedKeys.has(itemKey)) {
-        manager.toggleSelection(itemKey);
-      } else {
-        manager.replaceSelection(itemKey);
-      }
-    } else if (e.shiftKey) {
-      manager.extendSelection(itemKey);
-    } else if (manager) {
-      manager.toggleSelection(itemKey);
-    }
-  }; // Focus the associated DOM node when this item becomes the focusedKey
-
-
-  let isFocused = itemKey === manager.focusedKey;
-  useEffect(() => {
-    if (isFocused && manager.isFocused && document.activeElement !== itemRef.current) {
-      focusWithoutScrolling(itemRef.current);
-    }
-  }, [itemRef, isFocused, manager.focusedKey, manager.isFocused]);
-  let itemProps = {
-    tabIndex: isFocused ? 0 : -1,
-
-    onFocus() {
-      manager.setFocusedKey(itemKey);
-    }
-
-  }; // By default, selection occurs on pointer down. This can be strange if selecting an 
-  // item causes the UI to disappear immediately (e.g. menuts).
-  // If shouldSelectOnPressUp is true, we use onPressUp instead of onPressStart.
-  // onPress requires a pointer down event on the same element as pointer up. For menus,
-  // we want to be able to have the pointer down on the trigger that opens the menu and
-  // the pointer up on the menu item rather than requiring a separate press.
-  // For keyboard events, selection still occurrs on key down.
-
-  if (shouldSelectOnPressUp) {
-    itemProps.onPressStart = e => {
-      if (e.pointerType === 'keyboard') {
-        onSelect(e);
-      }
-    };
-
-    itemProps.onPressUp = e => {
-      if (e.pointerType !== 'keyboard') {
-        onSelect(e);
-      }
-    };
-  } else {
-    itemProps.onPressStart = onSelect;
-  }
-
-  if (!isVirtualized) {
-    itemProps['data-key'] = itemKey;
-  }
-
-  return {
-    itemProps
-  };
-}
+import {useSelectableCollection as $ae20dd8cbca75726$export$d6daf82dcd84e87c} from "./useSelectableCollection.module.js";
+import {useSelectableItem as $880e95eb8b93ba9a$export$ecf600387e221c37} from "./useSelectableItem.module.js";
+import {useSelectableList as $982254629710d113$export$b95089534ab7c1fd} from "./useSelectableList.module.js";
+import {ListKeyboardDelegate as $2a25aae57d74318e$export$a05409b8bb224a5a} from "./ListKeyboardDelegate.module.js";
+import {DOMLayoutDelegate as $657e4dc4a6e88df0$export$8f5ed9ff9f511381} from "./DOMLayoutDelegate.module.js";
+import {useTypeSelect as $fb3050f43d946246$export$e32c88dfddc6e1d8} from "./useTypeSelect.module.js";
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -376,206 +15,13 @@ export function useSelectableItem(options) {
  * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
- */
-export class ListKeyboardDelegate {
-  constructor(collection, ref, collator) {
-    _babelRuntimeHelpersEsmDefineProperty(this, "collection", void 0);
-
-    _babelRuntimeHelpersEsmDefineProperty(this, "ref", void 0);
-
-    _babelRuntimeHelpersEsmDefineProperty(this, "collator", void 0);
-
-    this.collection = collection;
-    this.ref = ref;
-    this.collator = collator;
-  }
-
-  getKeyBelow(key) {
-    key = this.collection.getKeyAfter(key);
-
-    while (key) {
-      let item = this.collection.getItem(key);
-
-      if (item.type === 'item' && !item.isDisabled) {
-        return key;
-      }
-
-      key = this.collection.getKeyAfter(key);
-    }
-  }
-
-  getKeyAbove(key) {
-    key = this.collection.getKeyBefore(key);
-
-    while (key) {
-      let item = this.collection.getItem(key);
-
-      if (item.type === 'item' && !item.isDisabled) {
-        return key;
-      }
-
-      key = this.collection.getKeyBefore(key);
-    }
-  }
-
-  getFirstKey() {
-    let key = this.collection.getFirstKey();
-
-    while (key) {
-      let item = this.collection.getItem(key);
-
-      if (item.type === 'item' && !item.isDisabled) {
-        return key;
-      }
-
-      key = this.collection.getKeyAfter(key);
-    }
-  }
-
-  getLastKey() {
-    let key = this.collection.getLastKey();
-
-    while (key) {
-      let item = this.collection.getItem(key);
-
-      if (item.type === 'item' && !item.isDisabled) {
-        return key;
-      }
-
-      key = this.collection.getKeyBefore(key);
-    }
-  }
-
-  getItem(key) {
-    return this.ref.current.querySelector("[data-key=\"".concat(key, "\"]"));
-  }
-
-  getKeyPageAbove(key) {
-    let menu = this.ref.current;
-    let item = this.getItem(key);
-
-    if (!item) {
-      return null;
-    }
-
-    let pageY = Math.max(0, item.offsetTop + item.offsetHeight - menu.offsetHeight);
-
-    while (item && item.offsetTop > pageY) {
-      key = this.getKeyAbove(key);
-      item = this.getItem(key);
-    }
-
-    return key;
-  }
-
-  getKeyPageBelow(key) {
-    let menu = this.ref.current;
-    let item = this.getItem(key);
-
-    if (!item) {
-      return null;
-    }
-
-    let pageY = Math.min(menu.scrollHeight, item.offsetTop - item.offsetHeight + menu.offsetHeight);
-
-    while (item && item.offsetTop < pageY) {
-      key = this.getKeyBelow(key);
-      item = this.getItem(key);
-    }
-
-    return key;
-  }
-
-  getKeyForSearch(search, fromKey) {
-    if (!this.collator) {
-      return null;
-    }
-
-    let collection = this.collection;
-    let key = fromKey ? this.getKeyBelow(fromKey) : this.getFirstKey();
-
-    while (key) {
-      let item = collection.getItem(key);
-      let substring = item.textValue.slice(0, search.length);
-
-      if (item.textValue && this.collator.compare(substring, search) === 0) {
-        return key;
-      }
-
-      key = this.getKeyBelow(key);
-    }
-
-    return null;
-  }
-
-}
-export function useSelectableList(props) {
-  let {
-    selectionManager,
-    collection,
-    ref,
-    keyboardDelegate,
-    autoFocus,
-    shouldFocusWrap,
-    isVirtualized,
-    disallowEmptySelection
-  } = props; // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).
-  // When virtualized, the layout object will be passed in as a prop and override this.
+ */ 
 
-  let collator = useCollator({
-    usage: 'search',
-    sensitivity: 'base'
-  });
-  let delegate = useMemo(() => keyboardDelegate || new ListKeyboardDelegate(collection, ref, collator), [keyboardDelegate, collection, ref, collator]); // If not virtualized, scroll the focused element into view when the focusedKey changes.
-  // When virtualized, CollectionView handles this internally.
 
-  useEffect(() => {
-    if (!isVirtualized && selectionManager.focusedKey) {
-      let element = ref.current.querySelector("[data-key=\"".concat(selectionManager.focusedKey, "\"]"));
 
-      if (element) {
-        $d628da5f2816d7464aa7d4edf8d3eb81$var$scrollIntoView(ref.current, element);
-      }
-    }
-  }, [isVirtualized, ref, selectionManager.focusedKey]);
-  let {
-    collectionProps
-  } = useSelectableCollection({
-    selectionManager,
-    keyboardDelegate: delegate,
-    autoFocus,
-    shouldFocusWrap,
-    disallowEmptySelection
-  });
-  return {
-    listProps: collectionProps
-  };
-} // Scrolls `scrollView` so that `element` is visible.
-// Similar to `element.scrollIntoView({block: 'nearest'})` (not supported in Edge),
-// but doesn't affect parents above `scrollView`.
 
-function $d628da5f2816d7464aa7d4edf8d3eb81$var$scrollIntoView(scrollView, element) {
-  let offsetX = element.offsetLeft - scrollView.offsetLeft;
-  let offsetY = element.offsetTop - scrollView.offsetTop;
-  let width = element.offsetWidth;
-  let height = element.offsetHeight;
-  let x = scrollView.scrollLeft;
-  let y = scrollView.scrollTop;
-  let maxX = x + scrollView.offsetWidth;
-  let maxY = y + scrollView.offsetHeight;
 
-  if (offsetX <= x) {
-    x = offsetX;
-  } else if (offsetX + width > maxX) {
-    x += offsetX + width - maxX;
-  }
 
-  if (offsetY <= y) {
-    y = offsetY;
-  } else if (offsetY + height > maxY) {
-    y += offsetY + height - maxY;
-  }
 
-  scrollView.scrollLeft = x;
-  scrollView.scrollTop = y;
-}
+export {$ae20dd8cbca75726$export$d6daf82dcd84e87c as useSelectableCollection, $880e95eb8b93ba9a$export$ecf600387e221c37 as useSelectableItem, $982254629710d113$export$b95089534ab7c1fd as useSelectableList, $2a25aae57d74318e$export$a05409b8bb224a5a as ListKeyboardDelegate, $657e4dc4a6e88df0$export$8f5ed9ff9f511381 as DOMLayoutDelegate, $fb3050f43d946246$export$e32c88dfddc6e1d8 as useTypeSelect};
+//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC","sources":["packages/@react-aria/selection/src/index.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport {useSelectableCollection} from './useSelectableCollection';\nexport {useSelectableItem} from './useSelectableItem';\nexport {useSelectableList} from './useSelectableList';\nexport {ListKeyboardDelegate} from './ListKeyboardDelegate';\nexport {DOMLayoutDelegate} from './DOMLayoutDelegate';\nexport {useTypeSelect} from './useTypeSelect';\n\nexport type {AriaSelectableCollectionOptions, SelectableCollectionAria} from './useSelectableCollection';\nexport type {AriaSelectableListOptions, SelectableListAria} from './useSelectableList';\nexport type {SelectableItemOptions, SelectableItemStates, SelectableItemAria} from './useSelectableItem';\nexport type {AriaTypeSelectOptions, TypeSelectAria} from './useTypeSelect';\n"],"names":[],"version":3,"file":"module.js.map"}