@pingux/astro 1.23.0-alpha.3 → 1.24.0-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.23.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.22.0...@pingux/astro@1.23.0) (2022-07-19)
+
+
+### Bug Fixes
+
+* [UIP-5484] toggling SwitchField when using in ListView ([6b3dd18](https://gitlab.corp.pingidentity.com/ux/pingux/commit/6b3dd18cbabbe2283f270aa8b7ad555b28beeed7))
+* [UIP-5512] Rocker button accessibility issues ([9bae6a4](https://gitlab.corp.pingidentity.com/ux/pingux/commit/9bae6a4f45a2e510e612a59652ee7f02a0be4600))
+* [UIP-5517] add props to TooltipTrigger ([bed6ead](https://gitlab.corp.pingidentity.com/ux/pingux/commit/bed6ead817cda471b0c718c732a8b7fea4ad62b6))
+* [UIP-5544] ArrayField add button fix ([3034f77](https://gitlab.corp.pingidentity.com/ux/pingux/commit/3034f776f1776e38d2d197c839aafe3856d1fdab))
+* [UIP-5545] listBox focus fix ([ab4238a](https://gitlab.corp.pingidentity.com/ux/pingux/commit/ab4238ad6ac046aa6f344469c77d274daad0a2f1))
+
+
+### Features
+
+* [UIP-5519] Analyze ArrayField for Performance ([84fc74b](https://gitlab.corp.pingidentity.com/ux/pingux/commit/84fc74bf0470541ea10ae07baa9f5cfc27029405))
+
+
+
+
+
 # [1.22.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.21.1...@pingux/astro@1.22.0) (2022-07-06)
 
 

package/lib/cjs/components/Bracket/Bracket.js

@@ -0,0 +1,118 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _index = require("../../index");
+
+var _colors = require("../../styles/colors");
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["isLast", "color"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Bracket = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var isLast = props.isLast,
+      color = props.color,
+      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var bracketRef = (0, _react.useRef)();
+  /* istanbul ignore next */
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return bracketRef.current;
+  });
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    variant: "boxes.bracketBase"
+  }, others), !isLast && (0, _react2.jsx)(_index.Box, {
+    width: 15,
+    sx: {
+      position: 'absolute',
+      top: 0,
+      bottom: 0
+    }
+  }, (0, _react2.jsx)("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    version: "1.1",
+    preserveAspectRatio: "none",
+    viewBox: "0 0 10 10",
+    style: {
+      flexGrow: 1
+    },
+    "data-testid": "isLastLayer"
+  }, (0, _react2.jsx)("title", null, "bracket-fill"), (0, _react2.jsx)("g", null, (0, _react2.jsx)("title", null, "Layer 3"), (0, _react2.jsx)("line", {
+    strokeLinecap: "undefined",
+    strokeLinejoin: "undefined",
+    y2: "0",
+    x2: "0",
+    y1: "10",
+    x1: "0",
+    stroke: color,
+    fill: "none"
+  })))), (0, _react2.jsx)(_index.Box, {
+    flexBasis: "50%"
+  }, (0, _react2.jsx)("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    version: "1.1",
+    preserveAspectRatio: "none",
+    viewBox: "0 0 10 10",
+    style: {
+      flexGrow: 1
+    }
+  }, (0, _react2.jsx)("title", null, "bracket-fill"), (0, _react2.jsx)("g", null, (0, _react2.jsx)("title", null, "Layer 1"), (0, _react2.jsx)("line", {
+    strokeLinecap: "undefined",
+    strokeLinejoin: "undefined",
+    y2: "0",
+    x2: "0",
+    y1: "10",
+    x1: "0",
+    stroke: color,
+    fill: "none"
+  }))), (0, _react2.jsx)("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    version: "1.1",
+    height: "15"
+  }, (0, _react2.jsx)("title", null, "bracket-fill"), (0, _react2.jsx)("g", {
+    transform: "translate(-1, 0)"
+  }, (0, _react2.jsx)("title", null, "Layer 2"), (0, _react2.jsx)("path", {
+    fill: "none",
+    stroke: color,
+    d: "M1 0C1 2.5 1 8 1 10C1 12.5 3 14.5 5.5 14.5C7.1 14.5 9.33333 14.5 10.5 14.5"
+  })))));
+});
+Bracket.defaultProps = {
+  color: _colors.line.light
+};
+Bracket.propTypes = {
+  /** A prop to set the strokes color. */
+  color: _propTypes["default"].string,
+
+  /** Whether or not the bracket is the last in a series of brackets. */
+  isLast: _propTypes["default"].bool
+};
+var _default = Bracket;
+exports["default"] = _default;

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

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Bracket',
+  component: _index.Bracket
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  var anyConditions = [{
+    field1: 'Group',
+    field3: 'Marketing',
+    key: 'Group1Field'
+  }, {
+    field1: 'Group',
+    field3: 'UX Team',
+    key: 'Group2Field'
+  }];
+  var customChipStyles = {
+    '& > span': {
+      textTransform: 'none',
+      fontWeight: '500'
+    },
+    minWidth: '65px',
+    'z-index': '1'
+  };
+  return (0, _react2.jsx)(_index.Box, {
+    p: "md",
+    ml: "sm",
+    bg: "background"
+  }, (0, _react2.jsx)(_index.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_index.Chip, {
+    label: "Any",
+    bg: "neutral.20",
+    mr: "sm",
+    sx: customChipStyles,
+    alignSelf: "center"
+  }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _map["default"])(anyConditions).call(anyConditions, function (item, index) {
+    return (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      key: item.key
+    }, (0, _react2.jsx)(_index.Bracket, {
+      isLast: index === anyConditions.length - 1
+    }), (0, _react2.jsx)(_index.Box, {
+      mt: "md",
+      variant: "forms.input.container",
+      bg: "white",
+      isRow: true,
+      alignItems: "center",
+      borderRadius: "4px",
+      width: "100%",
+      sx: {
+        '&::after': {
+          bg: 'decorative.4'
+        }
+      }
+    }, (0, _react2.jsx)(_index.Text, {
+      pl: "md",
+      pr: "sm"
+    }, item.field1), (0, _react2.jsx)(_index.Chip, {
+      label: "Equals",
+      bg: "accent.90",
+      textColor: "neutral.10",
+      sx: customChipStyles,
+      mr: "sm",
+      alignSelf: "center"
+    }), (0, _react2.jsx)(_index.Text, null, item.field3)));
+  }));
+};
+
+exports.Default = Default;

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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ = _interopRequireDefault(require("."));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _react3 = require("@emotion/react");
+
+var testId = 'test-bracket';
+var defaultProps = {
+  'data-testid': testId
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _react2.render)((0, _react3.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props)));
+}; // // Need to be added to each test file to test accessibility using axe.
+
+
+(0, _testAxe["default"])(getComponent);
+test('default bracket', function () {
+  getComponent();
+
+  var bracket = _react2.screen.getByTestId(testId);
+
+  expect(bracket).toBeInTheDocument();
+});
+test('additional svg does not render if isLast=true', function () {
+  getComponent({
+    isLast: true
+  });
+  expect(_react2.screen.queryByTestId('isLastLayer')).not.toBeInTheDocument();
+});
+test('additional svg does render if isLast=false', function () {
+  getComponent({
+    isLast: false
+  });
+  expect(_react2.screen.queryByTestId('isLastLayer')).toBeInTheDocument();
+});

package/lib/cjs/components/Bracket/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Bracket["default"];
+  }
+});
+
+var _Bracket = _interopRequireDefault(require("./Bracket"));

package/lib/cjs/components/Breadcrumbs/Breadcrumbs.js

@@ -102,7 +102,6 @@ var Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: breadcrumbsRef,
     isRow: true,
     sx: {
-      overflow: 'auto',
       paddingInlineStart: 'unset'
     },
     as: "ol"

package/lib/cjs/components/ListView/ListView.js

@@ -105,6 +105,12 @@ function useListLayout(state) {
  * ListViews are used to display a list of items. Users can select,
  * view, or edit items in this list. This virtualized component supports
  * asynchronous data in infinitely scrollable lists.
+ *
+ * NOTE: be careful with putting focusable elements inside ListView.
+ * It is using a grid (useList hook) with its own event listeners under the hood.
+ * [react-specttrum-github-issue](https://github.com/adobe/react-spectrum/issues/2801)
+ * If you decided to add a focusable element inside ListView,
+ * you should stop bubbling of a pointerDown event and put a focus on the element.
 */
 
 

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

@@ -48,6 +48,8 @@ var _toggle = require("@react-stately/toggle");
 
 var _switch = require("@react-aria/switch");
 
+var _interactions = require("@react-aria/interactions");
+
 var _hooks = require("../../hooks");
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
@@ -113,6 +115,12 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var state = (0, _toggle.useToggleState)(_objectSpread({
     defaultSelected: isDefaultSelected
   }, props));
+
+  var _usePress = (0, _interactions.usePress)({
+    isDisabled: isDisabled
+  }),
+      containerPressProps = _usePress.pressProps;
+
   var whitelistedProps = (0, _omit["default"])(props, (0, _keys["default"])(others));
 
   var _useSwitch = (0, _switch.useSwitch)(_objectSpread({
@@ -124,9 +132,9 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isSelected: inputProps.checked
   };
 
-  var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread({
+  var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread(_objectSpread({
     statusClasses: statusClasses
-  }, props), {}, {
+  }, containerPressProps), props), {}, {
     controlProps: _objectSpread(_objectSpread({}, controlProps), inputProps)
   })),
       fieldContainerProps = _useField.fieldContainerProps,