@pingux/astro 1.31.0-alpha.6 → 1.31.0-alpha.8

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

@@ -85,7 +85,8 @@ exports["default"] = _default;
 var items = [{
   key: 'Aardvark',
   name: 'Aardvark',
-  id: '1'
+  id: '1',
+  hasSeparator: false
 }, {
   key: 'Kangaroo',
   name: 'Kangaroo',

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

@@ -49,6 +49,7 @@ var ListViewItem = function ListViewItem(props) {
       rowProps = _props$item$props.rowProps,
       _props$item$props$has = _props$item$props.hasSeparator,
       hasSeparator = _props$item$props$has === void 0 ? true : _props$item$props$has,
+      hasInsetSeparator = _props$item$props.hasInsetSeparator,
       className = props.className;
   var dataId = item.props['data-id'];
 
@@ -88,7 +89,8 @@ var ListViewItem = function ListViewItem(props) {
     isHovered: isSelectable && isHovered,
     isSelected: isSelected,
     isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin,
-    hasSeparator: hasSeparator
+    hasSeparator: hasSeparator,
+    hasInsetSeparator: hasInsetSeparator
   }),
       classNames = _useStatusClasses.classNames;
 
@@ -120,7 +122,8 @@ ListViewItem.propTypes = {
       'data-id': _propTypes["default"].string,
       listItemProps: _propTypes["default"].shape({}),
       rowProps: _propTypes["default"].shape({}),
-      hasSeparator: _propTypes["default"].bool
+      hasSeparator: _propTypes["default"].bool,
+      hasInsetSeparator: _propTypes["default"].bool
     })
   })
 };

package/lib/cjs/components/RequirementsList/RequirementsList.js

@@ -98,18 +98,22 @@ var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
 
   var buildRequirementsLine = function buildRequirementsLine(req) {
     return (0, _react2.jsx)(_Box["default"], {
+      role: "listitem",
       isRow: true,
       key: req.name,
       alignItems: "center",
-      width: "100%"
+      width: "100%",
+      as: "li"
     }, statusIconRender(req.status), (0, _react2.jsx)(_Text["default"], {
       variant: "bodyWeak"
     }, req.name));
   };
 
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    role: "list",
     p: "lg",
     gap: "md",
+    as: "ul",
     ref: ref
   }, others), (0, _map["default"])(requirements).call(requirements, function (req) {
     return buildRequirementsLine(req);

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

@@ -63,7 +63,7 @@ test('base case requirements list', function () {
 
   var requirementsList = _react2.screen.getByTestId(testId);
 
-  expect(requirementsList).toBeInstanceOf(HTMLDivElement);
+  expect(requirementsList).toBeInstanceOf(HTMLUListElement);
   expect(requirementsList).toBeInTheDocument();
 });
 test('empty variables requirements list', function () {
@@ -73,7 +73,7 @@ test('empty variables requirements list', function () {
 
   var requirementsList = _react2.screen.getByTestId(testId);
 
-  expect(requirementsList).toBeInstanceOf(HTMLDivElement);
+  expect(requirementsList).toBeInstanceOf(HTMLUListElement);
   expect(requirementsList).toBeInTheDocument();
 });
 test('should render default status icon if such passed in props', function () {

package/lib/cjs/components/SearchField/SearchField.js

@@ -105,6 +105,14 @@ var SearchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
+  var handleKeyDownEvent = function handleKeyDownEvent(e) {
+    var key = e.key;
+
+    if (key === 'Enter' || key === ' ') {
+      state.setValue('');
+    }
+  };
+
   return (0, _react2.jsx)(_.Box, fieldContainerProps, label && (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Box, {
     variant: "forms.search.container"
   }, (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
@@ -116,6 +124,8 @@ var SearchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "forms.search.icon",
     size: 22
   }, iconProps)), !hasNoClearButton && state.value !== '' && (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({
+    tabIndex: 0,
+    onKeyDown: handleKeyDownEvent,
     sx: {
       position: 'absolute',
       top: 8,

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

@@ -242,6 +242,33 @@ test('clear button should be present by default ', function () {
   });
   expect(_testWrapper.screen.getByRole('button')).toBeInTheDocument();
 });
+test('clear button should be keyboard accessible', function () {
+  getComponent();
+
+  var search = _testWrapper.screen.getByLabelText(testLabel);
+
+  _userEvent["default"].type(search, 'clear');
+
+  expect(search).toHaveValue('clear');
+
+  var clearButton = _testWrapper.screen.getByRole('button');
+
+  expect(clearButton).toHaveAttribute('tabindex', '0');
+  (0, _testWrapper.act)(function () {
+    clearButton.focus();
+  });
+  expect(clearButton).toHaveFocus();
+
+  _testWrapper.fireEvent.keyDown(clearButton, {
+    key: 'Enter'
+  });
+
+  _testWrapper.fireEvent.keyUp(clearButton, {
+    key: 'Enter'
+  });
+
+  expect(search).toHaveValue('');
+});
 test('clear button should not be present is hasNoClearButton=true ', function () {
   getComponent({
     value: 'test-value',

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

@@ -0,0 +1,424 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
+
+var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _collections = require("@react-stately/collections");
+
+var _DotsVerticalIcon = _interopRequireDefault(require("mdi-react/DotsVerticalIcon"));
+
+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; }
+
+var _default = {
+  title: 'Recipes/LinkedListView',
+  argTypes: {
+    loadingState: {
+      control: {
+        type: 'select'
+      }
+    },
+    disabledKeys: {
+      defaultValue: []
+    },
+    items: {
+      control: {
+        type: 'none'
+      }
+    },
+    onSelectionChange: {
+      control: 'none',
+      // eslint-disable-next-line no-console
+      defaultValue: console.log
+    }
+  }
+};
+exports["default"] = _default;
+var testData = [{
+  key: 'Default Risk Policy',
+  name: 'Default Risk Policy',
+  policyId: 'sdfasdfasdf-124123asdf',
+  id: '1',
+  hasSeparator: false,
+  hasInsetSeparator: true,
+  chipText: 'default',
+  expirationText: 'Expiring On: 2022-12-08',
+  childrenObjects: [{
+    key: 'Staging Policy',
+    name: 'Staging Policy',
+    policyId: '23423sdfsdf-124123asdf',
+    id: '4',
+    expirationText: 'Expiring On: 2022-12-08',
+    hasSeparator: true
+  }]
+}, {
+  key: 'Policy4',
+  name: 'Policy4',
+  policyId: '9234890324k-124123asdf',
+  chipText: 'default',
+  id: '2',
+  hasSeparator: true
+}, {
+  key: 'Policy5',
+  name: 'Policy5',
+  policyId: 'asdf23zaa-124123asdf',
+  id: '3'
+}]; // IMPORTANT PLEASE READ
+// in order for the list portion of this recipe to function correctly,
+// the array of objects that will be used to create
+// the production and staging rows, will need to be flat and sorted.
+// I.e. the staging rows will need to immediately follow the prod row that they correspond to.
+// This flat, sorted array will then be passed into the listview component as the items prop.
+// You may not need these functions if you are able to change the data shape on the back end
+// (which is reccomended for performance reasons)
+
+var flattenArray = function flattenArray(array) {
+  var newArray = array;
+  (0, _forEach["default"])(newArray).call(newArray, function (item) {
+    if (item.childrenObjects) {
+      var _context;
+
+      (0, _forEach["default"])(_context = item.childrenObjects).call(_context, function (obj) {
+        var newObj = obj;
+        newObj.parentId = item.id;
+        newArray.push(newObj);
+      });
+    }
+  });
+  return newArray;
+};
+
+var testSort = function testSort(array) {
+  var newArray = array;
+  (0, _forEach["default"])(newArray).call(newArray, function (item, i) {
+    if (item.parentId) {
+      var thisindex = (0, _findIndex["default"])(newArray).call(newArray, function (object) {
+        return object.id === item.parentId;
+      });
+      var element = (0, _splice["default"])(newArray).call(newArray, i, 1)[0];
+      (0, _splice["default"])(newArray).call(newArray, thisindex + 1, 0, element);
+    }
+  });
+  return newArray;
+};
+
+var unsorted = flattenArray(testData);
+var sorted = testSort(unsorted);
+
+var Default = function Default(_ref) {
+  var _context2;
+
+  var args = (0, _extends2["default"])({}, _ref);
+
+  var _useState = (0, _react.useState)((0, _concat["default"])(_context2 = []).call(_context2, sorted)),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
+      theseItems = _useState2[0]; // svg of the bottom portion of the bracket, the portion with the L shaped hook.
+
+
+  var BottomBracket = function BottomBracket() {
+    var color = '#CACED3';
+    return (0, _react2.jsx)(_index.Box, {
+      sx: {
+        width: '20px',
+        position: 'relative'
+      }
+    }, (0, _react2.jsx)(_index.Box, {
+      flexBasis: "50%"
+    }, (0, _react2.jsx)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      version: "1.1",
+      preserveAspectRatio: "none",
+      viewBox: "0 0 10 10",
+      style: {
+        flexGrow: 1
+      }
+    }, (0, _react2.jsx)("title", null, "bracket-fill"), (0, _react2.jsx)("g", null, (0, _react2.jsx)("title", null, "Layer 1"), (0, _react2.jsx)("line", {
+      strokeLinecap: "undefined",
+      strokeLinejoin: "undefined",
+      y2: "0",
+      x2: "0",
+      y1: "15",
+      x1: "0",
+      stroke: color,
+      fill: "none"
+    }))), (0, _react2.jsx)("svg", {
+      width: "17",
+      height: "9",
+      viewBox: "0 0 17 9",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, (0, _react2.jsx)("g", {
+      clipPath: "url(#clip0_1900_8817)"
+    }, (0, _react2.jsx)("g", {
+      mask: "url(#mask0_1900_8817)"
+    }, (0, _react2.jsx)("rect", {
+      x: "0.5",
+      y: "-54.5",
+      width: "20",
+      height: "63",
+      rx: "4.5",
+      stroke: "#CACED3"
+    }))), (0, _react2.jsx)("defs", null, (0, _react2.jsx)("clipPath", {
+      id: "clip0_1900_8817"
+    }, (0, _react2.jsx)("rect", {
+      width: "1600",
+      height: "917",
+      fill: "white",
+      transform: "translate(-280 -419)"
+    }))))));
+  }; // the top portion of the bracket svg, this is basically just a straight vertical line.
+
+
+  var TopBracket = function TopBracket() {
+    var color = '#CACED3';
+    return (0, _react2.jsx)(_index.Box, {
+      width: 15,
+      sx: {
+        position: 'absolute',
+        bottom: 0,
+        left: 12,
+        top: 55
+      }
+    }, (0, _react2.jsx)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      version: "1.1",
+      preserveAspectRatio: "none",
+      viewBox: "0 0 10 10",
+      style: {
+        flexGrow: 1
+      },
+      "data-testid": "isLastLayer"
+    }, (0, _react2.jsx)("title", null, "bracket-fill"), (0, _react2.jsx)("g", null, (0, _react2.jsx)("title", null, "Layer 3"), (0, _react2.jsx)("line", {
+      strokeLinecap: "undefined",
+      strokeLinejoin: "undefined",
+      y2: "0",
+      x2: "0",
+      y1: "10",
+      x1: "0",
+      stroke: color,
+      fill: "none"
+    }))));
+  }; // the vector shield and key icon.
+
+
+  var ShieldVector = function ShieldVector(props) {
+    return (0, _react2.jsx)("svg", (0, _extends2["default"])({
+      width: "19",
+      height: "23",
+      viewBox: "0 0 19 23",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), (0, _react2.jsx)("path", {
+      d: "M9.5 7.33342C9.77627 7.33342 10.0412 7.44316 10.2366 7.63851C10.4319 7.83386 10.5417 8.09881 10.5417 8.37508C10.5417 8.65135 10.4319 8.9163 10.2366 9.11165C10.0412 9.307 9.77627 9.41675 9.5 9.41675C9.22373 9.41675 8.95878 9.307 8.76343 9.11165C8.56808 8.9163 8.45833 8.65135 8.45833 8.37508C8.45833 8.09881 8.56808 7.83386 8.76343 7.63851C8.95878 7.44316 9.22373 7.33342 9.5 7.33342ZM18.875 10.4584C18.875 16.2397 14.875 21.6459 9.5 22.9584C4.125 21.6459 0.125 16.2397 0.125 10.4584V4.20842L9.5 0.041748L18.875 4.20842V10.4584ZM9.5 5.25008C8.6712 5.25008 7.87634 5.57932 7.29029 6.16537C6.70424 6.75142 6.375 7.54628 6.375 8.37508C6.375 9.73967 7.23958 10.8959 8.45833 11.323V17.7501H10.5417V15.6667H12.625V13.5834H10.5417V11.323C11.7604 10.8959 12.625 9.73967 12.625 8.37508C12.625 7.54628 12.2958 6.75142 11.7097 6.16537C11.1237 5.57932 10.3288 5.25008 9.5 5.25008Z"
+    }));
+  }; // reusable piece of code that handles the iconbutton and popover on the right side of the rows
+
+
+  var IconWithPopover = function IconWithPopover() {
+    return (0, _react2.jsx)(_index.PopoverMenu, {
+      direction: "left"
+    }, (0, _react2.jsx)(_index.Box, {
+      alignItems: "center",
+      alignSelf: "center"
+    }, (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "Menu Button"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DotsVerticalIcon["default"],
+      size: 16,
+      color: "Neutral.40",
+      m: "0.61px"
+    }))), (0, _react2.jsx)(_index.Menu, {
+      direction: "left",
+      sx: {
+        minWidth: '155px',
+        minHeight: '144px'
+      }
+    }, (0, _react2.jsx)(_collections.Item, {
+      key: "view"
+    }, "View"), (0, _react2.jsx)(_collections.Item, {
+      key: "edit"
+    }, "Edit"), (0, _react2.jsx)(_collections.Item, {
+      key: "rename"
+    }, "Rename"), (0, _react2.jsx)(_collections.Item, {
+      key: "delete",
+      textValue: "delete"
+    }, (0, _react2.jsx)(_index.Text, {
+      color: "critical.bright"
+    }, "Delete"))));
+  }; // made these separate components because staging and production both use them.
+
+
+  var DefaultChip = function DefaultChip() {
+    return (0, _react2.jsx)(_index.Chip, {
+      label: "Default",
+      bg: "active",
+      sx: {
+        marginLeft: '25px',
+        alignSelf: 'center',
+        alignItems: 'center',
+        padding: '3px 5px 2px 5px'
+      }
+    });
+  };
+
+  var ExprirationChip = function ExprirationChip(props) {
+    var expirationText = props.expirationText,
+        chipText = props.chipText;
+    return (0, _react2.jsx)(_index.Box, {
+      sx: !chipText && {
+        paddingLeft: '72px'
+      },
+      flexGrow: 1,
+      alignItems: "center",
+      alignSelf: "center"
+    }, (0, _react2.jsx)(_index.Chip, {
+      bg: "white",
+      sx: {
+        border: 'solid 1px',
+        borderColor: 'neutral.80',
+        alignSelf: 'center',
+        alignItems: 'center',
+        padding: '3px 5px 2px 5px'
+      },
+      textColor: "text.primary",
+      textProps: {
+        fontSize: 'xs'
+      },
+      label: expirationText
+    }));
+  }; // jsx of the production row
+
+
+  var Production = function Production(props) {
+    var chipText = props.chipText,
+        hasStaging = props.hasStaging,
+        policyId = props.policyId,
+        name = props.name;
+    return (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      height: "75px"
+    }, (0, _react2.jsx)(_index.Box, {
+      alignItems: "center",
+      justifyContent: "center",
+      sx: {
+        position: 'relative'
+      }
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: ShieldVector,
+      color: hasStaging ? 'decorative.7' : 'accent.40',
+      size: 24,
+      isLinked: hasStaging
+    }), hasStaging && (0, _react2.jsx)(TopBracket, null)), (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      mr: "auto",
+      alignSelf: "center",
+      justifyContent: "center",
+      ml: "18px",
+      alignItems: "center"
+    }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
+      sx: {
+        fontWeight: 1,
+        color: 'text.primary',
+        fontSize: 'md'
+      }
+    }, name), (0, _react2.jsx)(_index.Text, {
+      sx: {
+        fontWeight: 0,
+        color: 'text.secondary',
+        fontSize: 'sm'
+      }
+    }, "Policy Id: ", policyId)), chipText && (0, _react2.jsx)(DefaultChip, null)), (0, _react2.jsx)(IconWithPopover, null));
+  }; // jsx of the staging row.
+
+
+  var Staging = function Staging(props) {
+    var chipText = props.chipText,
+        expirationText = props.expirationText,
+        policyId = props.policyId,
+        name = props.name;
+    return (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      height: "75px",
+      marginLeft: "12px"
+    }, (0, _react2.jsx)(BottomBracket, null), (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      alignItems: "center",
+      justifyContent: "center"
+    }, (0, _react2.jsx)(_index.Box, {
+      pl: "0px",
+      height: "30px",
+      flexDirection: "row",
+      alignItems: "center"
+    }, (0, _react2.jsx)(_index.Separator, {
+      orientation: "vertical",
+      sx: {
+        width: '2px !important',
+        backgroundColor: 'decorative.7',
+        marginLeft: '2px !important'
+      }
+    })), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
+      sx: {
+        fontWeight: 1,
+        color: 'text.primary',
+        fontSize: 'md'
+      }
+    }, name), (0, _react2.jsx)(_index.Text, {
+      sx: {
+        fontWeight: 0,
+        color: 'text.secondary',
+        fontSize: 'sm'
+      }
+    }, "Policy Id: ", policyId))), chipText && (0, _react2.jsx)(DefaultChip, null), expirationText && (0, _react2.jsx)(ExprirationChip, {
+      expirationText: expirationText
+    }), (0, _react2.jsx)(IconWithPopover, null));
+  };
+
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.ListView, (0, _extends2["default"])({}, args, {
+    items: theseItems
+  }), function (item) {
+    return (0, _react2.jsx)(_collections.Item, (0, _extends2["default"])({}, item, {
+      textValue: item.name,
+      "data-id": item.key,
+      listItemProps: {
+        variant: 'boxes.linkedListViewItem'
+      }
+    }), item.parentId ? (0, _react2.jsx)(Staging, (0, _extends2["default"])({}, item, {
+      hasInsetSeparator: true
+    })) : (0, _react2.jsx)(Production, (0, _extends2["default"])({
+      hasStaging: item.childrenObjects
+    }, item)));
+  }));
+};
+
+exports.Default = Default;

package/lib/cjs/styles/variants/boxes.js

@@ -100,6 +100,21 @@ var listViewItem = _objectSpread(_objectSpread({}, base), {}, {
   }
 });
 
+var linkedListViewItem = _objectSpread(_objectSpread({}, listViewItem), {}, {
+  minHeight: '75px',
+  '&.has-inset-separator': {
+    '&:after': {
+      content: '""',
+      position: 'absolute',
+      width: 'calc(100% - 43px)',
+      right: 0,
+      bottom: 0,
+      borderBottom: '1px solid',
+      borderBottomColor: 'line.hairline'
+    }
+  }
+});
+
 var listBoxSectionTitle = {
   fontSize: 'sm',
   fontWeight: '3',
@@ -381,6 +396,7 @@ var _default = {
   listItem: listItem,
   listBoxSectionTitle: listBoxSectionTitle,
   listViewItem: listViewItem,
+  linkedListViewItem: linkedListViewItem,
   radioCheckedContent: radioCheckedContent,
   radioContainer: radioContainer,
   scrollbox: scrollbox,

package/lib/components/ListView/ListView.stories.js

@@ -49,7 +49,8 @@ export default {
 var items = [{
   key: 'Aardvark',
   name: 'Aardvark',
-  id: '1'
+  id: '1',
+  hasSeparator: false
 }, {
   key: 'Kangaroo',
   name: 'Kangaroo',

package/lib/components/ListViewItem/ListViewItem.js

@@ -17,6 +17,7 @@ var ListViewItem = function ListViewItem(props) {
       rowProps = _props$item$props.rowProps,
       _props$item$props$has = _props$item$props.hasSeparator,
       hasSeparator = _props$item$props$has === void 0 ? true : _props$item$props$has,
+      hasInsetSeparator = _props$item$props.hasInsetSeparator,
       className = props.className;
   var dataId = item.props['data-id'];
 
@@ -56,7 +57,8 @@ var ListViewItem = function ListViewItem(props) {
     isHovered: isSelectable && isHovered,
     isSelected: isSelected,
     isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin,
-    hasSeparator: hasSeparator
+    hasSeparator: hasSeparator,
+    hasInsetSeparator: hasInsetSeparator
   }),
       classNames = _useStatusClasses.classNames;
 
@@ -88,7 +90,8 @@ ListViewItem.propTypes = {
       'data-id': PropTypes.string,
       listItemProps: PropTypes.shape({}),
       rowProps: PropTypes.shape({}),
-      hasSeparator: PropTypes.bool
+      hasSeparator: PropTypes.bool,
+      hasInsetSeparator: PropTypes.bool
     })
   })
 };

package/lib/components/RequirementsList/RequirementsList.js

@@ -63,18 +63,22 @@ var RequirementsList = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var buildRequirementsLine = function buildRequirementsLine(req) {
     return ___EmotionJSX(Box, {
+      role: "listitem",
       isRow: true,
       key: req.name,
       alignItems: "center",
-      width: "100%"
+      width: "100%",
+      as: "li"
     }, statusIconRender(req.status), ___EmotionJSX(Text, {
       variant: "bodyWeak"
     }, req.name));
   };
 
   return ___EmotionJSX(Box, _extends({
+    role: "list",
     p: "lg",
     gap: "md",
+    as: "ul",
     ref: ref
   }, others), _mapInstanceProperty(requirements).call(requirements, function (req) {
     return buildRequirementsLine(req);

package/lib/components/RequirementsList/RequirementsList.test.js

@@ -51,7 +51,7 @@ axeTest(getComponent);
 test('base case requirements list', function () {
   getComponent();
   var requirementsList = screen.getByTestId(testId);
-  expect(requirementsList).toBeInstanceOf(HTMLDivElement);
+  expect(requirementsList).toBeInstanceOf(HTMLUListElement);
   expect(requirementsList).toBeInTheDocument();
 });
 test('empty variables requirements list', function () {
@@ -59,7 +59,7 @@ test('empty variables requirements list', function () {
     requirementsList: []
   });
   var requirementsList = screen.getByTestId(testId);
-  expect(requirementsList).toBeInstanceOf(HTMLDivElement);
+  expect(requirementsList).toBeInstanceOf(HTMLUListElement);
   expect(requirementsList).toBeInTheDocument();
 });
 test('should render default status icon if such passed in props', function () {

package/lib/components/SearchField/SearchField.js

@@ -69,6 +69,14 @@ var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
       fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
+  var handleKeyDownEvent = function handleKeyDownEvent(e) {
+    var key = e.key;
+
+    if (key === 'Enter' || key === ' ') {
+      state.setValue('');
+    }
+  };
+
   return ___EmotionJSX(Box, fieldContainerProps, label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, {
     variant: "forms.search.container"
   }, ___EmotionJSX(Input, _extends({
@@ -80,6 +88,8 @@ var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "forms.search.icon",
     size: 22
   }, iconProps)), !hasNoClearButton && state.value !== '' && ___EmotionJSX(IconButton, _extends({
+    tabIndex: 0,
+    onKeyDown: handleKeyDownEvent,
     sx: {
       position: 'absolute',
       top: 8,

package/lib/components/SearchField/SearchField.test.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
-import { render, screen } from '../../utils/testUtils/testWrapper';
+import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import SearchField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-radio-group';
@@ -179,6 +179,25 @@ test('clear button should be present by default ', function () {
   });
   expect(screen.getByRole('button')).toBeInTheDocument();
 });
+test('clear button should be keyboard accessible', function () {
+  getComponent();
+  var search = screen.getByLabelText(testLabel);
+  userEvent.type(search, 'clear');
+  expect(search).toHaveValue('clear');
+  var clearButton = screen.getByRole('button');
+  expect(clearButton).toHaveAttribute('tabindex', '0');
+  act(function () {
+    clearButton.focus();
+  });
+  expect(clearButton).toHaveFocus();
+  fireEvent.keyDown(clearButton, {
+    key: 'Enter'
+  });
+  fireEvent.keyUp(clearButton, {
+    key: 'Enter'
+  });
+  expect(search).toHaveValue('');
+});
 test('clear button should not be present is hasNoClearButton=true ', function () {
   getComponent({
     value: 'test-value',

package/lib/recipes/LinkedListView.stories.js

@@ -0,0 +1,393 @@
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import React, { useState } from 'react';
+import { Item } from '@react-stately/collections';
+import DotsVerticalIcon from 'mdi-react/DotsVerticalIcon';
+import { ListView, Text, Box, Icon, IconButton, Chip, Separator, OverlayProvider, PopoverMenu, Menu } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/LinkedListView',
+  argTypes: {
+    loadingState: {
+      control: {
+        type: 'select'
+      }
+    },
+    disabledKeys: {
+      defaultValue: []
+    },
+    items: {
+      control: {
+        type: 'none'
+      }
+    },
+    onSelectionChange: {
+      control: 'none',
+      // eslint-disable-next-line no-console
+      defaultValue: console.log
+    }
+  }
+};
+var testData = [{
+  key: 'Default Risk Policy',
+  name: 'Default Risk Policy',
+  policyId: 'sdfasdfasdf-124123asdf',
+  id: '1',
+  hasSeparator: false,
+  hasInsetSeparator: true,
+  chipText: 'default',
+  expirationText: 'Expiring On: 2022-12-08',
+  childrenObjects: [{
+    key: 'Staging Policy',
+    name: 'Staging Policy',
+    policyId: '23423sdfsdf-124123asdf',
+    id: '4',
+    expirationText: 'Expiring On: 2022-12-08',
+    hasSeparator: true
+  }]
+}, {
+  key: 'Policy4',
+  name: 'Policy4',
+  policyId: '9234890324k-124123asdf',
+  chipText: 'default',
+  id: '2',
+  hasSeparator: true
+}, {
+  key: 'Policy5',
+  name: 'Policy5',
+  policyId: 'asdf23zaa-124123asdf',
+  id: '3'
+}]; // IMPORTANT PLEASE READ
+// in order for the list portion of this recipe to function correctly,
+// the array of objects that will be used to create
+// the production and staging rows, will need to be flat and sorted.
+// I.e. the staging rows will need to immediately follow the prod row that they correspond to.
+// This flat, sorted array will then be passed into the listview component as the items prop.
+// You may not need these functions if you are able to change the data shape on the back end
+// (which is reccomended for performance reasons)
+
+var flattenArray = function flattenArray(array) {
+  var newArray = array;
+
+  _forEachInstanceProperty(newArray).call(newArray, function (item) {
+    if (item.childrenObjects) {
+      var _context;
+
+      _forEachInstanceProperty(_context = item.childrenObjects).call(_context, function (obj) {
+        var newObj = obj;
+        newObj.parentId = item.id;
+        newArray.push(newObj);
+      });
+    }
+  });
+
+  return newArray;
+};
+
+var testSort = function testSort(array) {
+  var newArray = array;
+
+  _forEachInstanceProperty(newArray).call(newArray, function (item, i) {
+    if (item.parentId) {
+      var thisindex = _findIndexInstanceProperty(newArray).call(newArray, function (object) {
+        return object.id === item.parentId;
+      });
+
+      var element = _spliceInstanceProperty(newArray).call(newArray, i, 1)[0];
+
+      _spliceInstanceProperty(newArray).call(newArray, thisindex + 1, 0, element);
+    }
+  });
+
+  return newArray;
+};
+
+var unsorted = flattenArray(testData);
+var sorted = testSort(unsorted);
+export var Default = function Default(_ref) {
+  var _context2;
+
+  var args = _extends({}, _ref);
+
+  var _useState = useState(_concatInstanceProperty(_context2 = []).call(_context2, sorted)),
+      _useState2 = _slicedToArray(_useState, 1),
+      theseItems = _useState2[0]; // svg of the bottom portion of the bracket, the portion with the L shaped hook.
+
+
+  var BottomBracket = function BottomBracket() {
+    var color = '#CACED3';
+    return ___EmotionJSX(Box, {
+      sx: {
+        width: '20px',
+        position: 'relative'
+      }
+    }, ___EmotionJSX(Box, {
+      flexBasis: "50%"
+    }, ___EmotionJSX("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      version: "1.1",
+      preserveAspectRatio: "none",
+      viewBox: "0 0 10 10",
+      style: {
+        flexGrow: 1
+      }
+    }, ___EmotionJSX("title", null, "bracket-fill"), ___EmotionJSX("g", null, ___EmotionJSX("title", null, "Layer 1"), ___EmotionJSX("line", {
+      strokeLinecap: "undefined",
+      strokeLinejoin: "undefined",
+      y2: "0",
+      x2: "0",
+      y1: "15",
+      x1: "0",
+      stroke: color,
+      fill: "none"
+    }))), ___EmotionJSX("svg", {
+      width: "17",
+      height: "9",
+      viewBox: "0 0 17 9",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, ___EmotionJSX("g", {
+      clipPath: "url(#clip0_1900_8817)"
+    }, ___EmotionJSX("g", {
+      mask: "url(#mask0_1900_8817)"
+    }, ___EmotionJSX("rect", {
+      x: "0.5",
+      y: "-54.5",
+      width: "20",
+      height: "63",
+      rx: "4.5",
+      stroke: "#CACED3"
+    }))), ___EmotionJSX("defs", null, ___EmotionJSX("clipPath", {
+      id: "clip0_1900_8817"
+    }, ___EmotionJSX("rect", {
+      width: "1600",
+      height: "917",
+      fill: "white",
+      transform: "translate(-280 -419)"
+    }))))));
+  }; // the top portion of the bracket svg, this is basically just a straight vertical line.
+
+
+  var TopBracket = function TopBracket() {
+    var color = '#CACED3';
+    return ___EmotionJSX(Box, {
+      width: 15,
+      sx: {
+        position: 'absolute',
+        bottom: 0,
+        left: 12,
+        top: 55
+      }
+    }, ___EmotionJSX("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      version: "1.1",
+      preserveAspectRatio: "none",
+      viewBox: "0 0 10 10",
+      style: {
+        flexGrow: 1
+      },
+      "data-testid": "isLastLayer"
+    }, ___EmotionJSX("title", null, "bracket-fill"), ___EmotionJSX("g", null, ___EmotionJSX("title", null, "Layer 3"), ___EmotionJSX("line", {
+      strokeLinecap: "undefined",
+      strokeLinejoin: "undefined",
+      y2: "0",
+      x2: "0",
+      y1: "10",
+      x1: "0",
+      stroke: color,
+      fill: "none"
+    }))));
+  }; // the vector shield and key icon.
+
+
+  var ShieldVector = function ShieldVector(props) {
+    return ___EmotionJSX("svg", _extends({
+      width: "19",
+      height: "23",
+      viewBox: "0 0 19 23",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), ___EmotionJSX("path", {
+      d: "M9.5 7.33342C9.77627 7.33342 10.0412 7.44316 10.2366 7.63851C10.4319 7.83386 10.5417 8.09881 10.5417 8.37508C10.5417 8.65135 10.4319 8.9163 10.2366 9.11165C10.0412 9.307 9.77627 9.41675 9.5 9.41675C9.22373 9.41675 8.95878 9.307 8.76343 9.11165C8.56808 8.9163 8.45833 8.65135 8.45833 8.37508C8.45833 8.09881 8.56808 7.83386 8.76343 7.63851C8.95878 7.44316 9.22373 7.33342 9.5 7.33342ZM18.875 10.4584C18.875 16.2397 14.875 21.6459 9.5 22.9584C4.125 21.6459 0.125 16.2397 0.125 10.4584V4.20842L9.5 0.041748L18.875 4.20842V10.4584ZM9.5 5.25008C8.6712 5.25008 7.87634 5.57932 7.29029 6.16537C6.70424 6.75142 6.375 7.54628 6.375 8.37508C6.375 9.73967 7.23958 10.8959 8.45833 11.323V17.7501H10.5417V15.6667H12.625V13.5834H10.5417V11.323C11.7604 10.8959 12.625 9.73967 12.625 8.37508C12.625 7.54628 12.2958 6.75142 11.7097 6.16537C11.1237 5.57932 10.3288 5.25008 9.5 5.25008Z"
+    }));
+  }; // reusable piece of code that handles the iconbutton and popover on the right side of the rows
+
+
+  var IconWithPopover = function IconWithPopover() {
+    return ___EmotionJSX(PopoverMenu, {
+      direction: "left"
+    }, ___EmotionJSX(Box, {
+      alignItems: "center",
+      alignSelf: "center"
+    }, ___EmotionJSX(IconButton, {
+      "aria-label": "Menu Button"
+    }, ___EmotionJSX(Icon, {
+      icon: DotsVerticalIcon,
+      size: 16,
+      color: "Neutral.40",
+      m: "0.61px"
+    }))), ___EmotionJSX(Menu, {
+      direction: "left",
+      sx: {
+        minWidth: '155px',
+        minHeight: '144px'
+      }
+    }, ___EmotionJSX(Item, {
+      key: "view"
+    }, "View"), ___EmotionJSX(Item, {
+      key: "edit"
+    }, "Edit"), ___EmotionJSX(Item, {
+      key: "rename"
+    }, "Rename"), ___EmotionJSX(Item, {
+      key: "delete",
+      textValue: "delete"
+    }, ___EmotionJSX(Text, {
+      color: "critical.bright"
+    }, "Delete"))));
+  }; // made these separate components because staging and production both use them.
+
+
+  var DefaultChip = function DefaultChip() {
+    return ___EmotionJSX(Chip, {
+      label: "Default",
+      bg: "active",
+      sx: {
+        marginLeft: '25px',
+        alignSelf: 'center',
+        alignItems: 'center',
+        padding: '3px 5px 2px 5px'
+      }
+    });
+  };
+
+  var ExprirationChip = function ExprirationChip(props) {
+    var expirationText = props.expirationText,
+        chipText = props.chipText;
+    return ___EmotionJSX(Box, {
+      sx: !chipText && {
+        paddingLeft: '72px'
+      },
+      flexGrow: 1,
+      alignItems: "center",
+      alignSelf: "center"
+    }, ___EmotionJSX(Chip, {
+      bg: "white",
+      sx: {
+        border: 'solid 1px',
+        borderColor: 'neutral.80',
+        alignSelf: 'center',
+        alignItems: 'center',
+        padding: '3px 5px 2px 5px'
+      },
+      textColor: "text.primary",
+      textProps: {
+        fontSize: 'xs'
+      },
+      label: expirationText
+    }));
+  }; // jsx of the production row
+
+
+  var Production = function Production(props) {
+    var chipText = props.chipText,
+        hasStaging = props.hasStaging,
+        policyId = props.policyId,
+        name = props.name;
+    return ___EmotionJSX(Box, {
+      isRow: true,
+      height: "75px"
+    }, ___EmotionJSX(Box, {
+      alignItems: "center",
+      justifyContent: "center",
+      sx: {
+        position: 'relative'
+      }
+    }, ___EmotionJSX(Icon, {
+      icon: ShieldVector,
+      color: hasStaging ? 'decorative.7' : 'accent.40',
+      size: 24,
+      isLinked: hasStaging
+    }), hasStaging && ___EmotionJSX(TopBracket, null)), ___EmotionJSX(Box, {
+      isRow: true,
+      mr: "auto",
+      alignSelf: "center",
+      justifyContent: "center",
+      ml: "18px",
+      alignItems: "center"
+    }, ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+      sx: {
+        fontWeight: 1,
+        color: 'text.primary',
+        fontSize: 'md'
+      }
+    }, name), ___EmotionJSX(Text, {
+      sx: {
+        fontWeight: 0,
+        color: 'text.secondary',
+        fontSize: 'sm'
+      }
+    }, "Policy Id: ", policyId)), chipText && ___EmotionJSX(DefaultChip, null)), ___EmotionJSX(IconWithPopover, null));
+  }; // jsx of the staging row.
+
+
+  var Staging = function Staging(props) {
+    var chipText = props.chipText,
+        expirationText = props.expirationText,
+        policyId = props.policyId,
+        name = props.name;
+    return ___EmotionJSX(Box, {
+      isRow: true,
+      height: "75px",
+      marginLeft: "12px"
+    }, ___EmotionJSX(BottomBracket, null), ___EmotionJSX(Box, {
+      isRow: true,
+      alignItems: "center",
+      justifyContent: "center"
+    }, ___EmotionJSX(Box, {
+      pl: "0px",
+      height: "30px",
+      flexDirection: "row",
+      alignItems: "center"
+    }, ___EmotionJSX(Separator, {
+      orientation: "vertical",
+      sx: {
+        width: '2px !important',
+        backgroundColor: 'decorative.7',
+        marginLeft: '2px !important'
+      }
+    })), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+      sx: {
+        fontWeight: 1,
+        color: 'text.primary',
+        fontSize: 'md'
+      }
+    }, name), ___EmotionJSX(Text, {
+      sx: {
+        fontWeight: 0,
+        color: 'text.secondary',
+        fontSize: 'sm'
+      }
+    }, "Policy Id: ", policyId))), chipText && ___EmotionJSX(DefaultChip, null), expirationText && ___EmotionJSX(ExprirationChip, {
+      expirationText: expirationText
+    }), ___EmotionJSX(IconWithPopover, null));
+  };
+
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ListView, _extends({}, args, {
+    items: theseItems
+  }), function (item) {
+    return ___EmotionJSX(Item, _extends({}, item, {
+      textValue: item.name,
+      "data-id": item.key,
+      listItemProps: {
+        variant: 'boxes.linkedListViewItem'
+      }
+    }), item.parentId ? ___EmotionJSX(Staging, _extends({}, item, {
+      hasInsetSeparator: true
+    })) : ___EmotionJSX(Production, _extends({
+      hasStaging: item.childrenObjects
+    }, item)));
+  }));
+};

package/lib/styles/variants/boxes.js

@@ -81,6 +81,21 @@ var listViewItem = _objectSpread(_objectSpread({}, base), {}, {
   }
 });
 
+var linkedListViewItem = _objectSpread(_objectSpread({}, listViewItem), {}, {
+  minHeight: '75px',
+  '&.has-inset-separator': {
+    '&:after': {
+      content: '""',
+      position: 'absolute',
+      width: 'calc(100% - 43px)',
+      right: 0,
+      bottom: 0,
+      borderBottom: '1px solid',
+      borderBottomColor: 'line.hairline'
+    }
+  }
+});
+
 var listBoxSectionTitle = {
   fontSize: 'sm',
   fontWeight: '3',
@@ -361,6 +376,7 @@ export default {
   listItem: listItem,
   listBoxSectionTitle: listBoxSectionTitle,
   listViewItem: listViewItem,
+  linkedListViewItem: linkedListViewItem,
   radioCheckedContent: radioCheckedContent,
   radioContainer: radioContainer,
   scrollbox: scrollbox,

package/package.json

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