@pingux/astro 1.2.0-alpha.9 → 1.3.1

package/lib/cjs/components/AccordionGridItem/AccordionGridItem.js

@@ -30,7 +30,7 @@ var _grid = require("@react-aria/grid");
 
 var _utils = require("@react-aria/utils");
 
-var _AccordionGridContext = require("../AccordionGridGroup/AccordionGridContext");
+var _AccordionGridContext = require("../../context/AccordionGridContext");
 
 var _Box = _interopRequireDefault(require("../Box"));
 
@@ -38,6 +38,8 @@ var _AccordionGridItemHeader = _interopRequireDefault(require("./AccordionGridIt
 
 var _AccordionGridItemBody = _interopRequireDefault(require("./AccordionGridItemBody"));
 
+var _hooks = require("../../hooks");
+
 var _react2 = require("@emotion/react");
 
 var AccordionGridItem = function AccordionGridItem(props) {
@@ -47,7 +49,8 @@ var AccordionGridItem = function AccordionGridItem(props) {
       headerProps = props.headerProps,
       bodyProps = props.bodyProps,
       children = props.children,
-      others = (0, _objectWithoutProperties2["default"])(props, ["item", "headerProps", "bodyProps", "children"]);
+      className = props.className,
+      others = (0, _objectWithoutProperties2["default"])(props, ["item", "headerProps", "bodyProps", "children", "className"]);
 
   var _React$Children$toArr = _react["default"].Children.toArray(children),
       _React$Children$toArr2 = (0, _toArray2["default"])(_React$Children$toArr),
@@ -57,10 +60,18 @@ var AccordionGridItem = function AccordionGridItem(props) {
 
   var cellNode = (0, _concat["default"])(_context = []).call(_context, item.childNodes)[0];
 
-  var _useContext = (0, _react.useContext)(_AccordionGridContext.AccordionGridContext),
-      state = _useContext.state;
+  var _useAccordionGridCont = (0, _AccordionGridContext.useAccordionGridContext)(),
+      state = _useAccordionGridCont.state; // Treat first cell as a row, fixes focus and keyboard interactions
+
+
+  var isDisabled = state.disabledKeys.has(cellNode.key);
+  var isSelected = state.selectionManager.isSelected(cellNode.key); // Sync selection between the first cell and the row
 
-  var isDisabled = state.disabledKeys.has(item.key);
+  (0, _react.useEffect)(function () {
+    if (isSelected !== state.selectionManager.isSelected(item.key)) {
+      state.selectionManager.toggleSelection(item.key);
+    }
+  }, [isSelected, state.selectionManager, item.key]);
   var rowRef = (0, _react.useRef)();
   var cellRef = (0, _react.useRef)();
   var cellBodyRef = (0, _react.useRef)();
@@ -70,20 +81,24 @@ var AccordionGridItem = function AccordionGridItem(props) {
   }, state, rowRef),
       rowProps = _useGridRow.rowProps;
 
-  var isSelected = state.selectionManager.isSelected(item.key);
-  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
-    as: "div",
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+    isSelected: isSelected,
     isDisabled: isDisabled
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    as: "div"
   }, (0, _utils.mergeProps)(rowProps, others), {
-    ref: rowRef,
-    role: "row"
+    "aria-selected": isSelected,
+    className: classNames,
+    ref: rowRef
   }), (0, _react2.jsx)(_AccordionGridItemHeader["default"], (0, _extends2["default"])({
     item: item,
-    cellNode: cellNode,
-    ref: cellRef
-  }, headerProps, {
+    ref: cellRef,
+    isDisabled: isDisabled,
     isSelected: isSelected
-  }), header), (0, _react2.jsx)(_AccordionGridItemBody["default"], (0, _extends2["default"])({
+  }, headerProps), header), (0, _react2.jsx)(_AccordionGridItemBody["default"], (0, _extends2["default"])({
     item: item,
     ref: cellBodyRef,
     isSelected: isSelected

package/lib/cjs/components/AccordionGridItem/AccordionGridItemBody.js

@@ -16,6 +16,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _utils = require("@react-aria/utils");
@@ -26,7 +28,7 @@ var _grid = require("@react-aria/grid");
 
 var _interactions = require("@react-aria/interactions");
 
-var _AccordionGridContext = require("../AccordionGridGroup/AccordionGridContext");
+var _AccordionGridContext = require("../../context/AccordionGridContext");
 
 var _Box = _interopRequireDefault(require("../Box"));
 
@@ -40,10 +42,11 @@ var AccordionGridItemBody = /*#__PURE__*/(0, _react.forwardRef)(function (props,
   var item = props.item,
       className = props.className,
       children = props.children,
-      isSelected = props.isSelected;
+      isSelected = props.isSelected,
+      others = (0, _objectWithoutProperties2["default"])(props, ["item", "className", "children", "isSelected"]);
 
-  var _useContext = (0, _react.useContext)(_AccordionGridContext.AccordionGridContext),
-      state = _useContext.state;
+  var _useAccordionGridCont = (0, _AccordionGridContext.useAccordionGridContext)(),
+      state = _useAccordionGridCont.state;
 
   var cellNode = (0, _concat["default"])(_context = []).call(_context, item.childNodes)[1];
 
@@ -78,7 +81,7 @@ var AccordionGridItemBody = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     isSelected: isSelected,
     className: classNames,
     "aria-label": ariaLabel
-  }), children);
+  }, others), children);
 });
 AccordionGridItemBody.propTypes = {
   isSelected: _propTypes["default"].bool,

package/lib/cjs/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -34,7 +34,7 @@ var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
 
 var _MenuUpIcon = _interopRequireDefault(require("mdi-react/MenuUpIcon"));
 
-var _AccordionGridContext = require("../AccordionGridGroup/AccordionGridContext");
+var _AccordionGridContext = require("../../context/AccordionGridContext");
 
 var _Box = _interopRequireDefault(require("../Box"));
 
@@ -50,25 +50,36 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
   var item = props.item,
       className = props.className,
       children = props.children,
-      key = props.key,
       isSelected = props.isSelected,
-      others = (0, _objectWithoutProperties2["default"])(props, ["item", "className", "children", "key", "isSelected"]);
+      others = (0, _objectWithoutProperties2["default"])(props, ["item", "className", "children", "isSelected"]);
 
-  var _useContext = (0, _react.useContext)(_AccordionGridContext.AccordionGridContext),
-      state = _useContext.state;
+  var _useAccordionGridCont = (0, _AccordionGridContext.useAccordionGridContext)(),
+      state = _useAccordionGridCont.state;
 
+  var cellRef = (0, _react.useRef)();
+  /* istanbul ignore next */
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return cellRef.current;
+  });
   var cellNode = (0, _concat["default"])(_context = []).call(_context, item.childNodes)[0];
 
   var _useGridCell = (0, _grid.useGridCell)({
     node: cellNode,
     focusMode: 'cell'
-  }, state, ref),
+  }, state, cellRef),
       gridCellProps = _useGridCell.gridCellProps;
 
   var _useHover = (0, _interactions.useHover)({}),
       hoverProps = _useHover.hoverProps,
       isHovered = _useHover.isHovered;
 
+  var _usePress = (0, _interactions.usePress)({
+    ref: cellRef
+  }),
+      pressProps = _usePress.pressProps,
+      isPressed = _usePress.isPressed;
+
   var _useFocusRing = (0, _focus.useFocusRing)({
     within: true
   }),
@@ -78,14 +89,7 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
       focusProps = _useFocusRing2.focusProps,
       isFocusVisible = _useFocusRing2.isFocusVisible;
 
-  var _usePress = (0, _interactions.usePress)({
-    ref: ref,
-    isPressed: item.props.isPressed
-  }),
-      pressProps = _usePress.pressProps,
-      isPressed = _usePress.isPressed;
-
-  var mergedProps = (0, _utils.mergeProps)(gridCellProps, hoverProps, focusWithinProps, focusProps, pressProps);
+  var mergedProps = (0, _utils.mergeProps)(pressProps, gridCellProps, hoverProps, focusWithinProps, focusProps);
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isPressed: isPressed,
@@ -98,9 +102,8 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
   var ariaLabel = props['aria-label'];
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "div",
-    ref: ref
+    ref: cellRef
   }, mergedProps, {
-    role: "gridcell",
     variant: "accordion.accordionGridHeader",
     isFocused: isFocusVisible,
     isSelected: isSelected,
@@ -123,8 +126,8 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
 AccordionGridItemHeader.propTypes = {
   'aria-label': _propTypes["default"].string,
   isSelected: _propTypes["default"].bool,
-  key: _propTypes["default"].string,
   item: _propTypes["default"].shape({
+    key: _propTypes["default"].string,
     childNodes: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),
     props: _propTypes["default"].shape({
       isPressed: _propTypes["default"].bool

package/lib/cjs/components/AccordionGroup/AccordionGroup.js

@@ -57,8 +57,9 @@ var AccordionGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var _useAccordion = (0, _accordion.useAccordion)(props, state, accordionRef),
       accordionProps = _useAccordion.accordionProps;
-  /* istanbul ignore next */
 
+  delete accordionProps.onMouseDown;
+  /* istanbul ignore next */
 
   (0, _react.useImperativeHandle)(ref, function () {
     return accordionRef.current;

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

@@ -46,7 +46,11 @@ var getComponent = function getComponent() {
     textValue: "Duplicate",
     "data-id": "third",
     label: "Accordion item"
-  }, (0, _react2.jsx)(_Text["default"], null, "Render me!"))));
+  }, (0, _react2.jsx)(_index.TextField, {
+    role: "form",
+    label: "Example Label",
+    "data-testid": "testField"
+  }))));
 };
 
 var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
@@ -280,6 +284,21 @@ test('expanded keys expands an accordion item', function () {
   var selectedItem = buttons[0];
   expect(selectedItem).toHaveAttribute('aria-expanded', 'true');
 });
+test('able to click a textfield that is the rendered child of an accordion', function () {
+  getComponent({
+    expandedKeys: ['third']
+  });
+
+  var field = _testWrapper.screen.getByTestId('testField');
+
+  var input = _testWrapper.screen.getByRole('form');
+
+  _userEvent["default"].click(input);
+
+  _userEvent["default"].type(input, 'banana');
+
+  expect(field).toHaveClass('has-focus-within');
+});
 test('Item accepts a data-id and the data-id can be found in the DOM', function () {
   getComponent();
 

package/lib/cjs/components/ArrayField/ArrayField.js

@@ -0,0 +1,213 @@
+"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 _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 _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uuid = require("uuid");
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _FieldHelperText = _interopRequireDefault(require("../FieldHelperText"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+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 _context3; (0, _forEach["default"])(_context3 = ownKeys(Object(source), true)).call(_context3, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context4; (0, _forEach["default"])(_context4 = ownKeys(Object(source))).call(_context4, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+var ArrayField = function ArrayField(_ref) {
+  var _context2;
+
+  var addButtonLabel = _ref.addButtonLabel,
+      defaultValue = _ref.defaultValue,
+      value = _ref.value,
+      label = _ref.label,
+      helperText = _ref.helperText,
+      status = _ref.status,
+      onAdd = _ref.onAdd,
+      onChange = _ref.onChange,
+      onDelete = _ref.onDelete,
+      renderField = _ref.renderField,
+      others = (0, _objectWithoutProperties2["default"])(_ref, ["addButtonLabel", "defaultValue", "value", "label", "helperText", "status", "onAdd", "onChange", "onDelete", "renderField"]);
+  var isControlled = value !== undefined;
+  var createEmptyField = (0, _react.useCallback)(function () {
+    return {
+      id: (0, _uuid.v4)(),
+      value: ''
+    };
+  }, []);
+
+  var _useState = (0, _react.useState)(defaultValue || [createEmptyField()]),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      fieldValues = _useState2[0],
+      setFieldValues = _useState2[1];
+
+  var mapArrayFieldWithNewValue = (0, _react.useCallback)(function (arrValues, newValue, fieldId) {
+    return (0, _map["default"])(arrValues).call(arrValues, function (fieldValue) {
+      if (fieldValue.id === fieldId) {
+        return _objectSpread(_objectSpread({}, fieldValue), {}, {
+          value: newValue
+        });
+      }
+
+      return fieldValue;
+    });
+  }, []);
+  var onFieldValueChange = (0, _react.useCallback)(function (event, fieldId) {
+    var tempValue = event; // Checks if value receieved is a key or event
+
+    if (typeof event !== 'string') {
+      tempValue = event.target.value;
+    }
+
+    if (isControlled) {
+      onChange(mapArrayFieldWithNewValue(value, tempValue, fieldId));
+    } else {
+      setFieldValues(function (oldValues) {
+        return mapArrayFieldWithNewValue(oldValues, tempValue, fieldId);
+      });
+    }
+  }, [isControlled, mapArrayFieldWithNewValue, onChange, value]);
+  var onFieldDelete = (0, _react.useCallback)(function (fieldId) {
+    if (isControlled) {
+      onDelete(fieldId);
+    } else {
+      setFieldValues(function (oldValues) {
+        return (0, _filter["default"])(oldValues).call(oldValues, function (_ref2) {
+          var id = _ref2.id;
+          return id !== fieldId;
+        });
+      });
+    }
+  }, [isControlled, onDelete]);
+  var onFieldAdd = (0, _react.useCallback)(function () {
+    if (onAdd) {
+      return onAdd();
+    }
+
+    return setFieldValues(function (oldValues) {
+      var _context;
+
+      return (0, _concat["default"])(_context = []).call(_context, oldValues, [createEmptyField()]);
+    });
+  }, [createEmptyField, onAdd]);
+  return (0, _react2.jsx)(_Box["default"], others, (0, _react2.jsx)(_Text["default"], {
+    variant: "label"
+  }, label), (0, _react2.jsx)(_Box["default"], {
+    as: "ul",
+    pl: "0"
+  }, (0, _map["default"])(_context2 = value || fieldValues).call(_context2, function (_ref3) {
+    var id = _ref3.id,
+        onComponentRender = _ref3.onComponentRender,
+        fieldValue = _ref3.fieldValue,
+        otherFieldProps = (0, _objectWithoutProperties2["default"])(_ref3, ["id", "onComponentRender", "fieldValue"]);
+    var isDisabled = (value || fieldValues).length === 1;
+    return (0, _react2.jsx)(_Box["default"], {
+      as: "li",
+      mb: "xs",
+      key: id
+    }, onComponentRender ? onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) : renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps));
+  })), helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
+    status: status
+  }, helperText), (0, _react2.jsx)(_Button["default"], {
+    "aria-label": "Add field",
+    variant: "text",
+    onPress: onFieldAdd,
+    sx: {
+      width: 'fit-content'
+    }
+  }, (0, _react2.jsx)(_Text["default"], {
+    variant: "label",
+    color: "active"
+  }, addButtonLabel)));
+};
+
+ArrayField.propTypes = {
+  /** Label for add button */
+  addButtonLabel: _propTypes["default"].string,
+
+  /** The default value for the array input field (uncontrolled). */
+  defaultValue: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    id: _propTypes["default"].string,
+    value: _propTypes["default"].string
+  })),
+
+  /** The default value of the array input field (controlled). */
+  value: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    id: _propTypes["default"].string,
+    value: _propTypes["default"].string
+  })),
+
+  /** The rendered label for the field. */
+  label: _propTypes["default"].node,
+
+  /** Text to display before add button. Useful for errors or other info. */
+  helperText: _propTypes["default"].node,
+
+  /** Callback for changing array field data  */
+  onChange: _propTypes["default"].func,
+
+  /** Callback for adding new empty field */
+  onAdd: _propTypes["default"].func,
+
+  /** Callback for deleting a field */
+  onDelete: _propTypes["default"].func,
+
+  /** Render prop to display an input field */
+  renderField: _propTypes["default"].func,
+
+  /** Determines the helper text styling. */
+  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"]))
+};
+ArrayField.defaultProps = {
+  addButtonLabel: '+ Add'
+};
+var _default = ArrayField;
+exports["default"] = _default;