@pingux/astro 1.3.0 → 1.3.2-alpha.1

package/lib/components/Input/Input.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _Number$isInteger from "@babel/runtime-corejs3/core-js-stable/number/is-integer";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import React, { forwardRef } from 'react';
 import { Input as ThemeUIInput } from 'theme-ui';
 import PropTypes from 'prop-types';
-import { useAriaLabelWarning } from '../../hooks';
 import isValidPositiveInt from '../../utils/devUtils/props/isValidPositiveInt';
 /**
  * Base input component.
@@ -21,19 +21,11 @@ var Input = /*#__PURE__*/forwardRef(function (props, ref) {
       maxLength = props.maxLength,
       others = _objectWithoutProperties(props, ["name", "placeholder", "maxLength"]);
 
-  var ariaLabel = props['aria-label'] || name;
-  useAriaLabelWarning('Input', ariaLabel || placeholder);
-
-  if (!ariaLabel && !placeholder) {
-    ariaLabel = 'Input';
-  }
-
   return ___EmotionJSX(ThemeUIInput, _extends({
-    "aria-label": ariaLabel,
     ref: ref,
     name: name,
     placeholder: placeholder,
-    maxLength: maxLength === 0 ? 'null' : maxLength
+    maxLength: _Number$isInteger(maxLength) && maxLength > 0 ? maxLength : undefined
   }, others));
 });
 Input.displayName = 'Input';

package/lib/components/Input/Input.test.js

@@ -7,7 +7,8 @@ import axeTest from '../../utils/testUtils/testAxe';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-input';
 var defaultProps = {
-  'data-testid': testId
+  'data-testid': testId,
+  'aria-label': 'My Input'
 };
 
 var getComponent = function getComponent() {
@@ -38,11 +39,19 @@ test('maxlength field with a set maxlength', function () {
   userEvent.type(input, 'banana');
   expect(input.value.length).toBe(3);
 });
-test('maxlength field set as a negative number or zero', function () {
+test('maxlength field is not set as null', function () {
   getComponent({
     maxLength: null
   });
   var input = screen.getByTestId(testId);
   userEvent.type(input, 'banana');
   expect(input.value.length).toBe(6);
+});
+test('maxlength field is not set as zero', function () {
+  getComponent({
+    maxLength: 0
+  });
+  var input = screen.getByTestId(testId);
+  userEvent.type(input, 'banana');
+  expect(input.value.length).toBe(6);
 });

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/NumberField/NumberField.js

@@ -14,10 +14,10 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-import React, { forwardRef, useImperativeHandle } from 'react';
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import ArrowDropUpIcon from 'mdi-react/ArrowDropUpIcon';
-import ArrowDropDownIcon from 'mdi-react/ArrowDropDownIcon';
+import MenuUp from 'mdi-react/MenuUpIcon';
+import MenuDown from 'mdi-react/MenuDownIcon';
 import { useNumberField } from '@react-aria/numberfield';
 import { useNumberFieldState } from '@react-stately/numberfield';
 import { useLocale } from '@react-aria/i18n';
@@ -73,18 +73,38 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "numberField.arrows"
   }, ___EmotionJSX(IconButton, _extends({}, incrementButtonProps, {
     ref: decRef,
-    tabIndex: "-1"
+    tabIndex: "-1",
+    p: 0
   }), ___EmotionJSX(Icon, {
-    icon: ArrowDropUpIcon,
-    size: 12
+    icon: MenuUp,
+    size: 18
   })), ___EmotionJSX(IconButton, _extends({}, decrementButtonProps, {
     ref: incrRef,
-    tabIndex: "-1"
+    tabIndex: "-1",
+    p: 0
   }), ___EmotionJSX(Icon, {
-    icon: ArrowDropDownIcon,
-    size: 12
-  })));
-
+    icon: MenuDown,
+    size: 18
+  }))); // this needed to remove console warning in React 16
+  // I believe once we update to 17 - we can remove this
+
+
+  var onInputFocus = useCallback(function (e) {
+    e.persist();
+    fieldControlProps.onFocus(e);
+    inputProps.onFocus(e);
+  }, [fieldControlProps, inputProps]);
+  var onInputBlur = useCallback(function (e) {
+    e.persist();
+    fieldControlProps.onBlur(e);
+    inputProps.onBlur(e);
+  }, [fieldControlProps, inputProps]);
+  var updatedFieldControlProps = useMemo(function () {
+    return _objectSpread(_objectSpread({}, fieldControlProps), {}, {
+      onFocus: onInputFocus,
+      onBlur: onInputBlur
+    });
+  }, [fieldControlProps, onInputBlur, onInputFocus]);
   return ___EmotionJSX(Box, fieldContainerProps, ___EmotionJSX(Label, mergeProps(fieldLabelProps, labelProps)), ___EmotionJSX(Box, _extends({
     variant: "numberField.noDefaultArrows"
   }, groupProps), ___EmotionJSX(Box, {
@@ -95,7 +115,7 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: inputRef // we don't want to merge this props, we want to
     // overwrite them like defaultValue, value, ect.
 
-  }, fieldControlProps, omit(inputProps, 'name'))), ControlArrows), helperText && ___EmotionJSX(FieldHelperText, {
+  }, updatedFieldControlProps, omit(inputProps, ['name', 'onFocus', 'onBlur']))), ControlArrows), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText)));
 });

package/lib/components/NumberField/NumberField.test.js

@@ -135,4 +135,9 @@ test('number field input receiving name attribute', function () {
     name: testName
   });
   expect(screen.getByLabelText(testLabel)).toHaveAttribute('name', testName);
+});
+test('number field can be focused', function () {
+  getComponent();
+  userEvent.tab();
+  expect(screen.getByLabelText(testLabel)).toHaveClass('is-focused');
 });

package/lib/components/PageHeader/PageHeader.js

@@ -4,12 +4,14 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import Text from '../Text/Text';
 import Box from '../Box/Box';
+import { useDeprecationWarning } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var PageHeader = /*#__PURE__*/forwardRef(function (props, ref) {
   var title = props.title,
       children = props.children,
       others = _objectWithoutProperties(props, ["title", "children"]);
 
+  useDeprecationWarning('The Page Header component will be deprecated in Astro-UI 2.0.0.');
   return ___EmotionJSX(Box, _extends({
     isRow: true,
     justifyContent: "space-between",

package/lib/components/PageHeader/PageHeader.stories.js

@@ -2,10 +2,14 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import PageHeader from '../PageHeader/PageHeader';
 import Button from '../Button/Button';
+import withDeprecationWarning from '../../utils/devUtils/decorators/withDeprecationWarning';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'PageHeader',
+  title: 'Deprecated/PageHeader',
   component: PageHeader,
+  decorators: [function (Story, context) {
+    return withDeprecationWarning(Story, context, 'The `PageHeader` component will be deprecated in Astro-UI 2.0.0.');
+  }],
   argTypes: {
     title: {
       control: {

package/lib/components/RadioGroupField/RadioGroupField.js

@@ -63,17 +63,21 @@ var RadioGroupField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, radioGroupProps), ___EmotionJSX(Label, _extends({
     isDisabled: isDisabled,
     hintText: hintText,
-    isRequired: isRequired
-  }, labelProps), label), helperText && ___EmotionJSX(FieldHelperText, {
-    status: status
-  }, helperText), ___EmotionJSX(Box, {
+    isRequired: isRequired,
+    variant: "forms.label.radioGroup"
+  }, labelProps), label), ___EmotionJSX(Box, {
     variant: "forms.radioGroupWrapper",
     isRow: orientation === ORIENTATION.HORIZONTAL
   }, ___EmotionJSX(RadioContext.Provider, {
     value: _objectSpread({
       isDisabled: isDisabled
     }, state)
-  }, children)));
+  }, children)), helperText && ___EmotionJSX(FieldHelperText, {
+    status: status,
+    sx: {
+      pt: 'xs'
+    }
+  }, helperText));
 });
 RadioGroupField.propTypes = {
   /** The name of the RadioGroupField, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name_and_radio_buttons). */

package/lib/components/SelectField/SelectField.stories.js

@@ -16,7 +16,6 @@ import { useAsyncList } from '@react-stately/data';
 import { SelectField, Item, Separator, Section } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { modes as labelModes } from '../Label/constants';
-import Box from '../Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var animals = [{
   name: 'Aardvark',
@@ -195,52 +194,6 @@ export var FloatLabel = function FloatLabel() {
     key: "yellow"
   }, "Yellow"));
 };
-export var LeftLabel = function LeftLabel() {
-  return ___EmotionJSX(Box, {
-    gap: "xl",
-    width: "100%"
-  }, ___EmotionJSX(SelectField, {
-    helperText: "Here is some helpful text...",
-    label: "Example Label",
-    labelMode: "left"
-  }, ___EmotionJSX(Item, {
-    key: "red"
-  }, "Red"), ___EmotionJSX(Item, {
-    key: "blue"
-  }, "Blue"), ___EmotionJSX(Item, {
-    key: "yellow"
-  }, "Yellow")), ___EmotionJSX(SelectField, {
-    label: "Example Label that is much longer than the previous one",
-    labelMode: "left"
-  }, ___EmotionJSX(Item, {
-    key: "red"
-  }, "Red"), ___EmotionJSX(Item, {
-    key: "blue"
-  }, "Blue"), ___EmotionJSX(Item, {
-    key: "yellow"
-  }, "Yellow")), ___EmotionJSX(SelectField, {
-    label: "Example label with set width",
-    labelMode: "left",
-    containerProps: {
-      sx: {
-        gridTemplateColumns: '120px auto'
-      }
-    }
-  }, ___EmotionJSX(Item, {
-    key: "red"
-  }, "Red"), ___EmotionJSX(Item, {
-    key: "blue"
-  }, "Blue"), ___EmotionJSX(Item, {
-    key: "yellow"
-  }, "Yellow")));
-};
-LeftLabel.parameters = {
-  docs: {
-    description: {
-      story: 'Users are able to override the default 40% column width when using left label by providing a new gridTemplatesColumn value, as shown in the example below.'
-    }
-  }
-};
 export var Controlled = function Controlled() {
   var _useState = useState('yellow'),
       _useState2 = _slicedToArray(_useState, 2),
@@ -299,15 +252,14 @@ export var DisabledOptions = function DisabledOptions() {
     key: "red"
   }, "Red"), ___EmotionJSX(Item, {
     key: "blue"
-  }, "Blue (disabled)"), ___EmotionJSX(Item, {
+  }, "Blue"), ___EmotionJSX(Item, {
     key: "yellow"
   }, "Yellow"));
 };
 export var NoOptionsAvailable = function NoOptionsAvailable() {
   return ___EmotionJSX(SelectField, {
     label: "Select an option...",
-    isDisabled: true,
-    defaultText: "No options available"
+    placeholder: "No options available"
   });
 };
 export var HelperText = function HelperText() {

package/lib/components/Tabs/Tabs.stories.js

@@ -161,17 +161,6 @@ export var CustomTabLine = function CustomTabLine() {
     }, item.children);
   });
 };
-export var Orientation = function Orientation() {
-  return ___EmotionJSX(Tabs, {
-    orientation: "vertical",
-    items: tabs
-  }, function (item) {
-    return ___EmotionJSX(Tab, {
-      key: item.name,
-      title: item.name
-    }, item.children);
-  });
-};
 export var TabPanelProps = function TabPanelProps() {
   return ___EmotionJSX(Tabs, {
     tabPanelProps: {

package/lib/hooks/useField/useField.js

@@ -156,8 +156,8 @@ var useField = function useField() {
   }),
       focusWithinProps = _useFocusWithin.focusWithinProps;
 
-  var isFloatLabel = labelMode === labelModes.FLOAT;
-  var isLeftLabel = labelMode === labelModes.LEFT;
+  var isFloatLabel = labelMode === labelModes.FLOAT || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.labelMode) === labelModes.FLOAT;
+  var isLeftLabel = labelMode === labelModes.LEFT || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.labelMode) === labelModes.LEFT;
   var isFloatLabelActive = isFloatLabel && (hasValue || hasFocusWithin || (containerProps === null || containerProps === void 0 ? void 0 : containerProps.isFloatLabelActive));
 
   var _useStatusClasses2 = useStatusClasses(containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, {

package/lib/styles/forms/checkbox.js

@@ -2,7 +2,6 @@
 // Default checkbox
 export var checkbox = {
   color: 'active',
-  mr: 'sm',
   'input:focus ~ &': {
     bg: 'transparent'
   },

package/lib/styles/forms/input.js

@@ -186,5 +186,5 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {},
   }
 });
 input.numberField = _objectSpread(_objectSpread({}, input), {}, {
-  pr: '27px'
+  pr: '28px'
 });

package/lib/styles/forms/label.js

@@ -69,4 +69,7 @@ label.checkbox = _objectSpread(_objectSpread({}, text.base), {}, {
   width: 'auto',
   alignItems: 'center',
   cursor: 'pointer'
+});
+label.radioGroup = _objectSpread(_objectSpread({}, label), {}, {
+  fontWeight: 1
 });

package/lib/styles/forms/radio.js

@@ -4,7 +4,7 @@ export var radio = {
   width: 20,
   height: 20,
   color: 'active',
-  mr: 'sm',
+  mr: 'xs',
   // override the default focus styling
   'input:focus ~ &': {
     bg: 'transparent'

package/lib/styles/forms/switch.js

@@ -1,5 +1,7 @@
 export var label = {
-  alignItems: 'center'
+  alignItems: 'center',
+  fontSize: 'md',
+  color: 'text.primary'
 };
 export var container = {
   mr: 5,

package/lib/styles/variants/boxes.js

@@ -34,7 +34,10 @@ var radioContainer = {
 }; // Used to add spacing for content shown when a radio is checked
 
 var radioCheckedContent = {
-  py: 'md'
+  pb: 'sm',
+  pl: 'lg',
+  color: 'text.secondary',
+  fontSize: 'md'
 };
 
 var listItem = _objectSpread(_objectSpread({}, base), {}, {

package/lib/styles/variants/text.js

@@ -43,7 +43,6 @@ var tabLabel = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {
 
 var fieldHelperText = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
   fontSize: 'sm',
-  pb: 'sm',
   '&.is-default': {
     color: 'text.secondary'
   },

package/package.json

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