@pingux/astro 1.17.0-alpha.1 → 1.17.0-alpha.10

package/lib/components/CollapsiblePanel/CollapsiblePanel.stories.js

@@ -1,14 +1,32 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import React, { useRef } from 'react';
+import _someInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/some";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React, { useRef, useState, useMemo } from 'react';
 import AccountGroupIcon from 'mdi-react/AccountGroupIcon';
-import Clear from 'mdi-react/CloseIcon';
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
-import FilterIcon from 'mdi-react/FilterIcon';
+import CheckIcon from 'mdi-react/CheckIcon';
+import Clear from 'mdi-react/CloseIcon';
 import SearchIcon from 'mdi-react/SearchIcon';
 import AccountIcon from 'mdi-react/AccountIcon';
 import CollapsiblePanel from './CollapsiblePanel';
 import { useOverlayPanelState } from '../../hooks';
-import { Breadcrumbs, Box, Button, Chip, ListView, Item, Icon, IconButton, CollapsiblePanelItem, OverlayPanel, OverlayProvider, SearchField, Text } from '../../index';
+import { Breadcrumbs, Box, Button, CheckboxField, Chip, ListView, Item, Icon, IconButton, CollapsiblePanelItem, OverlayPanel, OverlayProvider, SearchField, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'CollapsiblePanel',
@@ -34,13 +52,14 @@ export default {
     }
   }
 };
-var items = [{
+var data = [{
   id: '1',
   icon: 'Group',
   key: 'Avengers',
   name: 'Avengers',
   subtitle: 'Default',
-  chipValue: '25'
+  chipValue: '25',
+  isDefaultSelected: true
 }, {
   id: '2',
   icon: 'Group',
@@ -61,7 +80,8 @@ var items = [{
   key: 'Digital Investors',
   name: 'Digital Investors',
   subtitle: 'N America',
-  chipValue: '12'
+  chipValue: '12',
+  isDefaultSelected: true
 }, {
   id: '5',
   icon: 'Group',
@@ -98,33 +118,45 @@ var items = [{
   subtitle: '',
   chipValue: '29'
 }];
-var mockData = [{
-  id: '10',
-  key: 'Avengers',
-  name: 'Avengers'
-}, {
-  id: '11',
-  key: 'Digital Investors',
-  name: 'Digital Investors'
-}, {
-  id: '12',
-  key: 'A very long title as well',
-  name: 'A very long title as well'
-}];
-
-var changeSelection = function changeSelection(selected) {
-  console.log(selected);
-};
-
 export var Default = function Default(args) {
   return ___EmotionJSX(CollapsiblePanel, args);
 };
 export var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args) {
+  var _useState = useState(data),
+      _useState2 = _slicedToArray(_useState, 2),
+      items = _useState2[0],
+      setItems = _useState2[1];
+
   var _useOverlayPanelState = useOverlayPanelState(),
       state = _useOverlayPanelState.state,
       onClose = _useOverlayPanelState.onClose;
 
   var triggerRef = useRef();
+  var selectedItems = useMemo(function () {
+    var _context;
+
+    return _sortInstanceProperty(_context = _filterInstanceProperty(items).call(items, function (item) {
+      return item.isDefaultSelected || item.isSelected;
+    }) // sort elements to display "default selected" at first place
+    ).call(_context, function (a, b) {
+      return Number(!!b.isDefaultSelected) - Number(!!a.isDefaultSelected);
+    });
+  }, [items]);
+
+  var changeSelection = function changeSelection(key) {
+    setItems(function (prevItems) {
+      return _mapInstanceProperty(prevItems).call(prevItems, function (el) {
+        if (el.key === key) {
+          return _objectSpread(_objectSpread({}, el), {}, {
+            isSelected: !el.isSelected
+          });
+        }
+
+        return el;
+      });
+    });
+  };
+
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
     ref: triggerRef,
     onPress: state.open
@@ -181,7 +213,10 @@ export var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args)
     pt: "25px"
   }, ___EmotionJSX(Box, {
     isRow: true,
-    justifyContent: "space-between"
+    justifyContent: "space-between",
+    sx: {
+      marginTop: '5px'
+    }
   }, ___EmotionJSX(Box, {
     width: "100%"
   }, ___EmotionJSX(SearchField, {
@@ -190,11 +225,13 @@ export var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args)
     placeholder: "Search",
     width: "100%",
     mt: "0px",
-    mr: "sm"
+    mr: "sm",
+    mb: "xs"
   }), ___EmotionJSX(ListView, {
     items: items,
     style: {
-      width: '108%'
+      width: '100%',
+      outline: 'none'
     }
   }, function (item) {
     return ___EmotionJSX(Item, {
@@ -202,8 +239,12 @@ export var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args)
       textValue: item.name,
       "data-id": item.key,
       listItemProps: {
+        isRow: true,
         sx: {
           bg: 'white',
+          width: '100%',
+          justifyContent: 'space-between',
+          alignItems: 'center',
           '&.is-hovered': {
             bg: 'accent.99'
           }
@@ -233,9 +274,46 @@ export var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args)
       }
     })), ___EmotionJSX(Text, {
       variant: "listSubtitle"
-    }, item.subtitle))));
+    }, item.subtitle))), item.isDefaultSelected ? ___EmotionJSX(Box, {
+      isRow: true,
+      sx: {
+        border: '1px solid',
+        borderColor: 'neutral.80',
+        borderRadius: 5,
+        minHeight: 22,
+        justifyContent: 'center',
+        alignItems: 'center',
+        p: 'xs',
+        maxWidth: '50%'
+      }
+    }, ___EmotionJSX(Icon, {
+      icon: CheckIcon,
+      color: "neutral.20",
+      size: 13,
+      sx: {
+        flexShrink: 0
+      }
+    }), ___EmotionJSX(Text, {
+      sx: {
+        fontSize: 'sm',
+        pl: 'xs',
+        maxHeight: 32,
+        overflow: 'hidden'
+      }
+    }, "Added by Filter")) : ___EmotionJSX(CheckboxField, {
+      controlProps: {
+        color: 'neutral.10',
+        'aria-label': 'Select'
+      },
+      onChange: function onChange() {
+        return changeSelection(item.key);
+      },
+      isSelected: _someInstanceProperty(selectedItems).call(selectedItems, function (el) {
+        return el.key === item.key;
+      })
+    }));
   })), ___EmotionJSX(CollapsiblePanel, _extends({
-    items: mockData,
+    items: selectedItems,
     onSelectionChange: changeSelection,
     selectedFilterCount: "1000+"
   }, args), function (item) {
@@ -245,7 +323,11 @@ export var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args)
       "data-id": item.key
     }, ___EmotionJSX(CollapsiblePanelItem, {
       text: item.name,
-      icon: FilterIcon
+      icon: item.isDefaultSelected ? CheckIcon : Clear,
+      onPress: function onPress() {
+        return changeSelection(item.key);
+      },
+      isDefaultSelected: item.isDefaultSelected
     }));
   })))));
 };

package/lib/components/CollapsiblePanelContainer/CollapsiblePanelContainer.js

@@ -1,20 +1,6 @@
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 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 = ["selectedFilterCount", "className", "children", "closeAriaLabel", "isDefaultOpen", "isOpen", "onOpenChange", "openAriaLabel"];
-
-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, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
@@ -90,7 +76,7 @@ var CollapsiblePanelContainer = /*#__PURE__*/forwardRef(function (props, ref) {
     "data-testid": "collapsible-panel-badge",
     margin: "auto",
     selectedFilterCount: selectedFilterCount
-  })), state.isOpen && _objectSpread({}, children));
+  })), children);
 });
 CollapsiblePanelContainer.propTypes = {
   /** Amount of selected items indicator. */

package/lib/components/CollapsiblePanelContainer/CollapsiblePanelContainer.test.js

@@ -55,13 +55,13 @@ test('updates aria label when button is clicked', function () {
     state: state
   });
   var button = screen.getByTestId(collapsiblePanelButtonId);
+  var container = screen.getByTestId(testId);
   userEvent.click(button);
-  var collapsiblePanel = screen.queryByTestId(collapsiblePanelId);
   expect(button).toHaveAttribute('aria-label', 'Close filter menu?');
-  expect(collapsiblePanel).toBeInTheDocument();
+  expect(container).toHaveClass('is-open');
   userEvent.click(button);
   expect(button).toHaveAttribute('aria-label', 'Open filter menu?');
-  expect(collapsiblePanel).not.toBeInTheDocument();
+  expect(container).not.toHaveClass('is-open');
 });
 test('shows children when isOpen is true', function () {
   getComponent({
@@ -73,9 +73,9 @@ test('shows children when isOpen is true', function () {
 test('should hide children when pressing the escape key', function () {
   getComponent();
   var button = screen.getByTestId(collapsiblePanelButtonId);
+  var container = screen.getByTestId(testId);
   userEvent.click(button);
-  var collapsiblePanel = screen.queryByTestId(collapsiblePanelId);
-  expect(collapsiblePanel).toBeInTheDocument();
+  expect(container).toHaveClass('is-open');
   userEvent.type(button, '{esc}');
-  expect(collapsiblePanel).not.toBeInTheDocument();
+  expect(container).not.toHaveClass('is-open');
 });

package/lib/components/CollapsiblePanelItem/CollapsiblePanelItem.js

@@ -23,8 +23,8 @@ var CollapsiblePanelItem = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "collapsiblePanellItem"
   }, text), iconElement && (isDefaultSelected ? iconElement : ___EmotionJSX(IconButton, {
     sx: {
-      width: 13,
-      height: 13,
+      width: 20,
+      height: 20,
       alignSelf: 'auto',
       '& path': {
         fill: 'inherit'

package/lib/components/Link/Link.test.js

@@ -43,6 +43,9 @@ test('link shows focus status', function () {
   userEvent.tab();
   expect(link).toHaveFocus();
   expect(link).toHaveClass('is-focused');
+  userEvent.tab();
+  expect(link).not.toHaveFocus();
+  expect(link).not.toHaveClass('is-focused');
 });
 test('link shows disabled status', function () {
   // Needs href to have a tabindex

package/lib/components/ListView/ListView.js

@@ -149,6 +149,7 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
 
   layout.isLoading = isLoading;
   var focusedItem = gridCollection.getFirstKey();
+  delete gridProps.onMouseDown;
   return ___EmotionJSX(ListViewContext.Provider, {
     value: {
       state: state,

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

@@ -1,5 +1,5 @@
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import { Box, Item, MultivaluesField, OverlayProvider } from '../..';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -7,7 +7,9 @@ export default {
   title: 'Form/MultivaluesField',
   component: MultivaluesField,
   argTypes: {
-    direction: {},
+    direction: {
+      defaultValue: 'bottom'
+    },
     hasAutoFocus: {},
     hasNoStatusIndicator: {},
     isDisabled: {},
@@ -89,7 +91,27 @@ var items = [{
   name: 'Shark',
   key: 'Shark'
 }];
+
+var setOverlayStyle = function setOverlayStyle(direction, isOpen, mr, ml, mt) {
+  return {
+    marginRight: direction === 'right' && isOpen ? mr : 0,
+    marginLeft: direction === 'left' && isOpen ? ml : 0,
+    marginTop: direction === 'top' && isOpen ? mt : 0
+  };
+};
+
 export var Default = function Default(args) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
   return (// const items = [
     // { id: 1, name: 'Aardvark', key: 'Aardvark' },
     // { id: 2, name: 'Kangaroo', key: 'Kangaroo' },
@@ -99,9 +121,14 @@ export var Default = function Default(args) {
     // { id: 6, name: 'Orangutan', key: 'Orangutan' },
     // { id: 7, name: 'Shark', key: 'Shark' },
     // ];
-    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({
+    ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+    , {
+      style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+    }, ___EmotionJSX(MultivaluesField, _extends({
       items: items
-    }, args), function (item) {
+    }, args, {
+      onOpenChange: onOpenChange
+    }), function (item) {
       return ___EmotionJSX(Item, {
         key: item.key,
         "data-id": item.name
@@ -110,10 +137,26 @@ export var Default = function Default(args) {
   );
 };
 export var WithCustomValues = function WithCustomValues(args) {
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isOpen = _useState4[0],
+      setIsOpen = _useState4[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, ___EmotionJSX(MultivaluesField, _extends({
     items: items,
     mode: "non-restrictive"
-  }, args), function (item) {
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.key,
       "data-id": item.name
@@ -126,10 +169,26 @@ WithCustomValues.argTypes = {
   }
 };
 export var WithDisabledKeys = function WithDisabledKeys(args) {
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isOpen = _useState6[0],
+      setIsOpen = _useState6[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, ___EmotionJSX(MultivaluesField, _extends({
     disabledKeys: ['Aardvark'],
     items: items
-  }, args), function (item) {
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.key,
       "data-id": item.name
@@ -137,10 +196,26 @@ export var WithDisabledKeys = function WithDisabledKeys(args) {
   }));
 };
 export var Uncontrolled = function Uncontrolled(args) {
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      isOpen = _useState8[0],
+      setIsOpen = _useState8[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, ___EmotionJSX(MultivaluesField, _extends({
     defaultSelectedKeys: ['Aardvark', 'Snake'],
     items: items
-  }, args), function (item) {
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.key,
       "data-id": item.name
@@ -148,17 +223,32 @@ export var Uncontrolled = function Uncontrolled(args) {
   }));
 };
 export var Controlled = function Controlled(args) {
-  var _useState = useState(['Aardvark', 'Snake']),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedKeys = _useState2[0],
-      setSelectedKeys = _useState2[1];
+  var _useState9 = useState(['Aardvark', 'Snake']),
+      _useState10 = _slicedToArray(_useState9, 2),
+      selectedKeys = _useState10[0],
+      setSelectedKeys = _useState10[1];
+
+  var _useState11 = useState(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      isOpen = _useState12[0],
+      setIsOpen = _useState12[1];
+
+  var direction = args.direction;
 
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, ___EmotionJSX(MultivaluesField, _extends({
     label: "Field Label"
   }, args, {
     items: items,
     onSelectionChange: setSelectedKeys,
-    selectedKeys: selectedKeys
+    selectedKeys: selectedKeys,
+    onOpenChange: onOpenChange
   }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.key,
@@ -167,6 +257,17 @@ export var Controlled = function Controlled(args) {
   }));
 };
 export var WithCustomSize = function WithCustomSize(args) {
+  var _useState13 = useState(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      isOpen = _useState14[0],
+      setIsOpen = _useState14[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
   return ___EmotionJSX(Box, {
     sx: {
       width: '100%',
@@ -175,9 +276,14 @@ export var WithCustomSize = function WithCustomSize(args) {
     }
   }, ___EmotionJSX(Box, {
     width: 300
-  }, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({
+  }, ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '25%', '25%', '75%')
+  }, ___EmotionJSX(MultivaluesField, _extends({
     items: items
-  }, args), function (item) {
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.key,
       "data-id": item.name
@@ -185,10 +291,26 @@ export var WithCustomSize = function WithCustomSize(args) {
   }))));
 };
 export var WithReadOnlyValues = function WithReadOnlyValues(args) {
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({
+  var _useState15 = useState(false),
+      _useState16 = _slicedToArray(_useState15, 2),
+      isOpen = _useState16[0],
+      setIsOpen = _useState16[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, ___EmotionJSX(MultivaluesField, _extends({
     readOnlyKeys: ['Aardvark', 'Snake'],
     items: items
-  }, args), function (item) {
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.key,
       "data-id": item.name

package/lib/components/OverlayPanel/OverlayPanel.stories.js

@@ -155,7 +155,7 @@ export var InnerPanel = function InnerPanel(_ref2) {
       onPress: state.open
     }, "Open Panel"), outer), messagesOpen && ___EmotionJSX(Messages, {
       sx: {
-        zIndex: 3
+        zIndex: 11
       }
     }, ___EmotionJSX(Item, {
       key: "message2",

package/lib/components/RockerButton/RockerButton.js

@@ -16,7 +16,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Item } from '@react-stately/collections';
-import { useFocusRing } from '@react-aria/focus';
+import { FocusRing } from '@react-aria/focus';
 import { useRockerButton, useStatusClasses, usePropWarning } from '../../hooks';
 import { Box } from '../../index';
 import { RockerContext } from '../RockerButtonGroup';
@@ -29,15 +29,9 @@ export var CollectionRockerButton = /*#__PURE__*/forwardRef(function (props, ref
       itemProps = item.props;
   var state = useContext(RockerContext);
   var isDisabled = state.disabledKeys.has(key);
-
-  var _useFocusRing = useFocusRing(),
-      isFocusVisible = _useFocusRing.isFocusVisible,
-      focusProps = _useFocusRing.focusProps;
-
   var isSelected = state.selectedKey === key;
 
   var _useStatusClasses = useStatusClasses(className, {
-    isFocused: isFocusVisible,
     isSelected: isSelected,
     isDisabled: isDisabled
   }),
@@ -58,17 +52,19 @@ export var CollectionRockerButton = /*#__PURE__*/forwardRef(function (props, ref
   }, state, rockerButtonRef),
       rockerButtonProps = _useRockerButton.rockerButtonProps;
 
-  return ___EmotionJSX(Box, _extends({
+  return ___EmotionJSX(FocusRing, {
+    focusRingClass: "is-focused"
+  }, ___EmotionJSX(Box, _extends({
     as: "button",
     className: classNames,
     variant: "buttons.rocker"
   }, rockerButtonProps, {
     ref: rockerButtonRef
-  }, focusProps, itemProps, {
+  }, itemProps, {
     sx: {
       '&.is-selected': _objectSpread({}, itemProps.selectedStyles)
     }
-  }), rendered);
+  }), rendered));
 });
 CollectionRockerButton.displayName = 'CollectionRockerButton';
 CollectionRockerButton.propTypes = {

package/lib/styles/variants/boxes.js

@@ -114,6 +114,23 @@ export var chip = {
   }
 };
 
+var countDefault = _objectSpread(_objectSpread({}, chip), {}, {
+  width: 'fit-content',
+  minWidth: '17px',
+  height: '17px'
+});
+
+var chipCount = _objectSpread(_objectSpread({}, countDefault), {}, {
+  backgroundColor: '#640099 !important'
+});
+
+var countNeutral = _objectSpread(_objectSpread({}, chipCount), {}, {
+  backgroundColor: '#E4E6E9 !important',
+  '& span': {
+    color: 'neutral.20'
+  }
+});
+
 var multivaluesChip = _objectSpread(_objectSpread({}, chip), {}, {
   alignSelf: 'center',
   cursor: 'default',
@@ -316,6 +333,8 @@ export default {
   base: base,
   card: card,
   chip: chip,
+  chipCount: chipCount,
+  countNeutral: countNeutral,
   selectedItemChip: selectedItemChip,
   readOnlyChip: readOnlyChip,
   copy: copy,