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

package/lib/cjs/components/MultiselectFilterItem/MultiselectFilterItem.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+var MultiselectFilterItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var text = props.text,
+      icon = props.icon;
+  return (0, _react2.jsx)(_index.Box, {
+    "data-testid": "multiselect-filter-item",
+    isRow: true,
+    justifyContent: "space-between",
+    ref: ref
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "multiselectFilterItem"
+  }, text), icon && (0, _react2.jsx)(_index.Icon, {
+    "data-testid": "multiselect-filter-data-icon",
+    icon: icon,
+    mr: "md",
+    color: "neutral.10",
+    size: 13,
+    flexShrink: 0
+  }));
+});
+MultiselectFilterItem.propTypes = {
+  /**
+     * Display text.
+     */
+  text: _propTypes["default"].string,
+
+  /**
+     * List icon.
+     */
+  icon: _propTypes["default"].shape({})
+};
+MultiselectFilterItem.displayName = 'MultiselectFilterItem';
+var _default = MultiselectFilterItem;
+exports["default"] = _default;

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

@@ -0,0 +1,53 @@
+"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 _FilterIcon = _interopRequireDefault(require("mdi-react/FilterIcon"));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _MultiselectFilterItem = _interopRequireDefault(require("./MultiselectFilterItem"));
+
+var _react2 = require("@emotion/react");
+
+var testId = 'multiselect-filter-item';
+var iconId = 'multiselect-filter-data-icon';
+var defaultProps = {
+  text: 'Item name'
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_MultiselectFilterItem["default"], (0, _extends2["default"])({}, defaultProps, props)));
+};
+
+afterEach(function () {
+  jest.restoreAllMocks();
+}); // Need to be added to each test file to test accessibility using axe.
+
+(0, _testAxe["default"])(getComponent);
+test('default multiselectFilter', function () {
+  getComponent();
+
+  var multiselectFilterItem = _testWrapper.screen.getByTestId(testId);
+
+  var icon = _testWrapper.screen.queryByTestId(iconId);
+
+  expect(icon).not.toBeInTheDocument();
+  expect(multiselectFilterItem).toBeInTheDocument();
+});
+test('icon displays when icon prop is present', function () {
+  getComponent({
+    icon: _FilterIcon["default"]
+  });
+
+  var icon = _testWrapper.screen.getByTestId(iconId);
+
+  expect(icon).toBeInTheDocument();
+});

package/lib/cjs/components/MultiselectFilterItem/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 _MultiselectFilterItem["default"];
+  }
+});
+
+var _MultiselectFilterItem = _interopRequireDefault(require("./MultiselectFilterItem"));

package/lib/cjs/components/MultiselectListContainer/MultiselectBadge.js

@@ -0,0 +1,47 @@
+"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"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Chip = _interopRequireDefault(require("../Chip"));
+
+var _react2 = require("@emotion/react");
+
+/**
+ * The MultiselectBadge serves as a badge to display selected count.
+ */
+var MultiselectBadge = function MultiselectBadge(props) {
+  var selectedFilterCount = props.selectedFilterCount,
+      others = (0, _objectWithoutProperties2["default"])(props, ["selectedFilterCount"]);
+  return (0, _react2.jsx)(_Chip["default"], (0, _extends2["default"])({
+    as: "span",
+    bg: "neutral.90",
+    label: selectedFilterCount.toString(),
+    textColor: "neutral.30",
+    variant: "multiselectListContainer.multiselectListBadge",
+    isUppercase: true
+  }, others));
+};
+
+MultiselectBadge.propTypes = {
+  selectedFilterCount: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  margin: _propTypes["default"].string
+};
+MultiselectBadge.displayName = 'MultiselectBadge';
+var _default = MultiselectBadge;
+exports["default"] = _default;

package/lib/cjs/components/MultiselectListContainer/MultiselectBadge.test.js

@@ -0,0 +1,48 @@
+"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 _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _MultiselectBadge = _interopRequireDefault(require("./MultiselectBadge"));
+
+var _react2 = require("@emotion/react");
+
+var testId = 'test-multiselectBadge';
+var defaultProps = {
+  'data-testid': testId,
+  selectedFilterCount: 9
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_MultiselectBadge["default"], (0, _extends2["default"])({}, defaultProps, props)));
+};
+
+afterEach(function () {
+  jest.restoreAllMocks();
+}); // Need to be added to each test file to test accessibility using axe.
+
+(0, _testAxe["default"])(getComponent);
+test('default multiselectBadge', function () {
+  getComponent();
+
+  var multiselectBadge = _testWrapper.screen.getByTestId(testId);
+
+  expect(multiselectBadge).toBeInTheDocument();
+});
+test('custom classname can be passed', function () {
+  getComponent({
+    className: 'testing-class'
+  });
+
+  var multiselectBadge = _testWrapper.screen.getByTestId(testId);
+
+  expect(multiselectBadge).toHaveClass('testing-class');
+});

package/lib/cjs/components/MultiselectListContainer/MultiselectListContainer.js

@@ -0,0 +1,157 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIcon"));
+
+var _ChevronLeftIcon = _interopRequireDefault(require("mdi-react/ChevronLeftIcon"));
+
+var _overlays = require("@react-stately/overlays");
+
+var _MultiselectBadge = _interopRequireDefault(require("./MultiselectBadge"));
+
+var _index = require("../../index");
+
+var _hooks = require("../../hooks");
+
+var _react2 = require("@emotion/react");
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+/**
+ * The MultiselectListContainer serves as a wrapper around a list and its associated trigger,
+ * linking the list's open state with the trigger's press state and providing necessary context.
+ */
+var MultiselectListContainer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var selectedFilterCount = props.selectedFilterCount,
+      className = props.className,
+      children = props.children,
+      closeAriaLabel = props.closeAriaLabel,
+      isDefaultOpen = props.isDefaultOpen,
+      isOpen = props.isOpen,
+      onOpenChange = props.onOpenChange,
+      openAriaLabel = props.openAriaLabel,
+      others = (0, _objectWithoutProperties2["default"])(props, ["selectedFilterCount", "className", "children", "closeAriaLabel", "isDefaultOpen", "isOpen", "onOpenChange", "openAriaLabel"]);
+
+  var triggerRef = _react["default"].useRef();
+
+  var state = (0, _overlays.useOverlayTriggerState)({
+    defaultOpen: isDefaultOpen,
+    isOpen: isOpen,
+    onOpenChange: onOpenChange
+  });
+  var close = state.close;
+
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+    isOpen: state.isOpen
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  var handleButtonPress = function handleButtonPress() {
+    if (state.isOpen) {
+      close(state, triggerRef, close);
+    } else {
+      state.open();
+    }
+  };
+
+  var handleClose = function handleClose(e) {
+    if (e.key === 'Escape') {
+      close(state, triggerRef, close);
+    }
+  };
+
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    className: classNames,
+    onKeyUp: handleClose,
+    ref: ref,
+    variant: "multiselectListContainer.multiselectListContainer",
+    isRow: true
+  }, others), (0, _react2.jsx)(_index.IconButton, {
+    isRow: true,
+    "aria-label": state.isOpen ? closeAriaLabel : openAriaLabel,
+    "data-testid": "multiselect-list-button",
+    onPress: handleButtonPress,
+    ref: triggerRef,
+    variant: "multiselectToggle",
+    pr: "sm"
+  }, (0, _react2.jsx)(_index.Icon, {
+    color: "active",
+    icon: state.isOpen ? _ChevronRightIcon["default"] : _ChevronLeftIcon["default"],
+    role: "button",
+    size: "30px"
+  }), !state.isOpen && selectedFilterCount && (0, _react2.jsx)(_MultiselectBadge["default"], {
+    "data-testid": "multiselect-list-badge",
+    margin: "auto",
+    selectedFilterCount: selectedFilterCount
+  })), state.isOpen && _objectSpread({}, children));
+});
+MultiselectListContainer.propTypes = {
+  /** Amount of selected items indicator. */
+  selectedFilterCount: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+
+  /** Defines a string value that labels the trigger icon when menu is open. */
+  closeAriaLabel: _propTypes["default"].string,
+
+  /** Sets the default open state of the overlay. */
+  isDefaultOpen: _propTypes["default"].bool,
+
+  /** Whether the overlay is currently open. */
+  isOpen: _propTypes["default"].bool,
+
+  /**
+   * Method that is called when the open state of the menu changes.
+   * Returns the new open state and the action that caused the opening of the menu.
+   *
+   * `(isOpen: boolean, overlayTrigger: OverlayTriggerAction) => void`
+   */
+  onOpenChange: _propTypes["default"].func,
+
+  /** Defines a string value that labels the trigger icon when menu is closed. */
+  openAriaLabel: _propTypes["default"].string
+};
+MultiselectListContainer.defaultProps = {
+  openAriaLabel: 'Open filter menu?',
+  closeAriaLabel: 'Close filter menu?'
+};
+MultiselectListContainer.displayName = 'MultiselectListContainer';
+var _default = MultiselectListContainer;
+exports["default"] = _default;

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

@@ -0,0 +1,112 @@
+"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 _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _MultiselectListContainer = _interopRequireDefault(require("./MultiselectListContainer"));
+
+var _react2 = require("@emotion/react");
+
+var testId = 'test-multiselectListContainer';
+var multiselectListBadgeId = 'multiselect-list-badge';
+var multiselectListButtonId = 'multiselect-list-button';
+var multiselectFilterId = 'multiselect-filter';
+var defaultProps = {
+  'data-testid': testId
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_MultiselectListContainer["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)("div", {
+    "data-testid": multiselectFilterId
+  })));
+};
+
+afterEach(function () {
+  jest.restoreAllMocks();
+}); // Need to be added to each test file to test accessibility using axe.
+
+(0, _testAxe["default"])(getComponent);
+test('default MultiselectListContainer', function () {
+  getComponent();
+
+  var multiselectListContainer = _testWrapper.screen.getByTestId(testId);
+
+  expect(multiselectListContainer).toBeInTheDocument();
+});
+test('custom classname can be passed', function () {
+  getComponent({
+    className: 'testing-class'
+  });
+
+  var multiselectListContainer = _testWrapper.screen.getByTestId(testId);
+
+  expect(multiselectListContainer).toHaveClass('testing-class');
+});
+test('shows badge when container is closed', function () {
+  getComponent({
+    selectedFilterCount: 9,
+    state: {
+      isOpen: false
+    }
+  });
+
+  var badge = _testWrapper.screen.getByTestId(multiselectListBadgeId);
+
+  expect(badge).toBeInTheDocument();
+});
+test('updates aria label when button is clicked', function () {
+  var state = {
+    isOpen: true
+  };
+  getComponent({
+    state: state
+  });
+
+  var button = _testWrapper.screen.getByTestId(multiselectListButtonId);
+
+  _userEvent["default"].click(button);
+
+  var multiSelect = _testWrapper.screen.queryByTestId(multiselectFilterId);
+
+  expect(button).toHaveAttribute('aria-label', 'Close filter menu?');
+  expect(multiSelect).toBeInTheDocument();
+
+  _userEvent["default"].click(button);
+
+  expect(button).toHaveAttribute('aria-label', 'Open filter menu?');
+  expect(multiSelect).not.toBeInTheDocument();
+});
+test('shows children when isOpen is true', function () {
+  getComponent({
+    isOpen: true
+  });
+
+  var multiselectFilter = _testWrapper.screen.getByTestId(multiselectFilterId);
+
+  expect(multiselectFilter).toBeInTheDocument();
+});
+test('should hide children when pressing the escape key', function () {
+  getComponent();
+
+  var button = _testWrapper.screen.getByTestId(multiselectListButtonId);
+
+  _userEvent["default"].click(button);
+
+  var multiSelect = _testWrapper.screen.queryByTestId(multiselectFilterId);
+
+  expect(multiSelect).toBeInTheDocument();
+
+  _userEvent["default"].type(button, '{esc}');
+
+  expect(multiSelect).not.toBeInTheDocument();
+});

package/lib/cjs/components/MultiselectListContainer/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 _MultiselectListContainer["default"];
+  }
+});
+
+var _MultiselectListContainer = _interopRequireDefault(require("./MultiselectListContainer"));