@pingux/astro 2.0.0-alpha.5 → 2.0.0-alpha.7

package/lib/components/ListItem/ListItem.stories.js

@@ -1,12 +1,21 @@
-import React from 'react';
+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 _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+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; }
+import React, { useState } from 'react';
 import AccountIcon from 'mdi-react/AccountIcon';
 import MoreVertIcon from 'mdi-react/MoreVertIcon';
-import Box from '../Box';
-import Icon from '../Icon';
-import IconButton from '../IconButton';
-import Separator from '../Separator';
-import Text from '../Text';
-import ListItem from './ListItem';
+import { Box, Icon, IconButton, ListItem, Separator, Text } from '../../index';
+import { onHoverArgTypes } from '../../utils/devUtils/props/hoverProps';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/ListItem',
@@ -17,7 +26,8 @@ export default {
         type: 'code'
       }
     }
-  }
+  },
+  argTypes: _objectSpread({}, onHoverArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Separator, {
@@ -74,4 +84,54 @@ export var WithSubtitle = function WithSubtitle(args) {
   })))), ___EmotionJSX(Separator, {
     margin: 0
   }));
+};
+export var WithHoverHandlers = function WithHoverHandlers(args) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isHovered = _useState2[0],
+    setIsHovered = _useState2[1];
+  var handleHoverChange = function handleHoverChange() {
+    setIsHovered(function (previousIsHovered) {
+      return !previousIsHovered;
+    });
+  };
+  var sx = function sx(shouldTranslate) {
+    return {
+      transform: "".concat(shouldTranslate ? 'translate(15px)' : 'translate(0)')
+    };
+  };
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Separator, {
+    margin: 0
+  }), ___EmotionJSX(ListItem, _extends({}, args, {
+    onHoverEnd: handleHoverChange,
+    onHoverStart: handleHoverChange
+  }), ___EmotionJSX(Box, {
+    isRow: true,
+    mr: "auto",
+    alignSelf: "center"
+  }, ___EmotionJSX(Icon, {
+    icon: AccountIcon,
+    alignSelf: "center",
+    mr: "sm",
+    color: "accent.40",
+    size: 32
+  }), ___EmotionJSX(Box, {
+    sx: sx(isHovered)
+  }, ___EmotionJSX(Text, {
+    variant: "itemTitle"
+  }, "Fons Vernall"), ___EmotionJSX(Text, {
+    variant: "itemSubtitle",
+    mt: 1
+  }, "fvernall0@google.it"))), ___EmotionJSX(Box, {
+    isRow: true,
+    alignSelf: "center"
+  }, ___EmotionJSX(IconButton, {
+    size: 26
+  }, ___EmotionJSX(Icon, {
+    icon: MoreVertIcon,
+    size: 20,
+    color: "neutral.20"
+  })))), ___EmotionJSX(Separator, {
+    margin: 0
+  }));
 };

package/lib/components/ListItem/ListItem.test.js

@@ -1,16 +1,20 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
 import ListItem from './ListItem';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testTitle = 'Test Title';
+var TEST_ID = 'ListItem-testid';
 var defaultProps = {
   title: testTitle
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(ListItem, _extends({}, defaultProps, props)));
+  return render(___EmotionJSX(ListItem, _extends({}, defaultProps, props, {
+    "data-testid": TEST_ID
+  })));
 };
 
 // Need to be added to each test file to test accessibility using axe.
@@ -22,15 +26,46 @@ axeTest(getComponent, {
     }
   }
 });
-test('renders ListItem component title', function () {
-  getComponent();
-  var title = screen.getByRole('listitem');
-  expect(title).toBeInTheDocument();
-});
-test('renders ListItem component with selected state', function () {
-  getComponent({
-    isSelected: true
+describe('ListItem', function () {
+  test('renders ListItem component title', function () {
+    getComponent();
+    var title = screen.getByTestId(TEST_ID);
+    expect(title).toBeInTheDocument();
+  });
+  test('renders ListItem component with selected state', function () {
+    getComponent({
+      isSelected: true
+    });
+    var title = screen.getByTestId(TEST_ID);
+    expect(title).toHaveClass('is-selected');
+  });
+  describe('when hovered', function () {
+    var onHoverTest;
+    beforeEach(function () {
+      onHoverTest = jest.fn();
+    });
+    test('it calls the onHoverChange callback', function () {
+      getComponent({
+        onHoverChange: onHoverTest
+      });
+      userEvent.hover(screen.getByTestId(TEST_ID));
+      expect(onHoverTest).toHaveBeenCalled();
+    });
+    test('it calls the onHoverStart callback', function () {
+      getComponent({
+        onHoverStart: onHoverTest
+      });
+      userEvent.hover(screen.getByTestId(TEST_ID));
+      expect(onHoverTest).toHaveBeenCalled();
+    });
+    test('it calls the onHoverEnd callback when unhovered', function () {
+      getComponent({
+        onHoverEnd: onHoverTest
+      });
+      var listItem = screen.getByTestId(TEST_ID);
+      userEvent.hover(listItem);
+      userEvent.unhover(listItem);
+      expect(onHoverTest).toHaveBeenCalled();
+    });
   });
-  var title = screen.getByRole('listitem');
-  expect(title).toHaveClass('is-selected');
 });

package/lib/components/ListView/ListView.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 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 = ["disabledKeys", "loadingState", "onLoadMore", "onSelectionChange", "selectionMode", "selectionStyle"];
+var _excluded = ["disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onSelectionChange", "selectedKeys", "selectionMode", "selectionStyle"];
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 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; }
@@ -69,9 +69,12 @@ export function useListLayout(state) {
 
 var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
   var disabledKeys = props.disabledKeys,
+    _props$isHoverable = props.isHoverable,
+    isHoverable = _props$isHoverable === void 0 ? true : _props$isHoverable,
     loadingState = props.loadingState,
     onLoadMore = props.onLoadMore,
     onSelectionChange = props.onSelectionChange,
+    selectedKeys = props.selectedKeys,
     selectionMode = props.selectionMode,
     selectionStyle = props.selectionStyle,
     others = _objectWithoutProperties(props, _excluded);
@@ -131,6 +134,7 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
   }), function (type, item) {
     if (type === 'item') {
       return ___EmotionJSX(ListViewItem, {
+        isHoverable: isHoverable,
         item: item
       });
     }
@@ -155,6 +159,8 @@ ListView.propTypes = {
   items: isIterableProp,
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: PropTypes.string,
+  /** Whether ListView should handle hover state (defaults to true) */
+  isHoverable: PropTypes.bool,
   /** Defines a string value that labels the current element. */
   'aria-label': PropTypes.string,
   /** Identifies the element (or elements) that labels the current element. */

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

@@ -22,9 +22,8 @@ import isChromatic from 'chromatic/isChromatic';
 import CreateIcon from 'mdi-react/CreateIcon';
 import FormSelectIcon from 'mdi-react/FormSelectIcon';
 import MoreVertIcon from 'mdi-react/MoreVertIcon';
-import { Box, Icon, IconButton, Text } from '../..';
+import { Box, Icon, IconButton, ListView, Text } from '../../index';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
-import ListView from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/ListView',

package/lib/components/ListViewItem/ListViewItem.js

@@ -16,6 +16,7 @@ var ListViewItem = function ListViewItem(props) {
     _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,
     className = props.className;
   var dataId = item.props['data-id'];
   var _useContext = useContext(ListViewContext),
@@ -44,7 +45,7 @@ var ListViewItem = function ListViewItem(props) {
   var isSelected = state.selectionManager.isSelected(item.key);
   var mergedProps = mergeProps(raRowProps, hoverProps, focusWithinProps, focusProps);
   var _useStatusClasses = useStatusClasses(className, {
-      isHovered: isSelectable && isHovered,
+      isHovered: isSelectable && isHovered && isHoverable,
       isSelected: isSelected,
       isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin,
       hasSeparator: hasSeparator,
@@ -81,6 +82,7 @@ ListViewItem.propTypes = {
       hasSeparator: PropTypes.bool,
       hasInsetSeparator: PropTypes.bool
     })
-  })
+  }),
+  isHoverable: PropTypes.bool
 };
 export default ListViewItem;

package/lib/components/ListViewItem/ListViewItem.styles.js

@@ -17,6 +17,9 @@ var container = {
   justifyContent: 'center',
   bg: 'accent.99',
   outline: 'none',
+  '& li': {
+    bg: 'white'
+  },
   '&.is-selected': {
     bg: 'white'
   },
@@ -29,12 +32,15 @@ var container = {
   },
   '&.has-separator': {
     borderBottom: '1px solid',
-    borderBottomColor: 'line.hairline'
+    borderBottomColor: 'line.light'
   }
 };
 var linkedViewContainer = _objectSpread(_objectSpread({}, container), {}, {
   minHeight: '75px',
   height: '76px',
+  '& li': {
+    bg: 'white'
+  },
   '&.has-inset-separator': {
     '&:after': {
       content: '""',
@@ -43,7 +49,7 @@ var linkedViewContainer = _objectSpread(_objectSpread({}, container), {}, {
       right: 0,
       bottom: 0,
       borderBottom: '1px solid',
-      borderBottomColor: 'line.hairline'
+      borderBottomColor: 'line.light'
     },
     '&.is-focused': {
       '&:after': {

package/lib/components/Loader/Loader.stories.js

@@ -1,8 +1,8 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
+import { Loader } from '../../index';
 import { flatColorList } from '../../styles/colors';
-import Loader from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Loader',

package/lib/components/Menu/Menu.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 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 = ["isDisabled", "onAction", "onSelectionChange", "isNotFocusedOnHover"];
+var _excluded = ["isDisabled", "isNotFocusedOnHover", "onAction", "onHoverChange", "onHoverEnd", "onHoverStart", "onSelectionChange"];
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 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; }
@@ -17,11 +17,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
 import { mergeProps, useFocusRing, useMenu } from 'react-aria';
 import { useTreeState } from 'react-stately';
+import { useHover } from '@react-aria/interactions';
 import { useSyncRef } from '@react-aria/utils';
 import PropTypes from 'prop-types';
 import { MenuContext } from '../../context/MenuContext';
 import { usePropWarning } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
+import { onHoverPropTypes } from '../../utils/devUtils/props/hoverProps';
 import Box from '../Box';
 import MenuItem from '../MenuItem';
 
@@ -35,12 +37,21 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var Menu = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
   var isDisabled = props.isDisabled,
+    isNotFocusedOnHover = props.isNotFocusedOnHover,
     onAction = props.onAction,
+    onHoverChange = props.onHoverChange,
+    onHoverEnd = props.onHoverEnd,
+    onHoverStart = props.onHoverStart,
     onSelectionChange = props.onSelectionChange,
-    isNotFocusedOnHover = props.isNotFocusedOnHover,
     others = _objectWithoutProperties(props, _excluded);
   var contextProps = useContext(MenuContext);
   var completeProps = _objectSpread({}, mergeProps(contextProps, props));
+  var _useHover = useHover({
+      onHoverChange: onHoverChange,
+      onHoverEnd: onHoverEnd,
+      onHoverStart: onHoverStart
+    }),
+    hoverProps = _useHover.hoverProps;
   var state = useTreeState(completeProps);
   var menuRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
@@ -63,7 +74,7 @@ var Menu = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: menuRef,
     variant: "menu",
     "aria-orientation": ORIENTATION.VERTICAL
-  }, others, mergeProps(focusProps, menuProps)), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
+  }, others, mergeProps(focusProps, menuProps, hoverProps)), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
     return ___EmotionJSX(MenuItem, {
       key: item.key,
       item: item,
@@ -75,7 +86,7 @@ var Menu = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   }));
 });
-Menu.propTypes = {
+Menu.propTypes = _objectSpread({
   /** The type of selection that is allowed. */
   selectionMode: PropTypes.oneOf(['none', 'single', 'multiple']),
   /**
@@ -126,7 +137,7 @@ Menu.propTypes = {
    * extended description for the object.
    */
   'aria-details': PropTypes.string
-};
+}, onHoverPropTypes);
 Menu.defaultProps = {
   selectionMode: 'none',
   isDisabled: false

package/lib/components/Menu/Menu.stories.js

@@ -1,9 +1,20 @@
+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 _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+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; }
 import React from 'react';
 import { Item } from 'react-stately';
-import Text from '../Text';
-import Menu from '.';
+import { Menu, Text } from '../../index';
+import { onHoverArgTypes } from '../../utils/devUtils/props/hoverProps';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Menu',
@@ -18,7 +29,7 @@ export default {
       }
     }
   },
-  argTypes: {
+  argTypes: _objectSpread({
     selectionMode: {},
     isDisabled: {},
     isNotFocusedOnHover: {},
@@ -62,7 +73,7 @@ export default {
         type: 'none'
       }
     }
-  }
+  }, onHoverArgTypes)
 };
 export var Default = function Default(_ref) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));

package/lib/components/Messages/Messages.stories.js

@@ -18,7 +18,7 @@ import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values"
 import React, { useEffect, useReducer, useState } from 'react';
 import { Item } from 'react-stately';
 import AccountIcon from 'mdi-react/AccountIcon';
-import { Box, Button, Messages } from '../..';
+import { Box, Button, Messages } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { messagesReducerStory as messagesReducer, multiMessagesReducerStory as multiMessagesReducer } from './index';
 import { jsx as ___EmotionJSX } from "@emotion/react";

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -189,7 +189,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   useEffect(function () {
     if (onOpenChange) onOpenChange(isOpen);
   }, [isOpen]);
-  var addNewChipFromInput = function addNewChipFromInput(inputValue) {
+  var addNewBadgeFromInput = function addNewBadgeFromInput(inputValue) {
     var _context3, _context4;
     var key = inputValue;
     if (state.selectionManager.isSelected(key)) {
@@ -220,7 +220,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     if (!hasCustomValue && filteredItems.length === 1) {
       selectTheOnlyFilteredItem();
     } else if (hasCustomValue) {
-      addNewChipFromInput(filterString);
+      addNewBadgeFromInput(filterString);
     }
   };
 
@@ -243,7 +243,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
             if (_key === '') {
               return;
             }
-            addNewChipFromInput(e.target.value);
+            addNewBadgeFromInput(e.target.value);
           }
           break;
         }
@@ -315,7 +315,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     }
     return null;
   });
-  var multivaluesFieldChip = function multivaluesFieldChip(item) {
+  var multivaluesFieldBadge = function multivaluesFieldBadge(item) {
     return ___EmotionJSX(Badge, _extends({
       key: item.key,
       role: "presentation",
@@ -323,7 +323,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       bg: "active",
       label: item.name,
       slots: item.slots
-    }, item.chipProps), ___EmotionJSX(IconButton, _extends({
+    }, item.badgeProps), ___EmotionJSX(IconButton, _extends({
       "aria-label": "delete",
       onPress: function onPress() {
         return deleteItem(item.key);
@@ -341,7 +341,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       return el.key === key;
     });
     if (item) {
-      return multivaluesFieldChip(item);
+      return multivaluesFieldBadge(item);
     }
     return null;
   }));

package/lib/components/MultivaluesField/MultivaluesField.stories.js

@@ -12,7 +12,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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; }
 import React, { useState } from 'react';
-import { Box, Icon, Item, MultivaluesField, OverlayProvider } from '../..';
+import { Box, Icon, Item, MultivaluesField, OverlayProvider } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
@@ -208,12 +208,12 @@ var itemsWithSlots = [{
   id: 1,
   name: 'Aardvark',
   key: 'Aardvark',
-  chipProps: {
+  badgeProps: {
     variant: 'itemBadgeWithSlot',
     bg: 'white'
   },
   buttonProps: {
-    variant: 'chipWithSlotDeleteButton'
+    variant: 'badgeDeleteButton'
   },
   slots: {
     leftIcon: ___EmotionJSX(Icon, {
@@ -225,12 +225,12 @@ var itemsWithSlots = [{
   id: 2,
   name: 'Kangaroo',
   key: 'Kangaroo',
-  chipProps: {
+  badgeProps: {
     variant: 'itemBadgeWithSlot',
     bg: 'white'
   },
   buttonProps: {
-    variant: 'chipWithSlotDeleteButton'
+    variant: 'badgeDeleteButton'
   },
   slots: {
     leftIcon: ___EmotionJSX(Icon, {
@@ -242,12 +242,12 @@ var itemsWithSlots = [{
   id: 3,
   name: 'Snake',
   key: 'Snake',
-  chipProps: {
+  badgeProps: {
     variant: 'itemBadgeWithSlot',
     bg: 'white'
   },
   buttonProps: {
-    variant: 'chipWithSlotDeleteButton'
+    variant: 'badgeDeleteButton'
   },
   slots: {
     leftIcon: ___EmotionJSX(Icon, {
@@ -473,7 +473,7 @@ CustomValues.argTypes = {
     defaultValue: 'non-restrictive'
   }
 };
-export var IconSlotsInChip = function IconSlotsInChip(args) {
+export var IconSlotsInBadge = function IconSlotsInBadge(args) {
   var _useState19 = useState(false),
     _useState20 = _slicedToArray(_useState19, 2),
     isOpen = _useState20[0],