@pingux/astro 2.50.0 → 2.51.0-alpha.1

package/lib/cjs/components/ListView/ListViewFocusWrapper.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.escapeFocusDelegate = exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactAria = require("react-aria");
+var _focus = require("@react-aria/focus");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _index = require("../../index");
+var _react2 = require("@emotion/react");
+var _excluded = ["children", "gridCellProps", "focusManager", "isFocusEscaped", "setIsFocusEscaped", "focusProps", "focusWithinProps", "isFocused", "isFocusWithin"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var escapeFocusDelegate = function escapeFocusDelegate(e, setIsFocusEscaped, focusManager, isFocusEscaped) {
+  if (e.keyCode === 13) {
+    setIsFocusEscaped(true);
+    focusManager.focusNext();
+    e.stopPropagation();
+    e.preventDefault();
+  } else if (isFocusEscaped) {
+    switch (e.keyCode) {
+      case 37:
+        e.stopPropagation();
+        break;
+      case 39:
+        e.stopPropagation();
+        break;
+      case 38:
+        focusManager.focusPrevious();
+        e.stopPropagation();
+        e.preventDefault();
+        break;
+      case 40:
+        focusManager.focusNext();
+        e.stopPropagation();
+        e.preventDefault();
+        break;
+      default:
+        break;
+    }
+  }
+};
+exports.escapeFocusDelegate = escapeFocusDelegate;
+var ExpandableItemChildrenContainer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var children = props.children,
+    gridCellProps = props.gridCellProps,
+    focusManager = props.focusManager,
+    isFocusEscaped = props.isFocusEscaped,
+    setIsFocusEscaped = props.setIsFocusEscaped,
+    focusProps = props.focusProps,
+    focusWithinProps = props.focusWithinProps,
+    isFocused = props.isFocused,
+    isFocusWithin = props.isFocusWithin,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var mergedProps = (0, _reactAria.mergeProps)(others, gridCellProps, focusProps, focusWithinProps);
+
+  // this handles instances where a user clicks into the container.
+  (0, _react.useEffect)(function () {
+    if (isFocusWithin && !isFocusEscaped && !isFocused) {
+      setIsFocusEscaped(true);
+    }
+  }, [isFocusWithin]);
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    ref: ref
+  }, mergedProps, {
+    tabIndex: 0,
+    onKeyDown: function onKeyDown(e) {
+      escapeFocusDelegate(e, setIsFocusEscaped, focusManager, isFocusEscaped);
+    }
+  }), children);
+});
+ExpandableItemChildrenContainer.propTypes = {
+  gridCellProps: _propTypes["default"].shape({}),
+  focusManager: _propTypes["default"].shape({}),
+  focusProps: _propTypes["default"].shape({}),
+  focusWithinProps: _propTypes["default"].shape({}),
+  isFocusEscaped: _propTypes["default"].bool,
+  isFocused: _propTypes["default"].bool,
+  isFocusWithin: _propTypes["default"].bool,
+  expandableContainerOnBlur: _propTypes["default"].func,
+  expandableContainerOnFocus: _propTypes["default"].func,
+  setIsFocusEscaped: _propTypes["default"].func
+};
+var ListViewFocusWrapper = function ListViewFocusWrapper(props) {
+  var children = props.children,
+    containerProps = props.containerProps,
+    isFocusEscaped = props.isFocusEscaped;
+  var focusManager = (0, _focus.useFocusManager)();
+  return (0, _react2.jsx)(_focus.FocusScope, {
+    restoreFocus: false,
+    contain: isFocusEscaped
+  }, (0, _react2.jsx)(FocusableItem, null, (0, _react2.jsx)(ExpandableItemChildrenContainer, (0, _extends2["default"])({}, containerProps, {
+    focusManager: focusManager
+  }), children)));
+};
+var FocusableItem = function FocusableItem(props) {
+  var focusManager = (0, _focus.useFocusManager)();
+  var childWithFocusHandle = /*#__PURE__*/_react["default"].cloneElement(props.children, {
+    focusManager: focusManager
+  });
+  return childWithFocusHandle;
+};
+ListViewFocusWrapper.propTypes = {
+  containerProps: _propTypes["default"].shape({}),
+  isFocusEscaped: _propTypes["default"].bool
+};
+var _default = ListViewFocusWrapper;
+exports["default"] = _default;

package/lib/cjs/components/ListView/ListViewItem.js

@@ -22,7 +22,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _interactions = require("@react-aria/interactions");
-var _list = require("@react-aria/list");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
 var _index = require("../../index");
@@ -33,7 +32,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys2(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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var ListViewItem = function ListViewItem(props) {
-  var _context;
+  var _context, _item$rendered;
   var item = props.item,
     _props$item$props = props.item.props,
     listItemProps = _props$item$props.listItemProps,
@@ -58,24 +57,31 @@ var ListViewItem = function ListViewItem(props) {
   var _useFocusRing2 = (0, _reactAria.useFocusRing)(),
     focusProps = _useFocusRing2.focusProps,
     isFocusVisible = _useFocusRing2.isFocusVisible;
+  var onPointerLeaveFunction = /* istanbul ignore next */function onPointerLeaveFunction() {
+    state.hover.setHoveredItem('');
+  };
   var _useHover = (0, _interactions.useHover)({
       onHoverStart: function onHoverStart() {
         state.hover.setHoveredItem(item.key);
+      },
+      onHoverEnd: /* istanbul ignore next */
+      function onHoverEnd() {
+        onPointerLeaveFunction();
       }
     }),
-    hoverProps = _useHover.hoverProps,
-    isHovered = _useHover.isHovered;
-  var _useListItem = (0, _list.useListItem)({
+    hoverProps = _useHover.hoverProps;
+  var _useGridListItem = (0, _reactAria.useGridListItem)({
       node: item,
-      isVirtualized: true,
-      isDisabled: isDisabled
+      isVirtualized: true
     }, state, rowRef),
-    raRowProps = _useListItem.rowProps,
-    gridCellProps = _useListItem.gridCellProps;
+    raRowProps = _useGridListItem.rowProps,
+    gridCellProps = _useGridListItem.gridCellProps;
   var isSelected = state.selectionManager.isSelected(item.key);
-  var mergedProps = (0, _reactAria.mergeProps)(raRowProps, hoverProps, isFocusable ? _objectSpread(_objectSpread({}, focusProps), focusWithinProps) : {});
+  var mergedProps = (0, _reactAria.mergeProps)(raRowProps, hoverProps, isFocusable ? _objectSpread(_objectSpread({}, focusProps), focusWithinProps) : {}, {
+    onPointerLeave: onPointerLeaveFunction
+  });
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
-      isHovered: isSelectable && isHovered && isHoverable && item.key === state.hover.hoveredItem,
+      isHovered: isSelectable && isHoverable && item.key === state.hover.hoveredItem,
       isSelected: isSelected,
       isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin,
       hasSeparator: hasSeparator,
@@ -85,7 +91,11 @@ var ListViewItem = function ListViewItem(props) {
 
   // Whether the current component should have legacy styles removed
   // TODO: [Astro 3.0.0] Remove the legacy styles and update the code here.
-  var shouldOverRideLegacyStyles = (0, _includes["default"])(_context = (0, _keys["default"])(item.rendered.props)).call(_context, 'data');
+  var shouldOverRideLegacyStyles = (0, _includes["default"])(_context = (0, _keys["default"])(item === null || item === void 0 || (_item$rendered = item.rendered) === null || _item$rendered === void 0 ? void 0 : _item$rendered.props)).call(_context, 'data');
+
+  // Apply appropriate variant dependant on whether a legacy list item is used
+  /* istanbul ignore next */
+  var listItemVariant = shouldOverRideLegacyStyles ? 'listViewItem.styledListItem' : 'listViewItem.container';
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     isDisabled: isDisabled,
     isRow: true,
@@ -95,10 +105,8 @@ var ListViewItem = function ListViewItem(props) {
       outline: 'none'
     }
   }), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    as: "div"
-    // Apply appropriate variant dependant on whether a legacy list item is used
-    ,
-    variant: shouldOverRideLegacyStyles ? 'listViewItem.styledListItem' : 'listViewItem.container'
+    as: "div",
+    variant: listItemVariant
   }, gridCellProps, {
     isFocused: isDisabled ? false : isFocusVisible,
     isDisabled: isDisabled,

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

@@ -117,6 +117,36 @@ var rightOfData = {
   alignSelf: 'center',
   flexShrink: 0
 };
+var expandableFocusContainer = {
+  px: 'sm',
+  outline: 'none',
+  border: 'none',
+  '&.is-focused': {
+    boxShadow: '0 0 0 1px inset #D033FF'
+  }
+};
+var expandableStyledListItem = {
+  display: 'flex',
+  padding: '0px 15px 0px 25px',
+  flex: '1 1 0px',
+  minHeight: '80px',
+  flexGrow: 1,
+  justifyContent: 'center',
+  bg: 'white',
+  '&.is-hovered': {
+    bg: 'accent.99',
+    cursor: 'pointer'
+  },
+  '&.is-focused': {
+    boxShadow: '0 0 0 1px inset #D033FF'
+  }
+};
+var expandableRow = {
+  '&.has-separator': {
+    borderBottom: '1px solid',
+    borderBottomColor: 'line.light'
+  }
+};
 var _default = {
   container: container,
   controls: controls,
@@ -127,6 +157,9 @@ var _default = {
   rightOfData: rightOfData,
   styledContainer: styledContainer,
   styledListItem: styledListItem,
-  loaderContainer: loaderContainer
+  loaderContainer: loaderContainer,
+  expandableFocusContainer: expandableFocusContainer,
+  expandableStyledListItem: expandableStyledListItem,
+  expandableRow: expandableRow
 };
 exports["default"] = _default;