@pingux/astro 2.7.1 → 2.8.0-alpha.1

package/lib/components/SwitchField/SwitchField.js

@@ -12,17 +12,16 @@ var _excluded = ["label", "helperText", "isDefaultSelected", "isSelected", "onCh
 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 _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; }
+/* eslint-disable no-unused-vars */
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { useSwitch } from 'react-aria';
 import { useToggleState } from 'react-stately';
 import { usePress } from '@react-aria/interactions';
 import omit from 'lodash/omit';
-import PropTypes from 'prop-types';
 import { Box, FieldHelperText, Label, Switch } from '../..';
 import { useField, usePropWarning } from '../../hooks';
-import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
-import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
+import { statusDefaultProp } from '../../utils/docUtils/statusProp';
+import { switchFieldPropTypes } from './switchFieldAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
   var label = props.label,
@@ -33,10 +32,14 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
     value = props.value,
     name = props.name,
     id = props.id,
-    isDisabled = props.isDisabled,
-    isReadOnly = props.isReadOnly,
-    isRequired = props.isRequired,
-    hasAutoFocus = props.hasAutoFocus,
+    _props$isDisabled = props.isDisabled,
+    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+    _props$isReadOnly = props.isReadOnly,
+    isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
+    _props$isRequired = props.isRequired,
+    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
+    _props$hasAutoFocus = props.hasAutoFocus,
+    hasAutoFocus = _props$hasAutoFocus === void 0 ? false : _props$hasAutoFocus,
     onFocus = props.onFocus,
     onBlur = props.onBlur,
     onFocusChange = props.onFocusChange,
@@ -86,55 +89,11 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, fieldLabelProps), ___EmotionJSX(Box, fieldControlWrapperProps, ___EmotionJSX(Switch, _extends({
     ref: switchRef,
     inputProps: fieldControlInputProps
-  }, unhandledAriaProps))), label), helperText && ___EmotionJSX(FieldHelperText, {
+  }, unhandledAriaProps, others))), label), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText));
 });
-SwitchField.propTypes = _objectSpread(_objectSpread(_objectSpread({
-  /** A list of class names to apply to the input element. */
-  className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  /** Whether the element should receive focus on render. */
-  hasAutoFocus: PropTypes.bool,
-  /** Text rendered below the input. */
-  helperText: PropTypes.node,
-  /** If present this prop will cause a help hint to render in the label of the field. */
-  hintText: PropTypes.string,
-  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
-  id: PropTypes.string,
-  /** Whether the element should be selected (uncontrolled). */
-  isDefaultSelected: PropTypes.bool,
-  /** Whether the field is disabled. */
-  isDisabled: PropTypes.bool,
-  /** Whether the input can be selected, but not changed by the user. */
-  isReadOnly: PropTypes.bool,
-  /** Whether user input is required on the input before form submission. */
-  isRequired: PropTypes.bool,
-  /** Whether the element should be selected (controlled). */
-  isSelected: PropTypes.bool,
-  /** The rendered label for the field. */
-  label: PropTypes.node,
-  /** The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). */
-  name: PropTypes.string,
-  /** Handler that is called when the element loses focus. */
-  onBlur: PropTypes.func,
-  /** Handler that is called when the element's selection state changes. */
-  onChange: PropTypes.func,
-  /** Handler that is called when the element receives focus. */
-  onFocus: PropTypes.func,
-  /** Handler that is called when the element's focus status changes. */
-  onFocusChange: PropTypes.func,
-  /** Handler that is called when a key is pressed. */
-  onKeyDown: PropTypes.func,
-  /** Handler that is called when a key is released. */
-  onKeyUp: PropTypes.func,
-  /** The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue). */
-  value: PropTypes.string
-}, statusPropTypes), ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
-SwitchField.defaultProps = _objectSpread({
-  isDisabled: false,
-  isReadOnly: false,
-  isRequired: false,
-  hasAutoFocus: false
-}, statusDefaultProp);
+SwitchField.propTypes = switchFieldPropTypes;
+SwitchField.defaultProps = _objectSpread({}, statusDefaultProp);
 SwitchField.displayName = 'SwitchField';
 export default SwitchField;

package/lib/components/SwitchField/SwitchField.stories.js

@@ -18,6 +18,7 @@ import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusArgTypes } from '../../utils/docUtils/statusProp';
 import SwitchFieldReadme from './SwitchField.mdx';
+import { switchFieldArgTypes } from './switchFieldAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/SwitchField',
@@ -32,40 +33,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread(_objectSpread({
-    label: {
-      control: {
-        type: 'text'
-      },
-      defaultValue: 'Example Label'
-    },
-    helperText: {
-      control: {
-        type: 'text'
-      }
-    },
-    hintText: {
-      control: {
-        type: 'text'
-      }
-    },
-    value: {
-      defaultValue: 'my-switch'
-    },
-    name: {},
-    className: {},
-    isDisabled: {},
-    isRequired: {},
-    isReadOnly: {},
-    isDefaultSelected: {},
-    hasAutoFocus: {},
-    id: {},
-    isSelected: {
-      control: {
-        type: 'none'
-      }
-    }
-  }, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
+  argTypes: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, switchFieldArgTypes), statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(SwitchField, args);

package/lib/components/SwitchField/SwitchField.test.js

@@ -5,10 +5,9 @@ import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import SwitchField from './SwitchField';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var testId = 'test-switch';
+var TEST_LABEL = 'test label';
 var defaultProps = {
-  label: 'Example label',
-  'data-testid': testId
+  label: TEST_LABEL
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -21,9 +20,9 @@ test('renders Switch component', function () {
   getComponent({
     'aria-label': 'test'
   });
-  var switchComponent = screen.getByTestId(testId);
+  var switchComponent = screen.getByText(TEST_LABEL);
   screen.getByRole('switch');
-  expect(switchComponent).toBeInstanceOf(HTMLDivElement);
+  expect(switchComponent).toBeInstanceOf(HTMLLabelElement);
   expect(switchComponent).toBeInTheDocument();
 });
 test('renders label', function () {

package/lib/components/SwitchField/switchFieldAttributes.js

@@ -0,0 +1,182 @@
+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 _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 _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+var _context;
+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 _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import PropTypes from 'prop-types';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
+import { booleanArg, docArgTypes, funcArg } from '../../utils/docUtils/docArgTypes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
+import { statusPropTypes } from '../../utils/docUtils/statusProp';
+var descriptions = {
+  className: 'A list of class names to apply to the input element.',
+  hasAutoFocus: 'Whether the element should receive focus on render.',
+  helperText: 'Text rendered below the input.',
+  hintText: 'If present this prop will cause a help hint to render in the label of the field.',
+  id: "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).",
+  isDefaultSelected: 'Whether the element should be selected (uncontrolled).',
+  isDisabled: 'Whether the field is disabled.',
+  isReadOnly: 'Whether the input can be selected, but not changed by the user.',
+  isRequired: 'Whether user input is required on the input before form submission.',
+  isSelected: 'Whether the element should be selected (controlled).',
+  label: 'The rendered label for the field.',
+  name: 'The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).',
+  onBlur: 'Handler that is called when the element loses focus.',
+  onChange: "Handler that is called when the element's selection state changes.",
+  onFocus: 'Handler that is called when the element receives focus.',
+  onFocusChange: "Handler that is called when the element's focus status changes.",
+  onKeyDown: 'Handler that is called when a key is pressed.',
+  onKeyUp: 'Handler that is called when a key is released.',
+  status: 'Determines the textarea status indicator and helper text styling.',
+  value: 'The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue).'
+};
+var string = docArgTypes.string,
+  stringArray = docArgTypes.stringArray,
+  text = docArgTypes.text,
+  node = docArgTypes.node;
+export var switchFieldArgTypes = {
+  className: {
+    type: {
+      summary: _concatInstanceProperty(_context = "".concat(string, " | ")).call(_context, stringArray)
+    },
+    description: descriptions.className
+  },
+  hasAutoFocus: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: descriptions.hasAutoFocus
+  }),
+  helperText: {
+    control: {
+      type: text
+    },
+    type: {
+      summary: node
+    },
+    description: descriptions.helperText
+  },
+  hintText: {
+    control: {
+      type: text
+    },
+    type: {
+      summary: string
+    },
+    description: descriptions.hintText
+  },
+  id: {
+    control: {
+      type: text
+    },
+    type: {
+      summary: string
+    },
+    description: descriptions.id
+  },
+  isDefaultSelected: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: descriptions.isDefaultSelected
+  }),
+  isDisabled: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: descriptions.isDisabled
+  }),
+  isReadOnly: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: descriptions.isReadOnly
+  }),
+  isRequired: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: descriptions.isRequired
+  }),
+  isSelected: {
+    control: {
+      type: 'none'
+    },
+    type: {
+      summary: string
+    },
+    description: descriptions.isSelected
+  },
+  label: {
+    control: {
+      type: text
+    },
+    type: {
+      summary: string
+    },
+    defaultValue: 'Example Label',
+    description: descriptions.label
+  },
+  name: {
+    control: {
+      type: text
+    },
+    type: {
+      summary: string
+    },
+    description: descriptions.name
+  },
+  onBlur: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: descriptions.onBlur
+  }),
+  onChange: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: descriptions.onChange
+  }),
+  onFocus: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: descriptions.onFocus
+  }),
+  onFocusChange: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: descriptions.onFocusChange
+  }),
+  onKeyDown: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: descriptions.onKeyDown
+  }),
+  onKeyUp: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: descriptions.onKeyUp
+  }),
+  value: {
+    defaultValue: 'my-switch',
+    control: {
+      type: text
+    },
+    type: {
+      summary: string
+    },
+    description: descriptions.value
+  },
+  status: {
+    control: {
+      type: 'select',
+      options: statuses
+    },
+    defaultValue: statuses.DEFAULT,
+    description: descriptions.status
+  }
+};
+export var switchFieldPropTypes = _objectSpread(_objectSpread(_objectSpread({
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  hasAutoFocus: PropTypes.bool,
+  helperText: PropTypes.node,
+  hintText: PropTypes.string,
+  id: PropTypes.string,
+  isDefaultSelected: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  isSelected: PropTypes.bool,
+  label: PropTypes.node,
+  name: PropTypes.string,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onFocusChange: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onKeyUp: PropTypes.func,
+  status: PropTypes.oneOf(_Object$values(statuses)),
+  value: PropTypes.string
+}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes), statusPropTypes);

package/lib/experimental/ListViewItem/ListViewItem.js

@@ -0,0 +1,144 @@
+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 _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 _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";
+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 React, { forwardRef } from 'react';
+import { useHover } from '@react-aria/interactions';
+import { useStatusClasses } from '../../hooks';
+import { Box, Icon, Text } from '../../index';
+import { listViewItemPropTypes } from './listViewItemAttributes';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var sx = {
+  container: {
+    m: 1,
+    minHeight: 72,
+    '&.is-hovered': {
+      bg: 'white',
+      cursor: 'pointer'
+    }
+  },
+  controls: {
+    alignSelf: 'center',
+    ml: 'auto',
+    pr: 'sm'
+  },
+  data: {
+    alignItems: 'center'
+  },
+  icon: {
+    width: 25,
+    color: 'accent.40'
+  },
+  rightOfData: {
+    alignSelf: 'center',
+    ml: 'sm'
+  },
+  subtitle: {
+    alignSelf: 'start',
+    fontSize: 'sm',
+    lineHeight: '16px',
+    my: '1px'
+  },
+  text: {
+    ml: 'md'
+  },
+  title: {
+    alignSelf: 'start',
+    fontSize: 'md'
+  },
+  wrapper: {
+    cursor: 'pointer',
+    display: 'flex',
+    flex: '1 1 0px',
+    ml: 'md'
+  }
+};
+export var LIST_ITEM_ICON = '-list-item-icon';
+var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _context, _context2;
+  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,
+    subtext = data.subtext,
+    text = data.text;
+  var shouldUseDefaultHover = isHovered === undefined;
+  var _useHover = useHover({
+      onHoverChange: onHoverChange,
+      onHoverEnd: onHoverEnd,
+      onHoverStart: onHoverStart
+    }),
+    hoverProps = _useHover.hoverProps,
+    defaultIsHovered = _useHover.isHovered;
+  var _useStatusClasses = useStatusClasses(className, {
+      isHovered: shouldUseDefaultHover ? defaultIsHovered : isHovered,
+      isSelected: isSelected
+    }),
+    classNames = _useStatusClasses.classNames;
+  var wrapperStyles = slots !== null && slots !== void 0 && slots.leftOfData ? _objectSpread(_objectSpread({}, sx.wrapper), {}, {
+    ml: 0
+  }) : sx.wrapper;
+  var textStyles = slots !== null && slots !== void 0 && slots.leftOfData ? _objectSpread(_objectSpread({}, sx.text), {}, {
+    ml: 0
+  }) : sx.text;
+  var renderIcon = ___EmotionJSX(Box, {
+    sx: sx.icon
+  }, icon && ___EmotionJSX(Icon, {
+    icon: icon,
+    size: "md",
+    title: {
+      id: _concatInstanceProperty(_context = "".concat(text)).call(_context, LIST_ITEM_ICON),
+      name: _concatInstanceProperty(_context2 = "".concat(text)).call(_context2, LIST_ITEM_ICON)
+    }
+  }));
+  var renderData = ___EmotionJSX(Box, {
+    isRow: true,
+    sx: sx.data
+  }, (slots === null || slots === void 0 ? void 0 : slots.leftOfData) || renderIcon, ___EmotionJSX(Box, {
+    sx: textStyles
+  }, text && ___EmotionJSX(Text, {
+    variant: "bodyStrong",
+    sx: sx.title
+  }, text), subtext && ___EmotionJSX(Text, {
+    variant: "subtitle",
+    sx: sx.subtitle
+  }, subtext)));
+  return ___EmotionJSX(Box, _extends({
+    className: classNames,
+    ref: ref,
+    sx: sx.container
+  }, hoverProps, others), ___EmotionJSX(Box, {
+    isRow: true,
+    sx: wrapperStyles
+  }, renderData, (slots === null || slots === void 0 ? void 0 : slots.rightOfData) && ___EmotionJSX(Box, {
+    isRow: true,
+    alignSelf: "center"
+  }, slots.rightOfData), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "sm",
+    alignItems: "center",
+    sx: sx.controls
+  }, children)));
+});
+ListViewItem.propTypes = listViewItemPropTypes;
+ListViewItem.displayName = 'ListViewItem';
+export default ListViewItem;

package/lib/experimental/ListViewItem/ListViewItem.stories.js

@@ -0,0 +1,122 @@
+import React from 'react';
+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 ListViewItemReadMe from './ListViewItem.mdx';
+import { listViewItemArgTypes } from './listViewItemAttributes';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Experimental/ListViewItem',
+  component: ListViewItem,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ListViewItemReadMe, null), ___EmotionJSX(DocsLayout, null));
+      },
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: listViewItemArgTypes
+};
+var Wrapper = function Wrapper(_ref) {
+  var children = _ref.children;
+  return ___EmotionJSX(Box, {
+    sx: {
+      bg: 'accent.99'
+    }
+  }, ___EmotionJSX(Separator, {
+    margin: 0
+  }), children, ___EmotionJSX(Separator, {
+    margin: 0
+  }));
+};
+export var Default = function Default() {
+  return ___EmotionJSX(Wrapper, null, ___EmotionJSX(ListViewItem, {
+    data: {
+      icon: AccountIcon,
+      text: 'Fons Vernall'
+    }
+  }));
+};
+export var WithSubtext = function WithSubtext() {
+  return ___EmotionJSX(Wrapper, null, ___EmotionJSX(ListViewItem, {
+    data: {
+      icon: AccountIcon,
+      subtext: 'rad_developer@pingidentity.com',
+      text: 'Fons Vernall'
+    }
+  }));
+};
+export var WithControls = function WithControls() {
+  return ___EmotionJSX(Wrapper, null, ___EmotionJSX(ListViewItem, {
+    data: {
+      icon: FormSelectIcon,
+      text: 'Fons Vernall'
+    }
+  }, ___EmotionJSX(ListViewItemEditButton, 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 WithRightOfDataSlot = function WithRightOfDataSlot() {
+  var renderRightOfData = ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "sm",
+    ml: "sm"
+  }, ___EmotionJSX(Badge, {
+    label: "Label"
+  }), ___EmotionJSX(Badge, {
+    label: "Label",
+    bg: "active"
+  }));
+  return ___EmotionJSX(Wrapper, null, ___EmotionJSX(ListViewItem, {
+    data: {
+      icon: AccountIcon,
+      text: 'Fons Vernall',
+      subtext: 'verylongemailaddress@email.com'
+    },
+    slots: {
+      rightOfData: renderRightOfData
+    }
+  }, ___EmotionJSX(ListViewItemMenu, null, ___EmotionJSX(Item, {
+    key: "enable"
+  }, "Enable user"), ___EmotionJSX(Item, {
+    key: "disable"
+  }, "Disable user"), ___EmotionJSX(Item, {
+    key: "delete"
+  }, "Delete user"))));
+};
+export var WithLeftOfDataSlot = function WithLeftOfDataSlot() {
+  var renderLeftOfData = ___EmotionJSX(Box, {
+    mx: "sm"
+  }, ___EmotionJSX(Text, {
+    pr: 3,
+    variant: "H3"
+  }, "Ping"));
+  return ___EmotionJSX(Wrapper, null, ___EmotionJSX(ListViewItem, {
+    data: {
+      icon: AccountIcon,
+      text: 'Fons Vernall',
+      subtext: 'verylongemailaddress@email.com'
+    }
+    // Note that when the leftOfData slot is used, it overrides the provided icon and
+    // removes all margins and padding on the left of data
+    ,
+    slots: {
+      leftOfData: renderLeftOfData
+    }
+  }, ___EmotionJSX(ListViewItemMenu, null, ___EmotionJSX(Item, {
+    key: "enable"
+  }, "Enable user"), ___EmotionJSX(Item, {
+    key: "disable"
+  }, "Disable user"), ___EmotionJSX(Item, {
+    key: "delete"
+  }, "Delete user"))));
+};