@pingux/astro 1.2.0-alpha.1 → 1.2.0-alpha.10

package/lib/components/Messages/Messages.test.js

@@ -9,7 +9,7 @@ import { Item } from '@react-stately/collections';
 import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
-import Messages from '.';
+import Messages, { messagesReducerStory, multiMessagesReducerStory } from '.';
 import Button from '../Button';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 jest.mock('@react-aria/live-announcer');
@@ -173,4 +173,14 @@ describe('announcements', function () {
     expect(messages.childElementCount).toBe(1);
     expect(announce).toHaveBeenCalledWith('New message 1', 'polite');
   });
+});
+test('should render messages with messagesReducerStory', function () {
+  getComponent();
+  messagesReducerStory.actions.showSuccessMessage();
+  expect(screen.getByTestId(testId)).toBeInTheDocument();
+});
+test('should render messages with multiMessagesReducerStory', function () {
+  getComponent();
+  multiMessagesReducerStory.actions.showSuccessMessage();
+  expect(screen.getByTestId(testId)).toBeInTheDocument();
 });

package/lib/components/Messages/index.js

@@ -1,2 +1,3 @@
 export { default } from './Messages';
-export * from './utils';
+export * from './utils';
+export { messagesReducer as messagesReducerStory, multiMessagesReducer as multiMessagesReducerStory } from './Messages.reducer';

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -278,7 +278,9 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
           height: '100%',
           m: 5,
           mr: 10,
-          py: 2
+          ml: 0,
+          py: 3,
+          pr: 0
         },
         textProps: {
           sx: {

package/lib/components/NumberField/NumberField.js

@@ -22,6 +22,7 @@ import { useNumberField } from '@react-aria/numberfield';
 import { useNumberFieldState } from '@react-stately/numberfield';
 import { useLocale } from '@react-aria/i18n';
 import { mergeProps } from '@react-aria/utils';
+import omit from 'lodash/omit';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { Box, FieldHelperText, Icon, IconButton, Input, Label } from '../../index';
 import { useField, usePropWarning } from '../../hooks';
@@ -94,7 +95,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, inputProps)), ControlArrows), helperText && ___EmotionJSX(FieldHelperText, {
+  }, fieldControlProps, omit(inputProps, 'name'))), ControlArrows), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText)));
 });

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

@@ -128,4 +128,11 @@ test('increment and decrement buttons shouldn\'t be able to be focused via keybo
   expect(screen.getByLabelText('arrow-up')).not.toHaveFocus();
   userEvent.tab();
   expect(screen.getByLabelText('arrow-down')).not.toHaveFocus();
+});
+test('number field input receiving name attribute', function () {
+  var testName = 'testName';
+  getComponent({
+    name: testName
+  });
+  expect(screen.getByLabelText(testLabel)).toHaveAttribute('name', testName);
 });

package/lib/components/OverlayPanel/OverlayPanel.js

@@ -1,9 +1,8 @@
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-import React, { forwardRef, useRef, useImperativeHandle, useEffect, useState } from 'react';
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { FocusScope } from '@react-aria/focus';
 import Box from '../Box';
@@ -26,14 +25,8 @@ var OverlayPanel = /*#__PURE__*/forwardRef(function (props, ref) {
       onClose = _useOverlayPanelState.onClose;
 
   var overlayPanelRef = useRef();
-
-  var _useState = useState(true),
-      _useState2 = _slicedToArray(_useState, 2),
-      contain = _useState2[0],
-      setIsContained = _useState2[1];
   /* istanbul ignore next */
 
-
   useImperativeHandle(ref, function () {
     return overlayPanelRef.current;
   });
@@ -47,18 +40,12 @@ var OverlayPanel = /*#__PURE__*/forwardRef(function (props, ref) {
     e.stopPropagation();
 
     if (e.key === 'Escape') {
-      setIsContained(false);
+      onClose(state, triggerRef, onCloseProp);
     }
   };
 
-  useEffect(function () {
-    if (!contain && onClose) {
-      onClose(state, triggerRef, onCloseProp);
-    }
-  }, [contain]);
   return ___EmotionJSX(FocusScope, {
-    autoFocus: true,
-    contain: contain
+    autoFocus: true
   }, ___EmotionJSX(Box, _extends({
     variant: "overlayPanel.overlayPanel",
     ref: overlayPanelRef

package/lib/components/OverlayPanel/OverlayPanel.test.js

@@ -60,6 +60,13 @@ test('onClose callback fires when provided', function () {
   });
   expect(onClose).toHaveBeenCalled();
 });
+test('custom classname can be passed', function () {
+  getComponent({
+    className: 'testing-class'
+  });
+  var overlayPanel = screen.getByTestId(testId);
+  expect(overlayPanel).toHaveClass('testing-class');
+});
 test('neither callback fires when not provided', function () {
   var onClose = jest.fn();
   getComponent({
@@ -110,4 +117,35 @@ test('triggerRef.current.focus() fires when provided', function () {
     charCode: 27
   });
   expect(focusFunction).toHaveBeenCalled();
+});
+test('triggerRef.current.focus() does not fire when key other than esc is pressed', function () {
+  var onClose = jest.fn();
+  var focusFunction = jest.fn();
+  var state = {
+    close: onClose
+  };
+  var triggerRef = {
+    current: {
+      focus: focusFunction
+    }
+  };
+  getComponent({
+    state: state,
+    children: ___EmotionJSX("div", null, "Test"),
+    triggerRef: triggerRef
+  });
+  var overlayPanel = screen.getByTestId(testId);
+  fireEvent.keyDown(overlayPanel, {
+    key: 'KeyA',
+    code: 'KeyA',
+    keyCode: 65,
+    charCode: 65
+  });
+  fireEvent.keyUp(overlayPanel, {
+    key: 'KeyA',
+    code: 'KeyA',
+    keyCode: 65,
+    charCode: 65
+  });
+  expect(focusFunction).not.toHaveBeenCalled();
 });

package/lib/components/TextField/TextField.stories.js

@@ -8,6 +8,8 @@ import TextField from '.';
 import { modes as labelModes } from '../Label/constants';
 import statuses from '../../utils/devUtils/constants/statuses.js';
 import Box from '../Box';
+import useCopyToClipboard from '../../hooks/useCopyToClipboard';
+import CopyButton from '../CopyText/CopyButton';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/TextField',
@@ -186,4 +188,74 @@ export var MaxLength = function MaxLength() {
     label: "Example label",
     maxLength: 9
   });
+};
+export var WithSlots = function WithSlots() {
+  var _useState5 = useState("[{ 'type': 'work', 'streetAddress': 'San Antonio MI 47096' },{ 'type': 'home', 'streetAddress': 'Santa Rosa MN 98804' }]"),
+      _useState6 = _slicedToArray(_useState5, 2),
+      addressesValue = _useState6[0],
+      setAddressesValue = _useState6[1];
+
+  var _useState7 = useState("[{ 'status': 'inactive', 'subject': 'example@pingidentity.com' },{ 'status': 'active', 'subject': 'john@pingidentity.com' }]"),
+      _useState8 = _slicedToArray(_useState7, 2),
+      jsonValue = _useState8[0],
+      setJsonValue = _useState8[1];
+
+  var copyAddressesToClipboard = useCopyToClipboard(addressesValue);
+  var copyJsonToClipboard = useCopyToClipboard(jsonValue);
+  var buttonSx = {
+    position: 'absolute',
+    right: 0,
+    top: '5px'
+  };
+  var containerSx = {
+    sx: {
+      '& input': {
+        paddingRight: '40px'
+      }
+    }
+  };
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TextField, {
+    label: "Multiple Addresses",
+    labelMode: "float",
+    onChange: function onChange(e) {
+      return setAddressesValue(e.target.value);
+    },
+    value: addressesValue,
+    containerProps: containerSx,
+    slots: {
+      inContainer: ___EmotionJSX(CopyButton, {
+        onPress: copyAddressesToClipboard,
+        sx: buttonSx,
+        iconProps: {
+          sx: {
+            path: {
+              fill: 'active'
+            }
+          }
+        }
+      })
+    },
+    mb: 30
+  }), ___EmotionJSX(TextField, {
+    label: "Example JSON",
+    labelMode: "float",
+    onChange: function onChange(e) {
+      return setJsonValue(e.target.value);
+    },
+    value: jsonValue,
+    containerProps: containerSx,
+    slots: {
+      inContainer: ___EmotionJSX(CopyButton, {
+        onPress: copyJsonToClipboard,
+        sx: buttonSx,
+        iconProps: {
+          sx: {
+            path: {
+              fill: 'active'
+            }
+          }
+        }
+      })
+    }
+  }));
 };

package/lib/hooks/useAriaLabelWarning/useAriaLabelWarning.js

@@ -7,8 +7,9 @@ import { useEffect } from 'react';
 */
 
 var useAriaLabelWarning = function useAriaLabelWarning(component, ariaLabel) {
+  var condition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   useEffect(function () {
-    if (process.env.NODE_ENV === 'development' && !ariaLabel) {
+    if (process.env.NODE_ENV === 'development' && condition && !ariaLabel) {
       // eslint-disable-next-line no-console
       console.warn("".concat(component, " requires an aria-label"), '\n', '\n', 'NOTE: This is a development-only warning and will not display in production.');
     }

package/lib/styles/variants/buttons.js

@@ -295,6 +295,11 @@ var helpHint = _objectSpread(_objectSpread({}, iconButton), {}, {
   ml: '5px',
   maxWidth: '13px',
   maxHeight: '14px',
+  borderRadius: '5.5px',
+  'svg': {
+    'height': '100%',
+    mb: 0.75
+  },
   'path': {
     fill: 'neutral.20'
   },
@@ -354,7 +359,7 @@ var chipDeleteButton = {
   borderRadius: '50%',
   cursor: 'pointer',
   height: 14,
-  ml: 'xs',
+  mx: '3px !important',
   p: 0,
   width: 14,
   '&.is-focused, &.is-hovered': {
@@ -534,6 +539,75 @@ var tooltipInline = _objectSpread(_objectSpread({}, text), {}, {
   }
 });
 
+var defaultVariant = _objectSpread(_objectSpread({}, base), {}, {
+  bg: 'white',
+  border: '1px solid',
+  borderColor: 'active',
+  '&.is-hovered': _objectSpread({}, defaultHover),
+  '&.is-pressed': _objectSpread({}, defaultActive),
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+var filter = _objectSpread(_objectSpread({}, defaultVariant), {}, {
+  px: 'sm',
+  borderColor: 'neutral.80',
+  height: 40,
+  color: 'active',
+  display: 'flex'
+});
+
+var colorBlock = {
+  bg: 'neutral.95',
+  border: '1px solid',
+  borderColor: 'neutral.90',
+  borderRadius: 10,
+  outline: 'none',
+  cursor: 'pointer',
+  width: 150,
+  minHeight: 40,
+  p: '5px 15px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  '&.is-hovered': {
+    bg: 'neutral.80'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-pressed': {
+    bg: 'neutral.60',
+    borderColor: 'neutral.60'
+  },
+  '& span': {
+    color: 'text.primary',
+    textAlign: 'left'
+  },
+  '&>div': {
+    alignItems: 'baseline'
+  },
+  '&>svg': {
+    color: 'text.secondary',
+    fill: 'text.secondary'
+  },
+  '&.is-configured': {
+    bg: 'active',
+    borderColor: 'active',
+    '& span': {
+      color: 'white'
+    },
+    '&>svg': {
+      color: 'white',
+      fill: 'white'
+    }
+  },
+  '&.is-configured.is-hovered': {
+    bg: 'accent.40',
+    borderColor: 'accent.40'
+  },
+  '&.is-configured.is-pressed': {
+    bg: 'accent.20',
+    borderColor: 'accent.20'
+  }
+};
 export default {
   accordionHeader: accordionHeader,
   chipDeleteButton: chipDeleteButton,
@@ -554,6 +628,7 @@ export default {
   environmentBreadcrumb: environmentBreadcrumb,
   expandableRow: expandableRow,
   fileInputField: fileInputField,
+  filter: filter,
   iconButton: iconButton,
   imageUpload: imageUpload,
   inline: inline,
@@ -573,5 +648,6 @@ export default {
   invertedSquare: invertedSquare,
   tooltipChip: tooltipChip,
   tooltipIconButton: tooltipIconButton,
-  tooltipInline: tooltipInline
+  tooltipInline: tooltipInline,
+  colorBlock: colorBlock
 };

package/lib/styles/variants/text.js

@@ -158,6 +158,20 @@ export var text = {
     color: 'accent.30',
     fontFamily: 'standard'
   }),
+  buttonTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'xs',
+    fontWeight: 0,
+    color: 'text.primary',
+    fontFamily: 'standard',
+    lineHeight: '13px'
+  }),
+  buttonSubtitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'sm',
+    fontWeight: 3,
+    color: 'text.primary',
+    fontFamily: 'standard',
+    lineHeight: '16px'
+  }),
   capsLabel: _objectSpread(_objectSpread({}, wordWrap), {}, {
     color: 'text.secondary',
     textTransform: 'uppercase',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.2.0-alpha.1",
+  "version": "1.2.0-alpha.10",
   "description": "PingUX themeable React component library",
   "author": "uxdev@pingidentity.com",
   "license": "Apache-2.0",
@@ -132,7 +132,7 @@
     "lodash": "^4.17.21",
     "mdi-react": "^7.4.0",
     "moment": "^2.29.1",
-    "prism-react-renderer": "^1.2.1",
+    "prism-react-renderer": "1.2.1",
     "prop-types": "^15.7.2",
     "react-calendar": "^3.4.0",
     "react-color": "^2.19.3",