@pingux/astro 1.5.0-alpha.1 → 1.5.1-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.5.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.4.1...@pingux/astro@1.5.0) (2022-03-22)
+
+
+### Bug Fixes
+
+* [UIP-5282] Code View discrepancies ([9e483b1](https://gitlab.corp.pingidentity.com/ux/pingux/commit/9e483b1078cc47a21c40fce1d256230dc6d57d65))
+
+
+### Features
+
+* [UIP-5162] Add MultiselectFilter component ([b624104](https://gitlab.corp.pingidentity.com/ux/pingux/commit/b624104fe17352d7975498378bc605562698916a))
+* [UIP-5163] Tab with Popover menu ([2334558](https://gitlab.corp.pingidentity.com/ux/pingux/commit/23345584dfd0bcc40700cb9925fa908002388de2))
+
+
+
+
+
 ## [1.4.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.4.0...@pingux/astro@1.4.1) (2022-03-18)
 
 **Note:** Version bump only for package @pingux/astro

package/lib/cjs/components/CodeView/CodeView.js

@@ -140,7 +140,7 @@ var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }
 
   return (0, _react2.jsx)(_.CopyText, {
-    mode: "nonClickableContent",
+    mode: "link",
     textToCopy: children,
     tooltipProps: {
       offset: 15

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

@@ -57,8 +57,21 @@ var textValue = "\nexport const Default = args => (\n  <>\n    <Text sx={{ fontW
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_.CodeView, (0, _extends2["default"])({}, defaultProps, props), textValue));
-}; // Need to be added to each test file to test accessibility using axe.
+};
 
+beforeEach(function () {
+  var mockClipboard = {
+    writeText: jest.fn()
+  };
+  global.navigator.clipboard = mockClipboard;
+  global.document.execCommand = jest.fn();
+  global.document.execCommand.mockReturnValue(true);
+});
+afterEach(function () {
+  jest.resetAllMocks();
+  global.navigator.clipboard = originalClipboard;
+  global.document.execCommand = originalExecCommand;
+}); // Need to be added to each test file to test accessibility using axe.
 
 (0, _testAxe["default"])(getComponent);
 test('renders component in the default state', function () {
@@ -69,29 +82,22 @@ test('renders component in the default state', function () {
   expect(container).toBeInstanceOf(HTMLDivElement);
   expect(container).toBeInTheDocument();
 });
-test('tooltip renders on hover', function () {
+test('copy button is hovered and renders tooltip via mouse', function () {
   getComponent();
 
-  var container = _testWrapper.screen.getByTestId(testId);
+  var copyBtn = _testWrapper.screen.getByLabelText('copy');
 
-  _testWrapper.fireEvent.mouseMove(container);
+  expect(copyBtn).not.toHaveFocus();
 
-  _testWrapper.fireEvent.mouseEnter(container);
+  _userEvent["default"].hover(copyBtn);
 
+  expect(copyBtn).toHaveClass('is-hovered');
   expect(_testWrapper.screen.queryByRole('tooltip')).toBeInTheDocument();
   expect(_testWrapper.screen.queryByRole('tooltip')).toHaveTextContent('Copy to clipboard');
 });
-test('content and copy button are focused via keyboard', function () {
+test('copy button is focused and renders tooltip via keyboard', function () {
   getComponent();
 
-  var container = _testWrapper.screen.getByTestId(testId);
-
-  expect(container).not.toHaveFocus();
-
-  _userEvent["default"].tab();
-
-  expect(container).toHaveFocus();
-
   var copyBtn = _testWrapper.screen.getByLabelText('copy');
 
   expect(copyBtn).not.toHaveFocus();
@@ -100,6 +106,8 @@ test('content and copy button are focused via keyboard', function () {
 
   expect(copyBtn).toHaveFocus();
   expect(copyBtn).toHaveClass('is-focused');
+  expect(_testWrapper.screen.queryByRole('tooltip')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('tooltip')).toHaveTextContent('Copy to clipboard');
 });
 test('doesn\'t render copy button and tooltip with prop hasNoCopyButton', function () {
   getComponent({
@@ -126,19 +134,6 @@ test('renders line numbers with prop hasLineNumbers', function () {
   expect(_testWrapper.screen.queryByText('1')).toBeInTheDocument();
   expect(_testWrapper.screen.queryByText(linesLength)).toBeInTheDocument();
 });
-beforeEach(function () {
-  var mockClipboard = {
-    writeText: jest.fn()
-  };
-  global.navigator.clipboard = mockClipboard;
-  global.document.execCommand = jest.fn();
-  global.document.execCommand.mockReturnValue(true);
-});
-afterEach(function () {
-  jest.resetAllMocks();
-  global.navigator.clipboard = originalClipboard;
-  global.document.execCommand = originalExecCommand;
-});
 test('click on copy button copies data to the clipboard', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
   var button;
   return _regenerator["default"].wrap(function _callee2$(_context2) {

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

@@ -129,7 +129,7 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       ref: ref,
       isRow: true,
       variant: "boxes.copy"
-    }, others), content, (0, _react2.jsx)(TooltipWrapper, {
+    }, wrapperProps, others), content, (0, _react2.jsx)(TooltipWrapper, {
       isOpen: isTooltipOpen,
       tooltip: tooltip
     }, (0, _react2.jsx)(_CopyButton["default"], (0, _extends2["default"])({

package/lib/cjs/components/TextAreaField/TextAreaField.js

@@ -80,6 +80,7 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var textAreaRef = (0, _react.useRef)();
   var labelRef = (0, _react.useRef)();
+  var labelWrapperRef = (0, _react.useRef)();
   var containerRef = (0, _react.useRef)();
   var inputContainerRef = (0, _react.useRef)();
   var slotContainer = (0, _react.useRef)();
@@ -94,6 +95,7 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var resizeFloatLabel = function resizeFloatLabel() {
     /* istanbul ignore next */
     labelRef.current.style.width = textAreaRef.current.style.width;
+    labelWrapperRef.current.style.width = "".concat(textAreaRef.current.clientWidth - 2, "px");
   };
   /* istanbul ignore next */
 
@@ -134,19 +136,24 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       thisRef.removeEventListener('mousemove', props.resizeCallback ? props.resizeCallback : resizeFloatLabel);
     };
   }, [props.isUnresizable, props.labelMode, props.resizeCallback]);
+  var labelNode = (0, _react2.jsx)(_Label["default"], (0, _extends2["default"])({
+    ref: labelRef
+  }, fieldLabelProps, {
+    sx: isLabelHigher && {
+      gridRow: '1/5'
+    }
+  }));
+  var wrappedLabel = (0, _react2.jsx)(_Box["default"], {
+    variant: "boxes.floatLabelWrapper",
+    ref: labelWrapperRef
+  }, labelNode);
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "forms.input.wrapper"
   }, fieldContainerProps, {
     sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx),
     ref: containerRef,
     maxWidth: "100%"
-  }), (0, _react2.jsx)(_Label["default"], (0, _extends2["default"])({
-    ref: labelRef
-  }, fieldLabelProps, {
-    sx: isLabelHigher && {
-      gridRow: '1/5'
-    }
-  })), (0, _react2.jsx)(_Box["default"], {
+  }), props.labelMode === 'float' ? wrappedLabel : labelNode, (0, _react2.jsx)(_Box["default"], {
     isRow: true,
     variant: "forms.input.container",
     className: fieldControlProps.className,

package/lib/cjs/styles/variants/boxes.js

@@ -299,6 +299,14 @@ var fileInputFieldWrapper = {
     alignItems: 'center'
   }
 };
+var floatLabelWrapper = {
+  backgroundColor: 'white',
+  position: 'relative',
+  height: '17px',
+  bottom: '-18px',
+  left: '3px',
+  zIndex: 2
+};
 var _default = {
   base: base,
   card: card,
@@ -317,6 +325,7 @@ var _default = {
   radioContainer: radioContainer,
   scrollbox: scrollbox,
   topShadowScrollbox: topShadowScrollbox,
-  bottomShadowScrollbox: bottomShadowScrollbox
+  bottomShadowScrollbox: bottomShadowScrollbox,
+  floatLabelWrapper: floatLabelWrapper
 };
 exports["default"] = _default;

package/lib/cjs/styles/variants/codeView.js

@@ -12,7 +12,8 @@ var theme = {
     color: '#545454',
     background: 'none',
     lineHeight: 1.5,
-    tabSize: 4
+    tabSize: 4,
+    fontFamily: '"Roboto Mono", "Lucida Console", Courier, monospace'
   },
   styles: [{
     types: ['prolog', 'constant', 'builtin'],

package/lib/components/CodeView/CodeView.js

@@ -105,7 +105,7 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
   }
 
   return ___EmotionJSX(CopyText, {
-    mode: "nonClickableContent",
+    mode: "link",
     textToCopy: children,
     tooltipProps: {
       offset: 15

package/lib/components/CodeView/CodeView.test.js

@@ -35,8 +35,21 @@ var textValue = "\nexport const Default = args => (\n  <>\n    <Text sx={{ fontW
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(CodeView, _extends({}, defaultProps, props), textValue));
-}; // Need to be added to each test file to test accessibility using axe.
+};
 
+beforeEach(function () {
+  var mockClipboard = {
+    writeText: jest.fn()
+  };
+  global.navigator.clipboard = mockClipboard;
+  global.document.execCommand = jest.fn();
+  global.document.execCommand.mockReturnValue(true);
+});
+afterEach(function () {
+  jest.resetAllMocks();
+  global.navigator.clipboard = originalClipboard;
+  global.document.execCommand = originalExecCommand;
+}); // Need to be added to each test file to test accessibility using axe.
 
 axeTest(getComponent);
 test('renders component in the default state', function () {
@@ -45,25 +58,24 @@ test('renders component in the default state', function () {
   expect(container).toBeInstanceOf(HTMLDivElement);
   expect(container).toBeInTheDocument();
 });
-test('tooltip renders on hover', function () {
+test('copy button is hovered and renders tooltip via mouse', function () {
   getComponent();
-  var container = screen.getByTestId(testId);
-  fireEvent.mouseMove(container);
-  fireEvent.mouseEnter(container);
+  var copyBtn = screen.getByLabelText('copy');
+  expect(copyBtn).not.toHaveFocus();
+  userEvent.hover(copyBtn);
+  expect(copyBtn).toHaveClass('is-hovered');
   expect(screen.queryByRole('tooltip')).toBeInTheDocument();
   expect(screen.queryByRole('tooltip')).toHaveTextContent('Copy to clipboard');
 });
-test('content and copy button are focused via keyboard', function () {
+test('copy button is focused and renders tooltip via keyboard', function () {
   getComponent();
-  var container = screen.getByTestId(testId);
-  expect(container).not.toHaveFocus();
-  userEvent.tab();
-  expect(container).toHaveFocus();
   var copyBtn = screen.getByLabelText('copy');
   expect(copyBtn).not.toHaveFocus();
   userEvent.tab();
   expect(copyBtn).toHaveFocus();
   expect(copyBtn).toHaveClass('is-focused');
+  expect(screen.queryByRole('tooltip')).toBeInTheDocument();
+  expect(screen.queryByRole('tooltip')).toHaveTextContent('Copy to clipboard');
 });
 test('doesn\'t render copy button and tooltip with prop hasNoCopyButton', function () {
   getComponent({
@@ -86,19 +98,6 @@ test('renders line numbers with prop hasLineNumbers', function () {
   expect(screen.queryByText('1')).toBeInTheDocument();
   expect(screen.queryByText(linesLength)).toBeInTheDocument();
 });
-beforeEach(function () {
-  var mockClipboard = {
-    writeText: jest.fn()
-  };
-  global.navigator.clipboard = mockClipboard;
-  global.document.execCommand = jest.fn();
-  global.document.execCommand.mockReturnValue(true);
-});
-afterEach(function () {
-  jest.resetAllMocks();
-  global.navigator.clipboard = originalClipboard;
-  global.document.execCommand = originalExecCommand;
-});
 test('click on copy button copies data to the clipboard', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
   var button;
   return _regeneratorRuntime.wrap(function _callee2$(_context2) {

package/lib/components/CopyText/CopyText.js

@@ -106,7 +106,7 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
       ref: ref,
       isRow: true,
       variant: "boxes.copy"
-    }, others), content, ___EmotionJSX(TooltipWrapper, {
+    }, wrapperProps, others), content, ___EmotionJSX(TooltipWrapper, {
       isOpen: isTooltipOpen,
       tooltip: tooltip
     }, ___EmotionJSX(CopyButton, _extends({

package/lib/components/TextAreaField/TextAreaField.js

@@ -47,6 +47,7 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var textAreaRef = useRef();
   var labelRef = useRef();
+  var labelWrapperRef = useRef();
   var containerRef = useRef();
   var inputContainerRef = useRef();
   var slotContainer = useRef();
@@ -61,6 +62,7 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
   var resizeFloatLabel = function resizeFloatLabel() {
     /* istanbul ignore next */
     labelRef.current.style.width = textAreaRef.current.style.width;
+    labelWrapperRef.current.style.width = "".concat(textAreaRef.current.clientWidth - 2, "px");
   };
   /* istanbul ignore next */
 
@@ -101,19 +103,27 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
       thisRef.removeEventListener('mousemove', props.resizeCallback ? props.resizeCallback : resizeFloatLabel);
     };
   }, [props.isUnresizable, props.labelMode, props.resizeCallback]);
+
+  var labelNode = ___EmotionJSX(Label, _extends({
+    ref: labelRef
+  }, fieldLabelProps, {
+    sx: isLabelHigher && {
+      gridRow: '1/5'
+    }
+  }));
+
+  var wrappedLabel = ___EmotionJSX(Box, {
+    variant: "boxes.floatLabelWrapper",
+    ref: labelWrapperRef
+  }, labelNode);
+
   return ___EmotionJSX(Box, _extends({
     variant: "forms.input.wrapper"
   }, fieldContainerProps, {
     sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx),
     ref: containerRef,
     maxWidth: "100%"
-  }), ___EmotionJSX(Label, _extends({
-    ref: labelRef
-  }, fieldLabelProps, {
-    sx: isLabelHigher && {
-      gridRow: '1/5'
-    }
-  })), ___EmotionJSX(Box, {
+  }), props.labelMode === 'float' ? wrappedLabel : labelNode, ___EmotionJSX(Box, {
     isRow: true,
     variant: "forms.input.container",
     className: fieldControlProps.className,

package/lib/styles/variants/boxes.js

@@ -277,6 +277,14 @@ var fileInputFieldWrapper = {
     alignItems: 'center'
   }
 };
+var floatLabelWrapper = {
+  backgroundColor: 'white',
+  position: 'relative',
+  height: '17px',
+  bottom: '-18px',
+  left: '3px',
+  zIndex: 2
+};
 export default {
   base: base,
   card: card,
@@ -295,5 +303,6 @@ export default {
   radioContainer: radioContainer,
   scrollbox: scrollbox,
   topShadowScrollbox: topShadowScrollbox,
-  bottomShadowScrollbox: bottomShadowScrollbox
+  bottomShadowScrollbox: bottomShadowScrollbox,
+  floatLabelWrapper: floatLabelWrapper
 };

package/lib/styles/variants/codeView.js

@@ -3,7 +3,8 @@ var theme = {
     color: '#545454',
     background: 'none',
     lineHeight: 1.5,
-    tabSize: 4
+    tabSize: 4,
+    fontFamily: '"Roboto Mono", "Lucida Console", Courier, monospace'
   },
   styles: [{
     types: ['prolog', 'constant', 'builtin'],

package/package.json

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