@pingux/astro 2.130.4 → 2.131.0-alpha.1

package/lib/components/GridList/GridListRow.js

@@ -0,0 +1,74 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { forwardRef } from 'react';
+import DragIcon from '@pingux/mdi-react/DragVerticalIcon';
+import { useLocalOrForwardRef } from '../../hooks';
+import useGridListItem from '../../hooks/useGridListItem/useGridListItem';
+import { Box, Icon, IconButton } from '../../index';
+import { InsertionIndicator } from '../TreeView';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var GridListRow = /*#__PURE__*/forwardRef(function (props, ref) {
+  var colRef = React.useRef(null);
+  var rowRef = useLocalOrForwardRef(ref);
+  var buttonRef = React.useRef(null);
+  var cellRef = React.useRef(null);
+  var dragState = props.dragState,
+    dropState = props.dropState,
+    isReorderable = props.isReorderable,
+    item = props.item,
+    state = props.state;
+  var _useGridListItem = useGridListItem({
+      state: state,
+      item: item,
+      dragState: dragState,
+      dropState: dropState,
+      ref: rowRef,
+      cellRef: cellRef,
+      isReorderable: isReorderable
+    }),
+    rowProps = _useGridListItem.rowProps,
+    gridCellProps = _useGridListItem.gridCellProps,
+    buttonProps = _useGridListItem.buttonProps;
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(InsertionIndicator, {
+    key: "".concat(item.key, "-before"),
+    target: {
+      type: 'item',
+      key: item.key,
+      dropPosition: 'before'
+    },
+    dropState: dropState,
+    collectionRef: colRef
+  }), ___EmotionJSX(Box, _extends({}, rowProps, {
+    variant: "gridList.rowContainer",
+    isRow: true,
+    ref: rowRef
+  }), isReorderable && ___EmotionJSX(Box, {
+    isRow: true,
+    sx: {
+      alignItems: 'center',
+      mr: 'xs'
+    }
+  }, ___EmotionJSX(IconButton, _extends({
+    ref: buttonRef
+  }, buttonProps, {
+    sx: {
+      pointerEvents: 'none'
+    }
+  }), ___EmotionJSX(Icon, {
+    icon: DragIcon
+  }))), ___EmotionJSX(Box, _extends({}, gridCellProps, {
+    isRow: true,
+    sx: {
+      alignItems: 'center'
+    }
+  }), item.rendered)), state.collection.getKeyAfter(item.key) == null && ___EmotionJSX(InsertionIndicator, {
+    key: "".concat(item.key, "-after"),
+    target: {
+      type: 'item',
+      key: item.key,
+      dropPosition: 'after'
+    },
+    dropState: dropState,
+    collectionRef: colRef
+  }));
+});
+export default GridListRow;

package/lib/components/GridList/gridListAttributes.js

@@ -0,0 +1,170 @@
+export var gridListArgTypes = {
+  isReorderable: {
+    description: 'Whether or not the list has drag and drop reorder enabled.',
+    control: {
+      type: 'boolean'
+    }
+  },
+  selectedKeys: {
+    description: 'The array of keys that is currently selected. (Controlled version).',
+    control: {
+      disable: true
+    }
+  },
+  disabledKeys: {
+    description: 'The array of keys that are unable to be selected.',
+    control: {
+      type: 'text'
+    }
+  },
+  defaultSelectedKeys: {
+    description: 'The array of keys that is selected by default. (Uncontrolled version).',
+    control: {
+      disable: true
+    }
+  },
+  onSelectionChange: {
+    description: 'A callback function that fires when the selection changes.',
+    control: {
+      disable: true
+    }
+  },
+  allowDuplicateSelectionEvents: {
+    description: 'Whether duplicate selection events are allowed.',
+    control: {
+      type: 'boolean'
+    }
+  },
+  autoFocus: {
+    description: 'Whether the grid should automatically focus on mount.',
+    control: {
+      type: 'boolean'
+    }
+  },
+  children: {
+    description: 'The child nodes to render inside the grid.',
+    control: {
+      disable: true
+    }
+  },
+  collection: {
+    description: 'The collection of items to display in the grid.',
+    control: {
+      disable: true
+    }
+  },
+  disabledBehavior: {
+    description: 'Defines how disabled items are handled.',
+    control: {
+      type: 'select',
+      options: ['all', 'selection']
+    }
+  },
+  disallowEmptySelection: {
+    description: 'Whether empty selection is disallowed.',
+    control: {
+      type: 'boolean'
+    }
+  },
+  disallowTypeAhead: {
+    description: 'Whether type-ahead functionality is disabled.',
+    control: {
+      type: 'boolean'
+    }
+  },
+  escapeKeyBehavior: {
+    description: 'Defines the behavior when the Escape key is pressed.',
+    control: {
+      type: 'select',
+      options: ['clearSelection', 'none']
+    }
+  },
+  filter: {
+    description: 'A function to filter items based on the input text.',
+    control: {
+      disable: true
+    }
+  },
+  getKey: {
+    description: 'A function to get the key for an item.',
+    control: {
+      disable: true
+    }
+  },
+  initialFilterText: {
+    description: 'The initial filter text for the grid.',
+    control: {
+      type: 'text'
+    }
+  },
+  initialSelectedKeys: {
+    description: 'The keys that are initially selected.',
+    control: {
+      disable: true
+    }
+  },
+  items: {
+    description: 'The list of items to display in the grid.',
+    control: {
+      disable: true
+    }
+  },
+  keyboardDelegate: {
+    description: 'A custom keyboard delegate for handling keyboard navigation.',
+    control: {
+      disable: true
+    }
+  },
+  keyboardNavigationBehavior: {
+    description: 'Defines the keyboard navigation behavior for the grid.',
+    control: {
+      type: 'select',
+      options: ['arrow', 'tab']
+    }
+  },
+  linkBehavior: {
+    description: 'Defines the behavior of links in the grid.',
+    control: {
+      type: 'select',
+      options: ['action', 'selection', 'override']
+    }
+  },
+  onAction: {
+    description: 'A callback function that fires when an action is performed on an item.',
+    control: {
+      disable: true
+    }
+  },
+  ref: {
+    description: 'A ref object for the grid.',
+    control: {
+      disable: true
+    }
+  },
+  selectionBehavior: {
+    description: 'Defines the selection behavior for the grid.',
+    control: {
+      type: 'select',
+      options: ['toggle', 'replace']
+    }
+  },
+  selectionMode: {
+    description: 'Defines the selection mode for the grid.',
+    control: {
+      type: 'select',
+      options: ['none', 'single', 'multiple']
+    }
+  },
+  shouldFocusWrap: {
+    description: 'Whether focus should wrap around when navigating with the keyboard.',
+    control: {
+      type: 'boolean'
+    }
+  },
+  shouldSelectOnPressUp: {
+    description: 'Whether selection should occur on key press up.',
+    control: {
+      type: 'boolean'
+    }
+  }
+};

package/lib/components/GridList/index.js

@@ -0,0 +1,2 @@
+export { default } from './GridList';
+export { default as GridListRow } from './GridListRow';

package/lib/components/TreeView/InsertionIndicator.js

@@ -1,38 +1,43 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
+import { useVisuallyHidden } from 'react-aria';
 import { useDropIndicator } from '@react-aria/dnd';
 import PropTypes from 'prop-types';
 import { Box } from '../..';
-import { useStatusClasses } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var InsertionIndicator = function InsertionIndicator(props) {
   var insertRef = React.useRef(null);
   var target = props.target,
     state = props.dropState;
+  var _useVisuallyHidden = useVisuallyHidden(),
+    visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
   var _useDropIndicator = useDropIndicator({
-      target: target,
-      isPresentationOnly: true
+      target: target
     }, state, {
       ref: insertRef
     }),
     dropIndicatorProps = _useDropIndicator.dropIndicatorProps,
     isHidden = _useDropIndicator.isHidden,
     isDropTarget = _useDropIndicator.isDropTarget;
-  var _useStatusClasses = useStatusClasses('', {
-      isDropTarget: isDropTarget
-    }),
-    classNames = _useStatusClasses.classNames;
   if (isHidden) {
     return null;
   }
-  return ___EmotionJSX(Box, _extends({
-    as: "li"
-  }, dropIndicatorProps, {
-    role: "option",
-    ref: insertRef,
-    className: classNames,
+  if (!isDropTarget) {
+    return null;
+  }
+  return ___EmotionJSX(Box, {
+    role: "row",
+    "aria-hidden": dropIndicatorProps['aria-hidden'],
+    "data-testid": "insertion-indicator"
+  }, ___EmotionJSX(Box, {
+    role: "gridcell",
+    "aria-selected": "false",
     variant: "treeView.insertionIndicator"
-  }));
+  }, ___EmotionJSX(Box, _extends({}, visuallyHiddenProps, {
+    role: "button"
+  }, dropIndicatorProps, {
+    ref: insertRef
+  }))));
 };
 InsertionIndicator.propTypes = {
   dropState: PropTypes.shape({}),

package/lib/components/TreeView/TreeView.styles.js

@@ -54,7 +54,8 @@ var rowWrapper = {
 var insertionIndicator = {
   width: '100%',
   outline: '1px solid',
-  outlineColor: 'active'
+  outlineColor: 'active',
+  mt: '3px'
 };
 export default {
   treeRow: treeRow,

package/lib/components/TreeView/index.js

@@ -1,3 +1,4 @@
+export { default as InsertionIndicator } from './InsertionIndicator';
 export { default } from './TreeView';
 export { default as TreeViewItem } from './TreeViewItem';
 export { default as TreeViewSection } from './TreeViewSection';

package/lib/hooks/index.js

@@ -8,6 +8,8 @@ export { default as useDevelopmentWarning } from './useDevelopmentWarning';
 export { default as useFallbackImage } from './useFallbackImage';
 export { default as useField } from './useField';
 export { default as useGetTheme } from './useGetTheme';
+export { default as useGridList } from './useGridList';
+export { default as useGridListItem } from './useGridListItem';
 export { default as useInputLoader } from './useInputLoader';
 export { default as useLabelHeight } from './useLabelHeight';
 export { default as useLocalOrForwardRef } from './useLocalOrForwardRef';

package/lib/hooks/useGridList/index.js

@@ -0,0 +1 @@
+export { default } from './useGridList';

package/lib/hooks/useGridList/useGridList.js

@@ -0,0 +1,166 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import { useListState } from 'react-stately';
+import { useGridList as raUseGridList } from '@react-aria/gridlist';
+import { useListData } from '@react-stately/data';
+import useReorderableCollection from '../useReorderableCollection';
+var useGridList = function useGridList(props) {
+  var acceptedDragTypes = props.acceptedDragTypes,
+    allowDuplicateSelectionEvents = props.allowDuplicateSelectionEvents,
+    autoFocus = props.autoFocus,
+    children = props.children,
+    collection = props.collection,
+    defaultSelectedKeys = props.defaultSelectedKeys,
+    disabledBehavior = props.disabledBehavior,
+    disabledKeys = props.disabledKeys,
+    disallowEmptySelection = props.disallowEmptySelection,
+    disallowTypeAhead = props.disallowTypeAhead,
+    escapeKeyBehavior = props.escapeKeyBehavior,
+    filter = _filterInstanceProperty(props),
+    getDropOperation = props.getDropOperation,
+    initialFilterText = props.initialFilterText,
+    initialSelectedKeys = props.initialSelectedKeys,
+    isReorderable = props.isReorderable,
+    items = props.items,
+    keyboardDelegate = props.keyboardDelegate,
+    keyboardNavigationBehavior = props.keyboardNavigationBehavior,
+    linkBehavior = props.linkBehavior,
+    onDragEnd = props.onDragEnd,
+    onDragMove = props.onDragMove,
+    onDragStart = props.onDragStart,
+    onDrop = props.onDrop,
+    onDropActivate = props.onDropActivate,
+    onDropEnter = props.onDropEnter,
+    onDropExit = props.onDropExit,
+    onInsert = props.onInsert,
+    onItemDrop = props.onItemDrop,
+    onReorder = props.onReorder,
+    onRootDrop = props.onRootDrop,
+    onSelectionChange = props.onSelectionChange,
+    ref = props.ref,
+    selectionBehavior = props.selectionBehavior,
+    selectionMode = props.selectionMode,
+    selectedKeys = props.selectedKeys,
+    shouldAcceptItemDrop = props.shouldAcceptItemDrop,
+    shouldFocusWrap = props.shouldFocusWrap,
+    shouldSelectOnPressUp = props.shouldSelectOnPressUp;
+  var draggableCollectionStateOptions = {
+    isDisabled: !isReorderable,
+    onDragEnd: onDragEnd,
+    onDragMove: onDragMove,
+    onDragStart: onDragStart
+  };
+  var droppableCollectionStateOptions = {
+    acceptedDragTypes: acceptedDragTypes,
+    getDropOperation: getDropOperation,
+    isDisabled: isReorderable,
+    onDrop: onDrop,
+    onDropEnter: onDropEnter,
+    onDropExit: onDropExit,
+    onInsert: onInsert,
+    onItemDrop: onItemDrop,
+    onReorder: onReorder,
+    onRootDrop: onRootDrop,
+    shouldAcceptItemDrop: shouldAcceptItemDrop
+  };
+  var useDroppableCollectionOptions = {
+    acceptedDragTypes: acceptedDragTypes,
+    onInsert: onInsert,
+    onRootDrop: onRootDrop,
+    onItemDrop: onItemDrop,
+    onReorder: onReorder,
+    shouldAcceptItemDrop: shouldAcceptItemDrop,
+    onDropEnter: onDropEnter,
+    onDropActivate: onDropActivate,
+    onDropExit: onDropExit,
+    onDrop: onDrop,
+    getDropOperation: getDropOperation
+  };
+  var listOptions = {
+    filter: filter,
+    initialFilterText: initialFilterText,
+    initialItems: items,
+    initialSelectedKeys: initialSelectedKeys
+  };
+  var listStateOptions = {
+    allowDuplicateSelectionEvents: allowDuplicateSelectionEvents,
+    children: children,
+    collection: collection,
+    defaultSelectedKeys: defaultSelectedKeys,
+    disabledBehavior: disabledBehavior,
+    disabledKeys: disabledKeys,
+    disallowEmptySelection: disallowEmptySelection,
+    filter: filter,
+    onSelectionChange: onSelectionChange,
+    selectedKeys: selectedKeys,
+    selectionBehavior: selectionBehavior,
+    selectionMode: selectionMode
+  };
+  var list = useListData(_objectSpread({}, listOptions));
+  var state = useListState(_objectSpread(_objectSpread({}, listStateOptions), {}, {
+    items: list.items
+  }));
+  var gridOptions = {
+    autoFocus: autoFocus,
+    defaultSelectedKeys: defaultSelectedKeys,
+    disabledBehavior: disabledBehavior,
+    disabledKeys: disabledKeys,
+    disallowEmptySelection: disallowEmptySelection,
+    disallowTypeAhead: disallowTypeAhead,
+    escapeKeyBehavior: escapeKeyBehavior,
+    items: list.items,
+    keyboardDelegate: keyboardDelegate,
+    keyboardNavigationBehavior: keyboardNavigationBehavior,
+    linkBehavior: linkBehavior,
+    onSelectionChange: onSelectionChange,
+    selectedKeys: selectedKeys,
+    selectionMode: selectionMode,
+    shouldFocusWrap: shouldFocusWrap,
+    shouldSelectOnPressUp: shouldSelectOnPressUp
+  };
+  var _raUseGridList = raUseGridList(_objectSpread(_objectSpread({}, gridOptions), {}, {
+      'aria-label': 'Reorderable list',
+      disabledBehavior: disabledBehavior,
+      shouldFocusWrap: true
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    }), state, ref),
+    gridProps = _raUseGridList.gridProps;
+  var dndOptions = {
+    draggableCollectionStateOptions: draggableCollectionStateOptions,
+    droppableCollectionStateOptions: droppableCollectionStateOptions,
+    isReorderable: isReorderable,
+    list: list,
+    ref: ref,
+    state: state,
+    useDroppableCollectionOptions: useDroppableCollectionOptions
+  };
+  var _useReorderableCollec = useReorderableCollection(_objectSpread({}, dndOptions)),
+    dragState = _useReorderableCollec.dragState,
+    dropState = _useReorderableCollec.dropState,
+    collectionProps = _useReorderableCollec.collectionProps;
+  var gridListItemProps = {
+    dragState: dragState,
+    dropState: dropState,
+    isReorderable: isReorderable,
+    shouldSelectOnPressUp: shouldSelectOnPressUp,
+    state: state
+  };
+  return {
+    collectionProps: collectionProps,
+    dragState: dragState,
+    dropState: dropState,
+    gridListItemProps: gridListItemProps,
+    gridProps: gridProps,
+    state: state
+  };
+};
+export default useGridList;

package/lib/hooks/useGridListItem/index.js

@@ -0,0 +1 @@
+export { default } from './useGridListItem';

package/lib/hooks/useGridListItem/useGridListItem.js

@@ -0,0 +1,59 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { mergeProps } from 'react-aria';
+import { useDraggableItem } from '@react-aria/dnd';
+import { useFocusRing } from '@react-aria/focus';
+import { useGridListItem as raUseGridListItem } from '@react-aria/gridlist';
+import { useStatusClasses } from '..';
+var useGridListItem = function useGridListItem(props) {
+  var dragState = props.dragState,
+    isReorderable = props.isReorderable,
+    item = props.item,
+    ref = props.ref,
+    state = props.state;
+  var _raUseGridListItem = raUseGridListItem({
+      node: item,
+      hasChildItems: true
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    state, ref),
+    rowProps = _raUseGridListItem.rowProps,
+    gridCellProps = _raUseGridListItem.gridCellProps;
+
+  // Register the item as a drag source.
+  var _useDraggableItem = useDraggableItem({
+      hasDragButton: true,
+      key: item.key
+    }, dragState),
+    dragProps = _useDraggableItem.dragProps,
+    dragButtonProps = _useDraggableItem.dragButtonProps;
+  var _useFocusRing = useFocusRing(),
+    focusProps = _useFocusRing.focusProps,
+    isFocusVisible = _useFocusRing.isFocusVisible;
+  var isDragging = dragState.draggedKey === item.key;
+  var _useStatusClasses = useStatusClasses('', {
+      isFocused: isFocusVisible,
+      isDragging: isDragging
+    }),
+    classNames = _useStatusClasses.classNames;
+  var mergedRowProps = _objectSpread({}, mergeProps(rowProps, focusProps, _objectSpread({}, isReorderable && dragProps), {
+    className: classNames
+  }));
+  var buttonProps = _objectSpread({}, mergeProps(dragButtonProps));
+  return {
+    buttonProps: buttonProps,
+    gridCellProps: gridCellProps,
+    isDragging: isDragging,
+    rowProps: mergedRowProps
+  };
+};
+export default useGridListItem;

package/lib/hooks/useReorderableCollection/index.js

@@ -0,0 +1 @@
+export { default } from './useReorderableCollection';

package/lib/hooks/useReorderableCollection/useReorderableCollection.js

@@ -0,0 +1,91 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _valuesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/values";
+import _keysInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/keys";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { useState } from 'react';
+import { ListDropTargetDelegate, useDraggableCollection, useDroppableCollection } from '@react-aria/dnd';
+import { ListKeyboardDelegate } from '@react-aria/selection';
+import { useDraggableCollectionState, useDroppableCollectionState } from '@react-stately/dnd';
+var useReorderableCollection = function useReorderableCollection(props) {
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    draggingKey = _useState2[0],
+    setDraggingKey = _useState2[1];
+  var draggableCollectionStateOptions = props.draggableCollectionStateOptions,
+    droppableCollectionStateOptions = props.droppableCollectionStateOptions,
+    isReorderable = props.isReorderable,
+    list = props.list,
+    useDroppableCollectionOptions = props.useDroppableCollectionOptions,
+    ref = props.ref,
+    state = props.state;
+  var _onReorder = useDroppableCollectionOptions.onReorder;
+  var onDropFunction = function onDropFunction(e) {
+    if (e.target.dropPosition === 'before') {
+      list.moveBefore(e.target.key, [draggingKey]);
+    } else if (e.target.dropPosition === 'after') {
+      list.moveAfter(e.target.key, [draggingKey]);
+    }
+  };
+  var draggableStateOptions = _objectSpread(_objectSpread({}, draggableCollectionStateOptions), {}, {
+    onDragStart: function onDragStart(e) {
+      var _context;
+      setDraggingKey(_valuesInstanceProperty(_context = _keysInstanceProperty(e)).call(_context).next().value);
+    },
+    collection: state.collection,
+    selectionManager: state.selectionManager,
+    getItems: function getItems() {
+      var _context2;
+      return _mapInstanceProperty(_context2 = _Array$from(state.collection)).call(_context2, function (_item) {
+        return {
+          'text/plain': _item.key
+        };
+      });
+    }
+  });
+
+  // Setup drag state for the collection.
+  var dragState = useDraggableCollectionState(_objectSpread({}, draggableStateOptions));
+  var dropState = useDroppableCollectionState(_objectSpread(_objectSpread(_objectSpread({}, droppableCollectionStateOptions), isReorderable && {
+    onReorder: onDropFunction
+  }), {}, {
+    collection: state.collection,
+    selectionManager: state.selectionManager
+  }));
+
+  // not having this be an any would require bumping the react-aria global version.
+  // not sure we want to do that at this time.
+  var keyboardDelegate = new ListKeyboardDelegate(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  state.collection, state.disabledKeys, ref);
+  var _useDroppableCollecti = useDroppableCollection(_objectSpread(_objectSpread({}, useDroppableCollectionOptions), {}, {
+      onReorder: function onReorder(e) {
+        onDropFunction(e);
+        if (_onReorder) {
+          _onReorder(e);
+        }
+      },
+      dropTargetDelegate: new ListDropTargetDelegate(state.collection, ref),
+      keyboardDelegate: keyboardDelegate
+    }), dropState, ref),
+    collectionProps = _useDroppableCollecti.collectionProps;
+  useDraggableCollection(props, dragState, ref);
+  return {
+    collectionProps: collectionProps,
+    dragState: dragState,
+    dropState: dropState,
+    state: state
+  };
+};
+export default useReorderableCollection;

package/lib/index.js

@@ -86,6 +86,7 @@ export { default as FileInputField } from './components/FileInputField';
 export { default as Footer } from './components/Footer';
 export * from './components/Footer';
 export { default as Grid } from './components/Grid';
+export { default as GridList, GridListRow } from './components/GridList';
 export { default as HelpHint } from './components/HelpHint';
 export * from './components/HelpHint';
 export { default as Icon } from './components/Icon';