@pingux/astro 2.7.1 → 2.8.0-alpha.1

package/lib/experimental/SaveBar/SaveBar.test.js

@@ -0,0 +1,91 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import axeTest from '../../utils/testUtils/testAxe';
+import { render, screen } from '../../utils/testUtils/testWrapper';
+import SaveBar from '.';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-SaveBar';
+var saveButtonProps = {
+  key: 'save button',
+  text: 'Save',
+  onPress: function onPress() {
+    return alert('Save button pressed');
+  }
+};
+var cancelButtonProps = {
+  key: 'cancel button',
+  text: 'Cancel',
+  onPress: function onPress() {
+    return alert('Cancel button pressed');
+  }
+};
+var refreshButtonProps = {
+  key: 'refresh button',
+  text: 'Refresh',
+  onPress: function onPress() {
+    return alert('Refresh button pressed');
+  }
+};
+var defaultProps = {
+  'data-testid': testId,
+  saveButtonProps: saveButtonProps,
+  cancelButtonProps: cancelButtonProps
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(SaveBar, _extends({}, defaultProps, props)));
+};
+var getComponentCustomChildren = function getComponentCustomChildren() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(SaveBar, _extends({}, defaultProps, props), ___EmotionJSX("button", null, "custom text"), ___EmotionJSX("button", null, "Also custom text")));
+};
+var getComponentTextChildren = function getComponentTextChildren() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(SaveBar, props, "custom text"));
+};
+axeTest(getComponent);
+afterEach(function () {
+  jest.resetAllMocks();
+});
+test('SaveBar does render', function () {
+  getComponent({});
+  var element = screen.getByTestId(testId);
+  expect(element).toBeInTheDocument();
+});
+test('renders save and cancel buttons', function () {
+  getComponent();
+  var saveButton = screen.getByText(saveButtonProps.text);
+  expect(saveButton).toBeInTheDocument();
+  var cancelButton = screen.getByText(cancelButtonProps.text);
+  expect(cancelButton).toBeInTheDocument();
+});
+test('renders all three buttons', function () {
+  getComponent({
+    refreshButtonProps: refreshButtonProps
+  });
+  var saveButton = screen.getByText(saveButtonProps.text);
+  expect(saveButton).toBeInTheDocument();
+  var refreshButton = screen.getByText(refreshButtonProps.text);
+  expect(refreshButton).toBeInTheDocument();
+  var cancelButton = screen.getByText(cancelButtonProps.text);
+  expect(cancelButton).toBeInTheDocument();
+});
+test('renders custom children', function () {
+  getComponentCustomChildren();
+  var firstButton = screen.getByText('custom text');
+  var secondButton = screen.getByText('Also custom text');
+  expect(firstButton).toBeInTheDocument();
+  expect(secondButton).toBeInTheDocument();
+});
+test('renders custom text', function () {
+  getComponentTextChildren();
+  var firstText = screen.getByText('custom text');
+  expect(firstText).toBeInTheDocument();
+});
+test('isJustifiedRight reverses order of button', function () {
+  getComponent({
+    isJustifiedRight: true
+  });
+  var buttons = screen.getAllByRole('button');
+  expect(buttons[0]).toHaveAttribute('data-id', 'cancel-button');
+});

package/lib/experimental/SaveBar/index.js

@@ -0,0 +1 @@
+export { default } from './SaveBar';

package/lib/experimental/recipes/ListAndPanel.stories.js

@@ -0,0 +1,342 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import React, { useRef, useState } from 'react';
+import { FocusScope } from 'react-aria';
+import { Item } from 'react-stately';
+import AccountIcon from '@pingux/mdi-react/AccountIcon';
+import CloseIcon from '@pingux/mdi-react/CloseIcon';
+import MoreVertIcon from '@pingux/mdi-react/MoreVertIcon';
+import PencilIcon from '@pingux/mdi-react/PencilIcon';
+import PlusIcon from '@pingux/mdi-react/PlusIcon';
+import { useOverlayPanelState } from '../../hooks';
+import useOverlappingMenuHoverState from '../../hooks/useOverlappingMenuHoverState';
+import { Box, Icon, IconButton, Link, ListView, ListViewItem, ListViewItemMenu, ListViewItemSwitchField, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../../index';
+import { items } from './items';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Experimental/Recipes/ListAndPanel',
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  }
+};
+var sx = {
+  wrapper: {
+    px: 'lg',
+    py: 'lg',
+    bg: 'accent.99',
+    height: '900px',
+    overflowY: 'scroll'
+  },
+  separator: {
+    bg: 'accent.90'
+  },
+  tabsWrapper: {
+    px: 'lg',
+    pt: 'xs'
+  },
+  iconButton: {
+    position: 'absolute',
+    top: 0,
+    right: 0
+  },
+  itemLabel: {
+    fontSize: 'sm',
+    fontWeight: 3,
+    lineHeight: '16px',
+    mb: 'xs'
+  },
+  itemValue: {
+    fontWeight: 0,
+    lineHeight: '18px',
+    mb: 'md'
+  },
+  panelHeader: {
+    container: {
+      bg: 'accent.99',
+      minHeight: 58,
+      ml: 0,
+      pl: 14,
+      pr: 'xs'
+    },
+    controls: {
+      alignSelf: 'center',
+      ml: 'auto',
+      pr: 'sm'
+    },
+    data: {
+      alignItems: 'center'
+    },
+    subtitle: {
+      alignSelf: 'start',
+      fontSize: 'sm',
+      lineHeight: '16px',
+      my: '1px'
+    },
+    title: {
+      alignSelf: 'start',
+      fontSize: 'md'
+    },
+    wrapper: {
+      cursor: 'pointer',
+      display: 'flex',
+      flex: '1 1 0px',
+      ml: 'md'
+    }
+  }
+};
+var heading = 'Users';
+var description = 'The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.';
+var title = ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+  align: "center",
+  isRow: true,
+  mb: "xs",
+  role: "heading",
+  "aria-level": "1"
+}, ___EmotionJSX(Text, {
+  fontSize: "xx",
+  fontWeight: 3,
+  fontColor: "text.primary"
+}, heading), ___EmotionJSX(IconButton, {
+  "aria-label": "icon button",
+  ml: "sm",
+  variant: "inverted"
+}, ___EmotionJSX(Icon, {
+  icon: PlusIcon,
+  size: "sm"
+}))), ___EmotionJSX(Text, {
+  fontSize: "sm",
+  color: "text.secondary",
+  fontWeight: 0,
+  width: "800px"
+}, description, ___EmotionJSX(Link, {
+  href: "https://uilibrary.ping-eng.com/",
+  sx: {
+    fontSize: '13px'
+  }
+}, " Learn more")));
+export var ListAndPanel = function ListAndPanel() {
+  // Example of items data structure
+  // const items = [
+  //   {
+  //     email: 'dburkitt5@columbia.edu',
+  //     firstName: 'Nicola',
+  //     lastName: 'Burkitt',
+  //     icon: AccountIcon,
+  //   },
+  // ]
+
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedItemId = _useState2[0],
+    setSelectedItemId = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedKeys = _useState4[0],
+    setSelectedKeys = _useState4[1];
+  var _useOverlayPanelState = useOverlayPanelState(),
+    panelState = _useOverlayPanelState.state,
+    onPanelClose = _useOverlayPanelState.onClose;
+  var panelTriggerRef = useRef();
+  var closePanelHandler = function closePanelHandler() {
+    onPanelClose(panelState, panelTriggerRef);
+    setSelectedItemId(-1);
+    setSelectedKeys([]);
+  };
+  var selectItemHandler = function selectItemHandler(e) {
+    if (e.size) {
+      setSelectedItemId(_findIndexInstanceProperty(items).call(items, function (item) {
+        return item.email === e.currentKey;
+      }));
+      setSelectedKeys([e.currentKey]);
+      panelState.open();
+    } else {
+      closePanelHandler();
+    }
+  };
+  return ___EmotionJSX(Box, {
+    sx: sx.wrapper
+  }, title, ___EmotionJSX(SearchField, {
+    position: "fixed",
+    mb: "lg",
+    mt: "lg",
+    width: "400px",
+    placeholder: "Search",
+    "aria-label": "search"
+  }), ___EmotionJSX(Separator, {
+    margin: 0
+  }), ___EmotionJSX(ListView, {
+    items: items,
+    onSelectionChange: selectItemHandler,
+    ref: panelTriggerRef,
+    selectedKeys: selectedKeys
+  }, function (item) {
+    var _context;
+    return ___EmotionJSX(Item, {
+      key: item.email
+    }, ___EmotionJSX(ListElement, {
+      data: {
+        text: _concatInstanceProperty(_context = "".concat(item.lastName, ", ")).call(_context, item.firstName),
+        subtext: item.email,
+        icon: item.icon
+      }
+    }));
+  }), ___EmotionJSX(OverlayPanel, {
+    isOpen: panelState.isOpen,
+    state: panelState,
+    triggerRef: panelTriggerRef,
+    p: 0,
+    size: "large"
+  }, panelState.isOpen && ___EmotionJSX(FocusScope, {
+    contain: true,
+    restoreFocus: true,
+    autoFocus: true
+  }, ___EmotionJSX(PanelHeader, {
+    item: selectedItemId >= 0 ? items[selectedItemId] : [],
+    onClosePanel: closePanelHandler
+  }), ___EmotionJSX(Separator, {
+    margin: 0,
+    sx: sx.separator
+  }), ___EmotionJSX(Box, {
+    sx: sx.tabsWrapper
+  }, ___EmotionJSX(Tabs, {
+    tabListProps: {
+      justifyContent: 'center'
+    },
+    tabPanelProps: {
+      sx: {
+        position: 'relative'
+      }
+    }
+  }, ___EmotionJSX(Tab, {
+    title: "Profile"
+  }, selectedItemId >= 0 && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(IconButton, {
+    variant: "inverted",
+    "aria-label": "pencil icon button",
+    sx: sx.iconButton
+  }, ___EmotionJSX(Icon, {
+    icon: PencilIcon,
+    size: "sm"
+  })), ___EmotionJSX(Text, {
+    sx: sx.itemLabel
+  }, "Full Name"), ___EmotionJSX(Text, {
+    sx: sx.itemValue
+  }, items[selectedItemId].firstName, ' ', items[selectedItemId].lastName), ___EmotionJSX(Text, {
+    sx: sx.itemLabel
+  }, "First Name"), ___EmotionJSX(Text, {
+    sx: sx.itemValue
+  }, items[selectedItemId].firstName), ___EmotionJSX(Text, {
+    sx: sx.itemLabel
+  }, "Last Name"), ___EmotionJSX(Text, {
+    sx: sx.itemValue
+  }, items[selectedItemId].lastName), ___EmotionJSX(Text, {
+    sx: sx.itemLabel
+  }, "Email"), ___EmotionJSX(Text, {
+    sx: sx.itemValue
+  }, items[selectedItemId].email))), ___EmotionJSX(Tab, {
+    title: "Group Memberships"
+  }, ___EmotionJSX(Text, null, "Group Memberships")), ___EmotionJSX(Tab, {
+    title: "Account Info"
+  }, ___EmotionJSX(Text, null, "Account Info")))))));
+};
+export var ListElement = function ListElement(_ref) {
+  var _ref$data = _ref.data,
+    data = _ref$data === void 0 ? {
+      subtext: 'dburkitt5@columbia.edu',
+      text: 'Burkitt, Nicola',
+      icon: AccountIcon
+    } : _ref$data;
+  var listItemRef = useRef();
+  var _useOverlappingMenuHo = useOverlappingMenuHoverState({
+      listItemRef: listItemRef
+    }),
+    handleHoverEnd = _useOverlappingMenuHo.handleHoverEnd,
+    handleHoverStart = _useOverlappingMenuHo.handleHoverStart,
+    handleMenuHoverEnd = _useOverlappingMenuHo.handleMenuHoverEnd,
+    handleMouseMove = _useOverlappingMenuHo.handleMouseMove,
+    isHovered = _useOverlappingMenuHo.isHovered;
+  var text = data.text,
+    subtext = data.subtext,
+    icon = data.icon;
+  return ___EmotionJSX(ListViewItem, {
+    data: {
+      icon: icon,
+      subtext: subtext,
+      text: text
+    },
+    isHovered: isHovered,
+    onHoverEnd: handleHoverEnd,
+    onHoverStart: handleHoverStart,
+    onMouseMove: handleMouseMove,
+    ref: listItemRef
+  }, ___EmotionJSX(ListViewItemSwitchField, null), ___EmotionJSX(ListViewItemMenu, {
+    onAction: handleHoverEnd,
+    onHoverEnd: handleMenuHoverEnd,
+    onHoverStart: handleHoverStart
+  }, ___EmotionJSX(Item, {
+    key: "enable"
+  }, "Enable user"), ___EmotionJSX(Item, {
+    key: "disable"
+  }, "Disable user"), ___EmotionJSX(Item, {
+    key: "delete"
+  }, "Delete user")));
+};
+export var PanelHeader = function PanelHeader(_ref2) {
+  var _context2;
+  var _ref2$item = _ref2.item,
+    item = _ref2$item === void 0 ? {
+      email: 'dburkitt5@columbia.edu',
+      icon: AccountIcon,
+      firstName: 'John',
+      lastName: 'Doe'
+    } : _ref2$item,
+    onClosePanel = _ref2.onClosePanel;
+  var email = item.email,
+    firstName = item.firstName,
+    lastName = item.lastName;
+  var text = _concatInstanceProperty(_context2 = "".concat(lastName, ", ")).call(_context2, firstName);
+  return ___EmotionJSX(Box, {
+    sx: sx.panelHeader.container
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    sx: sx.panelHeader.wrapper
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    sx: sx.panelHeader.data
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+    variant: "bodyStrong",
+    sx: sx.panelHeader.title
+  }, text), ___EmotionJSX(Text, {
+    variant: "subtitle",
+    sx: sx.panelHeader.subtitle
+  }, email))), ___EmotionJSX(Box, {
+    isRow: true,
+    sx: sx.panelHeader.controls
+  }, ___EmotionJSX(SwitchField, {
+    "aria-label": "active user",
+    isDefaultSelected: true,
+    alignSelf: "center",
+    mr: "xs"
+  }), ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(IconButton, {
+    "aria-label": "more"
+  }, ___EmotionJSX(Icon, {
+    icon: MoreVertIcon,
+    size: "md"
+  })), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
+    key: "enable"
+  }, "Enable user"), ___EmotionJSX(Item, {
+    key: "disable"
+  }, "Disable user"), ___EmotionJSX(Item, {
+    key: "delete"
+  }, "Delete user"))), ___EmotionJSX(IconButton, {
+    "aria-label": "close icon button",
+    onPress: onClosePanel
+  }, ___EmotionJSX(Icon, {
+    size: "sm",
+    icon: CloseIcon
+  })))));
+};

package/lib/experimental/recipes/ScrollableListView.stories.js

@@ -0,0 +1,89 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import React, { useState } from 'react';
+import { Item } from 'react-stately';
+import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
+import { Box, ListView, ListViewItem, ListViewItemEditButton, ListViewItemMenu, ScrollBox, SearchField } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Experimental/recipes/ScrollableListView'
+};
+export var ScrollableListView = function ScrollableListView() {
+  var unfilteredItems = [{
+    key: 'Aardvark',
+    name: 'Aardvark',
+    id: '1'
+  }, {
+    key: 'Kangaroo',
+    name: 'Kangaroo',
+    id: '2'
+  }, {
+    key: 'Snake',
+    name: 'Snake',
+    id: '3'
+  }, {
+    key: 'Dog',
+    name: 'Dog',
+    id: '4'
+  }, {
+    key: 'Cat',
+    name: 'Cat',
+    id: '5'
+  }, {
+    key: 'Mouse',
+    name: 'Mouse',
+    id: '6'
+  }, {
+    key: 'Jaguar',
+    name: 'Jaguar',
+    id: '7'
+  }, {
+    key: 'Elephant',
+    name: 'Elephant',
+    id: '7'
+  }];
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _useState3 = useState(unfilteredItems),
+    _useState4 = _slicedToArray(_useState3, 2),
+    scrollableListViewItems = _useState4[0],
+    setScrollableListViewItems = _useState4[1];
+  var filterItems = function filterItems(input) {
+    var filtered = _filterInstanceProperty(unfilteredItems).call(unfilteredItems, function (obj) {
+      var _context;
+      return _includesInstanceProperty(_context = obj.name.toLowerCase()).call(_context, input.toLowerCase());
+    });
+    setScrollableListViewItems(filtered);
+  };
+  var onChangeInput = function onChangeInput(input) {
+    setValue(input);
+    filterItems(input);
+  };
+  return ___EmotionJSX(Box, null, ___EmotionJSX(SearchField, {
+    value: value,
+    onChange: onChangeInput
+  }), ___EmotionJSX(ScrollBox, {
+    maxHeight: 450,
+    hasShadows: true
+  }, ___EmotionJSX(ListView, {
+    items: scrollableListViewItems
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, ___EmotionJSX(ListViewItem, {
+      data: {
+        icon: FormSelectIcon,
+        text: item.name
+      }
+    }, ___EmotionJSX(ListViewItemEditButton, null), ___EmotionJSX(ListViewItemMenu, null, ___EmotionJSX(Item, {
+      key: "enable"
+    }, "Enable user"), ___EmotionJSX(Item, {
+      key: "disable"
+    }, "Disable user"), ___EmotionJSX(Item, {
+      key: "delete"
+    }, "Delete user"))));
+  })));
+};

package/lib/experimental/recipes/items.js

@@ -0,0 +1,68 @@
+import AccountIcon from '@pingux/mdi-react/AccountIcon';
+import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
+export var items = [{
+  email: 'dburkitt5@columbia.edu',
+  firstName: 'Nicola',
+  lastName: 'Burkitt',
+  icon: AccountIcon
+}, {
+  email: 'idixie2@elegantthemes.com',
+  firstName: 'Cacilia',
+  lastName: 'Dixie',
+  icon: FormSelectIcon
+}, {
+  email: 'dfowler0@rambler.ru',
+  firstName: 'Stavro',
+  lastName: 'Fowler',
+  icon: AccountIcon
+}, {
+  email: 'jgolde8@jimdo.com',
+  firstName: 'Celisse',
+  lastName: 'Golde',
+  icon: FormSelectIcon
+}, {
+  email: 'shearst9@answers.com',
+  firstName: 'Jeth',
+  lastName: 'Hearst',
+  icon: AccountIcon
+}, {
+  email: 'ajinaa@mapquest.com',
+  firstName: 'Kaycee',
+  lastName: 'Jina',
+  icon: AccountIcon
+}, {
+  email: 'vmalster4@biblegateway.com',
+  firstName: 'Lorry',
+  lastName: 'Malster',
+  icon: AccountIcon
+}, {
+  email: 'yphipp6@yellowpages.com',
+  firstName: 'Stanley',
+  lastName: 'Phipp',
+  icon: AccountIcon
+}, {
+  email: 'mskilbeck3@bbc.co.uk',
+  firstName: 'Gradey',
+  lastName: 'Skilbeck',
+  icon: AccountIcon
+}, {
+  email: 'dstebbing1@msu.edu',
+  firstName: 'Marnia',
+  lastName: 'Stebbing',
+  icon: AccountIcon
+}, {
+  email: 'lsterley7@lulu.com',
+  firstName: 'Joshua',
+  lastName: 'Sterley',
+  icon: AccountIcon
+}, {
+  email: 'luttleyb@hugedomains.com',
+  firstName: 'Jarrod',
+  lastName: 'Uttley',
+  icon: AccountIcon
+}, {
+  email: 'lidelc@yelp.com',
+  firstName: 'Andromache',
+  lastName: 'Idel',
+  icon: AccountIcon
+}];

package/lib/index.js

@@ -83,8 +83,6 @@ export { default as ListItem } from './components/ListItem';
 export * from './components/ListItem';
 export { default as ListView } from './components/ListView';
 export * from './components/ListView';
-export { default as ListViewItem } from './components/ListViewItem';
-export * from './components/ListViewItem';
 export { default as Loader } from './components/Loader';
 export * from './components/Loader';
 export { default as Menu } from './components/Menu';
@@ -166,4 +164,10 @@ export { default as DataTable } from './components/DataTable';
 export * from './components/DataTable';
 export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from 'react-aria';
 export { Item, Section, useOverlayTriggerState } from 'react-stately';
-export { TableBody as DataTableBody, Cell as DataTableCell, Column as DataTableColumn, TableHeader as DataTableHeader, Row as DataTableRow } from 'react-stately';
+export { TableBody as DataTableBody, Cell as DataTableCell, Column as DataTableColumn, TableHeader as DataTableHeader, Row as DataTableRow } from 'react-stately';
+
+// Experimental
+export { default as ListViewItemEditButton } from './experimental/ListViewItem/controls/ListViewItemEditButton';
+export { default as ListViewItemMenu } from './experimental/ListViewItem/controls/ListViewItemMenu';
+export { default as ListViewItemSwitchField } from './experimental/ListViewItem/controls/ListViewItemSwitchField';
+export { default as ListViewItem } from './experimental/ListViewItem/ListViewItem';

package/lib/utils/docUtils/ariaAttributes.js

@@ -14,7 +14,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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 omit from 'lodash/omit';
 import PropTypes from 'prop-types';
-var descriptions = {
+export var descriptions = {
   ariaControls: 'Identifies the element (or elements) whose contents or presence are controlled by the current element.',
   ariaDescribedby: 'Identifies the element (or elements) that describes the object.',
   ariaDetails: 'Identifies the element (or elements) that provide a detailed, extended description for the object.',

package/lib/utils/docUtils/docArgTypes.js

@@ -0,0 +1,29 @@
+var _context;
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+export var docArgTypes = {
+  bool: 'boolean',
+  node: 'node',
+  string: 'string',
+  stringArray: 'string[]',
+  text: 'text',
+  func: 'func',
+  object: 'object'
+};
+export var stringOrStringArray = _concatInstanceProperty(_context = "".concat(docArgTypes.string, " | ")).call(_context, docArgTypes.stringArray);
+export var booleanArg = {
+  control: {
+    type: docArgTypes.bool
+  },
+  defaultValue: false,
+  type: {
+    summary: docArgTypes.bool
+  }
+};
+export var funcArg = {
+  control: {
+    type: null
+  },
+  type: {
+    summary: docArgTypes.func
+  }
+};

package/lib/utils/docUtils/hoverProps.js

@@ -11,6 +11,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import PropTypes from 'prop-types';
 var descriptions = {
+  isHovered: 'If the item is hovered',
   onHoverStart: 'Handler that is called when a hover interaction starts.',
   onHoverEnd: 'Handler that is called when a hover interaction ends.',
   onHoverChange: 'Handler that is called when the hover state changes.'
@@ -27,6 +28,9 @@ export var baseDocSettings = {
   }
 };
 export var onHoverArgTypes = {
+  isHovered: _objectSpread({
+    description: descriptions.isHovered
+  }, baseDocSettings),
   'onHoverStart': _objectSpread({
     description: descriptions.onHoverStart
   }, baseDocSettings),
@@ -38,7 +42,8 @@ export var onHoverArgTypes = {
   }, baseDocSettings)
 };
 export var onHoverPropTypes = {
-  onHoverStart: PropTypes.func,
+  isHovered: PropTypes.bool,
+  onHoverChange: PropTypes.func,
   onHoverEnd: PropTypes.func,
-  onHoverChange: PropTypes.func
+  onHoverStart: PropTypes.func
 };

package/package.json

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