@planningcenter/tapestry-react 2.10.0-rc.13 → 2.10.0-rc.15

package/dist/esm/Dropdown/Dropdown.js

@@ -0,0 +1,301 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(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) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React, { Component, cloneElement, createElement } from 'react';
+import Button from '../Button';
+import FocusGroup from '../FocusGroup';
+import { ItemList, ItemListController } from '../ItemList';
+import Menu from '../Menu';
+import Popover from '../Popover';
+import { cloneChildren, generateId } from '../utils';
+import Item, { ITEM_DISPLAY_NAME } from './Item';
+import Link, { LINK_DISPLAY_NAME } from './Link';
+
+var Dropdown = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Dropdown, _Component);
+
+  function Dropdown(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_this), "openPopover", function (event) {
+      if (_this.props.onOpen) {
+        _this.props.onOpen();
+      }
+
+      _this.setState({
+        isPopoverOpen: true
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "closePopover", function (event) {
+      if (_this.props.onClose) {
+        _this.props.onClose();
+      }
+
+      if (!_this.props.forceOpen) {
+        _this.setState({
+          isPopoverOpen: false
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "togglePopover", function (event) {
+      _this.setState({
+        preventBlur: false
+      });
+
+      if (_this.state.isPopoverOpen) {
+        _this.closePopover(event);
+      } else {
+        _this.openPopover(event);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleSelect", function (data, _ref) {
+      var node = _ref.node;
+
+      if (_this.props.closeOnSelect) {
+        _this.itemList.clearHighlightedIndex();
+
+        _this.closePopover();
+
+        _this.popover.focusAnchor();
+      }
+
+      if (node.tagName === 'A' && event.type !== 'click') {
+        node.click();
+      } else if (_this.props.onSelect) {
+        _this.props.onSelect(data);
+      }
+    });
+
+    _this.state = {
+      isPopoverOpen: props.defaultOpen || props.forceOpen,
+      preventBlur: false
+    };
+    _this.id = generateId('dropdown');
+    return _this;
+  }
+
+  var _proto = Dropdown.prototype;
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var _this$props = this.props,
+        forceOpen = _this$props.forceOpen,
+        closeOnSelect = _this$props.closeOnSelect,
+        children = _this$props.children,
+        as = _this$props.as,
+        defaultOpen = _this$props.defaultOpen,
+        _innerRef = _this$props.innerRef,
+        keepInView = _this$props.keepInView,
+        lockScrollWhileOpen = _this$props.lockScrollWhileOpen,
+        matchWidths = _this$props.matchWidths,
+        _onClick = _this$props.onClick,
+        onClose = _this$props.onClose,
+        onKeyDown = _this$props.onKeyDown,
+        onOpen = _this$props.onOpen,
+        onSearch = _this$props.onSearch,
+        placement = _this$props.placement,
+        popoverProps = _this$props.popoverProps,
+        renderTo = _this$props.renderTo,
+        triggerElement = _this$props.triggerElement,
+        restProps = _objectWithoutPropertiesLoose(_this$props, ["forceOpen", "closeOnSelect", "children", "as", "defaultOpen", "innerRef", "keepInView", "lockScrollWhileOpen", "matchWidths", "onClick", "onClose", "onKeyDown", "onOpen", "onSearch", "placement", "popoverProps", "renderTo", "triggerElement"]);
+
+    var isPopoverOpen = this.state.isPopoverOpen;
+    var arrowIconOnly = !restProps.icon && !restProps.title;
+    var index = -1;
+    return /*#__PURE__*/React.createElement(FocusGroup, {
+      onBlur: this.closePopover
+    }, function (_ref2) {
+      var requestBlur = _ref2.requestBlur,
+          setRef = _ref2.setRef;
+      return /*#__PURE__*/React.createElement(ItemList, {
+        ref: function ref(c) {
+          return _this2.itemList = c;
+        },
+        onSelect: _this2.handleSelect
+      }, function (_ref3) {
+        var getItemByText = _ref3.getItemByText,
+            moveHighlightedIndex = _ref3.moveHighlightedIndex,
+            selectHighlightedItem = _ref3.selectHighlightedItem,
+            setHighlightedIndex = _ref3.setHighlightedIndex,
+            stringSearch = _ref3.stringSearch;
+        return /*#__PURE__*/React.createElement(Popover, _extends({}, popoverProps, {
+          as: Menu,
+          ref: function ref(component) {
+            _this2.popover = component;
+          },
+          innerRef: function innerRef(node) {
+            setRef(_this2.id + "-popover")(node);
+          },
+          role: "menu",
+          tabIndex: -1,
+          elevation: 2,
+          display: Boolean(restProps.spinner) ? 'none' : undefined,
+          onBlur: requestBlur,
+          matchWidths: matchWidths,
+          keepInView: keepInView,
+          lockScrollWhileOpen: lockScrollWhileOpen,
+          placement: placement,
+          renderTo: renderTo,
+          open: isPopoverOpen,
+          onRequestClose: function onRequestClose() {
+            _this2.closePopover();
+
+            _this2.popover.focusAnchor();
+          },
+          anchorElement: function anchorElement(anchorProps) {
+            return /*#__PURE__*/React.createElement(ItemListController, null, function (_ref4) {
+              var _objectSpread2;
+
+              var getHighlightedItemId = _ref4.getHighlightedItemId;
+
+              var triggerProps = _objectSpread((_objectSpread2 = {
+                innerRef: function innerRef(node) {
+                  var _anchorProps$innerRef;
+
+                  if (typeof anchorProps.innerRef === 'function') {
+                    anchorProps.innerRef(node);
+                  } else if ((_anchorProps$innerRef = anchorProps.innerRef) != null && _anchorProps$innerRef.current) {
+                    anchorProps.innerRef.current = node;
+                  }
+
+                  setRef(_this2.id + "-button")(node);
+
+                  if (_innerRef) {
+                    _innerRef(node);
+                  }
+                },
+                'aria-activedescendant': getHighlightedItemId(),
+                'aria-owns': getHighlightedItemId(),
+                'aria-haspopup': true,
+                'aria-expanded': isPopoverOpen
+              }, _objectSpread2[arrowIconOnly ? 'icon' : 'iconRight'] = {
+                name: isPopoverOpen ? 'general.upCaret' : 'general.downCaret',
+                size: 'sm'
+              }, _objectSpread2.title = arrowIconOnly ? 'arrow down' : restProps.title, _objectSpread2.tabIndex = 0, _objectSpread2.cursor = 'pointer', _objectSpread2.onBlur = function onBlur(event) {
+                if (_this2.state.preventBlur) {
+                  _this2.setState({
+                    preventBlur: false
+                  });
+                } else {
+                  requestBlur(event);
+                }
+              }, _objectSpread2.onClick = function onClick(event) {
+                _this2.togglePopover();
+
+                if (!isPopoverOpen) {
+                  _this2.popover.focusAnchor();
+                }
+
+                _onClick && _onClick(event);
+              }, _objectSpread2.onKeyDown = function onKeyDown(event) {
+                anchorProps.onKeyDown(event);
+
+                switch (event.key) {
+                  case 'ArrowUp':
+                    event.preventDefault();
+
+                    if (isPopoverOpen) {
+                      moveHighlightedIndex(-1);
+                    } else {
+                      _this2.openPopover();
+
+                      setTimeout(function () {
+                        moveHighlightedIndex(-1);
+                      });
+                    }
+
+                    break;
+
+                  case 'ArrowDown':
+                    event.preventDefault();
+
+                    if (isPopoverOpen) {
+                      moveHighlightedIndex(1);
+                    } else {
+                      _this2.openPopover();
+
+                      setTimeout(function () {
+                        moveHighlightedIndex(1);
+                      });
+                    }
+
+                    break;
+
+                  case 'Enter':
+                    if (isPopoverOpen) {
+                      event.preventDefault();
+                      selectHighlightedItem();
+                    }
+
+                    break;
+
+                  case ' ':
+                    event.preventDefault();
+
+                    _this2.togglePopover();
+
+                    break;
+
+                  default:
+                    onSearch ? onSearch(event) : stringSearch(event).then(function (text) {
+                      var item = getItemByText(text);
+
+                      if (item) {
+                        setHighlightedIndex(item.props.index);
+                      }
+                    });
+                }
+              }, _objectSpread2.onMouseDown = function onMouseDown() {
+                _this2.setState({
+                  preventBlur: true
+                });
+              }, _objectSpread2), restProps);
+
+              if ( /*#__PURE__*/React.isValidElement(triggerElement)) {
+                return /*#__PURE__*/cloneElement(triggerElement, triggerProps);
+              } else {
+                return /*#__PURE__*/createElement(triggerElement, triggerProps);
+              }
+            });
+          }
+        }), cloneChildren(children, function (child) {
+          if (child.type.displayName === ITEM_DISPLAY_NAME || child.type.displayName === LINK_DISPLAY_NAME) {
+            index++;
+            return {
+              index: index
+            };
+          } else {
+            return {};
+          }
+        }));
+      });
+    });
+  };
+
+  return Dropdown;
+}(Component);
+
+_defineProperty(Dropdown, "Item", Item);
+
+_defineProperty(Dropdown, "Link", Link);
+
+_defineProperty(Dropdown, "defaultProps", {
+  triggerElement: Button,
+  closeOnSelect: true,
+  defaultOpen: false
+});
+
+export default Dropdown;

package/dist/esm/Dropdown/Dropdown.test.js

@@ -0,0 +1,167 @@
+import React, { useState } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import noop from 'lodash/noop';
+import { Box, Button, Text, ThemeProvider } from '..';
+import Dropdown from './Dropdown';
+
+var _ref = /*#__PURE__*/React.createElement(Dropdown, {
+  title: "A menu"
+});
+
+describe('Dropdown', function () {
+  describe('Text search', function () {
+    it("should render title", function () {
+      render(_ref);
+      screen.getByText('A menu');
+    });
+    it("calls passed onSearch function when receiving keyboard input", function () {
+      var customTextSearch = jest.fn();
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dropdown, {
+        title: "A menu",
+        onSearch: customTextSearch
+      })));
+      var dropdown = screen.getByText('A menu');
+      fireEvent.keyDown(dropdown, {
+        key: 'A',
+        code: 'KeyA'
+      });
+      expect(customTextSearch).toHaveBeenCalled();
+    });
+  });
+  describe('Keyboard navigation', function () {
+    var StatefulDropdown = function StatefulDropdown() {
+      var _useState = useState(0),
+          count = _useState[0],
+          setCount = _useState[1];
+
+      return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Item, null, /*#__PURE__*/React.createElement(Button, {
+        title: "One",
+        onClick: function onClick() {
+          return noop();
+        }
+      })), /*#__PURE__*/React.createElement(Dropdown.Item, null, /*#__PURE__*/React.createElement(Button, {
+        title: "Two",
+        onClick: function onClick() {
+          return setCount(function (c) {
+            return c + 1;
+          });
+        }
+      }), /*#__PURE__*/React.createElement(Text, {
+        "data-testid": "count-text"
+      }, count)), /*#__PURE__*/React.createElement(Dropdown.Item, null, /*#__PURE__*/React.createElement(Button, {
+        title: "Three",
+        onClick: function onClick() {
+          return noop();
+        }
+      })))));
+    };
+
+    var _ref2 = /*#__PURE__*/React.createElement(StatefulDropdown, null);
+
+    it('should trap focus, tab forward through all elements', function () {
+      render(_ref2);
+      userEvent.tab();
+      userEvent.keyboard('{enter}');
+
+      var _screen$getAllByRole = screen.getAllByRole('button'),
+          openPopover = _screen$getAllByRole[0],
+          buttonOne = _screen$getAllByRole[1],
+          buttonTwo = _screen$getAllByRole[2],
+          buttonThree = _screen$getAllByRole[3];
+
+      expect(openPopover).toHaveFocus();
+      userEvent.tab();
+      expect(buttonOne).toHaveFocus();
+      userEvent.tab();
+      expect(buttonTwo).toHaveFocus();
+      userEvent.tab();
+      expect(buttonThree).toHaveFocus();
+      userEvent.tab();
+      expect(buttonOne).toHaveFocus();
+    });
+
+    var _ref3 = /*#__PURE__*/React.createElement(StatefulDropdown, null);
+
+    it('should trap focus, tab backwards from first element to last', function () {
+      render(_ref3);
+      userEvent.tab();
+      userEvent.keyboard('{enter}');
+
+      var _screen$getAllByRole2 = screen.getAllByRole('button'),
+          openPopover = _screen$getAllByRole2[0],
+          buttonOne = _screen$getAllByRole2[1],
+          _buttonTwo = _screen$getAllByRole2[2],
+          buttonThree = _screen$getAllByRole2[3];
+
+      expect(openPopover).toHaveFocus();
+      userEvent.tab();
+      expect(buttonOne).toHaveFocus();
+      userEvent.tab({
+        shift: true
+      });
+      expect(buttonThree).toHaveFocus();
+    });
+
+    var _ref4 = /*#__PURE__*/React.createElement(StatefulDropdown, null);
+
+    it('should retain tab order after rerender', function () {
+      render(_ref4);
+      userEvent.tab();
+      userEvent.keyboard('{enter}');
+
+      var _screen$getAllByRole3 = screen.getAllByRole('button'),
+          buttonOne = _screen$getAllByRole3[1],
+          buttonTwo = _screen$getAllByRole3[2],
+          buttonThree = _screen$getAllByRole3[3];
+
+      userEvent.tab();
+      userEvent.tab();
+      expect(screen.getByTestId('count-text')).toHaveTextContent('0');
+      userEvent.keyboard('{enter}');
+      expect(screen.getByTestId('count-text')).toHaveTextContent('1');
+      expect(buttonTwo).toHaveFocus();
+      userEvent.tab();
+      expect(buttonThree).toHaveFocus();
+      userEvent.tab({
+        shift: true
+      });
+      userEvent.tab({
+        shift: true
+      });
+      expect(buttonOne).toHaveFocus();
+      userEvent.tab();
+      userEvent.tab();
+      userEvent.tab();
+      expect(buttonOne).toHaveFocus();
+      userEvent.tab({
+        shift: true
+      });
+      userEvent.tab({
+        shift: true
+      });
+      userEvent.tab({
+        shift: true
+      });
+      expect(buttonOne).toHaveFocus();
+    });
+
+    var _ref5 = /*#__PURE__*/React.createElement(StatefulDropdown, null);
+
+    it('should focus dropdown toggle when a user presses escape key', function () {
+      render(_ref5);
+      userEvent.tab();
+      userEvent.keyboard('{enter}');
+
+      var _screen$getAllByRole4 = screen.getAllByRole('button'),
+          openPopover = _screen$getAllByRole4[0],
+          buttonOne = _screen$getAllByRole4[1];
+
+      userEvent.tab();
+      expect(buttonOne).toHaveFocus();
+      userEvent.keyboard("{esc}");
+      expect(openPopover).toHaveFocus();
+    });
+  });
+});

package/dist/esm/Dropdown/Item.js

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React, { Component } from 'react';
+import { ItemListItem } from '../ItemList';
+import Menu from '../Menu';
+export var ITEM_DISPLAY_NAME = 'Dropdown.Item';
+
+var Item = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Item, _Component);
+
+  function Item() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  var _proto = Item.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        disabled = _this$props.disabled,
+        index = _this$props.index,
+        onSelect = _this$props.onSelect,
+        text = _this$props.text,
+        value = _this$props.value,
+        restProps = _objectWithoutPropertiesLoose(_this$props, ["disabled", "index", "onSelect", "text", "value"]);
+
+    return /*#__PURE__*/React.createElement(ItemListItem, {
+      data: value,
+      text: text,
+      disabled: disabled,
+      index: index,
+      onSelect: onSelect
+    }, function (_ref) {
+      var id = _ref.id,
+          highlight = _ref.highlight,
+          highlighted = _ref.highlighted,
+          clearHighlight = _ref.clearHighlight,
+          select = _ref.select;
+      return /*#__PURE__*/React.createElement(Menu.Item, _extends({
+        id: id,
+        role: "menuitem",
+        "aria-disabled": disabled,
+        disabled: disabled,
+        isHighlighted: highlighted,
+        onMouseOver: highlight,
+        onMouseOut: clearHighlight,
+        onClick: select
+      }, restProps));
+    });
+  };
+
+  return Item;
+}(Component);
+
+_defineProperty(Item, "displayName", ITEM_DISPLAY_NAME);
+
+export default Item;

package/dist/esm/Dropdown/Link.js

@@ -0,0 +1,68 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React, { Component } from 'react';
+import { ItemListItem } from '../ItemList';
+import Menu from '../Menu';
+export var LINK_DISPLAY_NAME = 'Dropdown.Link';
+
+var Link = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Link, _Component);
+
+  function Link() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  var _proto = Link.prototype;
+
+  // Graphql wasn't picking up the correct displayName when this was
+  // assigned to LINK_DISPLAY_NAME, but using a string works
+  _proto.render = function render() {
+    var _this$props = this.props,
+        disabled = _this$props.disabled,
+        external = _this$props.external,
+        index = _this$props.index,
+        text = _this$props.text,
+        to = _this$props.to,
+        restProps = _objectWithoutPropertiesLoose(_this$props, ["disabled", "external", "index", "text", "to"]);
+
+    if (external) {
+      restProps.target = '_blank';
+    }
+
+    return /*#__PURE__*/React.createElement(ItemListItem, {
+      data: "link",
+      text: text,
+      disabled: disabled,
+      index: index
+    }, function (_ref) {
+      var id = _ref.id,
+          highlight = _ref.highlight,
+          highlighted = _ref.highlighted,
+          clearHighlight = _ref.clearHighlight,
+          select = _ref.select;
+      return /*#__PURE__*/React.createElement(Menu.Item, _extends({
+        as: "a",
+        id: id,
+        href: disabled ? undefined : to,
+        disabled: disabled,
+        isHighlighted: highlighted,
+        onMouseOver: highlight,
+        onMouseOut: clearHighlight,
+        onKeyDown: function onKeyDown(event) {
+          return event.key === 'Enter' && select(event);
+        },
+        onClick: function onClick(event) {
+          return event.metaKey === false && select(event);
+        }
+      }, restProps));
+    });
+  };
+
+  return Link;
+}(Component);
+
+_defineProperty(Link, "displayName", 'Dropdown.Link');
+
+export default Link;

package/dist/esm/Dropdown/index.js

@@ -0,0 +1,2 @@
+import Dropdown from './Dropdown';
+export default Dropdown;

package/dist/esm/EditActions/EditActions.js

@@ -0,0 +1,84 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { Children, useEffect, useState } from 'react';
+import Button from '../Button';
+import StackView from '../StackView';
+import { useDocumentEvent, useFocus, useHover } from '../hooks';
+import { useThemeProps } from '../system';
+
+var EditActions = function EditActions(_ref) {
+  var display = _ref.display,
+      edit = _ref.edit,
+      loading = _ref.loading,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["display", "edit", "loading"]);
+
+  var _useFocus = useFocus(),
+      focus = _useFocus.focus,
+      focusProps = _useFocus.focusProps;
+
+  var _useHover = useHover(),
+      hover = _useHover.hover,
+      hoverProps = _useHover.hoverProps;
+
+  var _useState = useState(false),
+      on = _useState[0],
+      setOn = _useState[1];
+
+  var _useState2 = useState(false),
+      showCheck = _useState2[0],
+      setShowCheck = _useState2[1];
+
+  var toggle = function toggle() {
+    return setOn(function (bool) {
+      return !bool;
+    });
+  };
+
+  var _useThemeProps = useThemeProps('editActions', restProps),
+      buttonProps = _useThemeProps.buttonProps,
+      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["buttonProps"]);
+
+  useEffect(function () {
+    if (loading === false) {
+      setShowCheck(true);
+      setTimeout(function () {
+        setShowCheck(false);
+      }, 800);
+    }
+  }, [loading]);
+  useDocumentEvent('keydown', function (event) {
+    if (on && event.keyCode === 27) {
+      setOn(false);
+    }
+  });
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    axis: "horizontal",
+    alignment: "center",
+    spacing: 1,
+    width: "100%",
+    onClick: on ? undefined : function () {
+      return setOn(true);
+    }
+  }, focusProps, hoverProps, themeProps), Children.toArray(on ? edit : display), /*#__PURE__*/React.createElement(Button, _extends({
+    grow: 0,
+    title: on ? 'Close' : 'Edit',
+    icon: {
+      name: showCheck ? 'general.check' : on ? 'general.x' : 'general.pencil',
+      color: showCheck ? 'green' : undefined
+    },
+    tooltip: {
+      title: showCheck ? undefined : on ? 'Close' : 'Edit'
+    },
+    size: "sm",
+    variant: "naked",
+    onClick: focus || on ? toggle : function () {
+      return setOn(true);
+    },
+    opacity: focus || hover || on ? 1 : 0,
+    spinner: on && loading ? {
+      color: 'primary'
+    } : undefined
+  }, buttonProps)));
+};
+
+export default EditActions;

package/dist/esm/EditActions/index.js

@@ -0,0 +1,2 @@
+import EditActions from './EditActions';
+export default EditActions;