@pingux/astro 2.16.1-alpha.1 → 2.17.0-alpha.1

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

@@ -17,13 +17,11 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instan
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import React from 'react';
 import { Item, useAsyncList } from 'react-stately';
-import CreateIcon from '@pingux/mdi-react/CreateIcon';
 import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
-import MoreVertIcon from '@pingux/mdi-react/MoreVertIcon';
 import { action } from '@storybook/addon-actions';
 import isChromatic from 'chromatic/isChromatic';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Box, Icon, IconButton, ListView, Text } from '../../index';
+import { Box, ListView, ListViewItem, ListViewItemMenu, ListViewItemSwitchField } from '../..';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import ListViewReadme from './ListView.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -47,19 +45,20 @@ export default {
         options: loadingStates
       }
     },
-    disabledKeys: {
-      defaultValue: ['Snake']
-    },
+    disabledKeys: {},
     items: {
       control: {
         type: 'none'
       }
     },
     onSelectionChange: {
-      control: 'none',
-      // eslint-disable-next-line no-console
-      defaultValue: console.log
+      control: 'none'
     }
+  },
+  args: {
+    disabledKeys: ['Snake'],
+    // eslint-disable-next-line no-console
+    onSelectionChange: console.log
   }
 };
 var items = [{
@@ -533,82 +532,33 @@ var actions = {
   onFocus: action('onFocus'),
   onLoadMore: action('onLoadMore')
 };
-var ListElement = function ListElement(_ref) {
-  var item = _ref.item;
-  return ___EmotionJSX(Box, {
-    isRow: true
-  }, ___EmotionJSX(Box, {
-    isRow: true,
-    mr: "auto",
-    alignSelf: "center"
-  }, ___EmotionJSX(Icon, {
-    icon: FormSelectIcon,
-    mr: "sm",
-    color: "accent.40",
-    size: "md"
-  }), ___EmotionJSX(Text, {
-    variant: "itemTitle",
-    alignSelf: "center"
-  }, item.name)), ___EmotionJSX(Box, {
-    isRow: true,
-    alignSelf: "center",
-    gap: "sm"
-  }, ___EmotionJSX(IconButton, {
-    "aria-label": "create-icon"
-  }, ___EmotionJSX(Icon, {
-    icon: CreateIcon,
-    size: "sm"
-  })), ___EmotionJSX(IconButton, {
-    "aria-label": "actions-icon"
-  }, ___EmotionJSX(Icon, {
-    icon: MoreVertIcon,
-    size: "sm"
-  }))));
+var Controls = function Controls() {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ListViewItemSwitchField, null), ___EmotionJSX(ListViewItemMenu, null, ___EmotionJSX(Item, {
+    key: "enable"
+  }, "Enable user"), ___EmotionJSX(Item, {
+    key: "disable"
+  }, "Disable user"), ___EmotionJSX(Item, {
+    key: "delete"
+  }, "Delete user")));
 };
-export var Default = function Default(_ref2) {
-  var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
+export var Default = function Default(_ref) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return ___EmotionJSX(ListView, _extends({}, props, args, {
     items: items
   }), function (item) {
     return ___EmotionJSX(Item, {
-      key: item.name,
-      textValue: item.name,
-      "data-id": item.key
-    }, ___EmotionJSX(Box, {
-      isRow: true
-    }, ___EmotionJSX(Box, {
-      isRow: true,
-      mr: "auto",
-      alignSelf: "center"
-    }, ___EmotionJSX(Icon, {
-      icon: FormSelectIcon,
-      mr: "sm",
-      color: "accent.40",
-      size: "md"
-    }), ___EmotionJSX(Text, {
-      variant: "itemTitle",
-      alignSelf: "center"
-    }, item.name)), ___EmotionJSX(Box, {
-      isRow: true,
-      alignSelf: "center",
-      gap: "sm"
-    }, ___EmotionJSX(IconButton, {
-      "aria-label": "create-icon"
-    }, ___EmotionJSX(Icon, {
-      icon: CreateIcon,
-      size: "sm"
-    })), ___EmotionJSX(IconButton, {
-      "aria-label": "actions-icon",
-      size: "sm"
-    }, ___EmotionJSX(Icon, {
-      icon: MoreVertIcon,
-      size: "sm"
-    })))));
+      key: item.name
+    }, ___EmotionJSX(ListViewItem, {
+      data: {
+        text: item.name,
+        icon: FormSelectIcon
+      }
+    }, ___EmotionJSX(Controls, null)));
   });
 };
 export var InfiniteLoadingList = function InfiniteLoadingList(args) {
   var getMockData = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(signal, cursor) {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(signal, cursor) {
       var pageNumber;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) {
@@ -640,11 +590,11 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
       }, _callee);
     }));
     return function getMockData(_x, _x2) {
-      return _ref3.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
   }();
   var fetchApiData = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(signal, cursor, filterText) {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(signal, cursor, filterText) {
       var res, json;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) {
@@ -698,18 +648,18 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
       }, _callee2, null, [[2, 14]]);
     }));
     return function fetchApiData(_x3, _x4, _x5) {
-      return _ref4.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }();
   var list = useAsyncList({
-    load: function load(_ref5) {
+    load: function load(_ref4) {
       return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
         var signal, cursor, filterText;
         return _regeneratorRuntime().wrap(function _callee3$(_context3) {
           while (1) {
             switch (_context3.prev = _context3.next) {
               case 0:
-                signal = _ref5.signal, cursor = _ref5.cursor, filterText = _ref5.filterText;
+                signal = _ref4.signal, cursor = _ref4.cursor, filterText = _ref4.filterText;
                 if (cursor) {
                   // eslint-disable-next-line
                   cursor = cursor.replace(/^http:\/\//i, "https://");
@@ -742,11 +692,13 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
     onLoadMore: list.loadMore
   }), function (item) {
     return ___EmotionJSX(Item, {
-      key: item.name,
-      textValue: item.name
-    }, ___EmotionJSX(ListElement, {
-      item: item
-    }));
+      key: item.name
+    }, ___EmotionJSX(ListViewItem, {
+      data: {
+        text: item.name,
+        icon: FormSelectIcon
+      }
+    }, ___EmotionJSX(Controls, null)));
   }));
 };
 InfiniteLoadingList.args = {
@@ -759,17 +711,19 @@ InfiniteLoadingList.parameters = {
     }
   }
 };
-export var MultipleSelection = function MultipleSelection(_ref6) {
-  var args = _extends({}, (_objectDestructuringEmpty(_ref6), _ref6));
+export var MultipleSelection = function MultipleSelection(_ref5) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref5), _ref5));
   return ___EmotionJSX(ListView, _extends({}, props, args, {
     items: items,
     selectionMode: "multiple"
   }), function (item) {
     return ___EmotionJSX(Item, {
-      key: item.name,
-      textValue: item.name
-    }, ___EmotionJSX(ListElement, {
-      item: item
-    }));
+      key: item.name
+    }, ___EmotionJSX(ListViewItem, {
+      data: {
+        text: item.name,
+        icon: FormSelectIcon
+      }
+    }, ___EmotionJSX(Controls, null)));
   });
 };

package/lib/components/ListView/ListViewItem.js

@@ -0,0 +1,113 @@
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(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; }
+import React, { useContext, useRef } from 'react';
+import { mergeProps, useFocusRing } from 'react-aria';
+import { useHover } from '@react-aria/interactions';
+import { useListItem } from '@react-aria/list';
+import PropTypes from 'prop-types';
+import { useStatusClasses } from '../../hooks';
+import Box from '../Box';
+import { ListViewContext } from './ListViewContext';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var ListViewItem = function ListViewItem(props) {
+  var _context;
+  var item = props.item,
+    _props$item$props = props.item.props,
+    listItemProps = _props$item$props.listItemProps,
+    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,
+    isHoverable = props.isHoverable,
+    isFocusable = props.isFocusable,
+    className = props.className;
+  var dataId = item.props['data-id'];
+  var _useContext = useContext(ListViewContext),
+    state = _useContext.state;
+  var isDisabled = state.disabledKeys.has(item.key);
+  var rowRef = useRef();
+  var isSelectable = state.selectionManager.selectionMode !== 'none';
+  var _useFocusRing = useFocusRing({
+      within: true
+    }),
+    isFocusVisibleWithin = _useFocusRing.isFocusVisible,
+    focusWithinProps = _useFocusRing.focusProps;
+  var _useFocusRing2 = useFocusRing(),
+    focusProps = _useFocusRing2.focusProps,
+    isFocusVisible = _useFocusRing2.isFocusVisible;
+  var _useHover = useHover({
+      onHoverStart: function onHoverStart() {
+        state.hover.setHoveredItem(item.key);
+      }
+    }),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
+  var _useListItem = useListItem({
+      node: item,
+      isVirtualized: true,
+      isDisabled: isDisabled
+    }, state, rowRef),
+    raRowProps = _useListItem.rowProps,
+    gridCellProps = _useListItem.gridCellProps;
+  var isSelected = state.selectionManager.isSelected(item.key);
+  var mergedProps = mergeProps(raRowProps, hoverProps, isFocusable ? _objectSpread(_objectSpread({}, focusProps), focusWithinProps) : {});
+  var _useStatusClasses = useStatusClasses(className, {
+      isHovered: isSelectable && isHovered && isHoverable && item.key === state.hover.hoveredItem,
+      isSelected: isSelected,
+      isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin,
+      hasSeparator: hasSeparator,
+      hasInsetSeparator: hasInsetSeparator
+    }),
+    classNames = _useStatusClasses.classNames;
+
+  // 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 = _includesInstanceProperty(_context = _Object$keys(item.rendered.props)).call(_context, 'data');
+  return ___EmotionJSX(Box, _extends({
+    isDisabled: isDisabled,
+    isRow: true,
+    ref: rowRef
+  }, mergedProps, rowProps, {
+    sx: {
+      outline: 'none'
+    }
+  }), ___EmotionJSX(Box, _extends({
+    as: "div"
+    // Apply appropriate variant dependant on whether a legacy list item is used
+    ,
+    variant: shouldOverRideLegacyStyles ? 'listViewItem.styledListItem' : 'listViewItem.container'
+  }, gridCellProps, {
+    isFocused: isDisabled ? false : isFocusVisible,
+    isDisabled: isDisabled,
+    isSelected: isSelected,
+    className: classNames,
+    "data-id": dataId
+  }, listItemProps), item.rendered));
+};
+ListViewItem.propTypes = {
+  item: PropTypes.shape({
+    key: PropTypes.string,
+    rendered: PropTypes.node,
+    props: PropTypes.shape({
+      'data-id': PropTypes.string,
+      listItemProps: PropTypes.shape({}),
+      rowProps: PropTypes.shape({}),
+      hasSeparator: PropTypes.bool,
+      hasInsetSeparator: PropTypes.bool
+    })
+  }),
+  isHoverable: PropTypes.bool,
+  isFocusable: PropTypes.bool
+};
+export default ListViewItem;

package/lib/components/ListViewItem/ListViewItem.js

@@ -1,113 +1,92 @@
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(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; }
-import React, { useContext, useRef } from 'react';
-import { mergeProps, useFocusRing } from 'react-aria';
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className", "data", "isHovered", "isSelected", "linkProps", "onHoverChange", "onHoverEnd", "onHoverStart", "slots"];
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import React, { forwardRef } from 'react';
 import { useHover } from '@react-aria/interactions';
-import { useListItem } from '@react-aria/list';
-import PropTypes from 'prop-types';
+import { Box, Icon, Image, Text } from '../..';
 import { useStatusClasses } from '../../hooks';
-import Box from '../Box';
-import { ListViewContext } from '../ListView/ListViewContext';
+import { listViewItemPropTypes } from './listViewItemAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var ListViewItem = function ListViewItem(props) {
+export var LIST_ITEM_ICON = '-list-item-icon';
+var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _context;
-  var item = props.item,
-    _props$item$props = props.item.props,
-    listItemProps = _props$item$props.listItemProps,
-    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,
-    isHoverable = props.isHoverable,
-    isFocusable = props.isFocusable,
-    className = props.className;
-  var dataId = item.props['data-id'];
-  var _useContext = useContext(ListViewContext),
-    state = _useContext.state;
-  var isDisabled = state.disabledKeys.has(item.key);
-  var rowRef = useRef();
-  var isSelectable = state.selectionManager.selectionMode !== 'none';
-  var _useFocusRing = useFocusRing({
-      within: true
-    }),
-    isFocusVisibleWithin = _useFocusRing.isFocusVisible,
-    focusWithinProps = _useFocusRing.focusProps;
-  var _useFocusRing2 = useFocusRing(),
-    focusProps = _useFocusRing2.focusProps,
-    isFocusVisible = _useFocusRing2.isFocusVisible;
+  var children = _ref.children,
+    className = _ref.className,
+    data = _ref.data,
+    isHovered = _ref.isHovered,
+    isSelected = _ref.isSelected,
+    linkProps = _ref.linkProps,
+    onHoverChange = _ref.onHoverChange,
+    onHoverEnd = _ref.onHoverEnd,
+    onHoverStart = _ref.onHoverStart,
+    slots = _ref.slots,
+    others = _objectWithoutProperties(_ref, _excluded);
+  var icon = data.icon,
+    image = data.image,
+    subtext = data.subtext,
+    text = data.text;
+  var shouldUseDefaultHover = isHovered === undefined;
   var _useHover = useHover({
-      onHoverStart: function onHoverStart() {
-        state.hover.setHoveredItem(item.key);
-      }
+      onHoverChange: onHoverChange,
+      onHoverEnd: onHoverEnd,
+      onHoverStart: onHoverStart
     }),
     hoverProps = _useHover.hoverProps,
-    isHovered = _useHover.isHovered;
-  var _useListItem = useListItem({
-      node: item,
-      isVirtualized: true,
-      isDisabled: isDisabled
-    }, state, rowRef),
-    raRowProps = _useListItem.rowProps,
-    gridCellProps = _useListItem.gridCellProps;
-  var isSelected = state.selectionManager.isSelected(item.key);
-  var mergedProps = mergeProps(raRowProps, hoverProps, isFocusable ? _objectSpread(_objectSpread({}, focusProps), focusWithinProps) : {});
+    defaultIsHovered = _useHover.isHovered;
   var _useStatusClasses = useStatusClasses(className, {
-      isHovered: isSelectable && isHovered && isHoverable && item.key === state.hover.hoveredItem,
-      isSelected: isSelected,
-      isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin,
-      hasSeparator: hasSeparator,
-      hasInsetSeparator: hasInsetSeparator
+      isHovered: shouldUseDefaultHover ? defaultIsHovered : isHovered,
+      isSelected: isSelected
     }),
     classNames = _useStatusClasses.classNames;
-
-  // 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 = _includesInstanceProperty(_context = _Object$keys(item.rendered.props)).call(_context, 'data');
-  return ___EmotionJSX(Box, _extends({
-    isDisabled: isDisabled,
-    isRow: true,
-    ref: rowRef
-  }, mergedProps, rowProps, {
-    sx: {
-      outline: 'none'
+  var getWrapperVariant = function getWrapperVariant() {
+    if (slots !== null && slots !== void 0 && slots.leftOfData) return 'listViewItem.leftOfDataWrapper';
+    if (image && !icon) return 'listViewItem.imageWrapper';
+    return 'listViewItem.iconWrapper';
+  };
+  var renderIcon = icon && ___EmotionJSX(Box, {
+    width: "25px"
+  }, ___EmotionJSX(Icon, {
+    color: "accent.40",
+    icon: icon,
+    size: "md",
+    title: {
+      name: _concatInstanceProperty(_context = "".concat(text)).call(_context, LIST_ITEM_ICON)
     }
-  }), ___EmotionJSX(Box, _extends({
-    as: "div"
-    // Apply appropriate variant dependant on whether a legacy list item is used
-    ,
-    variant: shouldOverRideLegacyStyles ? 'listViewItem.styledListItem' : 'listViewItem.container'
-  }, gridCellProps, {
-    isFocused: isDisabled ? false : isFocusVisible,
-    isDisabled: isDisabled,
-    isSelected: isSelected,
+  }));
+  var renderImage = !icon && image && ___EmotionJSX(Box, {
+    width: "35px"
+  }, ___EmotionJSX(Image, {
+    src: image.src,
+    alt: image.alt,
+    "aria-label": image['aria-label']
+  }));
+  var renderData = ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center"
+  }, (slots === null || slots === void 0 ? void 0 : slots.leftOfData) || renderIcon || renderImage, ___EmotionJSX(Box, {
+    variant: getWrapperVariant()
+  }, text && ___EmotionJSX(Text, {
+    variant: "listViewItemText"
+  }, text), subtext && ___EmotionJSX(Text, {
+    variant: "listViewItemSubtext"
+  }, subtext)));
+  return ___EmotionJSX(Box, _extends({
     className: classNames,
-    "data-id": dataId
-  }, listItemProps), item.rendered));
-};
-ListViewItem.propTypes = {
-  item: PropTypes.shape({
-    key: PropTypes.string,
-    rendered: PropTypes.node,
-    props: PropTypes.shape({
-      'data-id': PropTypes.string,
-      listItemProps: PropTypes.shape({}),
-      rowProps: PropTypes.shape({}),
-      hasSeparator: PropTypes.bool,
-      hasInsetSeparator: PropTypes.bool
-    })
-  }),
-  isHoverable: PropTypes.bool,
-  isFocusable: PropTypes.bool
-};
+    ref: ref,
+    variant: "listViewItem.styledContainer"
+  }, hoverProps, others), ___EmotionJSX(Box, {
+    isRow: true,
+    variant: getWrapperVariant()
+  }, renderData, (slots === null || slots === void 0 ? void 0 : slots.rightOfData) && ___EmotionJSX(Box, {
+    isRow: true,
+    variant: "listViewItem.rightOfData"
+  }, slots.rightOfData), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "sm",
+    variant: "listViewItem.controls"
+  }, children)));
+});
+ListViewItem.propTypes = listViewItemPropTypes;
+ListViewItem.displayName = 'ListViewItem';
 export default ListViewItem;

package/lib/{experimental → components}/ListViewItem/ListViewItem.mdx

@@ -7,7 +7,7 @@ import { Meta } from '@storybook/addon-docs';
 The ListViewItem allows easy creation of list items. Styles have been included to match Ping specs. Use the data prop to pass in text, subtext and an image, mdi or svg icon.
 
 ### Recommended Use
-This component is intended to be used inside a ListView component. See the [ListAndPanel](./?path=/story/experimental-recipes-listandpanel--list-and-panel) and [ScrollableListView](./?path=/story/experimental-recipes-scrollablelistview--scrollable-list-view)
+This component is intended to be used inside a ListView component. See the [ListAndPanel](./?path=/docs/recipes-listandpanel--docs) and [ScrollableListView](./?path=/docs/recipes-scrollablelistview--docs)
 recipes for a more detailed examples.
 
 #### Commonly Used Components
@@ -35,9 +35,9 @@ leftOfData slot is used, it will prevent an icon in the `data.icon` prop from re
 #### Children
 To add action controls, pass control elements as `{children}`. All elements passed in this way will be right justified and center aligned. Use one of the following
 styled control components to easily match Ping specs.
-- [ListViewItemEditButton](./?path=/story/experimental-styledlistitem-controls-listitemeditbutton--default)
-- [ListViewItemMenu](./?path=/story/experimental-styledlistitem-controls-listitemmenu--default)
-- [ListViewItemSwitchField](./?path=/story/experimental-styledlistitem-controls-listitemswitchfield--default)
+- [ListViewItemEditButton](./?path=/docs/components-listviewitem-controls-listviewitemeditbutton--docs)
+- [ListViewItemMenu](./?path=/docs/components-listviewitem-controls-listviewitemmenu--docs)
+- [ListViewItemSwitchField](./?path=/docs/components-listviewitem-controls-listviewitemswitchfield--docs)
 
 ### Note:
 The nature of components that have been styled to match design specs is that as design specs are updated, so will the matching component. Be aware that styles 

package/lib/{experimental → components}/ListViewItem/ListViewItem.stories.js

@@ -3,13 +3,13 @@ import { Item } from 'react-stately';
 import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Badge, Box, ListViewItem, ListViewItemEditButton, ListViewItemMenu, ListViewItemSwitchField, Separator, Text } from '../../index';
+import { Badge, Box, ListViewItem, ListViewItemEditButton, ListViewItemMenu, ListViewItemSwitchField, Separator, Text } from '../..';
 import { pingImg } from '../../utils/devUtils/constants/images';
 import ListViewItemReadMe from './ListViewItem.mdx';
 import { listViewItemArgTypes } from './listViewItemAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Experimental/ListViewItem',
+  title: 'Components/ListViewItem',
   component: ListViewItem,
   parameters: {
     docs: {
@@ -40,8 +40,7 @@ export var Default = function Default() {
     data: {
       icon: AccountIcon,
       text: 'Fons Vernall'
-    },
-    "aria-label": "Fons Vernall"
+    }
   }));
 };
 export var WithSubtext = function WithSubtext() {
@@ -50,8 +49,7 @@ export var WithSubtext = function WithSubtext() {
       icon: AccountIcon,
       subtext: 'rad_developer@pingidentity.com',
       text: 'Fons Vernall'
-    },
-    "aria-label": "Fons Vernall"
+    }
   }));
 };
 export var WithImage = function WithImage() {
@@ -105,8 +103,7 @@ export var WithRightOfDataSlot = function WithRightOfDataSlot() {
     },
     slots: {
       rightOfData: renderRightOfData
-    },
-    "aria-label": "Fons Vernall"
+    }
   }, ___EmotionJSX(ListViewItemMenu, null, ___EmotionJSX(Item, {
     key: "enable"
   }, "Enable user"), ___EmotionJSX(Item, {
@@ -134,8 +131,7 @@ export var WithLeftOfDataSlot = function WithLeftOfDataSlot() {
     ,
     slots: {
       leftOfData: renderLeftOfData
-    },
-    "aria-label": "Fons Vernall"
+    }
   }, ___EmotionJSX(ListViewItemMenu, null, ___EmotionJSX(Item, {
     key: "enable"
   }, "Enable user"), ___EmotionJSX(Item, {
@@ -164,8 +160,7 @@ export var WithExtraLongText = function WithExtraLongText() {
     },
     slots: {
       rightOfData: renderRightOfData
-    },
-    "aria-label": "Fons Vernall"
+    }
   }, ___EmotionJSX(ListViewItemMenu, null, ___EmotionJSX(Item, {
     key: "enable"
   }, "Enable user"), ___EmotionJSX(Item, {

package/lib/{experimental → components}/ListViewItem/ListViewItem.test.js

@@ -14,7 +14,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import { act } from '@testing-library/react';
-import { ListViewItem, ListViewItemSwitchField } from '../../index';
+import { ListViewItem, ListViewItemSwitchField } from '../..';
 import { pingImg } from '../../utils/devUtils/constants/images';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';

package/lib/{experimental → components}/ListViewItem/controls/ListViewItemEditButton.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import CreateIcon from '@pingux/mdi-react/CreateIcon';
-import { iconButtonPropTypes } from '../../../components/IconButton/iconButtonAttributes';
-import { Box, Icon, IconButton } from '../../../index';
+import { Box, Icon, IconButton } from '../../..';
+import { iconButtonPropTypes } from '../../IconButton/iconButtonAttributes';
 
 /**
  * ListViewItemEditButton is one of several styled control components that can be used as a child
- * nested inside of the [ListViewItem](./?path=/story/experimental-listviewitem--default).
- * Its a wrapper component around the [IconButton](./?path=/story/components-iconbutton--default),
+ * nested inside of the [ListViewItem](./?path=/docs/components-listviewitem--docs).
+ * Its a wrapper component around the [IconButton](./?path=/docs/components-iconbutton--docs),
  * intended to make matching specs easy. Most props available to the IconButton are also available
  * to ListItemEditButton.
 */