@pingux/astro 2.130.4 → 2.131.0-alpha.1

package/lib/cjs/components/TreeView/InsertionIndicator.js

@@ -8,39 +8,44 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _reactAria = require("react-aria");
 var _dnd = require("@react-aria/dnd");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
-var _hooks = require("../../hooks");
 var _react2 = require("@emotion/react");
 var InsertionIndicator = function InsertionIndicator(props) {
   var insertRef = _react["default"].useRef(null);
   var target = props.target,
     state = props.dropState;
+  var _useVisuallyHidden = (0, _reactAria.useVisuallyHidden)(),
+    visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
   var _useDropIndicator = (0, _dnd.useDropIndicator)({
-      target: target,
-      isPresentationOnly: true
+      target: target
     }, state, {
       ref: insertRef
     }),
     dropIndicatorProps = _useDropIndicator.dropIndicatorProps,
     isHidden = _useDropIndicator.isHidden,
     isDropTarget = _useDropIndicator.isDropTarget;
-  var _useStatusClasses = (0, _hooks.useStatusClasses)('', {
-      isDropTarget: isDropTarget
-    }),
-    classNames = _useStatusClasses.classNames;
   if (isHidden) {
     return null;
   }
-  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    as: "li"
-  }, dropIndicatorProps, {
-    role: "option",
-    ref: insertRef,
-    className: classNames,
+  if (!isDropTarget) {
+    return null;
+  }
+  return (0, _react2.jsx)(_.Box, {
+    role: "row",
+    "aria-hidden": dropIndicatorProps['aria-hidden'],
+    "data-testid": "insertion-indicator"
+  }, (0, _react2.jsx)(_.Box, {
+    role: "gridcell",
+    "aria-selected": "false",
     variant: "treeView.insertionIndicator"
-  }));
+  }, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, visuallyHiddenProps, {
+    role: "button"
+  }, dropIndicatorProps, {
+    ref: insertRef
+  }))));
 };
 InsertionIndicator.propTypes = {
   dropState: _propTypes["default"].shape({}),

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

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

package/lib/cjs/components/TreeView/index.js

@@ -5,6 +5,12 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
+_Object$defineProperty(exports, "InsertionIndicator", {
+  enumerable: true,
+  get: function get() {
+    return _InsertionIndicator["default"];
+  }
+});
 _Object$defineProperty(exports, "TreeViewItem", {
   enumerable: true,
   get: function get() {
@@ -23,6 +29,7 @@ _Object$defineProperty(exports, "default", {
     return _TreeView["default"];
   }
 });
+var _InsertionIndicator = _interopRequireDefault(require("./InsertionIndicator"));
 var _TreeView = _interopRequireDefault(require("./TreeView"));
 var _TreeViewItem = _interopRequireDefault(require("./TreeViewItem"));
 var _TreeViewSection = _interopRequireDefault(require("./TreeViewSection"));

package/lib/cjs/hooks/index.d.ts

@@ -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/cjs/hooks/index.js

@@ -65,6 +65,18 @@ _Object$defineProperty(exports, "useGetTheme", {
     return _useGetTheme["default"];
   }
 });
+_Object$defineProperty(exports, "useGridList", {
+  enumerable: true,
+  get: function get() {
+    return _useGridList["default"];
+  }
+});
+_Object$defineProperty(exports, "useGridListItem", {
+  enumerable: true,
+  get: function get() {
+    return _useGridListItem["default"];
+  }
+});
 _Object$defineProperty(exports, "useInputLoader", {
   enumerable: true,
   get: function get() {
@@ -171,6 +183,8 @@ var _useDevelopmentWarning = _interopRequireDefault(require("./useDevelopmentWar
 var _useFallbackImage = _interopRequireDefault(require("./useFallbackImage"));
 var _useField = _interopRequireDefault(require("./useField"));
 var _useGetTheme = _interopRequireDefault(require("./useGetTheme"));
+var _useGridList = _interopRequireDefault(require("./useGridList"));
+var _useGridListItem = _interopRequireDefault(require("./useGridListItem"));
 var _useInputLoader = _interopRequireDefault(require("./useInputLoader"));
 var _useLabelHeight = _interopRequireDefault(require("./useLabelHeight"));
 var _useLocalOrForwardRef = _interopRequireDefault(require("./useLocalOrForwardRef"));

package/lib/cjs/hooks/useGridList/index.d.ts

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

package/lib/cjs/hooks/useGridList/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _useGridList["default"];
+  }
+});
+var _useGridList = _interopRequireDefault(require("./useGridList"));

package/lib/cjs/hooks/useGridList/useGridList.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { ListState } from 'react-stately';
+import { UseGridListProps } from '../../types/gridList';
+declare const useGridList: (props: UseGridListProps) => {
+    collectionProps: import("react").HTMLAttributes<HTMLElement>;
+    dragState: import("@react-stately/dnd").DraggableCollectionState;
+    dropState: import("@react-stately/dnd").DroppableCollectionState;
+    gridListItemProps: {
+        dragState: import("@react-stately/dnd").DraggableCollectionState;
+        dropState: import("@react-stately/dnd").DroppableCollectionState;
+        isReorderable: boolean | undefined;
+        shouldSelectOnPressUp: boolean | undefined;
+        state: ListState<object>;
+    };
+    gridProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
+    state: ListState<object>;
+};
+export default useGridList;

package/lib/cjs/hooks/useGridList/useGridList.js

@@ -0,0 +1,175 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+var _reactStately = require("react-stately");
+var _gridlist = require("@react-aria/gridlist");
+var _data = require("@react-stately/data");
+var _useReorderableCollection = _interopRequireDefault(require("../useReorderableCollection"));
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(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) { (0, _defineProperty2["default"])(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; }
+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 = (0, _filter["default"])(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 = (0, _data.useListData)(_objectSpread({}, listOptions));
+  var state = (0, _reactStately.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 = (0, _gridlist.useGridList)(_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 = (0, _useReorderableCollection["default"])(_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
+  };
+};
+var _default = useGridList;
+exports["default"] = _default;

package/lib/cjs/hooks/useGridListItem/index.d.ts

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

package/lib/cjs/hooks/useGridListItem/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _useGridListItem["default"];
+  }
+});
+var _useGridListItem = _interopRequireDefault(require("./useGridListItem"));