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

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

@@ -14,8 +14,6 @@ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
@@ -35,28 +33,6 @@ var _default = {
 };
 exports["default"] = _default;
 
-var BracketSVG = function BracketSVG(props) {
-  return (0, _react2.jsx)("svg", (0, _extends2["default"])({
-    xmlns: "http://www.w3.org/2000/svg",
-    version: "1.1"
-  }, props), (0, _react2.jsx)("title", null, "bracket-fill"), (0, _react2.jsx)("g", null, (0, _react2.jsx)("title", null, "Layer 1"), (0, _react2.jsx)("path", {
-    fillRule: "nonzero",
-    fill: "#CACED3",
-    id: "Path",
-    d: "m6, ".concat(props.height - 18, ".89712l0,10c0,2.1422 1.68397,3.89108 3.80036,3.9951l0.19964,0.0049l5,0l0,1l-5,0c-2.76142,0 -5,-2.23858 -5,-5l0,-10l1,0z")
-  }), (0, _react2.jsx)("line", {
-    strokeLinecap: "undefined",
-    strokeLinejoin: "undefined",
-    id: "svg_1",
-    y2: "0",
-    x2: "5.50861",
-    y1: "".concat(props.height - 17),
-    x1: "5.50861",
-    stroke: "#caced3",
-    fill: "none"
-  })));
-};
-
 var Default = function Default() {
   var customChipStyles = {
     '& > span': {
@@ -152,13 +128,7 @@ var Default = function Default() {
     return (0, _react2.jsx)(_index.Box, {
       isRow: true,
       key: item.key
-    }, (0, _react2.jsx)(_index.Box, {
-      mt: "-10px",
-      mr: "-3px"
-    }, (0, _react2.jsx)(BracketSVG, {
-      width: "15",
-      height: "40"
-    })), (0, _react2.jsx)(_index.Box, {
+    }, (0, _react2.jsx)(_index.Bracket, null), (0, _react2.jsx)(_index.Box, {
       ml: "3px",
       width: "100%"
     }, (0, _react2.jsx)(_index.Box, {
@@ -186,13 +156,9 @@ var Default = function Default() {
     }), (0, _react2.jsx)(_index.Text, null, item.field3))));
   }), (0, _react2.jsx)(_index.Box, {
     isRow: true
-  }, (0, _react2.jsx)(_index.Box, {
-    mt: "-10px",
-    mr: "-3px"
-  }, (0, _react2.jsx)(BracketSVG, {
-    width: "15",
-    height: "80"
-  })), (0, _react2.jsx)(_index.Box, {
+  }, (0, _react2.jsx)(_index.Bracket, {
+    isLast: true
+  }), (0, _react2.jsx)(_index.Box, {
     variant: "forms.input.container",
     borderRadius: "4px",
     p: "sm",
@@ -209,18 +175,14 @@ var Default = function Default() {
     alignSelf: "center"
   }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _react2.jsx)(_index.Box, {
     ml: "sm"
-  }, (0, _map["default"])(anyConditions).call(anyConditions, function (item) {
+  }, (0, _map["default"])(anyConditions).call(anyConditions, function (item, index) {
     return (0, _react2.jsx)(_index.Box, {
       isRow: true,
-      mt: "md",
       key: item.key
-    }, (0, _react2.jsx)(_index.Box, {
-      mt: "-25px",
-      mr: "-3px"
-    }, (0, _react2.jsx)(BracketSVG, {
-      width: "15",
-      height: "40"
-    })), (0, _react2.jsx)(_index.Box, {
+    }, (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,

package/lib/cjs/styles/forms/switch.js

@@ -54,11 +54,11 @@ var thumbContainer = {
   border: '1px solid',
   borderColor: 'neutral.80',
   borderRadius: 9999,
-  '.is-selected &': {
+  'label.is-selected &': {
     bg: 'active',
     borderColor: 'active'
   },
-  '.is-focused &, &:focus': _objectSpread({}, _buttons.defaultFocus)
+  'label.is-focused &, &:focus': _objectSpread({}, _buttons.defaultFocus)
 };
 exports.thumbContainer = thumbContainer;
 var thumb = {
@@ -73,7 +73,7 @@ var thumb = {
   transitionTimingFunction: 'ease-out',
   transitionDuration: '0.1s',
   transform: 'translateX(0)',
-  '.is-selected &': {
+  'label.is-selected &': {
     transform: 'translateX(20px)',
     borderColor: 'active'
   }

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

@@ -356,8 +356,14 @@ var floatLabelWrapper = {
   left: '3px',
   zIndex: 2
 };
+var bracketBase = {
+  width: '15px',
+  pl: '5px',
+  position: 'relative'
+};
 var _default = {
   base: base,
+  bracketBase: bracketBase,
   card: card,
   chip: chip,
   countChip: countChip,

package/lib/components/Bracket/Bracket.js

@@ -0,0 +1,88 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["isLast", "color"];
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import { Box } from '../../index';
+import { line } from '../../styles/colors';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var Bracket = /*#__PURE__*/forwardRef(function (props, ref) {
+  var isLast = props.isLast,
+      color = props.color,
+      others = _objectWithoutProperties(props, _excluded);
+
+  var bracketRef = useRef();
+  /* istanbul ignore next */
+
+  useImperativeHandle(ref, function () {
+    return bracketRef.current;
+  });
+  return ___EmotionJSX(Box, _extends({
+    variant: "boxes.bracketBase"
+  }, others), !isLast && ___EmotionJSX(Box, {
+    width: 15,
+    sx: {
+      position: 'absolute',
+      top: 0,
+      bottom: 0
+    }
+  }, ___EmotionJSX("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    version: "1.1",
+    preserveAspectRatio: "none",
+    viewBox: "0 0 10 10",
+    style: {
+      flexGrow: 1
+    },
+    "data-testid": "isLastLayer"
+  }, ___EmotionJSX("title", null, "bracket-fill"), ___EmotionJSX("g", null, ___EmotionJSX("title", null, "Layer 3"), ___EmotionJSX("line", {
+    strokeLinecap: "undefined",
+    strokeLinejoin: "undefined",
+    y2: "0",
+    x2: "0",
+    y1: "10",
+    x1: "0",
+    stroke: color,
+    fill: "none"
+  })))), ___EmotionJSX(Box, {
+    flexBasis: "50%"
+  }, ___EmotionJSX("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    version: "1.1",
+    preserveAspectRatio: "none",
+    viewBox: "0 0 10 10",
+    style: {
+      flexGrow: 1
+    }
+  }, ___EmotionJSX("title", null, "bracket-fill"), ___EmotionJSX("g", null, ___EmotionJSX("title", null, "Layer 1"), ___EmotionJSX("line", {
+    strokeLinecap: "undefined",
+    strokeLinejoin: "undefined",
+    y2: "0",
+    x2: "0",
+    y1: "10",
+    x1: "0",
+    stroke: color,
+    fill: "none"
+  }))), ___EmotionJSX("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    version: "1.1",
+    height: "15"
+  }, ___EmotionJSX("title", null, "bracket-fill"), ___EmotionJSX("g", {
+    transform: "translate(-1, 0)"
+  }, ___EmotionJSX("title", null, "Layer 2"), ___EmotionJSX("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: line.light
+};
+Bracket.propTypes = {
+  /** A prop to set the strokes color. */
+  color: PropTypes.string,
+
+  /** Whether or not the bracket is the last in a series of brackets. */
+  isLast: PropTypes.bool
+};
+export default Bracket;

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

@@ -0,0 +1,70 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+import { Box, Bracket, Chip, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Bracket',
+  component: Bracket
+};
+export 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 ___EmotionJSX(Box, {
+    p: "md",
+    ml: "sm",
+    bg: "background"
+  }, ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Chip, {
+    label: "Any",
+    bg: "neutral.20",
+    mr: "sm",
+    sx: customChipStyles,
+    alignSelf: "center"
+  }), ___EmotionJSX(Text, null, " of the conditions are true")), _mapInstanceProperty(anyConditions).call(anyConditions, function (item, index) {
+    return ___EmotionJSX(Box, {
+      isRow: true,
+      key: item.key
+    }, ___EmotionJSX(Bracket, {
+      isLast: index === anyConditions.length - 1
+    }), ___EmotionJSX(Box, {
+      mt: "md",
+      variant: "forms.input.container",
+      bg: "white",
+      isRow: true,
+      alignItems: "center",
+      borderRadius: "4px",
+      width: "100%",
+      sx: {
+        '&::after': {
+          bg: 'decorative.4'
+        }
+      }
+    }, ___EmotionJSX(Text, {
+      pl: "md",
+      pr: "sm"
+    }, item.field1), ___EmotionJSX(Chip, {
+      label: "Equals",
+      bg: "accent.90",
+      textColor: "neutral.10",
+      sx: customChipStyles,
+      mr: "sm",
+      alignSelf: "center"
+    }), ___EmotionJSX(Text, null, item.field3)));
+  }));
+};

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

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Bracket from '.';
+import axeTest from '../../utils/testUtils/testAxe';
+import { jsx as ___EmotionJSX } from "@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 render(___EmotionJSX(Bracket, _extends({}, defaultProps, props)));
+}; // // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('default bracket', function () {
+  getComponent();
+  var bracket = screen.getByTestId(testId);
+  expect(bracket).toBeInTheDocument();
+});
+test('additional svg does not render if isLast=true', function () {
+  getComponent({
+    isLast: true
+  });
+  expect(screen.queryByTestId('isLastLayer')).not.toBeInTheDocument();
+});
+test('additional svg does render if isLast=false', function () {
+  getComponent({
+    isLast: false
+  });
+  expect(screen.queryByTestId('isLastLayer')).toBeInTheDocument();
+});

package/lib/components/Bracket/index.js

@@ -0,0 +1 @@
+export { default } from './Bracket';

package/lib/components/Breadcrumbs/Breadcrumbs.js

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

package/lib/components/ListView/ListView.js

@@ -59,6 +59,12 @@ export 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.
 */
 
 var ListView = /*#__PURE__*/forwardRef(function (props, ref) {

package/lib/components/SwitchField/SwitchField.js

@@ -21,6 +21,7 @@ import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
 import { useToggleState } from '@react-stately/toggle';
 import { useSwitch } from '@react-aria/switch';
+import { usePress } from '@react-aria/interactions';
 import { useField, usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
 import Box from '../Box';
@@ -71,6 +72,12 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
   var state = useToggleState(_objectSpread({
     defaultSelected: isDefaultSelected
   }, props));
+
+  var _usePress = usePress({
+    isDisabled: isDisabled
+  }),
+      containerPressProps = _usePress.pressProps;
+
   var whitelistedProps = omit(props, _Object$keys(others));
 
   var _useSwitch = useSwitch(_objectSpread({
@@ -82,9 +89,9 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
     isSelected: inputProps.checked
   };
 
-  var _useField = useField(_objectSpread(_objectSpread({
+  var _useField = useField(_objectSpread(_objectSpread(_objectSpread({
     statusClasses: statusClasses
-  }, props), {}, {
+  }, containerPressProps), props), {}, {
     controlProps: _objectSpread(_objectSpread({}, controlProps), inputProps)
   })),
       fieldContainerProps = _useField.fieldContainerProps,

package/lib/index.js

@@ -17,6 +17,8 @@ export { default as Avatar } from './components/Avatar';
 export * from './components/Avatar';
 export { default as Box } from './components/Box';
 export * from './components/Box';
+export { default as Bracket } from './components/Bracket';
+export * from './components/Bracket';
 export { default as Breadcrumbs } from './components/Breadcrumbs';
 export * from './components/Breadcrumbs';
 export { default as Button } from './components/Button';

package/lib/recipes/ConditionalFilter.stories.js

@@ -1,39 +1,15 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import CreateIcon from 'mdi-react/CreateIcon';
 import DragVerticalIcon from 'mdi-react/DragVerticalIcon';
 import TrashIcon from 'mdi-react/TrashIcon';
-import { Box, Button, Chip, IconButton, Icon, Item, OverlayProvider, RockerButtonGroup, RockerButton, SelectField, Text, TextField } from '../index';
+import { Box, Bracket, Button, Chip, IconButton, Icon, Item, OverlayProvider, RockerButtonGroup, RockerButton, SelectField, Text, TextField } from '../index';
 import OverlayPanel from '../components/OverlayPanel';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/ConditionalFilter'
 };
-
-var BracketSVG = function BracketSVG(props) {
-  return ___EmotionJSX("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    version: "1.1"
-  }, props), ___EmotionJSX("title", null, "bracket-fill"), ___EmotionJSX("g", null, ___EmotionJSX("title", null, "Layer 1"), ___EmotionJSX("path", {
-    fillRule: "nonzero",
-    fill: "#CACED3",
-    id: "Path",
-    d: "m6, ".concat(props.height - 18, ".89712l0,10c0,2.1422 1.68397,3.89108 3.80036,3.9951l0.19964,0.0049l5,0l0,1l-5,0c-2.76142,0 -5,-2.23858 -5,-5l0,-10l1,0z")
-  }), ___EmotionJSX("line", {
-    strokeLinecap: "undefined",
-    strokeLinejoin: "undefined",
-    id: "svg_1",
-    y2: "0",
-    x2: "5.50861",
-    y1: "".concat(props.height - 17),
-    x1: "5.50861",
-    stroke: "#caced3",
-    fill: "none"
-  })));
-};
-
 export var Default = function Default() {
   var customChipStyles = {
     '& > span': {
@@ -130,13 +106,7 @@ export var Default = function Default() {
     return ___EmotionJSX(Box, {
       isRow: true,
       key: item.key
-    }, ___EmotionJSX(Box, {
-      mt: "-10px",
-      mr: "-3px"
-    }, ___EmotionJSX(BracketSVG, {
-      width: "15",
-      height: "40"
-    })), ___EmotionJSX(Box, {
+    }, ___EmotionJSX(Bracket, null), ___EmotionJSX(Box, {
       ml: "3px",
       width: "100%"
     }, ___EmotionJSX(Box, {
@@ -164,13 +134,9 @@ export var Default = function Default() {
     }), ___EmotionJSX(Text, null, item.field3))));
   }), ___EmotionJSX(Box, {
     isRow: true
-  }, ___EmotionJSX(Box, {
-    mt: "-10px",
-    mr: "-3px"
-  }, ___EmotionJSX(BracketSVG, {
-    width: "15",
-    height: "80"
-  })), ___EmotionJSX(Box, {
+  }, ___EmotionJSX(Bracket, {
+    isLast: true
+  }), ___EmotionJSX(Box, {
     variant: "forms.input.container",
     borderRadius: "4px",
     p: "sm",
@@ -187,18 +153,14 @@ export var Default = function Default() {
     alignSelf: "center"
   }), ___EmotionJSX(Text, null, " of the conditions are true")), ___EmotionJSX(Box, {
     ml: "sm"
-  }, _mapInstanceProperty(anyConditions).call(anyConditions, function (item) {
+  }, _mapInstanceProperty(anyConditions).call(anyConditions, function (item, index) {
     return ___EmotionJSX(Box, {
       isRow: true,
-      mt: "md",
       key: item.key
-    }, ___EmotionJSX(Box, {
-      mt: "-25px",
-      mr: "-3px"
-    }, ___EmotionJSX(BracketSVG, {
-      width: "15",
-      height: "40"
-    })), ___EmotionJSX(Box, {
+    }, ___EmotionJSX(Bracket, {
+      isLast: index === anyConditions.length - 1
+    }), ___EmotionJSX(Box, {
+      mt: "md",
       variant: "forms.input.container",
       bg: "white",
       isRow: true,

package/lib/styles/forms/switch.js

@@ -33,11 +33,11 @@ export var thumbContainer = {
   border: '1px solid',
   borderColor: 'neutral.80',
   borderRadius: 9999,
-  '.is-selected &': {
+  'label.is-selected &': {
     bg: 'active',
     borderColor: 'active'
   },
-  '.is-focused &, &:focus': _objectSpread({}, defaultFocus)
+  'label.is-focused &, &:focus': _objectSpread({}, defaultFocus)
 };
 export var thumb = {
   width: 20,
@@ -51,7 +51,7 @@ export var thumb = {
   transitionTimingFunction: 'ease-out',
   transitionDuration: '0.1s',
   transform: 'translateX(0)',
-  '.is-selected &': {
+  'label.is-selected &': {
     transform: 'translateX(20px)',
     borderColor: 'active'
   }

package/lib/styles/variants/boxes.js

@@ -336,8 +336,14 @@ var floatLabelWrapper = {
   left: '3px',
   zIndex: 2
 };
+var bracketBase = {
+  width: '15px',
+  pl: '5px',
+  position: 'relative'
+};
 export default {
   base: base,
+  bracketBase: bracketBase,
   card: card,
   chip: chip,
   countChip: countChip,

package/package.json

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