@pingux/astro 1.40.0 → 1.40.1-alpha.0

package/lib/components/{Bulletin/Bulletin.js → Callout/Callout.js}

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _excluded = ["children", "status"];
 
-var _bulletinProps;
+var _calloutProps;
 
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React from 'react';
@@ -12,59 +12,59 @@ import { Box } from '../..';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { NoticeIcon } from '../Icon/NoticeIcon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var BULLETIN_TEST_ID = 'bulletinTestId';
-var bulletinProps = (_bulletinProps = {}, _defineProperty(_bulletinProps, statuses.DEFAULT, {
+export var CALLOUT_TEST_ID = 'CalloutTestId';
+var calloutProps = (_calloutProps = {}, _defineProperty(_calloutProps, statuses.DEFAULT, {
   color: 'text.secondary',
-  variant: 'bulletin.base'
-}), _defineProperty(_bulletinProps, statuses.ERROR, {
+  variant: 'callout.base'
+}), _defineProperty(_calloutProps, statuses.ERROR, {
   color: 'critical.bright',
-  variant: 'bulletin.error'
-}), _defineProperty(_bulletinProps, statuses.SUCCESS, {
+  variant: 'callout.error'
+}), _defineProperty(_calloutProps, statuses.SUCCESS, {
   color: 'success.bright',
-  variant: 'bulletin.success'
-}), _defineProperty(_bulletinProps, statuses.WARNING, {
+  variant: 'callout.success'
+}), _defineProperty(_calloutProps, statuses.WARNING, {
   color: 'warning.bright',
-  variant: 'bulletin.warning'
-}), _bulletinProps);
+  variant: 'callout.warning'
+}), _calloutProps);
 var defaultIconProps = {
   mr: 'md',
   ml: 'md',
   size: 'md'
 };
 /**
- *Bulletin is composed of the Box, Icon, and Text components. It's a persistent component
- that should be placed at the top of panels or above related content. If the Bulletins
+ *Callout is composed of the Box, Icon, and Text components. It's a persistent component
+ that should be placed at the top of panels or above related content. If the Callouts
  status is error or warning, the text should include a direct link to instructions on resolving the
  issue or error.
  *
- *Please note, Bulletin is a static component, the [Messages](./?path=/docs/messages) component is
- recommended if you need to interrupt and notify users of successful/failed actions or
- give warnings of unexpected events.
+ *Please note, Callout is a static component, the [Messages](./?path=/docs/components-messages)
+ component is recommended if you need to interrupt and notify users of successful/failed actions
+ or give warnings of unexpected events.
  */
 
-var Bulletin = function Bulletin(_ref) {
+var Callout = function Callout(_ref) {
   var children = _ref.children,
       status = _ref.status,
       others = _objectWithoutProperties(_ref, _excluded);
 
   return ___EmotionJSX(Box, _extends({
-    "data-testid": BULLETIN_TEST_ID,
+    "data-testid": CALLOUT_TEST_ID,
     isRow: true,
     role: "note",
-    variant: bulletinProps[status].variant
+    variant: calloutProps[status].variant
   }, others), ___EmotionJSX(NoticeIcon, _extends({
-    color: bulletinProps[status].color,
+    color: calloutProps[status].color,
     status: status,
     "aria-label": "".concat(status, "-icon")
   }, defaultIconProps)), children);
 };
 
-Bulletin.propTypes = {
+Callout.propTypes = {
   /** Determines the icon and color  */
   status: PropTypes.oneOf(_Object$values(statuses))
 };
-Bulletin.defaultProps = {
+Callout.defaultProps = {
   status: statuses.DEFAULT
 };
-Bulletin.displayName = 'Bulletin';
-export default Bulletin;
+Callout.displayName = 'Callout';
+export default Callout;

package/lib/components/{Bulletin/Bulletin.stories.js → Callout/Callout.stories.js}

@@ -1,12 +1,11 @@
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React from 'react';
-import { Link, Text } from '../..';
+import { Link, Text, Callout } from '../..';
 import statuses from '../../utils/devUtils/constants/statuses';
-import Bulletin from './Bulletin';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Bulletin',
-  component: Bulletin,
+  title: 'Components/Callout',
+  component: Callout,
   argTypes: {
     status: {
       control: {
@@ -18,42 +17,42 @@ export default {
 }; // main
 
 export var Default = function Default(args) {
-  return ___EmotionJSX(Bulletin, args, ___EmotionJSX(Text, null, "You should be aware of this. It might be good or bad, I don\u2019t know. You may already be aware of it, but I want to be sure", ___EmotionJSX(Link, {
+  return ___EmotionJSX(Callout, args, ___EmotionJSX(Text, null, "You should be aware of this. It might be good or bad, I don\u2019t know. You may already be aware of it, but I want to be sure", ___EmotionJSX(Link, {
     href: "https://pingidentity.com",
     target: "_blank",
-    "aria-label": "".concat(statuses.DEFAULT, "-bulletin"),
+    "aria-label": "".concat(statuses.DEFAULT, "-callout"),
     variant: "app"
   }, " Read More")));
 };
 export var ErrorStatus = function ErrorStatus() {
-  return ___EmotionJSX(Bulletin, {
+  return ___EmotionJSX(Callout, {
     status: statuses.ERROR
   }, ___EmotionJSX(Text, null, "You\u2019ve got problems. Allow me to tell you about them in some detail so that you can address them", ___EmotionJSX(Link, {
     href: "https://pingidentity.com",
     target: "_blank",
-    "aria-label": "".concat(statuses.ERROR, "-bulletin"),
+    "aria-label": "".concat(statuses.ERROR, "-callout"),
     variant: "app"
   }, " Read More")));
 }; // Avoiding using Error as the function name due to it being a JS built-in method
 
 ErrorStatus.storyName = 'Error';
 export var Success = function Success() {
-  return ___EmotionJSX(Bulletin, {
+  return ___EmotionJSX(Callout, {
     status: statuses.SUCCESS
   }, ___EmotionJSX(Text, null, "It Worked! Maybe there is something else related to it working that I need to explain", ___EmotionJSX(Link, {
     href: "https://pingidentity.com",
     target: "_blank",
-    "aria-label": "".concat(statuses.SUCCESS, "-bulletin"),
+    "aria-label": "".concat(statuses.SUCCESS, "-callout"),
     variant: "app"
   }, " Read More")));
 };
 export var Warning = function Warning() {
-  return ___EmotionJSX(Bulletin, {
+  return ___EmotionJSX(Callout, {
     status: statuses.WARNING
-  }, ___EmotionJSX(Text, null, "You\u2019ve got issues. Allow me to tell you about them in some detail so that you can address them. I\u2019ll continue to type enough text to demonstrate that the Bulletin box will grow in height with the content", ___EmotionJSX(Link, {
+  }, ___EmotionJSX(Text, null, "You\u2019ve got issues. Allow me to tell you about them in some detail so that you can address them. I\u2019ll continue to type enough text to demonstrate that the Callout box will grow in height with the content", ___EmotionJSX(Link, {
     href: "https://pingidentity.com",
     target: "_blank",
-    "aria-label": "".concat(statuses.WARNING, "-bulletin"),
+    "aria-label": "".concat(statuses.WARNING, "-callout"),
     variant: "app"
   }, " Read More")));
 };

package/lib/components/{Bulletin/Bulletin.test.js → Callout/Callout.test.js}

@@ -7,32 +7,32 @@ import { screen } from '@testing-library/react';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { render } from '../../utils/testUtils/testWrapper';
 import { noticeIcons } from '../Icon/NoticeIcon';
-import Bulletin, { BULLETIN_TEST_ID } from './Bulletin';
+import Callout, { CALLOUT_TEST_ID } from './Callout';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TEST_TEXT = 'test text';
 var testColors = (_testColors = {}, _defineProperty(_testColors, statuses.DEFAULT, 'var(--theme-ui-colors-text-secondary)'), _defineProperty(_testColors, statuses.ERROR, 'var(--theme-ui-colors-critical-bright)'), _defineProperty(_testColors, statuses.SUCCESS, 'var(--theme-ui-colors-success-bright)'), _defineProperty(_testColors, statuses.WARNING, 'var(--theme-ui-colors-warning-bright)'), _testColors);
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(Bulletin, props, TEST_TEXT));
+  return render(___EmotionJSX(Callout, props, TEST_TEXT));
 };
 
-describe('Bulletin', function () {
+describe('Callout', function () {
   test('renders', function () {
     getComponent();
     screen.getByText(TEST_TEXT);
   });
   test('renders the default color', function () {
     getComponent();
-    expect(screen.getByTestId(BULLETIN_TEST_ID)).toHaveStyle({
+    expect(screen.getByTestId(CALLOUT_TEST_ID)).toHaveStyle({
       'border-color': testColors[statuses.DEFAULT]
     });
   });
-  test.each([[statuses.DEFAULT, testColors[statuses.DEFAULT]], [statuses.ERROR, testColors[statuses.ERROR]], [statuses.SUCCESS, testColors[statuses.SUCCESS]], [statuses.WARNING, testColors[statuses.WARNING]]])('when given status %s it renders Bulletin with color %s', function (status, expected) {
+  test.each([[statuses.DEFAULT, testColors[statuses.DEFAULT]], [statuses.ERROR, testColors[statuses.ERROR]], [statuses.SUCCESS, testColors[statuses.SUCCESS]], [statuses.WARNING, testColors[statuses.WARNING]]])('when given status %s it renders Callout with color %s', function (status, expected) {
     getComponent({
       status: status
     });
-    expect(screen.getByTestId(BULLETIN_TEST_ID)).toHaveStyle({
+    expect(screen.getByTestId(CALLOUT_TEST_ID)).toHaveStyle({
       'border-color': expected
     });
   });

package/lib/components/Callout/index.js

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

package/lib/components/CopyText/CopyText.js

@@ -154,7 +154,7 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: pressableRef
   }, mergeProps(hoverProps, pressableProps), {
     sx: {
-      width: 'min-content'
+      width: 'fit-content'
     }
   }), ___EmotionJSX(Box, _extends({
     ref: ref,

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -88,23 +88,23 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
   var filterNodesWithChildren = function filterNodesWithChildren(iterableNode) {
     var nodeArr = _Array$from(iterableNode); // with this function we are filtering child items if they have sections
     // we can't filter items because if it would be a section - we can't change childNodes
-    // eslint-disable-next-line array-callback-return,consistent-return
 
 
     var filteredSections = _mapInstanceProperty(nodeArr).call(nodeArr, function f(nodeItem) {
+      var _context;
+
       if ((nodeItem === null || nodeItem === void 0 ? void 0 : nodeItem.type) === 'item') {
         var _nodeItem$value;
 
-        return contains(nodeItem === null || nodeItem === void 0 ? void 0 : (_nodeItem$value = nodeItem.value) === null || _nodeItem$value === void 0 ? void 0 : _nodeItem$value.name, searchValue) ? nodeItem : null;
+        return contains(nodeItem === null || nodeItem === void 0 ? void 0 : (_nodeItem$value = nodeItem.value) === null || _nodeItem$value === void 0 ? void 0 : _nodeItem$value.name, searchValue) && nodeItem;
       }
 
-      if ((nodeItem === null || nodeItem === void 0 ? void 0 : nodeItem.type) === 'section') {
-        var _context;
+      var childNodes = _filterInstanceProperty(_context = _Array$from(nodeItem.childNodes)).call(_context, f); // Don't return sections without children, see UIP-5951
 
-        return _objectSpread(_objectSpread({}, nodeItem), {}, {
-          childNodes: _filterInstanceProperty(_context = _Array$from(nodeItem.childNodes)).call(_context, f)
-        });
-      }
+
+      return childNodes.length !== 0 && _objectSpread(_objectSpread({}, nodeItem), {}, {
+        childNodes: childNodes
+      });
     }); // we are filtering null items here since we were not able to filter them in previous function
 
 

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js

@@ -2,7 +2,6 @@ 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";
@@ -13,13 +12,15 @@ import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 
 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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { Section } from '@react-stately/collections';
 import { axe } from 'jest-axe';
-import { render, screen } from '../../utils/testUtils/testWrapper';
+import { render, screen, within } from '../../utils/testUtils/testWrapper';
 import { EnvironmentBreadcrumb, Item, OverlayProvider } from '../../index';
 import { breadCrumbDataIds } from './EnvironmentBreadcrumb';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -43,6 +44,15 @@ var itemsWithSections = [{
   }, {
     name: 'Baz'
   }]
+}, {
+  name: 'Heading 2',
+  options: [{
+    name: 'Foo'
+  }, {
+    name: 'Zod'
+  }, {
+    name: 'Zay'
+  }]
 }];
 var defaultProps = {
   'data-testid': testEnvBreadcrumb,
@@ -83,11 +93,13 @@ var getSectionsComponent = function getSectionsComponent() {
     return (// eslint-disable-next-line testing-library/no-node-access
       ___EmotionJSX(Section, {
         key: section.name,
-        name: section.name,
+        title: section.name,
         items: section.options
       }, function (item) {
+        var _context;
+
         return ___EmotionJSX(Item, {
-          key: item.name,
+          key: _concatInstanceProperty(_context = "".concat(section.name, "-")).call(_context, item.name),
           childItems: item.options
         }, item.name);
       })
@@ -164,9 +176,9 @@ test('should not call onNamePress when current env button pressed', function ()
   expect(onNamePressMock).not.toHaveBeenCalled();
 });
 test('should render items passed in props', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-  return _regeneratorRuntime.wrap(function _callee$(_context) {
+  return _regeneratorRuntime.wrap(function _callee$(_context2) {
     while (1) {
-      switch (_context.prev = _context.next) {
+      switch (_context2.prev = _context2.next) {
         case 0:
           getComponent();
           expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
@@ -177,7 +189,7 @@ test('should render items passed in props', /*#__PURE__*/_asyncToGenerator( /*#_
 
         case 6:
         case "end":
-          return _context.stop();
+          return _context2.stop();
       }
     }
   }, _callee);
@@ -187,9 +199,24 @@ test('should render items with sections passed in props', function () {
   expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
   expect(screen.queryByRole('option')).not.toBeInTheDocument();
   userEvent.click(screen.getByText(testSelectedItem));
-  expect(screen.getByRole('group')).toBeInTheDocument();
+  var groups = screen.getAllByRole('group');
+  expect(groups).toHaveLength(2);
   expect(screen.queryByRole('listbox')).toBeInTheDocument();
-  expect(screen.queryAllByRole('option')).toHaveLength(3);
+  expect(screen.queryAllByRole('option')).toHaveLength(6);
+
+  _forEachInstanceProperty(groups).call(groups, function (group, index) {
+    var _context3;
+
+    expect(function () {
+      return within(group).getByText(itemsWithSections[index].name);
+    });
+
+    _forEachInstanceProperty(_context3 = itemsWithSections[index].options).call(_context3, function (opt) {
+      return expect(function () {
+        return within(group).getByText(opt.name);
+      });
+    });
+  });
 });
 test('should call onSelectionChange when env clicked', function () {
   var onSelectionChangeMock = jest.fn();
@@ -257,22 +284,22 @@ test('should show empty state in search if there are no results', function () {
 test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
   var _getComponent, container, results;
 
-  return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+  return _regeneratorRuntime.wrap(function _callee2$(_context4) {
     while (1) {
-      switch (_context2.prev = _context2.next) {
+      switch (_context4.prev = _context4.next) {
         case 0:
           jest.useRealTimers();
           _getComponent = getComponent(), container = _getComponent.container;
-          _context2.next = 4;
+          _context4.next = 4;
           return axe(container);
 
         case 4:
-          results = _context2.sent;
+          results = _context4.sent;
           expect(results).toHaveNoViolations();
 
         case 6:
         case "end":
-          return _context2.stop();
+          return _context4.stop();
       }
     }
   }, _callee2);
@@ -309,4 +336,14 @@ test('should add data-id to dropdown list', function () {
   expect(screen.getByRole('listbox', {
     name: 'Items List'
   })).toHaveAttribute('data-id', breadCrumbDataIds.dropdownList);
+});
+test('should hide section title if no search results within it', function () {
+  getSectionsComponent(); // Open popover
+
+  userEvent.click(screen.getByText(testSelectedItem)); // Search for option exclusive to only one section
+
+  userEvent.type(screen.getByRole('searchbox'), 'Zod'); // 'Heading 1' should not be rendered, but 'Heading 2' should be
+
+  expect(screen.queryByText(itemsWithSections[0].name)).not.toBeInTheDocument();
+  expect(screen.queryByText(itemsWithSections[1].name)).toBeInTheDocument();
 });

package/lib/index.js

@@ -22,8 +22,9 @@ export { default as Bracket } from './components/Bracket';
 export * from './components/Bracket';
 export { default as Breadcrumbs } from './components/Breadcrumbs';
 export * from './components/Breadcrumbs';
-export { default as Bulletin } from './components/Bulletin';
-export * from './components/Bulletin';
+export { default as Bulletin } from './components/Callout';
+export { default as Callout } from './components/Callout';
+export * from './components/Callout';
 export { default as Button } from './components/Button';
 export * from './components/Button';
 export { default as Card } from './components/Card';

package/lib/styles/variants/boxes.js

@@ -220,7 +220,8 @@ var textFieldInContainerSlot = {
 };
 var copy = {
   alignItems: 'center',
-  width: 'max-content',
+  wordBreak: 'break-all',
+  overflowWrap: 'break-word',
   '& .is-focused': {
     outline: '1px solid',
     outlineColor: 'active',

package/lib/styles/variants/variants.js

@@ -14,16 +14,19 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import accordion from './accordion';
 import boxes from './boxes';
+import callout from './callout';
 import codeView from './codeView';
-import images from './images';
+import collapsiblePanel from './collapsiblePanel';
+import dataTable from './../../components/DataTable/DataTable.styles';
 import imageUpload from './imageUpload';
+import images from './images';
 import links from './links';
 import listBox from './listBox';
 import loader from './loader';
-import modal from './modal';
 import menu from './menu';
 import menuItem from './menuItem';
 import messages from './messages';
+import modal from './modal';
 import navBar from './navBar';
 import numberField from './numberField';
 import overlayPanel from './overlayPanel';
@@ -34,24 +37,22 @@ import stepper from './stepper';
 import table from './table';
 import * as tabs from './tabs';
 import tooltip from './tooltip';
-import collapsiblePanel from './collapsiblePanel';
-import bulletin from './bulletin';
-import dataTable from './../../components/DataTable/DataTable.styles';
-export default _objectSpread(_objectSpread({
+export default _objectSpread(_objectSpread({}, tabs), {}, {
   accordion: accordion,
   boxes: boxes,
-  bulletin: bulletin,
+  callout: callout,
   codeView: codeView,
-  images: images,
+  collapsiblePanel: collapsiblePanel,
+  dataTable: dataTable,
   imageUpload: imageUpload,
-  loader: loader,
+  images: images,
   links: links,
   listBox: listBox,
+  loader: loader,
   menu: menu,
   menuItem: menuItem,
   messages: messages,
   modal: modal,
-  collapsiblePanel: collapsiblePanel,
   navBar: navBar,
   numberField: numberField,
   overlayPanel: overlayPanel,
@@ -59,8 +60,6 @@ export default _objectSpread(_objectSpread({
   rockerbutton: rockerbutton,
   separator: separator,
   stepper: stepper,
-  table: table
-}, tabs), {}, {
-  tooltip: tooltip,
-  dataTable: dataTable
+  table: table,
+  tooltip: tooltip
 });

package/package.json

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