@planningcenter/tapestry-react 2.10.0-rc.8 → 2.10.0

package/dist/cjs/Dropdown/Dropdown.test.js

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

package/dist/cjs/Dropdown/Item.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = exports.ITEM_DISPLAY_NAME = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ItemList = require("../ItemList");
+
+var _Menu = _interopRequireDefault(require("../Menu"));
+
+var ITEM_DISPLAY_NAME = 'Dropdown.Item';
+exports.ITEM_DISPLAY_NAME = ITEM_DISPLAY_NAME;
+
+var Item = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2["default"])(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 = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["disabled", "index", "onSelect", "text", "value"]);
+    return /*#__PURE__*/_react["default"].createElement(_ItemList.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["default"].createElement(_Menu["default"].Item, (0, _extends2["default"])({
+        id: id,
+        role: "menuitem",
+        "aria-disabled": disabled,
+        disabled: disabled,
+        isHighlighted: highlighted,
+        onMouseOver: highlight,
+        onMouseOut: clearHighlight,
+        onClick: select
+      }, restProps));
+    });
+  };
+
+  return Item;
+}(_react.Component);
+
+(0, _defineProperty2["default"])(Item, "displayName", ITEM_DISPLAY_NAME);
+var _default = Item;
+exports["default"] = _default;

package/dist/cjs/Dropdown/Link.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = exports.LINK_DISPLAY_NAME = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ItemList = require("../ItemList");
+
+var _Menu = _interopRequireDefault(require("../Menu"));
+
+var LINK_DISPLAY_NAME = 'Dropdown.Link';
+exports.LINK_DISPLAY_NAME = LINK_DISPLAY_NAME;
+
+var Link = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2["default"])(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 = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["disabled", "external", "index", "text", "to"]);
+
+    if (external) {
+      restProps.target = '_blank';
+    }
+
+    return /*#__PURE__*/_react["default"].createElement(_ItemList.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["default"].createElement(_Menu["default"].Item, (0, _extends2["default"])({
+        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;
+}(_react.Component);
+
+(0, _defineProperty2["default"])(Link, "displayName", 'Dropdown.Link');
+var _default = Link;
+exports["default"] = _default;

package/dist/cjs/Dropdown/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _Dropdown = _interopRequireDefault(require("./Dropdown"));
+
+var _default = _Dropdown["default"];
+exports["default"] = _default;

package/dist/cjs/EditActions/EditActions.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _hooks = require("../hooks");
+
+var _system = require("../system");
+
+var EditActions = function EditActions(_ref) {
+  var display = _ref.display,
+      edit = _ref.edit,
+      loading = _ref.loading,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["display", "edit", "loading"]);
+
+  var _useFocus = (0, _hooks.useFocus)(),
+      focus = _useFocus.focus,
+      focusProps = _useFocus.focusProps;
+
+  var _useHover = (0, _hooks.useHover)(),
+      hover = _useHover.hover,
+      hoverProps = _useHover.hoverProps;
+
+  var _useState = (0, _react.useState)(false),
+      on = _useState[0],
+      setOn = _useState[1];
+
+  var _useState2 = (0, _react.useState)(false),
+      showCheck = _useState2[0],
+      setShowCheck = _useState2[1];
+
+  var toggle = function toggle() {
+    return setOn(function (bool) {
+      return !bool;
+    });
+  };
+
+  var _useThemeProps = (0, _system.useThemeProps)('editActions', restProps),
+      buttonProps = _useThemeProps.buttonProps,
+      themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["buttonProps"]);
+
+  (0, _react.useEffect)(function () {
+    if (loading === false) {
+      setShowCheck(true);
+      setTimeout(function () {
+        setShowCheck(false);
+      }, 800);
+    }
+  }, [loading]);
+  (0, _hooks.useDocumentEvent)('keydown', function (event) {
+    if (on && event.keyCode === 27) {
+      setOn(false);
+    }
+  });
+  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    axis: "horizontal",
+    alignment: "center",
+    spacing: 1,
+    width: "100%",
+    onClick: on ? undefined : function () {
+      return setOn(true);
+    }
+  }, focusProps, hoverProps, themeProps), _react.Children.toArray(on ? edit : display), /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+    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)));
+};
+
+var _default = EditActions;
+exports["default"] = _default;

package/dist/cjs/EditActions/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _EditActions = _interopRequireDefault(require("./EditActions"));
+
+var _default = _EditActions["default"];
+exports["default"] = _default;

package/dist/cjs/Field/Field.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _HelperDrawer = _interopRequireDefault(require("../HelperDrawer"));
+
+var _Input = _interopRequireDefault(require("../Input"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _utils = require("../utils");
+
+var _system = require("../system");
+
+var Field = function Field(_ref) {
+  var props = (0, _extends2["default"])({}, _ref);
+
+  var _useThemeProps = (0, _system.useThemeProps)('field', props),
+      children = _useThemeProps.children,
+      compact = _useThemeProps.compact,
+      _useThemeProps$distri = _useThemeProps.distribution,
+      distribution = _useThemeProps$distri === void 0 ? 'fill' : _useThemeProps$distri,
+      feedbackText = _useThemeProps.feedbackText,
+      helpContent = _useThemeProps.helpContent,
+      icon = _useThemeProps.icon,
+      inline = _useThemeProps.inline,
+      innerRef = _useThemeProps.innerRef,
+      label = _useThemeProps.label,
+      labelBasis = _useThemeProps.labelBasis,
+      labelColor = _useThemeProps.labelColor,
+      labelGrow = _useThemeProps.labelGrow,
+      _useThemeProps$spacin = _useThemeProps.spacing,
+      spacing = _useThemeProps$spacin === void 0 ? 1 : _useThemeProps$spacin,
+      state = _useThemeProps.state,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["children", "compact", "distribution", "feedbackText", "helpContent", "icon", "inline", "innerRef", "label", "labelBasis", "labelColor", "labelGrow", "spacing", "state"]);
+
+  var helperDrawerId = (0, _utils.generateId)('field-helper-drawer');
+  var fieldId = (0, _utils.generateId)('field');
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
+    innerRef: innerRef,
+    width: "100%"
+  }, restProps), /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+    axis: inline ? 'horizontal' : 'vertical',
+    wrap: true
+  }, label && /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+    axis: "horizontal",
+    alignment: "center",
+    grow: labelGrow,
+    basis: labelBasis,
+    marginRight: inline ? 2 : undefined
+  }, icon, /*#__PURE__*/_react["default"].createElement(_Input["default"].InputLabel, {
+    controls: fieldId,
+    fontSize: compact ? 4 : 3,
+    color: labelColor
+  }, label), helpContent && /*#__PURE__*/_react["default"].createElement(_HelperDrawer["default"].Toggle, {
+    drawerId: helperDrawerId,
+    marginLeft: 0.25,
+    marginRight: inline ? 1 : undefined
+  })), helpContent && /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+    axis: "horizontal",
+    order: inline ? 1 : 0,
+    width: "100%"
+  }, /*#__PURE__*/_react["default"].createElement(_HelperDrawer["default"], {
+    id: helperDrawerId,
+    marginTop: 1,
+    children: helpContent
+  })), /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+    axis: "horizontal",
+    alignment: "center",
+    distribution: distribution,
+    order: inline ? 0 : 1,
+    grow: 1,
+    marginTop: inline || !label ? undefined : 1,
+    maxWidth: "100%",
+    spacing: spacing
+  }, (0, _utils.cloneChildren)(children, function (child, _ref2) {
+    var firstChild = _ref2.firstChild;
+    return firstChild ? {
+      id: fieldId,
+      size: child.props.size || (compact ? 'sm' : 'md')
+    } : {
+      size: child.props.size || (compact ? 'sm' : 'md')
+    };
+  }))), feedbackText && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+    marginTop: 1,
+    color: state,
+    align: inline ? 'right' : 'left'
+  }, feedbackText));
+};
+
+var _default = Field;
+exports["default"] = _default;

package/dist/cjs/Field/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _Field = _interopRequireDefault(require("./Field"));
+
+var _default = _Field["default"];
+exports["default"] = _default;

package/dist/cjs/FieldSet/FieldSet.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Heading = _interopRequireDefault(require("../Heading"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _TileView = _interopRequireDefault(require("../TileView"));
+
+var _Toolbar = _interopRequireDefault(require("../Toolbar"));
+
+var _system = require("../system");
+
+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) { (0, _defineProperty2["default"])(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; }
+
+var FieldSet = function FieldSet(_ref) {
+  var children = _ref.children,
+      helpContent = _ref.helpContent,
+      legend = _ref.legend,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children", "helpContent", "legend"]);
+
+  var _useThemeProps = (0, _system.useThemeProps)('fieldset', _objectSpread({}, restProps)),
+      headingProps = _useThemeProps.headingProps,
+      _useThemeProps$minCel = _useThemeProps.minCellWidth,
+      minCellWidth = _useThemeProps$minCel === void 0 ? 16 : _useThemeProps$minCel,
+      _useThemeProps$spacin = _useThemeProps.spacing,
+      spacing = _useThemeProps$spacin === void 0 ? 1 : _useThemeProps$spacin,
+      tileViewProps = _useThemeProps.tileViewProps,
+      themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["headingProps", "minCellWidth", "spacing", "tileViewProps"]);
+
+  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    as: "fieldset",
+    margin: 2,
+    padding: 0
+  }, themeProps, restProps), /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], {
+    helpContent: helpContent,
+    marginBottom: 1,
+    title: /*#__PURE__*/_react["default"].createElement(_Heading["default"], (0, _extends2["default"])({
+      as: "legend",
+      level: 4
+    }, headingProps), legend)
+  }), /*#__PURE__*/_react["default"].createElement(_TileView["default"], (0, _extends2["default"])({
+    minCellWidth: minCellWidth,
+    spacing: spacing
+  }, tileViewProps), children));
+};
+
+var _default = FieldSet;
+exports["default"] = _default;

package/dist/cjs/FieldSet/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _FieldSet = _interopRequireDefault(require("./FieldSet"));
+
+var _default = _FieldSet["default"];
+exports["default"] = _default;