@pingux/astro 1.2.1 → 1.3.2-alpha.0

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -27,7 +27,6 @@ import { FocusScope } from '@react-aria/focus';
 import { useListState } from '@react-stately/list';
 import { DismissButton, useOverlayPosition } from '@react-aria/overlays';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
-import { v4 as uuid } from 'uuid';
 import { Chip, Icon, IconButton, PopoverContainer, ScrollBox, TextField } from '../..';
 import ListBox from '../ListBox';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
@@ -52,6 +51,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       disabledKeys = _props$disabledKeys === void 0 ? [] : _props$disabledKeys,
       hasAutoFocus = props.hasAutoFocus,
       hasNoStatusIndicator = props.hasNoStatusIndicator,
+      customInputProps = props.inputProps,
       isDisabled = props.isDisabled,
       isNotFlippable = props.isNotFlippable,
       isReadOnly = props.isReadOnly,
@@ -219,13 +219,17 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
           } else if (hasCustomValue) {
             var _context3;
 
-            var name = e.target.value;
-            var id = uuid();
-            selectionManager.toggleSelection(id);
+            var _key2 = e.target.value;
+
+            if (state.selectionManager.isSelected(_key2)) {
+              return;
+            }
+
+            selectionManager.toggleSelection(_key2);
             setCustomItems(_concatInstanceProperty(_context3 = []).call(_context3, customItems, [{
-              id: id,
-              key: id,
-              name: name
+              id: _key2,
+              key: _key2,
+              name: _key2
             }]));
             setFilterString('');
           }
@@ -319,7 +323,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     onDismiss: close
   }));
 
-  var inputProps = {
+  var inputProps = _objectSpread(_objectSpread({}, customInputProps), {}, {
     controlProps: {
       'aria-expanded': isOpen,
       role: 'combobox'
@@ -335,7 +339,8 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       ref: inputRef,
       variant: 'forms.input.multivaluesWrapper'
     }
-  };
+  });
+
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TextField, _extends({
     onBlur: function onBlur(e) {
       setIsOpen(false);
@@ -385,6 +390,11 @@ MultivaluesField.propTypes = {
   /** Whether the field has a status indicator. */
   hasNoStatusIndicator: PropTypes.bool,
 
+  /**
+   * Props that get passed as-is to the underlying TextField element
+   */
+  inputProps: PropTypes.shape({}),
+
   /** Whether the input is disabled. */
   isDisabled: PropTypes.bool,
 

package/lib/components/MultivaluesField/MultivaluesField.test.js

@@ -212,6 +212,58 @@ test('changing the input value and hitting enter creates new value in non-restri
   var chipContainer = chip.parentElement;
   expect(chipContainer).toHaveAttribute('role', 'presentation');
 });
+test('in non-restrictive mode "onSelectionChange" returns entered keys', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    mode: 'non-restrictive',
+    onSelectionChange: onSelectionChange
+  });
+  var input = screen.getByRole('combobox');
+  var value = 'custom';
+  userEvent.type(input, value);
+  userEvent.type(input, '{enter}');
+  var chip = screen.queryByText(value);
+  expect(chip).toBeInTheDocument();
+  expect(onSelectionChange).toBeCalledTimes(1);
+  expect(onSelectionChange.mock.calls[0][0].has(value)).toBeTruthy();
+});
+test('in non-restrictive mode the same value cannot be applied twice', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    mode: 'non-restrictive',
+    onSelectionChange: onSelectionChange
+  });
+  var input = screen.getByRole('combobox');
+  var value = 'custom';
+  userEvent.type(input, value);
+  userEvent.type(input, '{enter}');
+  var chip = screen.queryByText(value);
+  expect(chip).toBeInTheDocument();
+  expect(input).toHaveValue('');
+  userEvent.type(input, value);
+  userEvent.type(input, '{enter}');
+  expect(input).toHaveValue(value);
+  expect(onSelectionChange).toBeCalledTimes(1);
+});
+test('in non-restrictive mode the value that was already selected using the list cannot be applied', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    mode: 'non-restrictive',
+    onSelectionChange: onSelectionChange
+  });
+  var input = screen.getByRole('combobox');
+  input.focus();
+  var listbox = screen.getByRole('listbox');
+  var options = within(listbox).getAllByRole('option');
+  var firstOption = options[0];
+  firstOption.click();
+  expect(onSelectionChange.mock.calls[0][0].has(items[0].name)).toBeTruthy();
+  onSelectionChange.mockClear();
+  userEvent.type(input, items[0].name);
+  userEvent.type(input, '{enter}');
+  expect(input).toHaveValue(items[0].name);
+  expect(onSelectionChange).not.toBeCalled();
+});
 test('options can be focused via keyboard', function () {
   getComponent();
   var input = screen.getByRole('combobox');

package/lib/components/NavBar/NavBar.js

@@ -1,4 +1,7 @@
-import React from 'react';
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { NavBarContext } from '../../context/NavBarContext';
+import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import Box from '../Box/Box';
 /**
  * Composed component that spreads children.
@@ -14,11 +17,29 @@ import Box from '../Box/Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var NavBar = function NavBar(props) {
-  return ___EmotionJSX(Box, {
-    variant: "boxes.navBar",
+  var defaultSelectedKeys = props.defaultSelectedKeys;
+
+  var _useState = useState(defaultSelectedKeys),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedKeys = _useState2[0],
+      setSelectedKeys = _useState2[1];
+
+  return ___EmotionJSX(NavBarContext.Provider, {
+    value: {
+      selectedKeys: selectedKeys,
+      setSelectedKeys: setSelectedKeys
+    }
+  }, ___EmotionJSX(Box, {
+    variant: "navBar.container",
     role: "navigation",
     as: "nav"
-  }, props.children);
+  }, props.children));
 };
 
+NavBar.propTypes = {
+  defaultSelectedKeys: isIterableProp
+};
+NavBar.defaultProps = {
+  defaultSelectedKeys: []
+};
 export default NavBar;