@pingux/astro 1.4.1-alpha.5 → 1.5.0-alpha.0

package/lib/cjs/index.js

@@ -4,7 +4,7 @@ var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65, _context66;
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
@@ -56,6 +56,9 @@ var _exportNames = {
   Menu: true,
   Messages: true,
   Modal: true,
+  MultiselectFilter: true,
+  MultiselectFilterItem: true,
+  MultiselectListContainer: true,
   NavBar: true,
   NavBarSection: true,
   MultivaluesField: true,
@@ -370,6 +373,27 @@ _Object$defineProperty(exports, "Modal", {
   }
 });
 
+_Object$defineProperty(exports, "MultiselectFilter", {
+  enumerable: true,
+  get: function get() {
+    return _MultiselectFilter["default"];
+  }
+});
+
+_Object$defineProperty(exports, "MultiselectFilterItem", {
+  enumerable: true,
+  get: function get() {
+    return _MultiselectFilterItem["default"];
+  }
+});
+
+_Object$defineProperty(exports, "MultiselectListContainer", {
+  enumerable: true,
+  get: function get() {
+    return _MultiselectListContainer["default"];
+  }
+});
+
 _Object$defineProperty(exports, "NavBar", {
   enumerable: true,
   get: function get() {
@@ -1105,9 +1129,51 @@ _forEachInstanceProperty(_context32 = _Object$keys(_Modal)).call(_context32, fun
   });
 });
 
+var _MultiselectFilter = _interopRequireWildcard(require("./components/MultiselectFilter"));
+
+_forEachInstanceProperty(_context33 = _Object$keys(_MultiselectFilter)).call(_context33, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _MultiselectFilter[key];
+    }
+  });
+});
+
+var _MultiselectFilterItem = _interopRequireWildcard(require("./components/MultiselectFilterItem"));
+
+_forEachInstanceProperty(_context34 = _Object$keys(_MultiselectFilterItem)).call(_context34, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _MultiselectFilterItem[key];
+    }
+  });
+});
+
+var _MultiselectListContainer = _interopRequireWildcard(require("./components/MultiselectListContainer"));
+
+_forEachInstanceProperty(_context35 = _Object$keys(_MultiselectListContainer)).call(_context35, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _MultiselectListContainer[key];
+    }
+  });
+});
+
 var _NavBar = _interopRequireWildcard(require("./components/NavBar"));
 
-_forEachInstanceProperty(_context33 = _Object$keys(_NavBar)).call(_context33, function (key) {
+_forEachInstanceProperty(_context36 = _Object$keys(_NavBar)).call(_context36, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1121,7 +1187,7 @@ _forEachInstanceProperty(_context33 = _Object$keys(_NavBar)).call(_context33, fu
 
 var _NavBarSection = _interopRequireWildcard(require("./components/NavBarSection"));
 
-_forEachInstanceProperty(_context34 = _Object$keys(_NavBarSection)).call(_context34, function (key) {
+_forEachInstanceProperty(_context37 = _Object$keys(_NavBarSection)).call(_context37, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1137,7 +1203,7 @@ var _MultivaluesField = _interopRequireDefault(require("./components/Multivalues
 
 var _OverlayPanel = _interopRequireWildcard(require("./components/OverlayPanel"));
 
-_forEachInstanceProperty(_context35 = _Object$keys(_OverlayPanel)).call(_context35, function (key) {
+_forEachInstanceProperty(_context38 = _Object$keys(_OverlayPanel)).call(_context38, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1151,7 +1217,7 @@ _forEachInstanceProperty(_context35 = _Object$keys(_OverlayPanel)).call(_context
 
 var _PageHeader = _interopRequireWildcard(require("./components/PageHeader"));
 
-_forEachInstanceProperty(_context36 = _Object$keys(_PageHeader)).call(_context36, function (key) {
+_forEachInstanceProperty(_context39 = _Object$keys(_PageHeader)).call(_context39, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1165,7 +1231,7 @@ _forEachInstanceProperty(_context36 = _Object$keys(_PageHeader)).call(_context36
 
 var _PasswordField = _interopRequireWildcard(require("./components/PasswordField"));
 
-_forEachInstanceProperty(_context37 = _Object$keys(_PasswordField)).call(_context37, function (key) {
+_forEachInstanceProperty(_context40 = _Object$keys(_PasswordField)).call(_context40, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1179,7 +1245,7 @@ _forEachInstanceProperty(_context37 = _Object$keys(_PasswordField)).call(_contex
 
 var _PopoverContainer = _interopRequireWildcard(require("./components/PopoverContainer"));
 
-_forEachInstanceProperty(_context38 = _Object$keys(_PopoverContainer)).call(_context38, function (key) {
+_forEachInstanceProperty(_context41 = _Object$keys(_PopoverContainer)).call(_context41, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1195,7 +1261,7 @@ var _PopoverMenu = _interopRequireDefault(require("./components/PopoverMenu"));
 
 var _Radio = _interopRequireWildcard(require("./components/Radio"));
 
-_forEachInstanceProperty(_context39 = _Object$keys(_Radio)).call(_context39, function (key) {
+_forEachInstanceProperty(_context42 = _Object$keys(_Radio)).call(_context42, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1209,7 +1275,7 @@ _forEachInstanceProperty(_context39 = _Object$keys(_Radio)).call(_context39, fun
 
 var _RadioField = _interopRequireWildcard(require("./components/RadioField"));
 
-_forEachInstanceProperty(_context40 = _Object$keys(_RadioField)).call(_context40, function (key) {
+_forEachInstanceProperty(_context43 = _Object$keys(_RadioField)).call(_context43, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1223,7 +1289,7 @@ _forEachInstanceProperty(_context40 = _Object$keys(_RadioField)).call(_context40
 
 var _RadioGroupField = _interopRequireWildcard(require("./components/RadioGroupField"));
 
-_forEachInstanceProperty(_context41 = _Object$keys(_RadioGroupField)).call(_context41, function (key) {
+_forEachInstanceProperty(_context44 = _Object$keys(_RadioGroupField)).call(_context44, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1237,7 +1303,7 @@ _forEachInstanceProperty(_context41 = _Object$keys(_RadioGroupField)).call(_cont
 
 var _RequirementsList = _interopRequireWildcard(require("./components/RequirementsList"));
 
-_forEachInstanceProperty(_context42 = _Object$keys(_RequirementsList)).call(_context42, function (key) {
+_forEachInstanceProperty(_context45 = _Object$keys(_RequirementsList)).call(_context45, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1251,7 +1317,7 @@ _forEachInstanceProperty(_context42 = _Object$keys(_RequirementsList)).call(_con
 
 var _RockerButton = _interopRequireWildcard(require("./components/RockerButton"));
 
-_forEachInstanceProperty(_context43 = _Object$keys(_RockerButton)).call(_context43, function (key) {
+_forEachInstanceProperty(_context46 = _Object$keys(_RockerButton)).call(_context46, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1265,7 +1331,7 @@ _forEachInstanceProperty(_context43 = _Object$keys(_RockerButton)).call(_context
 
 var _RockerButtonGroup = _interopRequireWildcard(require("./components/RockerButtonGroup"));
 
-_forEachInstanceProperty(_context44 = _Object$keys(_RockerButtonGroup)).call(_context44, function (key) {
+_forEachInstanceProperty(_context47 = _Object$keys(_RockerButtonGroup)).call(_context47, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1279,7 +1345,7 @@ _forEachInstanceProperty(_context44 = _Object$keys(_RockerButtonGroup)).call(_co
 
 var _ScrollBox = _interopRequireWildcard(require("./components/ScrollBox"));
 
-_forEachInstanceProperty(_context45 = _Object$keys(_ScrollBox)).call(_context45, function (key) {
+_forEachInstanceProperty(_context48 = _Object$keys(_ScrollBox)).call(_context48, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1293,7 +1359,7 @@ _forEachInstanceProperty(_context45 = _Object$keys(_ScrollBox)).call(_context45,
 
 var _SearchField = _interopRequireWildcard(require("./components/SearchField"));
 
-_forEachInstanceProperty(_context46 = _Object$keys(_SearchField)).call(_context46, function (key) {
+_forEachInstanceProperty(_context49 = _Object$keys(_SearchField)).call(_context49, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1307,7 +1373,7 @@ _forEachInstanceProperty(_context46 = _Object$keys(_SearchField)).call(_context4
 
 var _SelectField = _interopRequireWildcard(require("./components/SelectField"));
 
-_forEachInstanceProperty(_context47 = _Object$keys(_SelectField)).call(_context47, function (key) {
+_forEachInstanceProperty(_context50 = _Object$keys(_SelectField)).call(_context50, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1321,7 +1387,7 @@ _forEachInstanceProperty(_context47 = _Object$keys(_SelectField)).call(_context4
 
 var _Separator = _interopRequireWildcard(require("./components/Separator"));
 
-_forEachInstanceProperty(_context48 = _Object$keys(_Separator)).call(_context48, function (key) {
+_forEachInstanceProperty(_context51 = _Object$keys(_Separator)).call(_context51, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1335,7 +1401,7 @@ _forEachInstanceProperty(_context48 = _Object$keys(_Separator)).call(_context48,
 
 var _Stepper = _interopRequireWildcard(require("./components/Stepper"));
 
-_forEachInstanceProperty(_context49 = _Object$keys(_Stepper)).call(_context49, function (key) {
+_forEachInstanceProperty(_context52 = _Object$keys(_Stepper)).call(_context52, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1349,7 +1415,7 @@ _forEachInstanceProperty(_context49 = _Object$keys(_Stepper)).call(_context49, f
 
 var _Switch = _interopRequireWildcard(require("./components/Switch"));
 
-_forEachInstanceProperty(_context50 = _Object$keys(_Switch)).call(_context50, function (key) {
+_forEachInstanceProperty(_context53 = _Object$keys(_Switch)).call(_context53, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1363,7 +1429,7 @@ _forEachInstanceProperty(_context50 = _Object$keys(_Switch)).call(_context50, fu
 
 var _SwitchField = _interopRequireWildcard(require("./components/SwitchField"));
 
-_forEachInstanceProperty(_context51 = _Object$keys(_SwitchField)).call(_context51, function (key) {
+_forEachInstanceProperty(_context54 = _Object$keys(_SwitchField)).call(_context54, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1377,7 +1443,7 @@ _forEachInstanceProperty(_context51 = _Object$keys(_SwitchField)).call(_context5
 
 var _Tab = _interopRequireWildcard(require("./components/Tab"));
 
-_forEachInstanceProperty(_context52 = _Object$keys(_Tab)).call(_context52, function (key) {
+_forEachInstanceProperty(_context55 = _Object$keys(_Tab)).call(_context55, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1391,7 +1457,7 @@ _forEachInstanceProperty(_context52 = _Object$keys(_Tab)).call(_context52, funct
 
 var _Table = _interopRequireWildcard(require("./components/Table"));
 
-_forEachInstanceProperty(_context53 = _Object$keys(_Table)).call(_context53, function (key) {
+_forEachInstanceProperty(_context56 = _Object$keys(_Table)).call(_context56, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1405,7 +1471,7 @@ _forEachInstanceProperty(_context53 = _Object$keys(_Table)).call(_context53, fun
 
 var _TableBody = _interopRequireWildcard(require("./components/TableBody"));
 
-_forEachInstanceProperty(_context54 = _Object$keys(_TableBody)).call(_context54, function (key) {
+_forEachInstanceProperty(_context57 = _Object$keys(_TableBody)).call(_context57, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1419,7 +1485,7 @@ _forEachInstanceProperty(_context54 = _Object$keys(_TableBody)).call(_context54,
 
 var _TableCell = _interopRequireWildcard(require("./components/TableCell"));
 
-_forEachInstanceProperty(_context55 = _Object$keys(_TableCell)).call(_context55, function (key) {
+_forEachInstanceProperty(_context58 = _Object$keys(_TableCell)).call(_context58, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1433,7 +1499,7 @@ _forEachInstanceProperty(_context55 = _Object$keys(_TableCell)).call(_context55,
 
 var _TableHead = _interopRequireWildcard(require("./components/TableHead"));
 
-_forEachInstanceProperty(_context56 = _Object$keys(_TableHead)).call(_context56, function (key) {
+_forEachInstanceProperty(_context59 = _Object$keys(_TableHead)).call(_context59, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1447,7 +1513,7 @@ _forEachInstanceProperty(_context56 = _Object$keys(_TableHead)).call(_context56,
 
 var _TableRow = _interopRequireWildcard(require("./components/TableRow"));
 
-_forEachInstanceProperty(_context57 = _Object$keys(_TableRow)).call(_context57, function (key) {
+_forEachInstanceProperty(_context60 = _Object$keys(_TableRow)).call(_context60, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1461,7 +1527,7 @@ _forEachInstanceProperty(_context57 = _Object$keys(_TableRow)).call(_context57,
 
 var _Tabs = _interopRequireWildcard(require("./components/Tabs"));
 
-_forEachInstanceProperty(_context58 = _Object$keys(_Tabs)).call(_context58, function (key) {
+_forEachInstanceProperty(_context61 = _Object$keys(_Tabs)).call(_context61, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1475,7 +1541,7 @@ _forEachInstanceProperty(_context58 = _Object$keys(_Tabs)).call(_context58, func
 
 var _Text = _interopRequireWildcard(require("./components/Text"));
 
-_forEachInstanceProperty(_context59 = _Object$keys(_Text)).call(_context59, function (key) {
+_forEachInstanceProperty(_context62 = _Object$keys(_Text)).call(_context62, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1489,7 +1555,7 @@ _forEachInstanceProperty(_context59 = _Object$keys(_Text)).call(_context59, func
 
 var _TextField = _interopRequireWildcard(require("./components/TextField"));
 
-_forEachInstanceProperty(_context60 = _Object$keys(_TextField)).call(_context60, function (key) {
+_forEachInstanceProperty(_context63 = _Object$keys(_TextField)).call(_context63, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1503,7 +1569,7 @@ _forEachInstanceProperty(_context60 = _Object$keys(_TextField)).call(_context60,
 
 var _TextArea = _interopRequireWildcard(require("./components/TextArea"));
 
-_forEachInstanceProperty(_context61 = _Object$keys(_TextArea)).call(_context61, function (key) {
+_forEachInstanceProperty(_context64 = _Object$keys(_TextArea)).call(_context64, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1517,7 +1583,7 @@ _forEachInstanceProperty(_context61 = _Object$keys(_TextArea)).call(_context61,
 
 var _TextAreaField = _interopRequireWildcard(require("./components/TextAreaField"));
 
-_forEachInstanceProperty(_context62 = _Object$keys(_TextAreaField)).call(_context62, function (key) {
+_forEachInstanceProperty(_context65 = _Object$keys(_TextAreaField)).call(_context65, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1531,7 +1597,7 @@ _forEachInstanceProperty(_context62 = _Object$keys(_TextAreaField)).call(_contex
 
 var _TooltipTrigger = _interopRequireWildcard(require("./components/TooltipTrigger"));
 
-_forEachInstanceProperty(_context63 = _Object$keys(_TooltipTrigger)).call(_context63, function (key) {
+_forEachInstanceProperty(_context66 = _Object$keys(_TooltipTrigger)).call(_context66, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 

package/lib/cjs/styles/variants/buttons.js

@@ -147,6 +147,24 @@ var modalCloseButton = _objectSpread(_objectSpread({}, iconButton), {}, {
   right: 10
 });
 
+var multiselectToggle = _objectSpread(_objectSpread({}, square), {}, {
+  bg: 'accent.99',
+  height: '40px',
+  minWidth: 'max-content',
+  pl: '0px',
+  ml: '10px',
+  path: {
+    fill: 'active'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'accent.99'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-pressed': {
+    backgroundColor: 'accent.99'
+  }
+});
+
 var close = _objectSpread(_objectSpread({}, iconButton), {}, {
   p: 0,
   ml: 'auto',
@@ -483,6 +501,10 @@ var link = _objectSpread(_objectSpread({}, text), {}, {
   width: 'max-content'
 });
 
+var neutralText = _objectSpread(_objectSpread({}, link), {}, {
+  color: 'neutral.10'
+});
+
 var expandableRow = {
   chartWrapper: {
     display: 'flex',
@@ -679,6 +701,8 @@ var _default = {
   tooltipChip: tooltipChip,
   tooltipIconButton: tooltipIconButton,
   tooltipInline: tooltipInline,
-  colorBlock: colorBlock
+  colorBlock: colorBlock,
+  multiselectToggle: multiselectToggle,
+  neutralText: neutralText
 };
 exports["default"] = _default;

package/lib/cjs/styles/variants/multiselectListContainer.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+var multiselectListContainer = {
+  height: '40px',
+  overflowX: 'hidden',
+  pr: 'sm',
+  transition: 'right 500ms',
+  '&.is-open': {
+    height: '100%'
+  }
+};
+var multiselectListContent = {
+  bg: 'accent.99',
+  fontSize: 'sm',
+  height: '100%',
+  width: '300px',
+  '&.is-focused': {
+    borderColor: 'accent.80',
+    boxShadow: 'focus',
+    outline: 'none'
+  },
+  '& div': {
+    alignItems: 'center',
+    display: 'flex',
+    minHeight: '45px',
+    padding: '3px',
+    width: '100%'
+  }
+};
+var multiselectListTitle = {
+  alignContent: 'center',
+  bg: 'accent.99',
+  display: 'flex',
+  fontWeight: '500',
+  minHeight: '40px',
+  alignItems: 'center',
+  padding: '0 10px !important',
+  flexWrap: 'wrap',
+  maxWidth: 'max-content !important',
+  margin: '0 auto'
+};
+var multiselectListBadge = {
+  borderRadius: '5px',
+  display: 'flex',
+  height: '17px',
+  justifyContent: 'center',
+  minWidth: 'max-content',
+  position: 'relative',
+  pb: '0px !important',
+  pr: '3px !important',
+  pl: '3px !important',
+  alignItems: 'center',
+  fontWeight: 500
+};
+var multiselectFilterItem = {
+  minHeight: '45px',
+  margin: 'auto'
+};
+var _default = {
+  multiselectListContainer: multiselectListContainer,
+  multiselectListContent: multiselectListContent,
+  multiselectListTitle: multiselectListTitle,
+  multiselectListBadge: multiselectListBadge,
+  multiselectFilterItem: multiselectFilterItem
+};
+exports["default"] = _default;

package/lib/cjs/styles/variants/text.js

@@ -161,6 +161,26 @@ var navBarHeaderText = _objectSpread(_objectSpread({}, wordWrap), {}, {
   fontWeight: 1
 });
 
+var multiselectFilterItem = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  color: 'neutral.30',
+  fontSize: 'sm',
+  fontWeight: 500,
+  overflow: 'hidden',
+  marginRight: 'xs',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+
+var multiselectFilterTitle = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  fontSize: 'sm',
+  fontWeight: 500,
+  color: 'text.secondary',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  mr: 'xs'
+});
+
 var maskedValue = {
   width: 252,
   wordBreak: 'break-all',
@@ -249,6 +269,8 @@ var text = {
   }),
   maskedValue: maskedValue,
   expandableRow: expandableRow,
+  multiselectFilterItem: multiselectFilterItem,
+  multiselectFilterTitle: multiselectFilterTitle,
   navBarHeaderText: navBarHeaderText,
   navBarSubtitle: navBarSubtitle,
   placeholder: {

package/lib/cjs/styles/variants/variants.js

@@ -74,6 +74,8 @@ var tabs = _interopRequireWildcard(require("./tabs"));
 
 var _tooltip = _interopRequireDefault(require("./tooltip"));
 
+var _multiselectListContainer = _interopRequireDefault(require("./multiselectListContainer"));
+
 function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
@@ -91,6 +93,7 @@ var _default = _objectSpread(_objectSpread({
   menuItem: _menuItem["default"],
   messages: _messages["default"],
   modal: _modal["default"],
+  multiselectListContainer: _multiselectListContainer["default"],
   navBar: _navBar["default"],
   numberField: _numberField["default"],
   overlayPanel: _overlayPanel["default"],

package/lib/components/ListView/ListView.js

@@ -11,6 +11,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
@@ -57,9 +58,14 @@ export function useListLayout(state) {
   return layout;
 }
 var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
-  var loadingState = props.loadingState,
+  var disabledKeys = props.disabledKeys,
+      loadingState = props.loadingState,
       onLoadMore = props.onLoadMore,
-      selectionStyle = props.selectionStyle;
+      onSelectionChange = props.onSelectionChange,
+      selectionMode = props.selectionMode,
+      selectionStyle = props.selectionStyle,
+      others = _objectWithoutProperties(props, ["disabledKeys", "loadingState", "onLoadMore", "onSelectionChange", "selectionMode", "selectionStyle"]);
+
   var isLoading = loadingState === loadingStates.LOADING_MORE || loadingState === loadingStates.LOADING;
 
   var renderWrapper = function renderWrapper(parent, reusableView) {
@@ -122,8 +128,7 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
       disabledKeys: state.disabledKeys,
       ref: listViewRef,
       direction: direction,
-      collator: collator,
-      focusMode: 'cell'
+      collator: collator
     });
   }, [state, listViewRef, direction, collator]);
 
@@ -136,13 +141,7 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
 
 
   layout.isLoading = isLoading;
-  var focusedKey = state.selectionManager.focusedKey;
-  var focusedItem = gridCollection.getItem(state.selectionManager.focusedKey);
-
-  if ((focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.parentKey) != null) {
-    focusedKey = focusedItem.parentKey;
-  }
-
+  var focusedItem = gridCollection.getFirstKey();
   return ___EmotionJSX(ListViewContext.Provider, {
     value: {
       state: state,
@@ -151,7 +150,7 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
   }, ___EmotionJSX(Virtualizer, _extends({}, gridProps, {
     onLoadMore: onLoadMore,
     ref: listViewRef,
-    focusedKey: focusedKey,
+    focusedKey: focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.parentKey,
     renderWrapper: renderWrapper,
     sizeToFit: "height",
     scrollDirection: "vertical",
@@ -159,7 +158,7 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
     isLoading: isLoading,
     collection: gridCollection,
     transitionDuration: 0
-  }), function (type, item) {
+  }, others), function (type, item) {
     if (type === 'item') {
       return ___EmotionJSX(ListViewItem, {
         item: item

package/lib/components/ListView/ListView.test.js

@@ -106,13 +106,13 @@ test('navigating the list using the keyboard causes the isSelected and isFocused
           userEvent.type(listView, '{arrowdown}', {
             skipClick: true
           });
-          options = screen.getAllByRole('listitem');
+          options = screen.getAllByRole('gridcell');
           expect(options[1]).toHaveClass('is-focused');
           userEvent.type(listView, '{enter}', {
             skipClick: true
           });
           _context.next = 9;
-          return screen.findAllByRole('listitem');
+          return screen.findAllByRole('gridcell');
 
         case 9:
           updatedOption = _context.sent;
@@ -141,7 +141,7 @@ test('navigating to a disabled key will not apply the isFocused class', /*#__PUR
           userEvent.type(listView, '{arrowdown}', {
             skipClick: true
           });
-          options = screen.getAllByRole('listitem');
+          options = screen.getAllByRole('gridcell');
           expect(options[1]).not.toHaveClass('is-focused');
 
         case 6:
@@ -161,7 +161,7 @@ test('clicking an item on the list selects the item', /*#__PURE__*/_asyncToGener
           options = screen.getByTestId(items[1].name);
           userEvent.click(options);
           _context3.next = 5;
-          return screen.findAllByRole('listitem');
+          return screen.findAllByRole('gridcell');
 
         case 5:
           updatedOption = _context3.sent;
@@ -222,11 +222,11 @@ test('does not render loader, if loadingState is not loadingMore', function () {
 test('renders neither loader nor item if the component is given no items nor a loading state prop', function () {
   getComponentEmpty();
   expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
-  expect(screen.queryByRole('listitem')).not.toBeInTheDocument();
+  expect(screen.queryByRole('gridcell')).not.toBeInTheDocument();
 });
 test('Item accepts a data-id and the data-id can be found in the DOM', function () {
   getComponent();
-  var options = screen.getAllByRole('listitem');
+  var options = screen.getAllByRole('gridcell');
   expect(options).toHaveLength(items.length);
   expect(options[0]).toHaveAttribute('data-id', items[0].name);
 });
@@ -242,7 +242,7 @@ test('selectionMode "none" disallows to select item', /*#__PURE__*/_asyncToGener
           option1 = screen.getByTestId(items[1].name);
           userEvent.click(option1);
           _context5.next = 5;
-          return screen.findAllByRole('listitem');
+          return screen.findAllByRole('gridcell');
 
         case 5:
           updatedOption = _context5.sent;
@@ -269,7 +269,7 @@ test('selectionMode "multiple" allows to select more than one item', /*#__PURE__
           option2 = screen.getByTestId(items[2].name);
           userEvent.click(option2);
           _context6.next = 7;
-          return screen.findAllByRole('listitem');
+          return screen.findAllByRole('gridcell');
 
         case 7:
           updatedOption = _context6.sent;