@planningcenter/tapestry-react 2.1.2 → 2.3.0

package/dist/cjs/Badge/Badge.js

@@ -89,7 +89,11 @@ function Badge(_ref) {
   }
 
   badgeProps.paddingLeft = renderLeft ? boxSize + 0.5 : badgeProps.radius === 'pill' ? paddingHorizontal : paddingHorizontalDense;
-  badgeProps.paddingRight = renderRight ? boxSize + 0.5 : badgeProps.radius === 'pill' ? paddingHorizontal : paddingHorizontalDense;
+  badgeProps.paddingRight = renderRight ? boxSize + 0.5 : badgeProps.radius === 'pill' ? paddingHorizontal : paddingHorizontalDense; // The `square` prop is no longer needed and should not get
+  // passed to `<StackView>` since it's not one of its props
+  // or a standard HTML attribute.
+
+  delete badgeProps.square;
   return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
     inline: true,
     axis: "horizontal",

package/dist/cjs/Button/Button.js

@@ -68,7 +68,7 @@ function Button(_ref) {
 
   var buttonProps = {
     alignment: 'center',
-    as: restProps.href || to ? 'a' : 'div',
+    as: restProps.href || to ? 'a' : 'button',
     axis: 'horizontal',
     distribution: 'center',
     fontSize: fontSize,
@@ -77,7 +77,6 @@ function Button(_ref) {
     lineHeight: lineHeight,
     position: 'relative',
     radius: 3,
-    role: 'button',
     strokeAlign: 'inside',
     strokeWeight: 1,
     userSelect: 'none',
@@ -192,7 +191,6 @@ function Button(_ref) {
     };
     buttonProps.cursor = 'pointer';
     buttonProps.touchAction = 'manipulation';
-    buttonProps.tabIndex = 0;
     buttonProps.onClick = onClick;
 
     buttonProps.onKeyDown = function (event) {
@@ -232,6 +230,11 @@ function Button(_ref) {
 
   if (restProps.as) {
     buttonProps.to = to;
+  } // set button type to prevent nested buttons from unintentionally submiting forms 
+
+
+  if (buttonProps.as === "button") {
+    buttonProps.type = "button";
   }
 
   if (process.env.NODE_ENV !== 'production') {

package/dist/cjs/Card/Card.js

@@ -27,7 +27,10 @@ function Card(_ref) {
       _ref$radius = _ref.radius,
       radius = _ref$radius === void 0 ? 3 : _ref$radius,
       restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children", "subdued", "radius"]);
-  var cardTheme = (0, _system.useThemeValue)('card');
+  var cardTheme = (0, _system.useThemeValue)('card'); // List of component types to ignore when setting the radius
+  // for first & last child elements
+
+  var ignoreRadiusTypes = ['Avatar', 'Badge', 'Button', 'Calendar', 'ChurchCenterStatus', 'Group', 'Inline', 'Input', 'InputBox', 'Modal', 'Progress', 'Spinner', 'Status', 'Tab', 'Tooltip'];
   return /*#__PURE__*/React.createElement(_StackView.StackView, (0, _extends2["default"])({
     width: "100%",
     lineHeight: 2.5,
@@ -42,7 +45,7 @@ function Card(_ref) {
 
     var firstChild = _ref2.firstChild,
         lastChild = _ref2.lastChild;
-    return child.props.radius === undefined ? firstChild ? (_ref3 = {}, _ref3["radius" + (restProps.axis === 'horizontal' ? 'Left' : 'Top')] = radius - 1, _ref3) : lastChild ? (_ref4 = {}, _ref4["radius" + (restProps.axis === 'horizontal' ? 'Right' : 'Bottom')] = radius - 1, _ref4) : {} : {};
+    return child.props.radius === undefined && !ignoreRadiusTypes.includes(child.type.name) ? firstChild ? (_ref3 = {}, _ref3["radius" + (restProps.axis === 'horizontal' ? 'Left' : 'Top')] = radius - 1, _ref3) : lastChild ? (_ref4 = {}, _ref4["radius" + (restProps.axis === 'horizontal' ? 'Right' : 'Bottom')] = radius - 1, _ref4) : {} : {};
   }) : children);
 }
 

package/dist/cjs/Combobox/Combobox.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -9,54 +7,29 @@ exports["default"] = void 0;
 
 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 _react = _interopRequireDefault(require("react"));
 
 var _Box = _interopRequireDefault(require("../Box"));
 
 var _ItemList = require("../ItemList");
 
-var _ComboboxInput = _interopRequireDefault(require("./ComboboxInput"));
-
-var _ComboboxItem = _interopRequireDefault(require("./ComboboxItem"));
-
-var _ComboboxItems = _interopRequireDefault(require("./ComboboxItems"));
-
-var _ComboboxPopover = _interopRequireDefault(require("./ComboboxPopover"));
-
-var Combobox = /*#__PURE__*/function (_Component) {
-  (0, _inheritsLoose2["default"])(Combobox, _Component);
-
-  function Combobox() {
-    return _Component.apply(this, arguments) || this;
-  }
-
-  var _proto = Combobox.prototype;
+var _system = require("../system");
 
-  _proto.render = function render() {
-    var _this$props = this.props,
-        children = _this$props.children,
-        multiple = _this$props.multiple,
-        onSelect = _this$props.onSelect,
-        selectedValue = _this$props.selectedValue,
-        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["children", "multiple", "onSelect", "selectedValue"]);
-    return /*#__PURE__*/_react["default"].createElement(_ItemList.ItemList, {
-      selected: function selected(item) {
-        return item.value === selectedValue;
-      },
-      onSelect: onSelect
-    }, /*#__PURE__*/_react["default"].createElement(_Box["default"], restProps, children));
-  };
+function Combobox(props) {
+  var _useThemeProps = (0, _system.useThemeProps)('combobox', props),
+      children = _useThemeProps.children,
+      multiple = _useThemeProps.multiple,
+      onSelect = _useThemeProps.onSelect,
+      selectedValue = _useThemeProps.selectedValue,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["children", "multiple", "onSelect", "selectedValue"]);
 
-  return Combobox;
-}(_react.Component);
+  return /*#__PURE__*/_react["default"].createElement(_ItemList.ItemList, {
+    selected: function selected(item) {
+      return item.value === selectedValue;
+    },
+    onSelect: onSelect
+  }, /*#__PURE__*/_react["default"].createElement(_Box["default"], restProps, children));
+}
 
-(0, _defineProperty2["default"])(Combobox, "Input", _ComboboxInput["default"]);
-(0, _defineProperty2["default"])(Combobox, "Item", _ComboboxItem["default"]);
-(0, _defineProperty2["default"])(Combobox, "Items", _ComboboxItems["default"]);
-(0, _defineProperty2["default"])(Combobox, "Popover", _ComboboxPopover["default"]);
 var _default = Combobox;
 exports["default"] = _default;

package/dist/cjs/Combobox/ComboboxInput.js

@@ -11,161 +11,127 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _Input = _interopRequireDefault(require("../Input"));
 
-var _ItemList = require("../ItemList");
-
-var ComboboxInput = /*#__PURE__*/function (_Component) {
-  (0, _inheritsLoose2["default"])(ComboboxInput, _Component);
-
-  function ComboboxInput() {
-    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;
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setInputNode", function (node) {
-      _this.inputNode = node;
+var _ItemListContext = _interopRequireDefault(require("../ItemList/ItemListContext"));
+
+var _system = require("../system");
+
+function ComboboxInput(props, ref) {
+  var _useThemeProps = (0, _system.useThemeProps)('combobox.input', props),
+      autoFocus = _useThemeProps.autoFocus,
+      defaultValue = _useThemeProps.defaultValue,
+      disabled = _useThemeProps.disabled,
+      innerRef = _useThemeProps.innerRef,
+      isOpen = _useThemeProps.isOpen,
+      isLoading = _useThemeProps.isLoading,
+      name = _useThemeProps.name,
+      onBlur = _useThemeProps.onBlur,
+      onChange = _useThemeProps.onChange,
+      onFocus = _useThemeProps.onFocus,
+      onClear = _useThemeProps.onClear,
+      onClose = _useThemeProps.onClose,
+      onKeyDown = _useThemeProps.onKeyDown,
+      onKeyUp = _useThemeProps.onKeyUp,
+      placeholder = _useThemeProps.placeholder,
+      readOnly = _useThemeProps.readOnly,
+      size = _useThemeProps.size,
+      type = _useThemeProps.type,
+      value = _useThemeProps.value,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["autoFocus", "defaultValue", "disabled", "innerRef", "isOpen", "isLoading", "name", "onBlur", "onChange", "onFocus", "onClear", "onClose", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "size", "type", "value"]);
+
+  var inputNode = (0, _react.useRef)(null);
+  var focus = (0, _react.useCallback)(function () {
+    inputNode.current.focus();
+  }, [inputNode]);
+  var blur = (0, _react.useCallback)(function () {
+    inputNode.current.blur();
+  }, [inputNode]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      focus: focus,
+      blur: blur
+    };
+  });
+  var itemList = (0, _react.useContext)(_ItemListContext["default"]);
+  var highlightedItemId = itemList.highlightedItemId,
+      id = itemList.id;
+  (0, _react.useEffect)(function () {
+    setTimeout(function () {
+      itemList.setHighlightedIndex(0);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleKeyDown", function (e) {
-      if (e.key === 'ArrowUp') {
-        e.preventDefault();
-
-        _this.itemList.moveHighlightedIndex(-1, {
-          contain: false
-        });
-      }
-
-      if (e.key === 'ArrowDown') {
-        e.preventDefault();
-
-        _this.itemList.moveHighlightedIndex(1, {
-          contain: false
-        });
-      }
-
-      if (e.key === 'Enter') {
-        e.preventDefault();
-
-        _this.itemList.selectHighlightedItem();
-      }
-
-      if (_this.props.onKeyDown) {
-        _this.props.onKeyDown(e);
-      }
-
-      if (_this.props.onClose && e.key === 'Tab') {
-        _this.props.onClose();
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDocumentKeyDown", function (e) {
-      if (_this.props.onClear && e.key === 'Escape') {
-        _this.props.onClear();
-      }
-    });
-    return _this;
-  }
-
-  var _proto = ComboboxInput.prototype;
-
-  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
-    var _this2 = this;
+  }, [itemList.items]);
+  var handleKeyDown = (0, _react.useCallback)(function (e) {
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      itemList.moveHighlightedIndex(-1, {
+        contain: false
+      });
+    }
 
-    if (lastProps.value !== this.props.value) {
-      // needs to be called after items have been sorted, there's probably a better way to fix this
-      setTimeout(function () {
-        _this2.itemList.setHighlightedIndex(0);
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      itemList.moveHighlightedIndex(1, {
+        contain: false
       });
     }
-  };
-
-  _proto.focus = function focus() {
-    this.inputNode.focus();
-  };
-
-  _proto.blur = function blur() {
-    this.inputNode.blur();
-  };
-
-  _proto.render = function render() {
-    var _this3 = this;
-
-    var _this$props = this.props,
-        autoFocus = _this$props.autoFocus,
-        defaultValue = _this$props.defaultValue,
-        disabled = _this$props.disabled,
-        innerRef = _this$props.innerRef,
-        isOpen = _this$props.isOpen,
-        isLoading = _this$props.isLoading,
-        name = _this$props.name,
-        onBlur = _this$props.onBlur,
-        onChange = _this$props.onChange,
-        onFocus = _this$props.onFocus,
-        onClear = _this$props.onClear,
-        onClose = _this$props.onClose,
-        onKeyDown = _this$props.onKeyDown,
-        onKeyUp = _this$props.onKeyUp,
-        placeholder = _this$props.placeholder,
-        readOnly = _this$props.readOnly,
-        size = _this$props.size,
-        type = _this$props.type,
-        value = _this$props.value,
-        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["autoFocus", "defaultValue", "disabled", "innerRef", "isOpen", "isLoading", "name", "onBlur", "onChange", "onFocus", "onClear", "onClose", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "size", "type", "value"]);
-    return /*#__PURE__*/_react["default"].createElement(_ItemList.ItemListController, null, function (itemList) {
-      var highlightedItemId = itemList.highlightedItemId,
-          id = itemList.id;
-
-      if (!_this3.itemList) {
-        _this3.itemList = itemList;
-      }
-
-      return /*#__PURE__*/_react["default"].createElement(_Input["default"].InputBox, (0, _extends2["default"])({
-        innerRef: innerRef,
-        size: size,
-        disabled: disabled,
-        isLoading: isLoading,
-        onClear: onClear
-      }, restProps, {
-        grow: 1
-      }), /*#__PURE__*/_react["default"].createElement(_Input["default"].InputField, {
-        innerRef: _this3.setInputNode,
-        grow: 1,
-        role: "combobox",
-        autoComplete: "off",
-        "aria-autocomplete": "list",
-        "aria-controls": id,
-        "aria-expanded": isOpen,
-        "aria-activedescendant": highlightedItemId,
-        autoFocus: autoFocus,
-        type: type,
-        name: name,
-        disabled: disabled,
-        readOnly: readOnly,
-        placeholder: placeholder,
-        defaultValue: defaultValue,
-        value: value,
-        onChange: onChange,
-        onFocus: onFocus,
-        onBlur: onBlur,
-        onKeyDown: _this3.handleKeyDown,
-        onKeyUp: onKeyUp
-      }));
-    });
-  };
 
-  return ComboboxInput;
-}(_react.Component);
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      itemList.selectHighlightedItem();
+    }
+
+    if (onKeyDown) {
+      onKeyDown(e);
+    }
 
-(0, _defineProperty2["default"])(ComboboxInput, "displayName", 'Combobox.Input');
+    if (onClose && e.key === 'Tab') {
+      onClose();
+    }
+  });
+  var handleDocumentKeyDown = (0, _react.useCallback)(function (e) {
+    if (onClear && e.key === 'Escape') {
+      onClear();
+    }
+  });
+  return /*#__PURE__*/_react["default"].createElement(_Input["default"].InputBox, (0, _extends2["default"])({
+    innerRef: innerRef,
+    size: size,
+    disabled: disabled,
+    isLoading: isLoading,
+    onClear: onClear
+  }, restProps, {
+    grow: 1
+  }), /*#__PURE__*/_react["default"].createElement(_Input["default"].InputField, {
+    innerRef: function innerRef(node) {
+      inputNode.current = node;
+    },
+    grow: 1,
+    role: "combobox",
+    autoComplete: "off",
+    "aria-autocomplete": "list",
+    "aria-controls": id,
+    "aria-expanded": isOpen,
+    "aria-activedescendant": highlightedItemId,
+    autoFocus: autoFocus,
+    type: type,
+    name: name,
+    disabled: disabled,
+    readOnly: readOnly,
+    placeholder: placeholder,
+    defaultValue: defaultValue,
+    value: value,
+    onChange: onChange,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onKeyDown: handleKeyDown,
+    onKeyUp: onKeyUp
+  }));
+}
+
+ComboboxInput = /*#__PURE__*/(0, _react.forwardRef)(ComboboxInput);
+ComboboxInput.displayName = 'Combobox.Input';
 var _default = ComboboxInput;
 exports["default"] = _default;

package/dist/cjs/Combobox/ComboboxItem.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -11,62 +9,49 @@ 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 _react = _interopRequireDefault(require("react"));
 
 var _ItemList = require("../ItemList");
 
 var _Menu = _interopRequireDefault(require("../Menu"));
 
-var ComboboxItem = /*#__PURE__*/function (_Component) {
-  (0, _inheritsLoose2["default"])(ComboboxItem, _Component);
-
-  function ComboboxItem() {
-    return _Component.apply(this, arguments) || this;
-  }
-
-  var _proto = ComboboxItem.prototype;
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        value = _this$props.value,
-        index = _this$props.index,
-        text = _this$props.text,
-        _this$props$disabled = _this$props.disabled,
-        disabled = _this$props$disabled === void 0 ? false : _this$props$disabled,
-        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["value", "index", "text", "disabled"]);
-    return /*#__PURE__*/_react["default"].createElement(_ItemList.ItemListItem, {
-      data: value,
+var _system = require("../system");
+
+function ComboboxItem(props) {
+  var _useThemeProps = (0, _system.useThemeProps)('combobox.item', props),
+      value = _useThemeProps.value,
+      index = _useThemeProps.index,
+      text = _useThemeProps.text,
+      _useThemeProps$disabl = _useThemeProps.disabled,
+      disabled = _useThemeProps$disabl === void 0 ? false : _useThemeProps$disabl,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["value", "index", "text", "disabled"]);
+
+  return /*#__PURE__*/_react["default"].createElement(_ItemList.ItemListItem, {
+    data: value,
+    disabled: disabled,
+    index: index,
+    text: text
+  }, 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"])({
       disabled: disabled,
-      index: index,
-      text: text
-    }, 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"])({
-        disabled: disabled,
-        id: id,
-        isHighlighted: highlighted,
-        onMouseOver: highlight,
-        onMouseOut: clearHighlight,
-        onClick: function onClick(event) {
-          event.stopPropagation();
-          event.nativeEvent.stopImmediatePropagation();
-          select();
-        }
-      }, restProps));
-    });
-  };
-
-  return ComboboxItem;
-}(_react.Component);
-
-(0, _defineProperty2["default"])(ComboboxItem, "displayName", 'Combobox.Item');
+      id: id,
+      isHighlighted: highlighted,
+      onMouseOver: highlight,
+      onMouseOut: clearHighlight,
+      onClick: function onClick(event) {
+        event.stopPropagation();
+        event.nativeEvent.stopImmediatePropagation();
+        select();
+      }
+    }, restProps));
+  });
+}
+
+ComboboxItem.displayName = 'Combobox.Item';
 var _default = ComboboxItem;
 exports["default"] = _default;

package/dist/cjs/Combobox/ComboboxItems.js

@@ -9,10 +9,6 @@ exports["default"] = void 0;
 
 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 _matchSorter = require("match-sorter");
@@ -27,7 +23,7 @@ var _StackView = _interopRequireDefault(require("../StackView"));
 
 var _Text = _interopRequireDefault(require("../Text"));
 
-var _utils = require("../utils");
+var _system = require("../system");
 
 var _ComboboxItem = _interopRequireDefault(require("./ComboboxItem"));
 
@@ -46,62 +42,49 @@ var defaultRenderItem = function defaultRenderItem(item) {
   });
 };
 
-var ComboboxItems = /*#__PURE__*/function (_Component) {
-  (0, _inheritsLoose2["default"])(ComboboxItems, _Component);
-
-  function ComboboxItems(props) {
-    var _this;
-
-    _this = _Component.call(this, props) || this;
-    _this.state = {
-      sortedItems: _this.getSortedItems(props)
-    };
-    return _this;
-  }
-
-  var _proto = ComboboxItems.prototype;
-
-  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
-    if (lastProps.value !== this.props.value || !(0, _utils.shallowEqual)(lastProps.items, this.props.items) || !(0, _utils.shallowEqual)(lastProps.filter, this.props.filter)) {
-      this.setState({
-        sortedItems: this.getSortedItems(this.props)
-      });
-    }
-  };
-
-  _proto.getSortedItems = function getSortedItems(_ref) {
+function ComboboxItems(props) {
+  var _useThemeProps = (0, _system.useThemeProps)('combobox.items', props),
+      filter = _useThemeProps.filter,
+      items = _useThemeProps.items,
+      _useThemeProps$render = _useThemeProps.renderEmpty,
+      renderEmpty = _useThemeProps$render === void 0 ? defaultRenderEmpty : _useThemeProps$render,
+      _useThemeProps$render2 = _useThemeProps.renderItem,
+      renderItem = _useThemeProps$render2 === void 0 ? defaultRenderItem : _useThemeProps$render2,
+      title = _useThemeProps.title,
+      _useThemeProps$value = _useThemeProps.value,
+      value = _useThemeProps$value === void 0 ? '' : _useThemeProps$value,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["filter", "items", "renderEmpty", "renderItem", "title", "value"]);
+
+  var _useState = (0, _react.useState)(getSortedItems({
+    items: items,
+    value: value,
+    filter: filter
+  })),
+      sortedItems = _useState[0],
+      setSortedItems = _useState[1];
+
+  function getSortedItems(_ref) {
     var items = _ref.items,
         value = _ref.value,
         filter = _ref.filter;
     return (0, _matchSorter.matchSorter)(items, value.length > 0 ? value : '', filter);
-  };
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        filter = _this$props.filter,
-        items = _this$props.items,
-        renderEmpty = _this$props.renderEmpty,
-        renderItem = _this$props.renderItem,
-        title = _this$props.title,
-        value = _this$props.value,
-        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["filter", "items", "renderEmpty", "renderItem", "title", "value"]);
-    var sortedItems = this.state.sortedItems;
-    return /*#__PURE__*/_react["default"].createElement(_Box["default"], restProps, title && /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
-      paddingHorizontal: 1,
-      paddingVertical: 0.5
-    }, /*#__PURE__*/_react["default"].createElement(_HeadingUppercase["default"], null, title)), _react.Children.toArray(sortedItems.length > 0 ? sortedItems.map(function (item, index) {
-      return renderItem(item, index);
-    }) : typeof renderEmpty === 'function' ? renderEmpty(value) : renderEmpty));
-  };
-
-  return ComboboxItems;
-}(_react.Component);
-
-(0, _defineProperty2["default"])(ComboboxItems, "displayName", 'Combobox.Items');
-(0, _defineProperty2["default"])(ComboboxItems, "defaultProps", {
-  value: '',
-  renderEmpty: defaultRenderEmpty,
-  renderItem: defaultRenderItem
-});
+  }
+
+  (0, _react.useEffect)(function () {
+    setSortedItems(getSortedItems({
+      items: items,
+      value: value,
+      filter: filter
+    }));
+  }, [items, value, filter]);
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], restProps, title && /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+    paddingHorizontal: 1,
+    paddingVertical: 0.5
+  }, /*#__PURE__*/_react["default"].createElement(_HeadingUppercase["default"], null, title)), _react.Children.toArray(sortedItems.length > 0 ? sortedItems.map(function (item, index) {
+    return renderItem(item, index);
+  }) : typeof renderEmpty === 'function' ? renderEmpty(value) : renderEmpty));
+}
+
+ComboboxItems.displayName = 'Combobox.Items';
 var _default = ComboboxItems;
 exports["default"] = _default;