@pingux/astro 2.0.4-alpha.1 → 2.0.4-alpha.3

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

@@ -19,6 +19,7 @@ exports.useListLayout = useListLayout;
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _i18n = require("@react-aria/i18n");
@@ -91,6 +92,10 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     selectionMode = props.selectionMode,
     selectionStyle = props.selectionStyle,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    hoveredItem = _useState2[0],
+    setHoveredItem = _useState2[1];
   var isLoading = loadingState === _loadingStates["default"].LOADING_MORE || loadingState === _loadingStates["default"].LOADING;
   var renderWrapper = function renderWrapper(parent, reusableView) {
     return (0, _react2.jsx)(_virtualizer.VirtualizerItem, {
@@ -108,6 +113,10 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var state = (0, _list2.useListState)(_objectSpread(_objectSpread({}, props), {}, {
     selectionBehavior: selectionStyle === 'highlight' ? 'replace' : 'toggle'
   }));
+  state.hover = {
+    hoveredItem: hoveredItem,
+    setHoveredItem: setHoveredItem
+  };
   var collection = state.collection,
     selectionManager = state.selectionManager;
   var layout = useListLayout(state);
@@ -127,6 +136,11 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       others.onFocus(e);
     }
   };
+
+  // This code removes hover when scrolling ListView in the Firefox browser.
+  var resetHoverState = function resetHoverState() {
+    state.hover.setHoveredItem(null);
+  };
   return (0, _react2.jsx)(_ListViewContext.ListViewContext.Provider, {
     value: {
       state: state
@@ -143,7 +157,8 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     collection: collection,
     transitionDuration: 0
   }, others, {
-    onFocus: onFocus
+    onFocus: onFocus,
+    onScroll: resetHoverState
   }), function (type, item) {
     if (type === 'item') {
       return (0, _react2.jsx)(_ListViewItem["default"], {

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

@@ -333,4 +333,18 @@ test('list view not receive focus when click on checkbox', function () {
   expect(listItem[0]).not.toHaveClass('is-focused');
   checkbox[0].click();
   expect(listItem[0]).not.toHaveClass('is-focused');
+});
+test('list view reset hover on item when scroll', function () {
+  getComponent();
+  var listView = _testWrapper.screen.getAllByRole('grid');
+  var listItem = _testWrapper.screen.getAllByRole('gridcell');
+  expect(listItem[0]).not.toHaveClass('is-hovered');
+  _userEvent["default"].hover(listItem[0]);
+  expect(listItem[0]).toHaveClass('is-hovered');
+  _testWrapper.fireEvent.scroll(listView[0], {
+    target: {
+      scrollY: 100
+    }
+  });
+  expect(listItem[0]).not.toHaveClass('is-hovered');
 });

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

@@ -45,7 +45,11 @@ var ListViewItem = function ListViewItem(props) {
   var _useFocusRing2 = (0, _reactAria.useFocusRing)(),
     focusProps = _useFocusRing2.focusProps,
     isFocusVisible = _useFocusRing2.isFocusVisible;
-  var _useHover = (0, _interactions.useHover)({}),
+  var _useHover = (0, _interactions.useHover)({
+      onHoverStart: function onHoverStart() {
+        state.hover.setHoveredItem(item.key);
+      }
+    }),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
   var _useListItem = (0, _list.useListItem)({
@@ -58,7 +62,7 @@ var ListViewItem = function ListViewItem(props) {
   var isSelected = state.selectionManager.isSelected(item.key);
   var mergedProps = (0, _reactAria.mergeProps)(raRowProps, hoverProps, focusWithinProps, focusProps);
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
-      isHovered: isSelectable && isHovered && isHoverable,
+      isHovered: isSelectable && isHovered && isHoverable && item.key === state.hover.hoveredItem,
       isSelected: isSelected,
       isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin,
       hasSeparator: hasSeparator,

package/lib/cjs/recipes/TrialExperienceStatusBar.stories.js

@@ -1,9 +1,15 @@
 "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$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 _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
@@ -13,6 +19,7 @@ var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-s
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
@@ -21,6 +28,8 @@ var _index = require("../index");
 var _react2 = require("@emotion/react");
 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; }
+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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(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; }
 var _default = {
   title: 'Recipes/Trial Experience Nav'
 };
@@ -139,6 +148,8 @@ var sx = {
     maxWidth: '195px'
   },
   linkRowIconButton: {
+    height: '23.5px',
+    width: '23.5px',
     '&.is-pressed': {
       backgroundColor: 'transparent'
     },
@@ -164,10 +175,9 @@ var sx = {
   linkRowSeparator: {
     flexGrow: 1,
     backgroundColor: 'accent.30',
-    maxHeight: '100%',
     width: '1px !important',
     zIndex: 2,
-    m: '-5px 5px -5px 11.5px !important'
+    m: '-4px 5px -5px 11.5px !important'
   },
   linkRowText: {
     fontSize: 'md',
@@ -186,11 +196,11 @@ var sx = {
     boxShadow: '3px 8px 4px rgba(202, 206, 211, 0.36)'
   }
 };
-var Stage = function Stage(props) {
-  var title = props.title,
-    icon = props.icon,
-    links = props.links,
-    isLastStage = props.isLastStage;
+var Stage = function Stage(_ref) {
+  var title = _ref.title,
+    icon = _ref.icon,
+    links = _ref.links,
+    isLastStage = _ref.isLastStage;
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     selectedLinks = _useState2[0],
@@ -239,43 +249,57 @@ var Stage = function Stage(props) {
     }));
   }))));
 };
-var LinkRow = function LinkRow(props) {
-  var title = props.title,
-    index = props.index,
-    onSelectionChange = props.onSelectionChange,
-    isLinkSelected = props.isLinkSelected,
-    isLastLink = props.isLastLink;
+var LinkRow = function LinkRow(_ref2) {
+  var index = _ref2.index,
+    isLastLink = _ref2.isLastLink,
+    isLinkSelected = _ref2.isLinkSelected,
+    onSelectionChange = _ref2.onSelectionChange,
+    title = _ref2.title;
   var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     isSelected = _useState4[0],
     handleSelectionChange = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    verticalSeparatorHeight = _useState6[0],
+    setVerticalSeparatorHeight = _useState6[1];
+  var iconRef = (0, _react.useRef)();
+  var rowRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    var _rowRef$current$getBo = rowRef.current.getBoundingClientRect(),
+      height = _rowRef$current$getBo.height;
+    var _iconRef$current$getB = iconRef.current.getBoundingClientRect(),
+      iconRefHeight = _iconRef$current$getB.height;
+    var marginAccommodation = 4;
+    var halfIconHeight = iconRefHeight / 2;
+    setVerticalSeparatorHeight(height - halfIconHeight - marginAccommodation);
+  }, [iconRef, rowRef]);
   var onIconPress = function onIconPress() {
     handleSelectionChange(!isSelected);
     onSelectionChange(index);
   };
   return (0, _react2.jsx)(_index.Box, {
-    isRow: true
-  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
-    sx: {
-      height: '23.5px',
-      width: '23.5px'
-    }
-  }, (0, _react2.jsx)(_index.IconButton, {
+    isRow: true,
+    ref: rowRef
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "completed step icon indicator",
     onPress: onIconPress,
-    sx: sx.linkRowIconButton,
-    "aria-label": "completed step icon indicator"
+    ref: iconRef,
+    sx: sx.linkRowIconButton
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isSelected ? _CheckCircleIcon["default"] : RadioButtonIcon,
     size: "sm",
     sx: isSelected ? sx.linkRowIconButton : sx.linkRowIconNotSelected
-  }))), !isLastLink && isLinkSelected && (0, _react2.jsx)(_index.Separator, {
-    sx: sx.linkRowSeparator,
-    orientation: "vertical"
-  })), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, {
+  })), !isLastLink && isLinkSelected && (0, _react2.jsx)(_index.Separator, {
+    orientation: "vertical",
+    sx: _objectSpread(_objectSpread({}, sx.linkRowSeparator), {}, {
+      maxHeight: verticalSeparatorHeight
+    })
+  })), (0, _react2.jsx)(_index.Link, {
     href: "https://www.pingidentity.com",
-    target: "_blank",
-    sx: sx.linkRowText
-  }, title)));
+    sx: sx.linkRowText,
+    target: "_blank"
+  }, title));
 };
 var Default = function Default() {
   // Open the `Story` addons tab to view the source code for full context.

package/lib/components/ListView/ListView.js

@@ -8,12 +8,13 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onSelectionChange", "selectedKeys", "selectionMode", "selectionStyle"];
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 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 React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useCollator } from '@react-aria/i18n';
 import { useList } from '@react-aria/list';
 import { Virtualizer, VirtualizerItem } from '@react-aria/virtualizer';
@@ -78,6 +79,10 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
     selectionMode = props.selectionMode,
     selectionStyle = props.selectionStyle,
     others = _objectWithoutProperties(props, _excluded);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    hoveredItem = _useState2[0],
+    setHoveredItem = _useState2[1];
   var isLoading = loadingState === loadingStates.LOADING_MORE || loadingState === loadingStates.LOADING;
   var renderWrapper = function renderWrapper(parent, reusableView) {
     return ___EmotionJSX(VirtualizerItem, {
@@ -95,6 +100,10 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
   var state = useListState(_objectSpread(_objectSpread({}, props), {}, {
     selectionBehavior: selectionStyle === 'highlight' ? 'replace' : 'toggle'
   }));
+  state.hover = {
+    hoveredItem: hoveredItem,
+    setHoveredItem: setHoveredItem
+  };
   var collection = state.collection,
     selectionManager = state.selectionManager;
   var layout = useListLayout(state);
@@ -114,6 +123,11 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
       others.onFocus(e);
     }
   };
+
+  // This code removes hover when scrolling ListView in the Firefox browser.
+  var resetHoverState = function resetHoverState() {
+    state.hover.setHoveredItem(null);
+  };
   return ___EmotionJSX(ListViewContext.Provider, {
     value: {
       state: state
@@ -130,7 +144,8 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
     collection: collection,
     transitionDuration: 0
   }, others, {
-    onFocus: onFocus
+    onFocus: onFocus,
+    onScroll: resetHoverState
   }), function (type, item) {
     if (type === 'item') {
       return ___EmotionJSX(ListViewItem, {

package/lib/components/ListView/ListView.test.js

@@ -18,7 +18,7 @@ import { Item } from 'react-stately';
 import userEvent from '@testing-library/user-event';
 import _ from 'lodash';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
-import { render, screen } from '../../utils/testUtils/testWrapper';
+import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import CheckboxField from '../CheckboxField';
 import ListView from './ListView';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -330,4 +330,18 @@ test('list view not receive focus when click on checkbox', function () {
   expect(listItem[0]).not.toHaveClass('is-focused');
   checkbox[0].click();
   expect(listItem[0]).not.toHaveClass('is-focused');
+});
+test('list view reset hover on item when scroll', function () {
+  getComponent();
+  var listView = screen.getAllByRole('grid');
+  var listItem = screen.getAllByRole('gridcell');
+  expect(listItem[0]).not.toHaveClass('is-hovered');
+  userEvent.hover(listItem[0]);
+  expect(listItem[0]).toHaveClass('is-hovered');
+  fireEvent.scroll(listView[0], {
+    target: {
+      scrollY: 100
+    }
+  });
+  expect(listItem[0]).not.toHaveClass('is-hovered');
 });

package/lib/components/ListViewItem/ListViewItem.js

@@ -32,7 +32,11 @@ var ListViewItem = function ListViewItem(props) {
   var _useFocusRing2 = useFocusRing(),
     focusProps = _useFocusRing2.focusProps,
     isFocusVisible = _useFocusRing2.isFocusVisible;
-  var _useHover = useHover({}),
+  var _useHover = useHover({
+      onHoverStart: function onHoverStart() {
+        state.hover.setHoveredItem(item.key);
+      }
+    }),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
   var _useListItem = useListItem({
@@ -45,7 +49,7 @@ var ListViewItem = function ListViewItem(props) {
   var isSelected = state.selectionManager.isSelected(item.key);
   var mergedProps = mergeProps(raRowProps, hoverProps, focusWithinProps, focusProps);
   var _useStatusClasses = useStatusClasses(className, {
-      isHovered: isSelectable && isHovered && isHoverable,
+      isHovered: isSelectable && isHovered && isHoverable && item.key === state.hover.hoveredItem,
       isSelected: isSelected,
       isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin,
       hasSeparator: hasSeparator,

package/lib/recipes/TrialExperienceStatusBar.stories.js

@@ -1,10 +1,20 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+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 _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React, { useState } from 'react';
+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 React, { useEffect, useRef, useState } from 'react';
 import CheckCircleIcon from 'mdi-react/CheckCircleIcon';
 import { Box, Icon, IconButton, Link, Separator, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -125,6 +135,8 @@ var sx = {
     maxWidth: '195px'
   },
   linkRowIconButton: {
+    height: '23.5px',
+    width: '23.5px',
     '&.is-pressed': {
       backgroundColor: 'transparent'
     },
@@ -150,10 +162,9 @@ var sx = {
   linkRowSeparator: {
     flexGrow: 1,
     backgroundColor: 'accent.30',
-    maxHeight: '100%',
     width: '1px !important',
     zIndex: 2,
-    m: '-5px 5px -5px 11.5px !important'
+    m: '-4px 5px -5px 11.5px !important'
   },
   linkRowText: {
     fontSize: 'md',
@@ -172,11 +183,11 @@ var sx = {
     boxShadow: '3px 8px 4px rgba(202, 206, 211, 0.36)'
   }
 };
-var Stage = function Stage(props) {
-  var title = props.title,
-    icon = props.icon,
-    links = props.links,
-    isLastStage = props.isLastStage;
+var Stage = function Stage(_ref) {
+  var title = _ref.title,
+    icon = _ref.icon,
+    links = _ref.links,
+    isLastStage = _ref.isLastStage;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     selectedLinks = _useState2[0],
@@ -225,43 +236,57 @@ var Stage = function Stage(props) {
     }));
   }))));
 };
-var LinkRow = function LinkRow(props) {
-  var title = props.title,
-    index = props.index,
-    onSelectionChange = props.onSelectionChange,
-    isLinkSelected = props.isLinkSelected,
-    isLastLink = props.isLastLink;
+var LinkRow = function LinkRow(_ref2) {
+  var index = _ref2.index,
+    isLastLink = _ref2.isLastLink,
+    isLinkSelected = _ref2.isLinkSelected,
+    onSelectionChange = _ref2.onSelectionChange,
+    title = _ref2.title;
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     isSelected = _useState4[0],
     handleSelectionChange = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    verticalSeparatorHeight = _useState6[0],
+    setVerticalSeparatorHeight = _useState6[1];
+  var iconRef = useRef();
+  var rowRef = useRef();
+  useEffect(function () {
+    var _rowRef$current$getBo = rowRef.current.getBoundingClientRect(),
+      height = _rowRef$current$getBo.height;
+    var _iconRef$current$getB = iconRef.current.getBoundingClientRect(),
+      iconRefHeight = _iconRef$current$getB.height;
+    var marginAccommodation = 4;
+    var halfIconHeight = iconRefHeight / 2;
+    setVerticalSeparatorHeight(height - halfIconHeight - marginAccommodation);
+  }, [iconRef, rowRef]);
   var onIconPress = function onIconPress() {
     handleSelectionChange(!isSelected);
     onSelectionChange(index);
   };
   return ___EmotionJSX(Box, {
-    isRow: true
-  }, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
-    sx: {
-      height: '23.5px',
-      width: '23.5px'
-    }
-  }, ___EmotionJSX(IconButton, {
+    isRow: true,
+    ref: rowRef
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(IconButton, {
+    "aria-label": "completed step icon indicator",
     onPress: onIconPress,
-    sx: sx.linkRowIconButton,
-    "aria-label": "completed step icon indicator"
+    ref: iconRef,
+    sx: sx.linkRowIconButton
   }, ___EmotionJSX(Icon, {
     icon: isSelected ? CheckCircleIcon : RadioButtonIcon,
     size: "sm",
     sx: isSelected ? sx.linkRowIconButton : sx.linkRowIconNotSelected
-  }))), !isLastLink && isLinkSelected && ___EmotionJSX(Separator, {
-    sx: sx.linkRowSeparator,
-    orientation: "vertical"
-  })), ___EmotionJSX(Box, null, ___EmotionJSX(Link, {
+  })), !isLastLink && isLinkSelected && ___EmotionJSX(Separator, {
+    orientation: "vertical",
+    sx: _objectSpread(_objectSpread({}, sx.linkRowSeparator), {}, {
+      maxHeight: verticalSeparatorHeight
+    })
+  })), ___EmotionJSX(Link, {
     href: "https://www.pingidentity.com",
-    target: "_blank",
-    sx: sx.linkRowText
-  }, title)));
+    sx: sx.linkRowText,
+    target: "_blank"
+  }, title));
 };
 export var Default = function Default() {
   // Open the `Story` addons tab to view the source code for full context.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.0.4-alpha.1",
+  "version": "2.0.4-alpha.3",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",