@pingux/astro 2.0.0-beta.1 → 2.0.0

package/README.md

@@ -1,6 +1,6 @@
 # `@pingux/astro`
 
-Astro is a lightweight, composable, and themeable React component library. Astro was created to help developers and designers create consistent, user friendly, and accessible UIs across all Ping products. Please visit https://pingidentity.design for more information and to read individual component documentation.
+Astro is a lightweight, composable, and themeable React component library. Astro was created to help developers and designers create consistent, user friendly, and accessible UIs across all Ping products. Please visit https://pingidentity.design for more information. To read individual component documentation, [our Storybook docs site](https://storybook.pingidentity.design) is a great resource.
 
 ## Installing
 
@@ -21,8 +21,8 @@ Yarn:
 
 All apps should be wrapped in an `<AstroWrapper>` for full functionality and styling.
 
-```
-import { AstroWrapper } from ‘@pingux/astro’;
+```js
+import { AstroWrapper } from '@pingux/astro';
 
 <AstroWrapper>
   <App />
@@ -37,9 +37,9 @@ Astro uses [Storybook](https://storybook.js.org/) for component documentation. O
 
 The Storybook server defaults to `https://localhost:6006`. This port can be customized by running the command start -p 9009. For example, this will start Storybook on port 9009. More information on customizing Storybook CLI options can be found at https://storybook.js.org/docs/react/api/cli-options. 
 
-Component prop documentation is available under the “documentation” tab per each component story. Most props can be toggled and configured for preview purposes within the prop table.
+Component prop documentation is available under the "documentation" tab per each component story. Most props can be toggled and configured for preview purposes within the prop table.
 
-For example, to view the disabled button styling, navigate to the Button story’s props table, locate the “isDisabled” prop, and toggle to “true”. This change allows you to preview the disabled button’s styling and functionality.
+For example, to view the disabled button styling, navigate to the Button story’s props table, locate the "isDisabled" prop, and toggle to "true". This change allows you to preview the disabled button’s styling and functionality.
 
 ## Yarn
 We use a modern version of [Yarn](https://yarnpkg.com/getting-started) for package management with the [Plug'n'Play](https://yarnpkg.com/features/pnp) feature enabled. This allows for a [Zero Install](https://yarnpkg.com/features/zero-installs) approach to be used.

package/lib/README.md

@@ -1,6 +1,6 @@
 # `@pingux/astro`
 
-Astro is a lightweight, composable, and themeable React component library. Astro was created to help developers and designers create consistent, user friendly, and accessible UIs across all Ping products. Please visit https://pingidentity.design for more information and to read individual component documentation.
+Astro is a lightweight, composable, and themeable React component library. Astro was created to help developers and designers create consistent, user friendly, and accessible UIs across all Ping products. Please visit https://pingidentity.design for more information. To read individual component documentation, [our Storybook docs site](https://storybook.pingidentity.design) is a great resource.
 
 ## Installing
 
@@ -21,8 +21,8 @@ Yarn:
 
 All apps should be wrapped in an `<AstroWrapper>` for full functionality and styling.
 
-```
-import { AstroWrapper } from ‘@pingux/astro’;
+```js
+import { AstroWrapper } from '@pingux/astro';
 
 <AstroWrapper>
   <App />
@@ -37,9 +37,9 @@ Astro uses [Storybook](https://storybook.js.org/) for component documentation. O
 
 The Storybook server defaults to `https://localhost:6006`. This port can be customized by running the command start -p 9009. For example, this will start Storybook on port 9009. More information on customizing Storybook CLI options can be found at https://storybook.js.org/docs/react/api/cli-options. 
 
-Component prop documentation is available under the “documentation” tab per each component story. Most props can be toggled and configured for preview purposes within the prop table.
+Component prop documentation is available under the "documentation" tab per each component story. Most props can be toggled and configured for preview purposes within the prop table.
 
-For example, to view the disabled button styling, navigate to the Button story’s props table, locate the “isDisabled” prop, and toggle to “true”. This change allows you to preview the disabled button’s styling and functionality.
+For example, to view the disabled button styling, navigate to the Button story’s props table, locate the "isDisabled" prop, and toggle to "true". This change allows you to preview the disabled button’s styling and functionality.
 
 ## Yarn
 We use a modern version of [Yarn](https://yarnpkg.com/getting-started) for package management with the [Plug'n'Play](https://yarnpkg.com/features/pnp) feature enabled. This allows for a [Zero Install](https://yarnpkg.com/features/zero-installs) approach to be used.

package/lib/cjs/components/CopyText/CopyText.js

@@ -32,8 +32,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
     others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return (0, _react2.jsx)(_index.TooltipTrigger, (0, _extends2["default"])({
     key: tooltip,
-    direction: "top",
-    isNotFlippable: true
+    direction: "top"
   }, others), children, (0, _react2.jsx)(_index.Tooltip, null, tooltip));
 };
 TooltipWrapper.propTypes = {

package/lib/cjs/components/CopyText/CopyText.stories.js

@@ -15,6 +15,11 @@ var _react2 = require("@emotion/react");
 var _default = {
   title: 'Components/CopyText',
   component: _index.CopyText,
+  decorators: [function (Story) {
+    return (0, _react2.jsx)(_index.Box, {
+      pt: "10px"
+    }, (0, _react2.jsx)(Story, null));
+  }],
   parameters: {
     docs: {
       page: function page() {

package/lib/cjs/components/MultivaluesField/MultivaluesField.js

@@ -18,6 +18,7 @@ exports["default"] = void 0;
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+var _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
@@ -202,7 +203,10 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   }, [isOpen]);
   var addNewBadgeFromInput = function addNewBadgeFromInput(inputValue) {
     var _context3, _context4;
-    var key = inputValue;
+    var key = (0, _trim["default"])(inputValue).call(inputValue);
+    if (key === '') {
+      return;
+    }
     if (state.selectionManager.isSelected(key)) {
       return;
     }

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

@@ -582,4 +582,28 @@ test('form does not submit when adding custom value', function () {
   expect(input).toHaveValue('');
   _userEvent["default"].type(input, '{enter}');
   expect(onFormSubmit).not.toHaveBeenCalled();
+});
+test('in non-restrictive mode the value should be trimmed', function () {
+  getComponent({
+    mode: 'non-restrictive'
+  });
+  var input = _testWrapper.screen.getByRole('combobox');
+  expect(input).toHaveValue('');
+  var value = 'test ';
+  var trimmedValue = 'test';
+  _userEvent["default"].type(input, value);
+  _userEvent["default"].type(input, '{enter}');
+  var badge = _testWrapper.screen.queryByText(value, {
+    normalizer: (0, _testWrapper.getDefaultNormalizer)({
+      trim: false
+    })
+  });
+  var trimmedBadge = _testWrapper.screen.queryByText(trimmedValue, {
+    normalizer: (0, _testWrapper.getDefaultNormalizer)({
+      trim: false
+    })
+  });
+  expect(badge).not.toBeInTheDocument();
+  expect(trimmedBadge).toBeInTheDocument();
+  expect(input).toHaveValue('');
 });

package/lib/cjs/components/NavBarSection/NavBarItemHeader.js

@@ -112,7 +112,7 @@ var NavBarPrimaryItemHeader = function NavBarPrimaryItemHeader(_ref) {
     },
     "aria-hidden": "true"
   }), (0, _react2.jsx)(_index.Text, {
-    variant: "navBarHeaderText"
+    variant: "variants.navBar.headerText"
   }, heading), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center",

package/lib/cjs/components/NavBarSection/NavBarSection.js

@@ -142,7 +142,7 @@ var SectionItem = function SectionItem(_ref2) {
 var PrimaryItem = function PrimaryItem(_ref3) {
   var item = _ref3.item;
   return (0, _react2.jsx)(_.Link, {
-    variant: "buttons.navBarSectionButton",
+    variant: "variants.navBar.sectionButton",
     href: item.href,
     target: "_blank"
   }, (0, _react2.jsx)(_NavBarItemHeader["default"], {

package/lib/cjs/components/SwitchField/SwitchField.stories.js

@@ -130,10 +130,14 @@ var Required = function Required() {
 };
 exports.Required = Required;
 var WithTooltip = function WithTooltip() {
+  var tooltipTrigger = (0, _react.useRef)();
   return (0, _react2.jsx)(_index.TooltipTrigger, {
     crossOffset: 15,
-    offset: 20
-  }, (0, _react2.jsx)(_interactions.Pressable, null, (0, _react2.jsx)(_index.SwitchField, {
+    offset: 20,
+    targetRef: tooltipTrigger
+  }, (0, _react2.jsx)(_interactions.Pressable, {
+    ref: tooltipTrigger
+  }, (0, _react2.jsx)(_index.SwitchField, {
     "aria-label": "my-label",
     value: "my-switch"
   })), (0, _react2.jsx)(_index.Tooltip, null, "Tooltip Content"));

package/lib/cjs/recipes/LinkedListView.stories.js

@@ -127,7 +127,7 @@ var Default = function Default(_ref) {
     var color = '#CACED3';
     return (0, _react2.jsx)(_index.Box, {
       sx: {
-        width: '20px',
+        width: '15px',
         position: 'relative'
       }
     }, (0, _react2.jsx)(_index.Box, {
@@ -185,7 +185,7 @@ var Default = function Default(_ref) {
         position: 'absolute',
         bottom: 0,
         left: 12,
-        top: 55
+        top: 50
       }
     }, (0, _react2.jsx)("svg", {
       xmlns: "http://www.w3.org/2000/svg",

package/lib/components/CopyText/CopyText.js

@@ -19,8 +19,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
     others = _objectWithoutProperties(_ref, _excluded);
   return ___EmotionJSX(TooltipTrigger, _extends({
     key: tooltip,
-    direction: "top",
-    isNotFlippable: true
+    direction: "top"
   }, others), children, ___EmotionJSX(Tooltip, null, tooltip));
 };
 TooltipWrapper.propTypes = {

package/lib/components/CopyText/CopyText.stories.js

@@ -1,12 +1,17 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { CopyText, Link, Text } from '../../index';
+import { Box, CopyText, Link, Text } from '../../index';
 import CopyTextReadme from './CopyText.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/CopyText',
   component: CopyText,
+  decorators: [function (Story) {
+    return ___EmotionJSX(Box, {
+      pt: "10px"
+    }, ___EmotionJSX(Story, null));
+  }],
   parameters: {
     docs: {
       page: function page() {

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -15,6 +15,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
@@ -191,7 +192,10 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [isOpen]);
   var addNewBadgeFromInput = function addNewBadgeFromInput(inputValue) {
     var _context3, _context4;
-    var key = inputValue;
+    var key = _trimInstanceProperty(inputValue).call(inputValue);
+    if (key === '') {
+      return;
+    }
     if (state.selectionManager.isSelected(key)) {
       return;
     }

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

@@ -16,7 +16,7 @@ import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
 import { Item, MultivaluesField, OverlayProvider } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { render, screen, within } from '../../utils/testUtils/testWrapper';
+import { getDefaultNormalizer, render, screen, within } from '../../utils/testUtils/testWrapper';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var items = [{
   id: 1,
@@ -579,4 +579,28 @@ test('form does not submit when adding custom value', function () {
   expect(input).toHaveValue('');
   userEvent.type(input, '{enter}');
   expect(onFormSubmit).not.toHaveBeenCalled();
+});
+test('in non-restrictive mode the value should be trimmed', function () {
+  getComponent({
+    mode: 'non-restrictive'
+  });
+  var input = screen.getByRole('combobox');
+  expect(input).toHaveValue('');
+  var value = 'test ';
+  var trimmedValue = 'test';
+  userEvent.type(input, value);
+  userEvent.type(input, '{enter}');
+  var badge = screen.queryByText(value, {
+    normalizer: getDefaultNormalizer({
+      trim: false
+    })
+  });
+  var trimmedBadge = screen.queryByText(trimmedValue, {
+    normalizer: getDefaultNormalizer({
+      trim: false
+    })
+  });
+  expect(badge).not.toBeInTheDocument();
+  expect(trimmedBadge).toBeInTheDocument();
+  expect(input).toHaveValue('');
 });

package/lib/components/NavBarSection/NavBarItemHeader.js

@@ -99,7 +99,7 @@ var NavBarPrimaryItemHeader = function NavBarPrimaryItemHeader(_ref) {
     },
     "aria-hidden": "true"
   }), ___EmotionJSX(Text, {
-    variant: "navBarHeaderText"
+    variant: "variants.navBar.headerText"
   }, heading), ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center",

package/lib/components/NavBarSection/NavBarSection.js

@@ -129,7 +129,7 @@ var SectionItem = function SectionItem(_ref2) {
 var PrimaryItem = function PrimaryItem(_ref3) {
   var item = _ref3.item;
   return ___EmotionJSX(Link, {
-    variant: "buttons.navBarSectionButton",
+    variant: "variants.navBar.sectionButton",
     href: item.href,
     target: "_blank"
   }, ___EmotionJSX(NavBarItemHeader, {

package/lib/components/SwitchField/SwitchField.stories.js

@@ -10,7 +10,7 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { Pressable } from '@react-aria/interactions';
 import { SwitchField, Tooltip, TooltipTrigger } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
@@ -112,10 +112,14 @@ export var Required = function Required() {
   });
 };
 export var WithTooltip = function WithTooltip() {
+  var tooltipTrigger = useRef();
   return ___EmotionJSX(TooltipTrigger, {
     crossOffset: 15,
-    offset: 20
-  }, ___EmotionJSX(Pressable, null, ___EmotionJSX(SwitchField, {
+    offset: 20,
+    targetRef: tooltipTrigger
+  }, ___EmotionJSX(Pressable, {
+    ref: tooltipTrigger
+  }, ___EmotionJSX(SwitchField, {
     "aria-label": "my-label",
     value: "my-switch"
   })), ___EmotionJSX(Tooltip, null, "Tooltip Content"));

package/lib/recipes/LinkedListView.stories.js

@@ -113,7 +113,7 @@ export var Default = function Default(_ref) {
     var color = '#CACED3';
     return ___EmotionJSX(Box, {
       sx: {
-        width: '20px',
+        width: '15px',
         position: 'relative'
       }
     }, ___EmotionJSX(Box, {
@@ -171,7 +171,7 @@ export var Default = function Default(_ref) {
         position: 'absolute',
         bottom: 0,
         left: 12,
-        top: 55
+        top: 50
       }
     }, ___EmotionJSX("svg", {
       xmlns: "http://www.w3.org/2000/svg",

package/package.json

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