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

package/dist/esm/Field/Field.js

@@ -0,0 +1,88 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import Box from '../Box';
+import HelperDrawer from '../HelperDrawer';
+import Input from '../Input';
+import Text from '../Text';
+import StackView from '../StackView';
+import { cloneChildren, generateId } from '../utils';
+import { useThemeProps } from '../system';
+
+var Field = function Field(_ref) {
+  var props = _extends({}, _ref);
+
+  var _useThemeProps = 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 = _objectWithoutPropertiesLoose(_useThemeProps, ["children", "compact", "distribution", "feedbackText", "helpContent", "icon", "inline", "innerRef", "label", "labelBasis", "labelColor", "labelGrow", "spacing", "state"]);
+
+  var helperDrawerId = generateId('field-helper-drawer');
+  var fieldId = generateId('field');
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    innerRef: innerRef,
+    width: "100%"
+  }, restProps), /*#__PURE__*/React.createElement(StackView, {
+    axis: inline ? 'horizontal' : 'vertical',
+    wrap: true
+  }, label && /*#__PURE__*/React.createElement(StackView, {
+    axis: "horizontal",
+    alignment: "center",
+    grow: labelGrow,
+    basis: labelBasis,
+    marginRight: inline ? 2 : undefined
+  }, icon, /*#__PURE__*/React.createElement(Input.InputLabel, {
+    controls: fieldId,
+    fontSize: compact ? 4 : 3,
+    color: labelColor
+  }, label), helpContent && /*#__PURE__*/React.createElement(HelperDrawer.Toggle, {
+    drawerId: helperDrawerId,
+    marginLeft: 0.25,
+    marginRight: inline ? 1 : undefined
+  })), helpContent && /*#__PURE__*/React.createElement(StackView, {
+    axis: "horizontal",
+    order: inline ? 1 : 0,
+    width: "100%"
+  }, /*#__PURE__*/React.createElement(HelperDrawer, {
+    id: helperDrawerId,
+    marginTop: 1,
+    children: helpContent
+  })), /*#__PURE__*/React.createElement(StackView, {
+    axis: "horizontal",
+    alignment: "center",
+    distribution: distribution,
+    order: inline ? 0 : 1,
+    grow: 1,
+    marginTop: inline || !label ? undefined : 1,
+    maxWidth: "100%",
+    spacing: spacing
+  }, 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.createElement(Text, {
+    marginTop: 1,
+    color: state,
+    align: inline ? 'right' : 'left'
+  }, feedbackText));
+};
+
+export default Field;

package/dist/esm/Field/index.js

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

package/dist/esm/FieldSet/FieldSet.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+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 from 'react';
+import Heading from '../Heading';
+import StackView from '../StackView';
+import TileView from '../TileView';
+import Toolbar from '../Toolbar';
+import { useThemeProps } from '../system';
+
+var FieldSet = function FieldSet(_ref) {
+  var children = _ref.children,
+      helpContent = _ref.helpContent,
+      legend = _ref.legend,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["children", "helpContent", "legend"]);
+
+  var _useThemeProps = 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 = _objectWithoutPropertiesLoose(_useThemeProps, ["headingProps", "minCellWidth", "spacing", "tileViewProps"]);
+
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    as: "fieldset",
+    margin: 2,
+    padding: 0
+  }, themeProps, restProps), /*#__PURE__*/React.createElement(Toolbar, {
+    helpContent: helpContent,
+    marginBottom: 1,
+    title: /*#__PURE__*/React.createElement(Heading, _extends({
+      as: "legend",
+      level: 4
+    }, headingProps), legend)
+  }), /*#__PURE__*/React.createElement(TileView, _extends({
+    minCellWidth: minCellWidth,
+    spacing: spacing
+  }, tileViewProps), children));
+};
+
+export default FieldSet;

package/dist/esm/FieldSet/index.js

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

package/dist/esm/FilterLayout/FilterLayout.js

@@ -0,0 +1,86 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import * as React from 'react';
+import Mousetrap from 'mousetrap';
+import Box from '../Box';
+import Button from '../Button';
+import Card from '../Card';
+import Divider from '../Divider';
+import StackView from '../StackView';
+
+var _ref = /*#__PURE__*/React.createElement(Divider, null);
+
+var _ref2 = /*#__PURE__*/React.createElement(Divider, null);
+
+export function FilterLayout(props) {
+  var header = props.header,
+      _props$sidebarWidth = props.sidebarWidth,
+      sidebarWidth = _props$sidebarWidth === void 0 ? 400 : _props$sidebarWidth,
+      sidebar = props.sidebar,
+      table = props.table,
+      toolbar = props.toolbar,
+      restProps = _objectWithoutPropertiesLoose(props, ["header", "sidebarWidth", "sidebar", "table", "toolbar"]);
+
+  var fill = sidebarWidth === 'fill';
+
+  var _React$useState = React.useState(false),
+      sidebarOpen = _React$useState[0],
+      setSidebarOpen = _React$useState[1];
+
+  var toggleSidebar = React.useCallback(function () {
+    setSidebarOpen(function (sidebarOpen) {
+      return !sidebarOpen;
+    });
+  }, []);
+  React.useEffect(function () {
+    Mousetrap.bind('f', toggleSidebar);
+    return function () {
+      Mousetrap.unbind('f');
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(Card, _extends({
+    minHeight: 50,
+    overflow: undefined
+  }, restProps), /*#__PURE__*/React.createElement(StackView, {
+    axis: "horizontal",
+    minHeight: 6
+  }, /*#__PURE__*/React.createElement(Button, {
+    grow: 0,
+    shrink: 0,
+    basis: sidebarOpen ? fill ? '100%' : sidebarWidth + 'px' : '100px',
+    distribution: sidebarOpen ? 'space-between' : undefined,
+    width: "100%",
+    paddingHorizontal: 2,
+    borderRightWidth: 1,
+    borderRightColor: "separatorTertiary",
+    radius: 0,
+    title: "Filter",
+    "aria-label": sidebarOpen ? 'close filter' : 'open filter',
+    iconRight: {
+      name: sidebarOpen ? 'general.leftChevron' : 'general.threeReducingHorizontalBars',
+      size: sidebarOpen ? 'xs' : 'md'
+    },
+    onClick: toggleSidebar
+  }), /*#__PURE__*/React.createElement(Box, {
+    visible: !(sidebarOpen && fill),
+    grow: 1,
+    shrink: 1
+  }, header)), _ref, /*#__PURE__*/React.createElement(StackView, {
+    axis: "horizontal",
+    grow: 1
+  }, /*#__PURE__*/React.createElement(StackView, {
+    visible: sidebarOpen,
+    basis: fill ? '100%' : sidebarWidth + 'px',
+    borderRightWidth: 1,
+    borderRightColor: "separatorTertiary",
+    backgroundColor: "surfaceSecondary"
+  }, sidebar), /*#__PURE__*/React.createElement(StackView, {
+    visibility: sidebarOpen && fill ? 'hidden' : 'visible',
+    maxHeight: sidebarOpen && fill ? 0 : 'initial',
+    grow: 1,
+    shrink: 1,
+    basis: "100%"
+  }, /*#__PURE__*/React.createElement(Box, {
+    overflow: "hidden"
+  }, toolbar), _ref2, table)));
+}

package/dist/esm/FilterLayout/index.js

@@ -0,0 +1,2 @@
+export * from './FilterLayout';
+export { FilterLayout as default } from './FilterLayout';

package/dist/esm/FocusGroup/FocusGroup.js

@@ -0,0 +1,121 @@
+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 _createForOfIteratorHelperLoose(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } it = o[Symbol.iterator](); return it.next.bind(it); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+import React, { Component, createContext } from 'react';
+import { getClosestFocusableElement } from '../utils';
+var SetRefContext = /*#__PURE__*/createContext();
+
+var FocusGroup = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(FocusGroup, _Component);
+
+  function FocusGroup() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
+
+    _defineProperty(_assertThisInitialized(_this), "nodes", {});
+
+    _defineProperty(_assertThisInitialized(_this), "setRef", function (id) {
+      return function (node) {
+        if (_this.context) {
+          _this.context(id)(node);
+        }
+
+        if (node) {
+          _this.nodes[id] = node;
+        } else {
+          delete _this.nodes[id];
+        }
+      };
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "isElementOutside", function (target) {
+      return Object.values(_this.nodes).every(function (node) {
+        return node !== target && !node.contains(target);
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "maybeRestoreFocus", function (nextFocusedElement, event) {
+      var focusableElement = nextFocusedElement ? getClosestFocusableElement(nextFocusedElement.parentNode) : null;
+
+      if (focusableElement) {
+        var observer = new MutationObserver(function (mutationsList) {
+          for (var _iterator = _createForOfIteratorHelperLoose(mutationsList), _step; !(_step = _iterator()).done;) {
+            var mutation = _step.value;
+
+            if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
+              var removedElement = mutation.removedNodes[0];
+
+              if (removedElement === nextFocusedElement && focusableElement.focus) {
+                (function () {
+                  var previousScrollY = window.pageYOffset;
+                  focusableElement.focus();
+
+                  if (_this.isElementOutside(focusableElement)) {
+                    _this.props.onBlur(event);
+                  }
+
+                  setTimeout(function () {
+                    window.scroll(0, previousScrollY);
+                  });
+                })();
+              }
+            }
+          }
+        });
+        observer.observe(nextFocusedElement.parentNode, {
+          childList: true
+        });
+        setTimeout(function () {
+          observer.disconnect();
+        }, 800);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "requestBlur", function (event) {
+      var nextFocusedElement = event.relatedTarget || document.activeElement;
+
+      _this.maybeRestoreFocus(nextFocusedElement, event);
+
+      if (_this.isElementOutside(nextFocusedElement)) {
+        _this.props.onBlur(event);
+      }
+    });
+
+    return _this;
+  }
+
+  var _proto = FocusGroup.prototype;
+
+  _proto.render = function render() {
+    return /*#__PURE__*/React.createElement(SetRefContext.Provider, {
+      value: this.setRef
+    }, this.props.children({
+      setRef: this.setRef,
+      requestBlur: this.requestBlur
+    }));
+  };
+
+  return FocusGroup;
+}(Component);
+
+_defineProperty(FocusGroup, "defaultProps", {
+  onBlur: function onBlur() {
+    return null;
+  }
+});
+
+_defineProperty(FocusGroup, "contextType", SetRefContext);
+
+export default FocusGroup;

package/dist/esm/FocusGroup/index.js

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

package/dist/esm/Form/Form.js

@@ -0,0 +1,184 @@
+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 * as React from 'react';
+import { shallowEqual } from '../utils';
+
+var Form = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Form, _React$Component);
+
+  function Form() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      isEditing: false,
+      isSubmitting: false,
+      payload: _this.props.initialPayload
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "submitTimeoutId", null);
+
+    _defineProperty(_assertThisInitialized(_this), "startSubmitTimeout", function () {
+      _this.submitTimeoutId = setTimeout(_this.handleSubmit);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "clearSubmitTimeout", function () {
+      clearTimeout(_this.submitTimeoutId);
+      _this.submitTimeoutId = null;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleEditing", function () {
+      _this.setState({
+        isEditing: true
+      });
+
+      if (_this.focusable) {
+        _this.focusable.focus();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleReset", function () {
+      _this.setState({
+        isEditing: false,
+        payload: _this.props.initialPayload
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleSubmit", function () {
+      if (JSON.stringify(_this.props.initialPayload) === JSON.stringify(_this.state.payload)) {
+        _this.setState({
+          isEditing: false
+        }, _this.clearSubmitTimeout);
+      } else {
+        var timeoutId = setTimeout(function () {
+          _this.setState({
+            isEditing: false,
+            isSubmitting: true
+          });
+        });
+
+        _this.props.onSubmit(_this.state.payload, function () {
+          clearTimeout(timeoutId);
+
+          _this.clearSubmitTimeout();
+
+          _this.setState({
+            isSubmitting: false
+          });
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "storeFocusRef", function (node) {
+      if (!_this.focusable) {
+        _this.focusable = node;
+      }
+    });
+
+    return _this;
+  }
+
+  var _proto = Form.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
+    if (!shallowEqual(lastProps.initialPayload, this.props.initialPayload)) {
+      this.setState({
+        payload: this.props.initialPayload
+      });
+    }
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var _this$state = this.state,
+        isEditing = _this$state.isEditing,
+        isSubmitting = _this$state.isSubmitting,
+        payload = _this$state.payload;
+    return this.props.children(_objectSpread(_objectSpread({}, this.state), {}, {
+      editButtonProps: {
+        disabled: isSubmitting,
+        icon: isEditing ? undefined : {
+          name: 'general.pencil'
+        },
+        onClick: function onClick() {
+          // bail out if we've already triggered a submit in onBlur
+          if (_this2.submitTimeoutId === null) {
+            if (isEditing) {
+              _this2.handleSubmit();
+            } else {
+              _this2.handleEditing();
+            }
+          }
+        },
+        spinner: isSubmitting,
+        title: isEditing ? 'Save' : 'Edit',
+        tooltip: isEditing ? isSubmitting ? {
+          title: 'Saving'
+        } : undefined : {
+          title: 'Edit'
+        }
+      },
+      getFieldProps: function getFieldProps(key, getChangeValue) {
+        if (getChangeValue === void 0) {
+          getChangeValue = function getChangeValue(event) {
+            return event.target.value;
+          };
+        }
+
+        return {
+          innerRef: _this2.storeFocusRef,
+          disabled: isSubmitting,
+          hover: isEditing,
+          value: payload[key],
+          onFocus: function onFocus() {
+            _this2.clearSubmitTimeout();
+
+            _this2.setState({
+              isEditing: true
+            });
+          },
+          onBlur: function onBlur() {
+            _this2.startSubmitTimeout();
+          },
+          onChange: function onChange(event) {
+            var nextValue = getChangeValue(event);
+
+            _this2.setState(function (state) {
+              var _objectSpread2;
+
+              return {
+                payload: _objectSpread(_objectSpread({}, state.payload), {}, (_objectSpread2 = {}, _objectSpread2[key] = nextValue, _objectSpread2))
+              };
+            });
+          },
+          onKeyDown: function onKeyDown(event) {
+            if (event.key === 'Enter' || event.key === 'Escape') {
+              event.preventDefault();
+              event.target.blur();
+
+              if (event.key === 'Escape') {
+                _this2.handleReset();
+              }
+            }
+          }
+        };
+      }
+    }));
+  };
+
+  return Form;
+}(React.Component);
+
+export default Form;

package/dist/esm/Form/index.js

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

package/dist/esm/GridView/GridView.js

@@ -0,0 +1,99 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+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; }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import * as React from 'react';
+import splitStyles from '../system/split-styles';
+import { spacingValue } from '../system';
+import { useVariant } from '../VariantProvider';
+
+function getTemplateValue(value) {
+  return value ? value.constructor === Array ? value.map(function (v) {
+    return typeof v === 'number' ? v * 8 + "px" : v;
+  }).join(' ') : value : undefined;
+}
+
+var gridViewPlugin = {
+  styleProps: ['autoFlow', 'autoColumns', 'autoRows', 'columns', 'rows', 'alignment', 'distribution', 'columnSpacing', 'rowSpacing', 'spacing'],
+  getStyles: function getStyles(_ref) {
+    var autoFlow = _ref.autoFlow,
+        autoColumns = _ref.autoColumns,
+        autoRows = _ref.autoRows,
+        columns = _ref.columns,
+        rows = _ref.rows,
+        alignment = _ref.alignment,
+        distribution = _ref.distribution,
+        columnSpacing = _ref.columnSpacing,
+        rowSpacing = _ref.rowSpacing,
+        spacing = _ref.spacing,
+        styles = _objectWithoutPropertiesLoose(_ref, ["autoFlow", "autoColumns", "autoRows", "columns", "rows", "alignment", "distribution", "columnSpacing", "rowSpacing", "spacing"]);
+
+    if (autoFlow !== undefined && styles.gridAutoFlow === undefined) {
+      styles.gridAutoFlow = autoFlow;
+    }
+
+    if (autoColumns !== undefined && styles.gridAutoColumns === undefined) {
+      styles.gridAutoColumns = autoColumns;
+    }
+
+    if (autoRows !== undefined && styles.autoRows === undefined) {
+      styles.gridAutoRows = autoRows;
+    }
+
+    if (columns !== undefined && styles.gridTemplateColumns === undefined) {
+      styles.gridTemplateColumns = getTemplateValue(columns);
+    }
+
+    if (rows !== undefined && styles.gridTemplateRows === undefined) {
+      styles.gridTemplateRows = getTemplateValue(rows);
+    }
+
+    if (alignment !== undefined && styles.alignItems === undefined) {
+      styles.alignItems = alignment;
+    }
+
+    if (distribution !== undefined && styles.distribution === undefined) {
+      styles.justifyItems = distribution;
+    }
+
+    if (columnSpacing !== undefined && styles.gridColumnGap === undefined) {
+      styles.gridColumnGap = spacingValue(columnSpacing);
+    }
+
+    if (rowSpacing !== undefined && styles.gridRowGap === undefined) {
+      styles.gridRowGap = spacingValue(rowSpacing);
+    }
+
+    if (spacing !== undefined && styles.gap === undefined) {
+      styles.gap = spacingValue(spacing);
+    }
+
+    return styles;
+  }
+};
+var defaultElement = 'div';
+export function GridView(_ref2) {
+  var as = _ref2.as,
+      inline = _ref2.inline,
+      innerRef = _ref2.innerRef,
+      props = _objectWithoutPropertiesLoose(_ref2, ["as", "inline", "innerRef"]);
+
+  var Element = as || defaultElement;
+  var variant = useVariant();
+  return jsx(Element, _extends({
+    ref: innerRef
+  }, splitStyles(_objectSpread({
+    display: inline ? 'inline-grid' : 'grid',
+    autoColumns: 'minmax(0, auto)',
+    plugin: gridViewPlugin,
+    variant: variant
+  }, props))));
+}

package/dist/esm/GridView/index.js

@@ -0,0 +1,2 @@
+export * from './GridView';
+export { GridView as default } from './GridView';