@pingux/astro 1.4.1 → 1.5.0-alpha.1

package/lib/components/Tabs/Tabs.test.js

@@ -4,6 +4,7 @@ import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerat
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
@@ -33,6 +34,21 @@ var defaultTabs = [{
   name: 'Tab 3',
   children: 'Tab 3 body'
 }];
+var tabsWithList = [{
+  name: 'Tab 1',
+  children: 'Tab 1 body'
+}, {
+  name: 'Tab 2',
+  list: [{
+    key: 'tab1list',
+    name: 'Tab 1 list',
+    children: 'Tab 1 from list'
+  }, {
+    key: 'tab2list',
+    name: 'Tab 2 list',
+    children: 'Tab 2 from list'
+  }]
+}];
 var defaultProps = {
   'data-testid': testId,
   defaultSelectedKey: defaultTabs[0].name
@@ -60,6 +76,21 @@ var getComponent = function getComponent() {
   }))));
 };
 
+var getComponentWithDynamicItems = function getComponentWithDynamicItems(props) {
+  return render(___EmotionJSX(CacheProvider, {
+    value: emotionCache
+  }, ___EmotionJSX(Tabs, props, function (_ref3) {
+    var name = _ref3.name,
+        children = _ref3.children,
+        tabProps = _objectWithoutProperties(_ref3, ["name", "children"]);
+
+    return ___EmotionJSX(Tab, _extends({
+      key: name,
+      title: name
+    }, tabProps), children);
+  })));
+};
+
 var getTabs = function getTabs() {
   var tabs = screen.queryAllByRole('tab');
 
@@ -77,8 +108,8 @@ var getTabs = function getTabs() {
 };
 
 var testTabPanel = function testTabPanel(expectedTabIndex) {
-  return _forEachInstanceProperty(defaultTabs).call(defaultTabs, function (_ref3, index) {
-    var children = _ref3.children;
+  return _forEachInstanceProperty(defaultTabs).call(defaultTabs, function (_ref4, index) {
+    var children = _ref4.children;
     return index === expectedTabIndex ? expect(screen.queryByText(children)).toBeInTheDocument() : expect(screen.queryByText(children)).not.toBeInTheDocument();
   });
 };
@@ -138,7 +169,7 @@ test('interacting with tabs via click', function () {
   testSingleTab(tabs, tab0, 'toContainElement', [screen.getByRole('presentation')]);
   testTabPanel(0);
 });
-test('interacting with tabs via focus -- horizontal', function () {
+test('interacting with tabs with manual activation', function () {
   getComponent();
 
   var _getTabs2 = getTabs(),
@@ -150,6 +181,36 @@ test('interacting with tabs via focus -- horizontal', function () {
     return expect(tab).not.toHaveFocus();
   });
 
+  userEvent.tab();
+  testSingleTab(tabs, tab0, 'toHaveFocus');
+  testTabPanel(0);
+  fireEvent.keyDown(tab0, {
+    key: 'ArrowRight',
+    code: 'ArrowRight'
+  });
+  testSingleTab(tabs, tab1, 'toHaveFocus');
+  testTabPanel(0);
+  fireEvent.keyDown(tab1, {
+    key: 'Enter',
+    code: 'Enter'
+  });
+  testSingleTab(tabs, tab1, 'toHaveFocus');
+  testTabPanel(1);
+});
+test('interacting with tabs via focus -- horizontal', function () {
+  getComponent({
+    keyboardActivation: 'automatic'
+  });
+
+  var _getTabs3 = getTabs(),
+      tabs = _getTabs3.tabs,
+      tab0 = _getTabs3.tab0,
+      tab1 = _getTabs3.tab1;
+
+  _forEachInstanceProperty(tabs).call(tabs, function (tab) {
+    return expect(tab).not.toHaveFocus();
+  });
+
   userEvent.tab();
   testSingleTab(tabs, tab0, 'toHaveFocus');
   testTabPanel(0);
@@ -168,13 +229,14 @@ test('interacting with tabs via focus -- horizontal', function () {
 });
 test('interacting with tabs via focus -- vertical', function () {
   getComponent({
-    orientation: 'vertical'
+    orientation: 'vertical',
+    keyboardActivation: 'automatic'
   });
 
-  var _getTabs3 = getTabs(),
-      tabs = _getTabs3.tabs,
-      tab0 = _getTabs3.tab0,
-      tab1 = _getTabs3.tab1;
+  var _getTabs4 = getTabs(),
+      tabs = _getTabs4.tabs,
+      tab0 = _getTabs4.tab0,
+      tab1 = _getTabs4.tab1;
 
   _forEachInstanceProperty(tabs).call(tabs, function (tab) {
     return expect(tab).not.toHaveFocus();
@@ -201,9 +263,9 @@ test('disabled all tabs', function () {
     isDisabled: true
   });
 
-  var _getTabs4 = getTabs(),
-      tab0 = _getTabs4.tab0,
-      tab1 = _getTabs4.tab1;
+  var _getTabs5 = getTabs(),
+      tab0 = _getTabs5.tab0,
+      tab1 = _getTabs5.tab1;
 
   var tabLine = screen.queryByRole('presentation'); // Tabs cannot be DOM disabled so must check visuals
 
@@ -222,15 +284,16 @@ test('disabled all tabs', function () {
 });
 test('disabled tab is not accessible on click or focus', function () {
   getComponent({
-    disabledKeys: [defaultTabs[1].name]
+    disabledKeys: [defaultTabs[1].name],
+    keyboardActivation: 'automatic'
   });
   testTabPanel(0);
 
-  var _getTabs5 = getTabs(),
-      tabs = _getTabs5.tabs,
-      tab0 = _getTabs5.tab0,
-      tab1 = _getTabs5.tab1,
-      tab2 = _getTabs5.tab2; // Ensure that clicking a disabled tab does nothing
+  var _getTabs6 = getTabs(),
+      tabs = _getTabs6.tabs,
+      tab0 = _getTabs6.tab0,
+      tab1 = _getTabs6.tab1,
+      tab2 = _getTabs6.tab2; // Ensure that clicking a disabled tab does nothing
 
 
   userEvent.click(tab1);
@@ -255,11 +318,11 @@ test('controlled tabs', function () {
   }),
       rerender = _getComponent.rerender;
 
-  var _getTabs6 = getTabs(),
-      tabs = _getTabs6.tabs,
-      tab0 = _getTabs6.tab0,
-      tab1 = _getTabs6.tab1,
-      tab2 = _getTabs6.tab2; // Expect the second tab to be selected
+  var _getTabs7 = getTabs(),
+      tabs = _getTabs7.tabs,
+      tab0 = _getTabs7.tab0,
+      tab1 = _getTabs7.tab1,
+      tab2 = _getTabs7.tab2; // Expect the second tab to be selected
 
 
   expect(onSelectionChange).not.toHaveBeenCalled();
@@ -296,9 +359,9 @@ test('tab line props', function () {
   }),
       rerender = _getComponent2.rerender;
 
-  var _getTabs7 = getTabs(),
-      tabs = _getTabs7.tabs,
-      tab0 = _getTabs7.tab0;
+  var _getTabs8 = getTabs(),
+      tabs = _getTabs8.tabs,
+      tab0 = _getTabs8.tab0;
 
   var tabLine = screen.getByRole('presentation'); // Expect the tab line to have a red background
 
@@ -327,16 +390,16 @@ test('tab with icon', function () {
     tabs: newTabs
   });
 
-  var _getTabs8 = getTabs(),
-      tabs = _getTabs8.tabs,
-      tab0 = _getTabs8.tab0;
+  var _getTabs9 = getTabs(),
+      tabs = _getTabs9.tabs,
+      tab0 = _getTabs9.tab0;
 
   var icon = screen.getByTestId('icon'); // Expect the tab to have the given icon element
 
   testSingleTab(tabs, tab0, 'toContainElement', [icon]);
 });
 test('tooltip renders on tab\'s hover in `tooltip` mode', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-  var _getTabs9, tab0;
+  var _getTabs10, tab0;
 
   return _regeneratorRuntime.wrap(function _callee$(_context) {
     while (1) {
@@ -346,7 +409,7 @@ test('tooltip renders on tab\'s hover in `tooltip` mode', /*#__PURE__*/_asyncToG
             mode: 'tooltip'
           });
           expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
-          _getTabs9 = getTabs(), tab0 = _getTabs9.tab0;
+          _getTabs10 = getTabs(), tab0 = _getTabs10.tab0;
           fireEvent.mouseMove(tab0);
           fireEvent.mouseEnter(tab0);
 
@@ -370,8 +433,8 @@ test('tabs without selected keys show null tab panel content', function () {
 test('hover tab style', function () {
   getComponent();
 
-  var _getTabs10 = getTabs(),
-      tab0 = _getTabs10.tab0;
+  var _getTabs11 = getTabs(),
+      tab0 = _getTabs11.tab0;
 
   expect(tab0).not.toHaveClass('is-hovered');
   userEvent.hover(tab0);
@@ -414,4 +477,74 @@ test('will render slots.afterTab if provided', function () {
     tabs: tabs
   });
   expect(screen.getByText(testText)).toBeInTheDocument();
+});
+test('will render tab with list if provided', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+  var _getTabs12, menuBtn, menuItems, firstListItemContent;
+
+  return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+    while (1) {
+      switch (_context2.prev = _context2.next) {
+        case 0:
+          getComponentWithDynamicItems({
+            items: tabsWithList,
+            mode: 'list'
+          });
+          testTabPanel(0);
+          _getTabs12 = getTabs(), menuBtn = _getTabs12.tab1.parentElement;
+          userEvent.click(menuBtn);
+          expect(screen.queryByRole('menu')).toBeInTheDocument();
+          testTabPanel(0);
+          menuItems = screen.queryAllByRole('menuitemradio');
+          expect(menuItems).toHaveLength(tabsWithList[1].list.length);
+          expect(menuItems[0]).not.toHaveFocus();
+          userEvent.click(menuItems[0]);
+          firstListItemContent = tabsWithList[1].list[0].children;
+          expect(screen.queryByRole('tabpanel')).toHaveTextContent(firstListItemContent);
+          expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+
+        case 13:
+        case "end":
+          return _context2.stop();
+      }
+    }
+  }, _callee2);
+})));
+test('tab list is accessible via keyboard', function () {
+  getComponentWithDynamicItems({
+    items: tabsWithList,
+    mode: 'list'
+  });
+
+  var _getTabs13 = getTabs(),
+      tabs = _getTabs13.tabs,
+      tab0 = _getTabs13.tab0,
+      tab1 = _getTabs13.tab1;
+
+  _forEachInstanceProperty(tabs).call(tabs, function (tab) {
+    return expect(tab).not.toHaveFocus();
+  });
+
+  userEvent.tab();
+  testTabPanel(0);
+  fireEvent.keyDown(tab0, {
+    key: 'ArrowRight',
+    code: 'ArrowRight'
+  });
+  expect(tab1).toHaveFocus();
+  fireEvent.keyDown(tab1, {
+    key: 'Enter',
+    code: 'Enter'
+  });
+  expect(screen.queryByRole('menu')).toBeInTheDocument();
+  testTabPanel(0);
+  var menuItems = screen.queryAllByRole('menuitemradio');
+  expect(menuItems).toHaveLength(tabsWithList[1].list.length);
+  expect(menuItems[0]).toHaveFocus();
+  fireEvent.keyDown(menuItems[0], {
+    key: 'Enter',
+    code: 'Enter'
+  });
+  var firstListItemContent = tabsWithList[1].list[0].children;
+  expect(screen.queryByRole('tabpanel')).toHaveTextContent(firstListItemContent);
+  expect(screen.queryByRole('menu')).not.toBeInTheDocument();
 });

package/lib/index.js

@@ -72,6 +72,12 @@ export { default as Messages } from './components/Messages';
 export * from './components/Messages';
 export { default as Modal } from './components/Modal';
 export * from './components/Modal';
+export { default as MultiselectFilter } from './components/MultiselectFilter';
+export * from './components/MultiselectFilter';
+export { default as MultiselectFilterItem } from './components/MultiselectFilterItem';
+export * from './components/MultiselectFilterItem';
+export { default as MultiselectListContainer } from './components/MultiselectListContainer';
+export * from './components/MultiselectListContainer';
 export { default as NavBar } from './components/NavBar';
 export * from './components/NavBar';
 export { default as NavBarSection } from './components/NavBarSection';

package/lib/styles/variants/buttons.js

@@ -125,6 +125,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',
@@ -461,6 +479,10 @@ var link = _objectSpread(_objectSpread({}, text), {}, {
   width: 'max-content'
 });
 
+var neutralText = _objectSpread(_objectSpread({}, link), {}, {
+  color: 'neutral.10'
+});
+
 var expandableRow = {
   chartWrapper: {
     display: 'flex',
@@ -616,6 +638,18 @@ var colorBlock = {
     borderColor: 'accent.20'
   }
 };
+
+var menuTab = _objectSpread(_objectSpread({}, quiet), {}, {
+  color: 'neutral.40',
+  alignItems: 'center',
+  '&.is-selected *, &.is-hovered *': {
+    color: 'active'
+  },
+  '& + *:not(div:first-of-type)': {
+    'ml': 'md'
+  }
+});
+
 export default {
   accordionHeader: accordionHeader,
   chipDeleteButton: chipDeleteButton,
@@ -657,5 +691,8 @@ export default {
   tooltipChip: tooltipChip,
   tooltipIconButton: tooltipIconButton,
   tooltipInline: tooltipInline,
-  colorBlock: colorBlock
+  colorBlock: colorBlock,
+  menuTab: menuTab,
+  multiselectToggle: multiselectToggle,
+  neutralText: neutralText
 };

package/lib/styles/variants/multiselectListContainer.js

@@ -0,0 +1,63 @@
+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'
+};
+export default {
+  multiselectListContainer: multiselectListContainer,
+  multiselectListContent: multiselectListContent,
+  multiselectListTitle: multiselectListTitle,
+  multiselectListBadge: multiselectListBadge,
+  multiselectFilterItem: multiselectFilterItem
+};

package/lib/styles/variants/tabs.js

@@ -14,12 +14,16 @@ export var tab = {
   },
   '&.is-selected.is-vertical': {
     bg: 'accent.95'
+  },
+  '& > svg': {
+    flexShrink: 0
   }
 };
 export var tabLine = {
   height: '2px',
   width: '100%',
-  bg: 'active'
+  bg: 'active',
+  flexShrink: 0
 };
 export var tabPanel = {
   outline: 'none'

package/lib/styles/variants/text.js

@@ -30,11 +30,16 @@ var wordWrap = {
 var tabLabel = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
   fontSize: 'sm',
   fontWeight: 1,
-  mb: 6,
+  mb: 'sm',
+  lineHeight: '16px',
   color: 'neutral.40',
+  height: '100%',
   '.is-selected &, .is-hovered &': {
+    color: 'active'
+  },
+  '.is-selected &': {
     color: 'active',
-    mb: 5
+    mb: 8
   },
   '.is-disabled &': {
     color: 'neutral.80'
@@ -141,6 +146,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',
@@ -229,6 +254,8 @@ export var text = {
   }),
   maskedValue: maskedValue,
   expandableRow: expandableRow,
+  multiselectFilterItem: multiselectFilterItem,
+  multiselectFilterTitle: multiselectFilterTitle,
   navBarHeaderText: navBarHeaderText,
   navBarSubtitle: navBarSubtitle,
   placeholder: {

package/lib/styles/variants/variants.js

@@ -34,6 +34,7 @@ import stepper from './stepper';
 import table from './table';
 import * as tabs from './tabs';
 import tooltip from './tooltip';
+import multiselectListContainer from './multiselectListContainer';
 export default _objectSpread(_objectSpread({
   accordion: accordion,
   boxes: boxes,
@@ -47,6 +48,7 @@ export default _objectSpread(_objectSpread({
   menuItem: menuItem,
   messages: messages,
   modal: modal,
+  multiselectListContainer: multiselectListContainer,
   navBar: navBar,
   numberField: numberField,
   overlayPanel: overlayPanel,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.4.1",
+  "version": "1.5.0-alpha.1",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",