@pingux/astro 2.24.0 → 2.25.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -237,7 +237,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
237
237
  // there actually is a test for this, but coverage is not picking it up.
238
238
  /* istanbul ignore next */
239
239
  var onBlurTextField = function onBlurTextField() {
240
- if (!hasCustomValue && filteredItems.length === 1) {
240
+ if (hasCustomValue && filteredItems.length === 1) {
241
241
  selectTheOnlyFilteredItem();
242
242
  } else if (hasCustomValue) {
243
243
  addNewBadgeFromInput(filterString);
@@ -256,8 +256,11 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
256
256
  selectionManager.toggleSelection(selectionManager.focusedKey);
257
257
  setFilterString('');
258
258
  }
259
- } else if (!hasCustomValue && filteredItems.length === 1) {
259
+ } else if (hasCustomValue && filteredItems.length === 1) {
260
260
  selectTheOnlyFilteredItem();
261
+ } else if (!hasCustomValue) {
262
+ setFilterString('');
263
+ close();
261
264
  } else if (hasCustomValue) {
262
265
  var _key = e.target.value;
263
266
  if (_key === '') {
@@ -279,6 +282,12 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
279
282
  if (prevKey) selectionManager.setFocusedKey(prevKey);
280
283
  break;
281
284
  }
285
+ case 'Escape':
286
+ {
287
+ setFilterString('');
288
+ close();
289
+ break;
290
+ }
282
291
  default:
283
292
  break;
284
293
  }
@@ -442,18 +451,19 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
442
451
  border: 'none'
443
452
  }
444
453
  },
445
- status: status,
446
- isRestrictiveMultivalues: !hasCustomValue
454
+ status: status
447
455
  });
448
456
  return (0, _react2.jsx)(_MultivaluesContext.MultivaluesContext.Provider, {
449
457
  value: setActiveDescendant
450
458
  }, (0, _react2.jsx)(_.Box, containerProps, (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({
451
459
  onBlur: function onBlur(e) {
452
460
  setIsOpen(false);
453
- if (mode === 'non-restrictive' && filterString !== '') onBlurTextField();
461
+ if (filterString !== '') onBlurTextField();
454
462
  if (_onBlur) _onBlur(e.nativeEvent);
463
+ if (!hasCustomValue) setFilterString('');
455
464
  },
456
465
  onChange: function onChange(e) {
466
+ if (!isOpen) setIsOpen(true);
457
467
  setFilterString(e.target.value);
458
468
  if (onInputChange) onInputChange(e.target.value);
459
469
  },
@@ -599,7 +609,6 @@ MultivaluesField.propTypes = _objectSpread(_objectSpread(_objectSpread({
599
609
  MultivaluesField.defaultProps = _objectSpread({
600
610
  direction: 'bottom',
601
611
  isReadOnly: false,
602
- mode: 'restrictive',
603
612
  scrollBoxProps: {
604
613
  maxHeight: 300
605
614
  }
@@ -600,8 +600,8 @@ test('form does not submit when adding custom value', function () {
600
600
  expect(input).toHaveValue('');
601
601
  var value = 'custom';
602
602
  _userEvent["default"].type(input, value);
603
- expect(input).toHaveValue('');
604
603
  _userEvent["default"].type(input, '{enter}');
604
+ expect(input).toHaveValue('');
605
605
  expect(onFormSubmit).not.toHaveBeenCalled();
606
606
  });
607
607
  test('in non-restrictive mode the value should be trimmed', function () {
@@ -677,4 +677,47 @@ test('deleting the last badge via keyboard moves focus to the previous badge', f
677
677
  });
678
678
  expect(badge2).not.toBeInTheDocument();
679
679
  expect(deleteButton1).toHaveClass('is-focused');
680
+ });
681
+ test('pressing Esc should clear the input', function () {
682
+ getComponent();
683
+ var input = _testWrapper.screen.getByRole('combobox');
684
+ expect(input).toHaveValue('');
685
+ var value = 'custom';
686
+ _userEvent["default"].type(input, value);
687
+ _userEvent["default"].type(input, '{esc}');
688
+ expect(_testWrapper.screen.queryByText(value)).not.toBeInTheDocument();
689
+ expect(input).toHaveValue('');
690
+ expect(input).toHaveFocus();
691
+ _userEvent["default"].type(input, 'Aardvark');
692
+ expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
693
+ });
694
+ test('should clear the input text onBlur', function () {
695
+ getComponent();
696
+ var input = _testWrapper.screen.getByRole('combobox');
697
+ expect(input).toHaveValue('');
698
+ var value = 'custom';
699
+ _userEvent["default"].type(input, value);
700
+ _userEvent["default"].tab();
701
+ expect(_testWrapper.screen.queryByText(value)).not.toBeInTheDocument();
702
+ expect(input).toHaveValue('');
703
+ });
704
+ test('should clear the input text onBlur and enter when a single filter result is showing', function () {
705
+ getComponent();
706
+ var input = _testWrapper.screen.getByRole('combobox');
707
+ expect(input).toHaveValue('');
708
+ var value = 'Snake';
709
+ _userEvent["default"].type(input, value);
710
+ var listbox = _testWrapper.screen.getByRole('listbox');
711
+ expect(listbox).toBeInTheDocument();
712
+ var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
713
+ expect(options.length).toBe(1);
714
+ _userEvent["default"].tab();
715
+ expect(_testWrapper.screen.queryByText(value)).not.toBeInTheDocument();
716
+ expect(input).toHaveValue('');
717
+ _userEvent["default"].type(input, value);
718
+ expect(options.length).toBe(1);
719
+ _userEvent["default"].type(input, '{enter}', {
720
+ skipClick: true
721
+ });
722
+ expect(input).toHaveValue('');
680
723
  });
@@ -8,7 +8,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
8
8
  _Object$defineProperty(exports, "__esModule", {
9
9
  value: true
10
10
  });
11
- exports["default"] = exports.Expandable = exports.Default = exports.CustomWidth = void 0;
11
+ exports["default"] = exports.InnerPanel = exports.Expandable = exports.Default = exports.CustomWidth = void 0;
12
12
  var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
13
13
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
14
14
  var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
@@ -389,4 +389,106 @@ var Expandable = function Expandable() {
389
389
  }, schemaTabContent))), footer))
390
390
  );
391
391
  };
392
- exports.Expandable = Expandable;
392
+ exports.Expandable = Expandable;
393
+ var InnerPanel = function InnerPanel(_ref3) {
394
+ var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref3), _ref3));
395
+ var _useOverlayPanelState4 = (0, _hooks.useOverlayPanelState)(),
396
+ state = _useOverlayPanelState4.state,
397
+ onClose = _useOverlayPanelState4.onClose;
398
+ var _useOverlayPanelState5 = (0, _hooks.useOverlayPanelState)(),
399
+ innerState = _useOverlayPanelState5.state,
400
+ onCloseInner = _useOverlayPanelState5.onClose;
401
+ var outerTriggerRef = (0, _react.useRef)();
402
+ var innerTriggerRef = (0, _react.useRef)();
403
+ var _useState5 = (0, _react.useState)(false),
404
+ _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
405
+ messagesOpen = _useState6[0],
406
+ setMessagesOpen = _useState6[1];
407
+ var toggleMessagesOpen = function toggleMessagesOpen() {
408
+ setMessagesOpen(!messagesOpen);
409
+ };
410
+ var closeOuterPanel = function closeOuterPanel() {
411
+ if (innerState.isOpen) {
412
+ innerState.close();
413
+ }
414
+ onClose(state, outerTriggerRef);
415
+ };
416
+ var closeInnerPanel = function closeInnerPanel() {
417
+ onCloseInner(innerState, innerTriggerRef);
418
+ };
419
+ var inner = innerState.isOpen && (0, _react2.jsx)(_index.OverlayPanel, (0, _extends2["default"])({
420
+ variant: "overlayPanel.innerPanel" // applies higher z-index
421
+ ,
422
+ isOpen: innerState.isOpen
423
+ }, args, {
424
+ state: innerState,
425
+ triggerRef: innerTriggerRef
426
+ }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
427
+ onPress: closeInnerPanel
428
+ }, "Close Inner Panel"), (0, _react2.jsx)(_index.Text, {
429
+ pt: "md"
430
+ }, "Children render here.")));
431
+ var items = [{
432
+ id: 1,
433
+ name: 'Form 1'
434
+ }, {
435
+ id: 2,
436
+ name: 'Form 2'
437
+ }];
438
+ var outer =
439
+ // should have higher z-index applied
440
+ (state.isOpen || state.isTransitioning) && (0, _react2.jsx)(_index.OverlayPanel, (0, _extends2["default"])({
441
+ isOpen: state.isOpen,
442
+ isTransitioning: state.isTransitioning,
443
+ sx: {
444
+ p: '0px'
445
+ }
446
+ }, args, {
447
+ state: state,
448
+ triggerRef: outerTriggerRef
449
+ }), (0, _react2.jsx)(_index.Box, {
450
+ sx: {
451
+ p: '12px'
452
+ }
453
+ }, (0, _react2.jsx)(_index.Button, {
454
+ onPress: closeOuterPanel,
455
+ "aria-expanded": state.isOpen
456
+ }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
457
+ pt: "md",
458
+ mb: "24px"
459
+ }, "Children render here."), (0, _react2.jsx)(_index.ListView, {
460
+ items: items
461
+ }, function (item) {
462
+ return (0, _react2.jsx)(_reactStately.Item, {
463
+ key: item.id
464
+ }, (0, _react2.jsx)(_index.ListViewItem, {
465
+ data: {
466
+ text: item.name
467
+ }
468
+ }));
469
+ }), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
470
+ onPress: toggleMessagesOpen
471
+ }, "Toggle Messages"), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
472
+ ref: innerTriggerRef,
473
+ onPress: innerState.open,
474
+ "aria-expanded": innerState.isOpen
475
+ }, "Open Inner Panel"), inner));
476
+ return (
477
+ // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
478
+ // readers when an overlay opens.
479
+ (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
480
+ ref: outerTriggerRef,
481
+ onPress: state.open,
482
+ "aria-expanded": state.isOpen
483
+ }, "Open Panel"), outer), messagesOpen && (0, _react2.jsx)(_index.Messages, {
484
+ sx: {
485
+ zIndex: 11
486
+ },
487
+ onClose: toggleMessagesOpen
488
+ }, (0, _react2.jsx)(_reactStately.Item, {
489
+ key: "message2",
490
+ status: "success"
491
+ }, "Z Index higher than inner pannel")))
492
+ );
493
+ };
494
+ exports.InnerPanel = InnerPanel;
@@ -225,7 +225,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
225
225
  // there actually is a test for this, but coverage is not picking it up.
226
226
  /* istanbul ignore next */
227
227
  var onBlurTextField = function onBlurTextField() {
228
- if (!hasCustomValue && filteredItems.length === 1) {
228
+ if (hasCustomValue && filteredItems.length === 1) {
229
229
  selectTheOnlyFilteredItem();
230
230
  } else if (hasCustomValue) {
231
231
  addNewBadgeFromInput(filterString);
@@ -244,8 +244,11 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
244
244
  selectionManager.toggleSelection(selectionManager.focusedKey);
245
245
  setFilterString('');
246
246
  }
247
- } else if (!hasCustomValue && filteredItems.length === 1) {
247
+ } else if (hasCustomValue && filteredItems.length === 1) {
248
248
  selectTheOnlyFilteredItem();
249
+ } else if (!hasCustomValue) {
250
+ setFilterString('');
251
+ close();
249
252
  } else if (hasCustomValue) {
250
253
  var _key = e.target.value;
251
254
  if (_key === '') {
@@ -267,6 +270,12 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
267
270
  if (prevKey) selectionManager.setFocusedKey(prevKey);
268
271
  break;
269
272
  }
273
+ case 'Escape':
274
+ {
275
+ setFilterString('');
276
+ close();
277
+ break;
278
+ }
270
279
  default:
271
280
  break;
272
281
  }
@@ -430,18 +439,19 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
430
439
  border: 'none'
431
440
  }
432
441
  },
433
- status: status,
434
- isRestrictiveMultivalues: !hasCustomValue
442
+ status: status
435
443
  });
436
444
  return ___EmotionJSX(MultivaluesContext.Provider, {
437
445
  value: setActiveDescendant
438
446
  }, ___EmotionJSX(Box, containerProps, ___EmotionJSX(TextField, _extends({
439
447
  onBlur: function onBlur(e) {
440
448
  setIsOpen(false);
441
- if (mode === 'non-restrictive' && filterString !== '') onBlurTextField();
449
+ if (filterString !== '') onBlurTextField();
442
450
  if (_onBlur) _onBlur(e.nativeEvent);
451
+ if (!hasCustomValue) setFilterString('');
443
452
  },
444
453
  onChange: function onChange(e) {
454
+ if (!isOpen) setIsOpen(true);
445
455
  setFilterString(e.target.value);
446
456
  if (onInputChange) onInputChange(e.target.value);
447
457
  },
@@ -587,7 +597,6 @@ MultivaluesField.propTypes = _objectSpread(_objectSpread(_objectSpread({
587
597
  MultivaluesField.defaultProps = _objectSpread({
588
598
  direction: 'bottom',
589
599
  isReadOnly: false,
590
- mode: 'restrictive',
591
600
  scrollBoxProps: {
592
601
  maxHeight: 300
593
602
  }
@@ -597,8 +597,8 @@ test('form does not submit when adding custom value', function () {
597
597
  expect(input).toHaveValue('');
598
598
  var value = 'custom';
599
599
  userEvent.type(input, value);
600
- expect(input).toHaveValue('');
601
600
  userEvent.type(input, '{enter}');
601
+ expect(input).toHaveValue('');
602
602
  expect(onFormSubmit).not.toHaveBeenCalled();
603
603
  });
604
604
  test('in non-restrictive mode the value should be trimmed', function () {
@@ -674,4 +674,47 @@ test('deleting the last badge via keyboard moves focus to the previous badge', f
674
674
  });
675
675
  expect(badge2).not.toBeInTheDocument();
676
676
  expect(deleteButton1).toHaveClass('is-focused');
677
+ });
678
+ test('pressing Esc should clear the input', function () {
679
+ getComponent();
680
+ var input = screen.getByRole('combobox');
681
+ expect(input).toHaveValue('');
682
+ var value = 'custom';
683
+ userEvent.type(input, value);
684
+ userEvent.type(input, '{esc}');
685
+ expect(screen.queryByText(value)).not.toBeInTheDocument();
686
+ expect(input).toHaveValue('');
687
+ expect(input).toHaveFocus();
688
+ userEvent.type(input, 'Aardvark');
689
+ expect(screen.queryByRole('listbox')).toBeInTheDocument();
690
+ });
691
+ test('should clear the input text onBlur', function () {
692
+ getComponent();
693
+ var input = screen.getByRole('combobox');
694
+ expect(input).toHaveValue('');
695
+ var value = 'custom';
696
+ userEvent.type(input, value);
697
+ userEvent.tab();
698
+ expect(screen.queryByText(value)).not.toBeInTheDocument();
699
+ expect(input).toHaveValue('');
700
+ });
701
+ test('should clear the input text onBlur and enter when a single filter result is showing', function () {
702
+ getComponent();
703
+ var input = screen.getByRole('combobox');
704
+ expect(input).toHaveValue('');
705
+ var value = 'Snake';
706
+ userEvent.type(input, value);
707
+ var listbox = screen.getByRole('listbox');
708
+ expect(listbox).toBeInTheDocument();
709
+ var options = within(listbox).getAllByRole('option');
710
+ expect(options.length).toBe(1);
711
+ userEvent.tab();
712
+ expect(screen.queryByText(value)).not.toBeInTheDocument();
713
+ expect(input).toHaveValue('');
714
+ userEvent.type(input, value);
715
+ expect(options.length).toBe(1);
716
+ userEvent.type(input, '{enter}', {
717
+ skipClick: true
718
+ });
719
+ expect(input).toHaveValue('');
677
720
  });
@@ -11,7 +11,7 @@ import CloseIcon from '@pingux/mdi-react/CloseIcon';
11
11
  import CogIcon from '@pingux/mdi-react/CogIcon';
12
12
  import DocsLayout from '../../../.storybook/storybookDocsLayout';
13
13
  import { useOverlayPanelState } from '../../hooks';
14
- import { Avatar, Box, Breadcrumbs, Button, ColorField, IconButton, MultivaluesField, OverlayPanel, OverlayProvider, SwitchField, Tab, Tabs, Text, TextField } from '../../index';
14
+ import { Avatar, Box, Breadcrumbs, Button, ColorField, IconButton, ListView, ListViewItem, Messages, MultivaluesField, OverlayPanel, OverlayProvider, SwitchField, Tab, Tabs, Text, TextField } from '../../index';
15
15
  import { pingImg } from '../../utils/devUtils/constants/images';
16
16
  import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
17
17
  import OverlayPanelReadme from './OverlayPanel.mdx';
@@ -372,4 +372,105 @@ export var Expandable = function Expandable() {
372
372
  title: "Schema"
373
373
  }, schemaTabContent))), footer))
374
374
  );
375
+ };
376
+ export var InnerPanel = function InnerPanel(_ref3) {
377
+ var args = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
378
+ var _useOverlayPanelState4 = useOverlayPanelState(),
379
+ state = _useOverlayPanelState4.state,
380
+ onClose = _useOverlayPanelState4.onClose;
381
+ var _useOverlayPanelState5 = useOverlayPanelState(),
382
+ innerState = _useOverlayPanelState5.state,
383
+ onCloseInner = _useOverlayPanelState5.onClose;
384
+ var outerTriggerRef = useRef();
385
+ var innerTriggerRef = useRef();
386
+ var _useState5 = useState(false),
387
+ _useState6 = _slicedToArray(_useState5, 2),
388
+ messagesOpen = _useState6[0],
389
+ setMessagesOpen = _useState6[1];
390
+ var toggleMessagesOpen = function toggleMessagesOpen() {
391
+ setMessagesOpen(!messagesOpen);
392
+ };
393
+ var closeOuterPanel = function closeOuterPanel() {
394
+ if (innerState.isOpen) {
395
+ innerState.close();
396
+ }
397
+ onClose(state, outerTriggerRef);
398
+ };
399
+ var closeInnerPanel = function closeInnerPanel() {
400
+ onCloseInner(innerState, innerTriggerRef);
401
+ };
402
+ var inner = innerState.isOpen && ___EmotionJSX(OverlayPanel, _extends({
403
+ variant: "overlayPanel.innerPanel" // applies higher z-index
404
+ ,
405
+ isOpen: innerState.isOpen
406
+ }, args, {
407
+ state: innerState,
408
+ triggerRef: innerTriggerRef
409
+ }), ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
410
+ onPress: closeInnerPanel
411
+ }, "Close Inner Panel"), ___EmotionJSX(Text, {
412
+ pt: "md"
413
+ }, "Children render here.")));
414
+ var items = [{
415
+ id: 1,
416
+ name: 'Form 1'
417
+ }, {
418
+ id: 2,
419
+ name: 'Form 2'
420
+ }];
421
+ var outer =
422
+ // should have higher z-index applied
423
+ (state.isOpen || state.isTransitioning) && ___EmotionJSX(OverlayPanel, _extends({
424
+ isOpen: state.isOpen,
425
+ isTransitioning: state.isTransitioning,
426
+ sx: {
427
+ p: '0px'
428
+ }
429
+ }, args, {
430
+ state: state,
431
+ triggerRef: outerTriggerRef
432
+ }), ___EmotionJSX(Box, {
433
+ sx: {
434
+ p: '12px'
435
+ }
436
+ }, ___EmotionJSX(Button, {
437
+ onPress: closeOuterPanel,
438
+ "aria-expanded": state.isOpen
439
+ }, "Close Panel"), ___EmotionJSX(Text, {
440
+ pt: "md",
441
+ mb: "24px"
442
+ }, "Children render here."), ___EmotionJSX(ListView, {
443
+ items: items
444
+ }, function (item) {
445
+ return ___EmotionJSX(Item, {
446
+ key: item.id
447
+ }, ___EmotionJSX(ListViewItem, {
448
+ data: {
449
+ text: item.name
450
+ }
451
+ }));
452
+ }), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
453
+ onPress: toggleMessagesOpen
454
+ }, "Toggle Messages"), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
455
+ ref: innerTriggerRef,
456
+ onPress: innerState.open,
457
+ "aria-expanded": innerState.isOpen
458
+ }, "Open Inner Panel"), inner));
459
+ return (
460
+ // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
461
+ // readers when an overlay opens.
462
+ ___EmotionJSX(React.Fragment, null, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
463
+ ref: outerTriggerRef,
464
+ onPress: state.open,
465
+ "aria-expanded": state.isOpen
466
+ }, "Open Panel"), outer), messagesOpen && ___EmotionJSX(Messages, {
467
+ sx: {
468
+ zIndex: 11
469
+ },
470
+ onClose: toggleMessagesOpen
471
+ }, ___EmotionJSX(Item, {
472
+ key: "message2",
473
+ status: "success"
474
+ }, "Z Index higher than inner pannel")))
475
+ );
375
476
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.24.0",
3
+ "version": "2.25.0-alpha.0",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",