@pingux/astro 2.7.1 → 2.8.0-alpha.1

package/lib/cjs/components/SwitchField/SwitchField.js

@@ -24,12 +24,10 @@ var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
 var _interactions = require("@react-aria/interactions");
 var _omit = _interopRequireDefault(require("lodash/omit"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
 var _hooks = require("../../hooks");
-var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
+var _switchFieldAttributes = require("./switchFieldAttributes");
 var _react2 = require("@emotion/react");
 var _excluded = ["label", "helperText", "isDefaultSelected", "isSelected", "onChange", "value", "name", "id", "isDisabled", "isReadOnly", "isRequired", "hasAutoFocus", "onFocus", "onBlur", "onFocusChange", "onKeyDown", "onKeyUp", "status", "controlProps"];
 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); }
@@ -45,10 +43,14 @@ var SwitchField = /*#__PURE__*/(0, _react.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,
@@ -98,56 +100,12 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, fieldLabelProps), (0, _react2.jsx)(_.Box, fieldControlWrapperProps, (0, _react2.jsx)(_.Switch, (0, _extends2["default"])({
     ref: switchRef,
     inputProps: fieldControlInputProps
-  }, unhandledAriaProps))), label), helperText && (0, _react2.jsx)(_.FieldHelperText, {
+  }, unhandledAriaProps, others))), label), helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status
   }, helperText));
 });
-SwitchField.propTypes = _objectSpread(_objectSpread(_objectSpread({
-  /** A list of class names to apply to the input element. */
-  className: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
-  /** Whether the element should receive focus on render. */
-  hasAutoFocus: _propTypes["default"].bool,
-  /** Text rendered below the input. */
-  helperText: _propTypes["default"].node,
-  /** If present this prop will cause a help hint to render in the label of the field. */
-  hintText: _propTypes["default"].string,
-  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
-  id: _propTypes["default"].string,
-  /** Whether the element should be selected (uncontrolled). */
-  isDefaultSelected: _propTypes["default"].bool,
-  /** Whether the field is disabled. */
-  isDisabled: _propTypes["default"].bool,
-  /** Whether the input can be selected, but not changed by the user. */
-  isReadOnly: _propTypes["default"].bool,
-  /** Whether user input is required on the input before form submission. */
-  isRequired: _propTypes["default"].bool,
-  /** Whether the element should be selected (controlled). */
-  isSelected: _propTypes["default"].bool,
-  /** The rendered label for the field. */
-  label: _propTypes["default"].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["default"].string,
-  /** Handler that is called when the element loses focus. */
-  onBlur: _propTypes["default"].func,
-  /** Handler that is called when the element's selection state changes. */
-  onChange: _propTypes["default"].func,
-  /** Handler that is called when the element receives focus. */
-  onFocus: _propTypes["default"].func,
-  /** Handler that is called when the element's focus status changes. */
-  onFocusChange: _propTypes["default"].func,
-  /** Handler that is called when a key is pressed. */
-  onKeyDown: _propTypes["default"].func,
-  /** Handler that is called when a key is released. */
-  onKeyUp: _propTypes["default"].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["default"].string
-}, _statusProp.statusPropTypes), _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
-SwitchField.defaultProps = _objectSpread({
-  isDisabled: false,
-  isReadOnly: false,
-  isRequired: false,
-  hasAutoFocus: false
-}, _statusProp.statusDefaultProp);
+SwitchField.propTypes = _switchFieldAttributes.switchFieldPropTypes;
+SwitchField.defaultProps = _objectSpread({}, _statusProp.statusDefaultProp);
 SwitchField.displayName = 'SwitchField';
 var _default = SwitchField;
 exports["default"] = _default;

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

@@ -25,6 +25,7 @@ var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
 var _SwitchField = _interopRequireDefault(require("./SwitchField.mdx"));
+var _switchFieldAttributes = require("./switchFieldAttributes");
 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; }
@@ -43,40 +44,7 @@ var _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'
-      }
-    }
-  }, _statusProp.statusArgTypes), _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
+  argTypes: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _switchFieldAttributes.switchFieldArgTypes), _statusProp.statusArgTypes), _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 var Default = function Default(args) {

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

@@ -8,10 +8,9 @@ var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _SwitchField = _interopRequireDefault(require("./SwitchField"));
 var _react2 = require("@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] : {};
@@ -24,9 +23,9 @@ test('renders Switch component', function () {
   getComponent({
     'aria-label': 'test'
   });
-  var switchComponent = _testWrapper.screen.getByTestId(testId);
+  var switchComponent = _testWrapper.screen.getByText(TEST_LABEL);
   _testWrapper.screen.getByRole('switch');
-  expect(switchComponent).toBeInstanceOf(HTMLDivElement);
+  expect(switchComponent).toBeInstanceOf(HTMLLabelElement);
   expect(switchComponent).toBeInTheDocument();
 });
 test('renders label', function () {

package/lib/cjs/components/SwitchField/switchFieldAttributes.js

@@ -0,0 +1,191 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.switchFieldPropTypes = exports.switchFieldArgTypes = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
+var _docArgTypes = require("../../utils/docUtils/docArgTypes");
+var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
+var _statusProp = require("../../utils/docUtils/statusProp");
+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) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var 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.docArgTypes.string,
+  stringArray = _docArgTypes.docArgTypes.stringArray,
+  text = _docArgTypes.docArgTypes.text,
+  node = _docArgTypes.docArgTypes.node;
+var switchFieldArgTypes = {
+  className: {
+    type: {
+      summary: (0, _concat["default"])(_context = "".concat(string, " | ")).call(_context, stringArray)
+    },
+    description: descriptions.className
+  },
+  hasAutoFocus: _objectSpread(_objectSpread({}, _docArgTypes.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({}, _docArgTypes.booleanArg), {}, {
+    description: descriptions.isDefaultSelected
+  }),
+  isDisabled: _objectSpread(_objectSpread({}, _docArgTypes.booleanArg), {}, {
+    description: descriptions.isDisabled
+  }),
+  isReadOnly: _objectSpread(_objectSpread({}, _docArgTypes.booleanArg), {}, {
+    description: descriptions.isReadOnly
+  }),
+  isRequired: _objectSpread(_objectSpread({}, _docArgTypes.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({}, _docArgTypes.funcArg), {}, {
+    description: descriptions.onBlur
+  }),
+  onChange: _objectSpread(_objectSpread({}, _docArgTypes.funcArg), {}, {
+    description: descriptions.onChange
+  }),
+  onFocus: _objectSpread(_objectSpread({}, _docArgTypes.funcArg), {}, {
+    description: descriptions.onFocus
+  }),
+  onFocusChange: _objectSpread(_objectSpread({}, _docArgTypes.funcArg), {}, {
+    description: descriptions.onFocusChange
+  }),
+  onKeyDown: _objectSpread(_objectSpread({}, _docArgTypes.funcArg), {}, {
+    description: descriptions.onKeyDown
+  }),
+  onKeyUp: _objectSpread(_objectSpread({}, _docArgTypes.funcArg), {}, {
+    description: descriptions.onKeyUp
+  }),
+  value: {
+    defaultValue: 'my-switch',
+    control: {
+      type: text
+    },
+    type: {
+      summary: string
+    },
+    description: descriptions.value
+  },
+  status: {
+    control: {
+      type: 'select',
+      options: _statuses["default"]
+    },
+    defaultValue: _statuses["default"].DEFAULT,
+    description: descriptions.status
+  }
+};
+exports.switchFieldArgTypes = switchFieldArgTypes;
+var switchFieldPropTypes = _objectSpread(_objectSpread(_objectSpread({
+  className: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
+  hasAutoFocus: _propTypes["default"].bool,
+  helperText: _propTypes["default"].node,
+  hintText: _propTypes["default"].string,
+  id: _propTypes["default"].string,
+  isDefaultSelected: _propTypes["default"].bool,
+  isDisabled: _propTypes["default"].bool,
+  isReadOnly: _propTypes["default"].bool,
+  isRequired: _propTypes["default"].bool,
+  isSelected: _propTypes["default"].bool,
+  label: _propTypes["default"].node,
+  name: _propTypes["default"].string,
+  onBlur: _propTypes["default"].func,
+  onChange: _propTypes["default"].func,
+  onFocus: _propTypes["default"].func,
+  onFocusChange: _propTypes["default"].func,
+  onKeyDown: _propTypes["default"].func,
+  onKeyUp: _propTypes["default"].func,
+  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
+  value: _propTypes["default"].string
+}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes), _statusProp.statusPropTypes);
+exports.switchFieldPropTypes = switchFieldPropTypes;

package/lib/cjs/experimental/ListViewItem/ListViewItem.js

@@ -0,0 +1,157 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.LIST_ITEM_ICON = void 0;
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _interactions = require("@react-aria/interactions");
+var _hooks = require("../../hooks");
+var _index = require("../../index");
+var _listViewItemAttributes = require("./listViewItemAttributes");
+var _react2 = require("@emotion/react");
+var _excluded = ["children", "className", "data", "isHovered", "isSelected", "linkProps", "onHoverChange", "onHoverEnd", "onHoverStart", "slots"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _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) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var 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'
+  }
+};
+var LIST_ITEM_ICON = '-list-item-icon';
+exports.LIST_ITEM_ICON = LIST_ITEM_ICON;
+var ListViewItem = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var icon = data.icon,
+    subtext = data.subtext,
+    text = data.text;
+  var shouldUseDefaultHover = isHovered === undefined;
+  var _useHover = (0, _interactions.useHover)({
+      onHoverChange: onHoverChange,
+      onHoverEnd: onHoverEnd,
+      onHoverStart: onHoverStart
+    }),
+    hoverProps = _useHover.hoverProps,
+    defaultIsHovered = _useHover.isHovered;
+  var _useStatusClasses = (0, _hooks.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 = (0, _react2.jsx)(_index.Box, {
+    sx: sx.icon
+  }, icon && (0, _react2.jsx)(_index.Icon, {
+    icon: icon,
+    size: "md",
+    title: {
+      id: (0, _concat["default"])(_context = "".concat(text)).call(_context, LIST_ITEM_ICON),
+      name: (0, _concat["default"])(_context2 = "".concat(text)).call(_context2, LIST_ITEM_ICON)
+    }
+  }));
+  var renderData = (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: sx.data
+  }, (slots === null || slots === void 0 ? void 0 : slots.leftOfData) || renderIcon, (0, _react2.jsx)(_index.Box, {
+    sx: textStyles
+  }, text && (0, _react2.jsx)(_index.Text, {
+    variant: "bodyStrong",
+    sx: sx.title
+  }, text), subtext && (0, _react2.jsx)(_index.Text, {
+    variant: "subtitle",
+    sx: sx.subtitle
+  }, subtext)));
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    className: classNames,
+    ref: ref,
+    sx: sx.container
+  }, hoverProps, others), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: wrapperStyles
+  }, renderData, (slots === null || slots === void 0 ? void 0 : slots.rightOfData) && (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignSelf: "center"
+  }, slots.rightOfData), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "sm",
+    alignItems: "center",
+    sx: sx.controls
+  }, children)));
+});
+ListViewItem.propTypes = _listViewItemAttributes.listViewItemPropTypes;
+ListViewItem.displayName = 'ListViewItem';
+var _default = ListViewItem;
+exports["default"] = _default;

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

@@ -0,0 +1,136 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithSubtext = exports.WithRightOfDataSlot = exports.WithLeftOfDataSlot = exports.WithControls = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactStately = require("react-stately");
+var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
+var _FormSelectIcon = _interopRequireDefault(require("@pingux/mdi-react/FormSelectIcon"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _index = require("../../index");
+var _ListViewItem = _interopRequireDefault(require("./ListViewItem.mdx"));
+var _listViewItemAttributes = require("./listViewItemAttributes");
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Experimental/ListViewItem',
+  component: _index.ListViewItem,
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_ListViewItem["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      },
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: _listViewItemAttributes.listViewItemArgTypes
+};
+exports["default"] = _default;
+var Wrapper = function Wrapper(_ref) {
+  var children = _ref.children;
+  return (0, _react2.jsx)(_index.Box, {
+    sx: {
+      bg: 'accent.99'
+    }
+  }, (0, _react2.jsx)(_index.Separator, {
+    margin: 0
+  }), children, (0, _react2.jsx)(_index.Separator, {
+    margin: 0
+  }));
+};
+var Default = function Default() {
+  return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_index.ListViewItem, {
+    data: {
+      icon: _AccountIcon["default"],
+      text: 'Fons Vernall'
+    }
+  }));
+};
+exports.Default = Default;
+var WithSubtext = function WithSubtext() {
+  return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_index.ListViewItem, {
+    data: {
+      icon: _AccountIcon["default"],
+      subtext: 'rad_developer@pingidentity.com',
+      text: 'Fons Vernall'
+    }
+  }));
+};
+exports.WithSubtext = WithSubtext;
+var WithControls = function WithControls() {
+  return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_index.ListViewItem, {
+    data: {
+      icon: _FormSelectIcon["default"],
+      text: 'Fons Vernall'
+    }
+  }, (0, _react2.jsx)(_index.ListViewItemEditButton, null), (0, _react2.jsx)(_index.ListViewItemSwitchField, null), (0, _react2.jsx)(_index.ListViewItemMenu, null, (0, _react2.jsx)(_reactStately.Item, {
+    key: "enable"
+  }, "Enable user"), (0, _react2.jsx)(_reactStately.Item, {
+    key: "disable"
+  }, "Disable user"), (0, _react2.jsx)(_reactStately.Item, {
+    key: "delete"
+  }, "Delete user"))));
+};
+exports.WithControls = WithControls;
+var WithRightOfDataSlot = function WithRightOfDataSlot() {
+  var renderRightOfData = (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "sm",
+    ml: "sm"
+  }, (0, _react2.jsx)(_index.Badge, {
+    label: "Label"
+  }), (0, _react2.jsx)(_index.Badge, {
+    label: "Label",
+    bg: "active"
+  }));
+  return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_index.ListViewItem, {
+    data: {
+      icon: _AccountIcon["default"],
+      text: 'Fons Vernall',
+      subtext: 'verylongemailaddress@email.com'
+    },
+    slots: {
+      rightOfData: renderRightOfData
+    }
+  }, (0, _react2.jsx)(_index.ListViewItemMenu, null, (0, _react2.jsx)(_reactStately.Item, {
+    key: "enable"
+  }, "Enable user"), (0, _react2.jsx)(_reactStately.Item, {
+    key: "disable"
+  }, "Disable user"), (0, _react2.jsx)(_reactStately.Item, {
+    key: "delete"
+  }, "Delete user"))));
+};
+exports.WithRightOfDataSlot = WithRightOfDataSlot;
+var WithLeftOfDataSlot = function WithLeftOfDataSlot() {
+  var renderLeftOfData = (0, _react2.jsx)(_index.Box, {
+    mx: "sm"
+  }, (0, _react2.jsx)(_index.Text, {
+    pr: 3,
+    variant: "H3"
+  }, "Ping"));
+  return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_index.ListViewItem, {
+    data: {
+      icon: _AccountIcon["default"],
+      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
+    }
+  }, (0, _react2.jsx)(_index.ListViewItemMenu, null, (0, _react2.jsx)(_reactStately.Item, {
+    key: "enable"
+  }, "Enable user"), (0, _react2.jsx)(_reactStately.Item, {
+    key: "disable"
+  }, "Disable user"), (0, _react2.jsx)(_reactStately.Item, {
+    key: "delete"
+  }, "Delete user"))));
+};
+exports.WithLeftOfDataSlot = WithLeftOfDataSlot;