@pingux/astro 2.0.0-rc.0 → 2.0.1-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,62 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.44.1...@pingux/astro@2.0.0) (2023-03-28)
+
+
+### Bug Fixes
+
+* [UIP-5746] "Update enduser theme in astro for v2 changes" ([e4e71f7](https://gitlab.corp.pingidentity.com/ux/pingux/commit/e4e71f742978d14f6a16ef00bedfc847e18a234c))
+* [UIP-5748] Update theme overrides for v2 theme changes ([f734f35](https://gitlab.corp.pingidentity.com/ux/pingux/commit/f734f35a0ec99a0ae67c9447c7f032bfbdb77311))
+* [UIP-5781] Styling regression fix ([1475102](https://gitlab.corp.pingidentity.com/ux/pingux/commit/14751028b397880893b428eda0016d9b128407db))
+* [UIP-5827] Input components refactor prop spreading ([b667ca1](https://gitlab.corp.pingidentity.com/ux/pingux/commit/b667ca13176dba506056fbd12254ac1797f1b0fc))
+* [UIP-5997 Astro Modal Fix IconButton Focus Styling ([2af0ebc](https://gitlab.corp.pingidentity.com/ux/pingux/commit/2af0ebc9276341fb3e8205dc39a449d8a74971ff))
+* [UIP-6015] Astro accordion recipe updates ([44d1133](https://gitlab.corp.pingidentity.com/ux/pingux/commit/44d11332237f55e42d5fef03a54b60a4318a5df1))
+* [UIP-6016] Astro badge story updates ([2b68dbc](https://gitlab.corp.pingidentity.com/ux/pingux/commit/2b68dbcca5a7e3707087f17f65ace8b2e5829452))
+* [UIP-6029] Update OverlayPanel to ListView ([209bdcd](https://gitlab.corp.pingidentity.com/ux/pingux/commit/209bdcdc2b04361e76a6f96386518a159ee367bf))
+* [UIP-6097] Missing Focus Indicators: HelpHint/CollapsiblePanel/CopyText ([05b724a](https://gitlab.corp.pingidentity.com/ux/pingux/commit/05b724aa5e2eed543b10a6f5397c3770277792fb))
+* [UIP-6102] Badge story: fix IconButton variant ([de15e14](https://gitlab.corp.pingidentity.com/ux/pingux/commit/de15e146969c1ba76261bc6c43571f068cde0384))
+* [UIP-6103] ListViewItem: fix border bottom color ([95ca43f](https://gitlab.corp.pingidentity.com/ux/pingux/commit/95ca43f01580df8d8d3ecb6dbe583652c7380eb6)), closes [#e4e6e9](https://gitlab.corp.pingidentity.com/ux/pingux/issues/e4e6e9) [#caced3](https://gitlab.corp.pingidentity.com/ux/pingux/issues/caced3)
+* [UIP-6105] ScrollableListView: fix search field focus ([e89f8a7](https://gitlab.corp.pingidentity.com/ux/pingux/commit/e89f8a7cb304f1a834cc204ce712586b9777d5c5))
+* [UIP-6107] Combobox: fix width ([b9382ec](https://gitlab.corp.pingidentity.com/ux/pingux/commit/b9382ec643048443efb8ccabefcd6f2020eca8af))
+* [UIP-6109] Extra spacing in bracket between content ([888085a](https://gitlab.corp.pingidentity.com/ux/pingux/commit/888085a53fca7d224e69ec1ee4fd4efa1215060c))
+* [UIP-6112] Fix Card Styling ([4fe3c45](https://gitlab.corp.pingidentity.com/ux/pingux/commit/4fe3c45e69048945323c226512c1efbe97eda1c1))
+* [UIP-6115] Multivalues Delete Focus Indicator ([c282968](https://gitlab.corp.pingidentity.com/ux/pingux/commit/c282968e0c50f752439ece4f6d92e4815a8ab92b))
+* [UIP-6116] MultivaluesField close button for icon slots variant ([51fb36e](https://gitlab.corp.pingidentity.com/ux/pingux/commit/51fb36ec6ddb7ffce77d5ee0e11ab25ff3637e58))
+* [UIP-6159] Button & IconButton: add usePress hook to handle context ([9b8f3d1](https://gitlab.corp.pingidentity.com/ux/pingux/commit/9b8f3d1926aee7719641d36712a3eabf21347758))
+* [UIP-6193] MultiValuesField: trim custom value ([7a9c159](https://gitlab.corp.pingidentity.com/ux/pingux/commit/7a9c159659a19fe2b5780cc800af52746551d4d5))
+* [UIP-6197] uiLibraryOverride fix ThemeProvider ([6d942db](https://gitlab.corp.pingidentity.com/ux/pingux/commit/6d942dbd620da9a4c97d09c8dc099812085074f9))
+* [UIP-6199] TooltipTrigger incorrect placement with SwitchField ([5ce835b](https://gitlab.corp.pingidentity.com/ux/pingux/commit/5ce835bce13578467f8eedae6170c15f58f7a92e))
+* [UIP-6218] NavBar: fix primary items variants ([0e16f2e](https://gitlab.corp.pingidentity.com/ux/pingux/commit/0e16f2e8e33acfedf51e35f15e7e5d1a7604377e))
+* [UIP-6220] Down grade @emotion/react and @emotion/styled to 11.1.1 ([508a398](https://gitlab.corp.pingidentity.com/ux/pingux/commit/508a398aca2b2ffcf4742f5086ea2ff293c5c485))
+
+
+* ci!: [UIP-6036]: publish astro alpha only ([84e2093](https://gitlab.corp.pingidentity.com/ux/pingux/commit/84e2093bf4c84c45127e5619d252db09142ed0ac))
+
+
+### Features
+
+* [UIP-5938] Update astro nano theme to support v2 ([e317303](https://gitlab.corp.pingidentity.com/ux/pingux/commit/e317303585ade483073f8ece9cff036f10dfa2f0))
+* [UIP-5983] setup chromatic only stories ([aed7966](https://gitlab.corp.pingidentity.com/ux/pingux/commit/aed79668ca9db752d648f19dd4787a12a9875746))
+
+
+### BREAKING CHANGES
+
+* This change includes Astro v2 changes which will be documented in a migration guide coming soon.
+
+## Describe your changes
+Use `npm publish` to publish only astro to Artifactory by adding the registry in `package.json`, as scene at the bottom of [this doc](https://docs.npmjs.com/cli/v8/using-npm/registry)
+## Checklist before requesting a review
+- [:white_check_mark: ] I have performed a self-review of my code
+- [n/a] I have added tests for any new or fixed functionality to prevent regressions
+- [:white_check_mark: ] I have added clarifying code comments to blocks which other devs may have questions on
+
+Closes UIP-6036
+
+
+
+
+
 ## [1.44.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.44.0...@pingux/astro@1.44.1) (2023-03-22)
 
 **Note:** Version bump only for package @pingux/astro

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/styles/themeOverrides/uiLibraryOverride.js

@@ -67,7 +67,13 @@ var buttons = {
         border: 'none'
       }
     })
-  })
+  }),
+  filter: {
+    '&:not(.disabled):hover': {
+      borderColor: 'accent.40',
+      color: 'accent.40'
+    }
+  }
 };
 var forms = {
   input: {

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/styles/themeOverrides/uiLibraryOverride.js

@@ -60,7 +60,13 @@ var buttons = {
         border: 'none'
       }
     })
-  })
+  }),
+  filter: {
+    '&:not(.disabled):hover': {
+      borderColor: 'accent.40',
+      color: 'accent.40'
+    }
+  }
 };
 var forms = {
   input: {

package/package.json

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