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

package/dist/esm/ChurchCenterStatus/ChurchCenterStatus.js

@@ -0,0 +1,139 @@
+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 Button from '../Button';
+import Divider from '../Divider';
+import Dropdown from '../Dropdown';
+import Icon from '../Icon';
+import StackView from '../StackView';
+import Text from '../Text';
+
+var _ref2 = /*#__PURE__*/React.createElement("strong", null, "This product is not published on Church Center.");
+
+var _ref3 = /*#__PURE__*/React.createElement("strong", null, "Church Center is disabled.");
+
+var _ref4 = /*#__PURE__*/React.createElement(Text, {
+  size: "14px",
+  weight: 700
+}, "Web");
+
+var _ref5 = /*#__PURE__*/React.createElement(Text, {
+  size: "14px",
+  weight: 700
+}, "Mobile app");
+
+var _ref6 = /*#__PURE__*/React.createElement(Divider, {
+  margin: 0.5
+});
+
+export function ChurchCenterStatus(_ref) {
+  var _ref$buttonProps = _ref.buttonProps,
+      passedButtonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
+      _ref$ccAppEnabled = _ref.ccAppEnabled,
+      ccAppEnabled = _ref$ccAppEnabled === void 0 ? false : _ref$ccAppEnabled,
+      _ref$ccPublishingEnab = _ref.ccPublishingEnabled,
+      ccPublishingEnabled = _ref$ccPublishingEnab === void 0 ? false : _ref$ccPublishingEnab,
+      _ref$ccWebEnabled = _ref.ccWebEnabled,
+      ccWebEnabled = _ref$ccWebEnabled === void 0 ? false : _ref$ccWebEnabled,
+      description = _ref.description,
+      destinationLabel = _ref.destinationLabel,
+      _ref$disabledDescript = _ref.disabledDescription,
+      disabledDescription = _ref$disabledDescript === void 0 ? 'People cannot access this product on the web or mobile app.' : _ref$disabledDescript,
+      _ref$dropdownProps = _ref.dropdownProps,
+      dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
+      icons = _ref.icons,
+      productUrl = _ref.productUrl,
+      _ref$renderPopoverFoo = _ref.renderPopoverFooter,
+      renderPopoverFooter = _ref$renderPopoverFoo === void 0 ? function () {} : _ref$renderPopoverFoo,
+      settingsUrl = _ref.settingsUrl,
+      _ref$showSettingsLink = _ref.showSettingsLink,
+      showSettingsLink = _ref$showSettingsLink === void 0 ? true : _ref$showSettingsLink,
+      props = _objectWithoutPropertiesLoose(_ref, ["buttonProps", "ccAppEnabled", "ccPublishingEnabled", "ccWebEnabled", "description", "destinationLabel", "disabledDescription", "dropdownProps", "icons", "productUrl", "renderPopoverFooter", "settingsUrl", "showSettingsLink"]);
+
+  var buttonProps = _objectSpread({
+    distribution: 'start',
+    fontWeight: 400,
+    paddingHorizontal: 2,
+    radius: 0,
+    variant: 'naked'
+  }, passedButtonProps);
+
+  var ccEnabled = ccAppEnabled || ccWebEnabled;
+  var hasLinks = showSettingsLink || ccEnabled && ccPublishingEnabled || !!renderPopoverFooter();
+
+  var icon = _objectSpread({
+    check: 'general.check',
+    exclamationTriangle: 'general.exclamationTriangle',
+    external: 'general.newWindow',
+    x: 'general.x'
+  }, icons);
+
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    axis: "horizontal",
+    spacing: 1
+  }, props), /*#__PURE__*/React.createElement(Dropdown, _extends({
+    fontWeight: 400,
+    placement: "bottom-end",
+    popoverProps: _objectSpread({
+      width: '280px'
+    }, dropdownProps['popoverProps']),
+    theme: "dark",
+    title: "Church Center",
+    variant: "outline"
+  }, (!ccEnabled || !ccPublishingEnabled) && {
+    iconLeft: {
+      name: icon.exclamationTriangle,
+      size: 'sm'
+    }
+  }, dropdownProps), /*#__PURE__*/React.createElement(StackView, {
+    padding: 2,
+    spacing: 2
+  }, !ccPublishingEnabled ? /*#__PURE__*/React.createElement(Text, {
+    size: "14px"
+  }, _ref2, ' ', disabledDescription) : !ccEnabled ? /*#__PURE__*/React.createElement(Text, {
+    size: "14px"
+  }, _ref3, " ", disabledDescription) : /*#__PURE__*/React.createElement(Text, {
+    size: "14px"
+  }, description), ccEnabled && ccPublishingEnabled && /*#__PURE__*/React.createElement(StackView, {
+    axis: "horizontal",
+    spacing: 3
+  }, /*#__PURE__*/React.createElement(StackView, {
+    axis: "horizontal",
+    alignment: "center",
+    spacing: 0.5
+  }, /*#__PURE__*/React.createElement(Icon, {
+    color: ccWebEnabled ? 'success' : 'error',
+    name: ccWebEnabled ? icon.check : icon.x,
+    size: "sm"
+  }), _ref4), /*#__PURE__*/React.createElement(StackView, {
+    axis: "horizontal",
+    alignment: "center",
+    spacing: 0.5
+  }, /*#__PURE__*/React.createElement(Icon, {
+    color: ccAppEnabled ? 'success' : 'error',
+    name: ccAppEnabled ? icon.check : icon.x,
+    size: "sm"
+  }), _ref5))), hasLinks && _ref6, /*#__PURE__*/React.createElement(StackView, null, showSettingsLink && /*#__PURE__*/React.createElement(Button, _extends({
+    external: true,
+    title: "Update settings",
+    to: settingsUrl
+  }, buttonProps)), ccEnabled && ccPublishingEnabled && /*#__PURE__*/React.createElement(Button, _extends({
+    external: true,
+    iconRight: {
+      color: 'primary',
+      name: icon.external,
+      marginLeft: 1,
+      size: 'xs'
+    },
+    title: "Visit " + destinationLabel,
+    to: productUrl
+  }, buttonProps, {
+    as: "a"
+  })), renderPopoverFooter(buttonProps))));
+}

package/dist/esm/ChurchCenterStatus/index.js

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

package/dist/esm/Collapse/Collapse.js

@@ -0,0 +1,115 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { useLayoutEffect, useRef, useState } from 'react';
+var transition = 'height 200ms ease-out';
+
+function Collapse(props) {
+  var children = props.children,
+      instant = props.instant,
+      lazy = props.lazy,
+      onComplete = props.onComplete,
+      open = props.open,
+      restProps = _objectWithoutPropertiesLoose(props, ["children", "instant", "lazy", "onComplete", "open"]);
+
+  var _useState = useState(lazy ? open : true),
+      renderChildren = _useState[0],
+      setRenderChildren = _useState[1];
+
+  var ref = useRef();
+  var firstRender = useRef(true);
+  var instantRender = instant || firstRender.current;
+
+  function openCollapse() {
+    var node = ref.current;
+    requestAnimationFrame(function () {
+      node.style.height = node.scrollHeight + 'px';
+    });
+  }
+
+  function closeCollapse() {
+    var node = ref.current;
+    requestAnimationFrame(function () {
+      node.style.height = node.offsetHeight + 'px';
+      node.style.overflow = 'hidden';
+      requestAnimationFrame(function () {
+        node.style.height = 0;
+      });
+    });
+  }
+
+  useLayoutEffect(function () {
+    if (lazy) {
+      if (open) {
+        if (renderChildren) {
+          openCollapse();
+        } else {
+          setRenderChildren(true);
+        }
+      } else {
+        closeCollapse();
+      }
+    } else {
+      if (open) {
+        openCollapse();
+      } else {
+        closeCollapse();
+      }
+    }
+  }, [open, renderChildren]);
+  useLayoutEffect(function () {
+    var node = ref.current;
+
+    function handleComplete() {
+      node.style.overflow = open ? 'initial' : 'hidden';
+
+      if (open) {
+        requestAnimationFrame(function () {
+          node.style.margin = null;
+          node.style.height = 'auto';
+        });
+      }
+
+      if (!open && lazy) {
+        node.style.margin = '0';
+        setRenderChildren(false);
+      }
+
+      if (firstRender.current) {
+        firstRender.current = false;
+      } else if (onComplete) {
+        onComplete();
+      }
+    }
+
+    function handleTransitionEnd(event) {
+      if (event.target === node && event.propertyName === 'height') {
+        handleComplete();
+      }
+    }
+
+    if (instantRender) {
+      requestAnimationFrame(function () {
+        return handleComplete();
+      });
+    }
+
+    node.addEventListener('transitionend', handleTransitionEnd);
+    return function () {
+      node.removeEventListener('transitionend', handleTransitionEnd);
+    };
+  }, [open]);
+  return jsx("div", _extends({
+    ref: ref,
+    css: {
+      transition: instantRender ? undefined : transition,
+      visibility: open ? 'visible' : 'hidden'
+    }
+  }, restProps), renderChildren ? children : null);
+}
+
+export default Collapse;

package/dist/esm/Collapse/Collapse.test.js

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { render, screen } from '@testing-library/react';
+import { isInaccessible } from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import { Box, Button, Collapse } from '..';
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  "data-testid": "child"
+});
+
+describe('Collapse', function () {
+  describe('Render children', function () {
+    var Component = function Component() {
+      var _useState = useState(false),
+          open = _useState[0],
+          setOpen = _useState[1];
+
+      return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
+        "data-testid": "toggle",
+        onClick: function onClick() {
+          return setOpen(!open);
+        }
+      }, "Toggle"), /*#__PURE__*/React.createElement(Collapse, {
+        open: open
+      }, _ref));
+    };
+
+    var _ref2 = /*#__PURE__*/React.createElement(Component, null);
+
+    it('should render collapsed children', function () {
+      render(_ref2);
+      expect(screen.getByTestId('child')).toBeInTheDocument();
+    });
+
+    var _ref3 = /*#__PURE__*/React.createElement(Component, null);
+
+    it('should hide children from accessibility tree when collapsed', function () {
+      render(_ref3);
+      expect(isInaccessible(screen.getByTestId('toggle'))).toBe(false);
+      expect(isInaccessible(screen.getByTestId('child'))).toBe(true);
+    });
+
+    var _ref4 = /*#__PURE__*/React.createElement(Component, null);
+
+    it('should include children in accessibility tree when open', function () {
+      render(_ref4);
+      userEvent.click(screen.getByTestId('toggle'));
+      expect(isInaccessible(screen.getByTestId('toggle'))).toBe(false);
+      expect(isInaccessible(screen.getByTestId('child'))).toBe(false);
+    });
+  });
+});

package/dist/esm/Collapse/index.js

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

package/dist/esm/ColumnView/ColumnView.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { Children } from 'react';
+import StackView from '../StackView';
+import { spacingValue } from '../system';
+
+function Column() {
+  return null;
+}
+
+function ColumnView(props) {
+  var children = props.children,
+      _props$sizes = props.sizes,
+      sizes = _props$sizes === void 0 ? [] : _props$sizes,
+      spacing = props.spacing,
+      restProps = _objectWithoutPropertiesLoose(props, ["children", "sizes", "spacing"]);
+
+  var parsedSpacing = spacingValue(spacing);
+  var sortedColumns = Children.toArray(children).sort(function (a, b) {
+    return (a.props.order || 0) - (b.props.order || 0);
+  }).reduce(function (columns, cell, index) {
+    var columnIndex = cell.props.index === undefined ? index : cell.props.index;
+
+    if (!columns[columnIndex]) {
+      columns[columnIndex] = [];
+    }
+
+    columns[columnIndex].push(cell);
+    return columns;
+  }, []);
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    axis: "horizontal",
+    grow: 1,
+    shrink: 1
+  }, restProps), sortedColumns.map(function (column, index) {
+    var size = sizes ? sizes[index] || 'auto' : 'auto';
+    return /*#__PURE__*/React.createElement(StackView, {
+      key: index,
+      basis: size === 'auto' ? '100%' : size.basis || size,
+      shrink: size === 'auto' ? 1 : size.shrink || 0,
+      grow: size === 'auto' ? 1 : size.grow || 0,
+      marginLeft: index === 0 ? null : parsedSpacing,
+      spacing: parsedSpacing
+    }, column.map(function (cell) {
+      return cell.props.children;
+    }));
+  }));
+}
+
+ColumnView.Column = Column;
+export default ColumnView;

package/dist/esm/ColumnView/index.js

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

package/dist/esm/Combobox/Combobox.js

@@ -0,0 +1,22 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Box from '../Box';
+import { ItemList } from '../ItemList';
+import { useThemeProps } from '../system';
+
+var Combobox = function Combobox(props) {
+  var _useThemeProps = useThemeProps('combobox', props),
+      children = _useThemeProps.children,
+      onSelect = _useThemeProps.onSelect,
+      selectedValue = _useThemeProps.selectedValue,
+      restProps = _objectWithoutPropertiesLoose(_useThemeProps, ["children", "onSelect", "selectedValue"]);
+
+  return /*#__PURE__*/React.createElement(ItemList, {
+    onSelect: onSelect,
+    selected: function selected(item) {
+      return item.value === selectedValue;
+    }
+  }, /*#__PURE__*/React.createElement(Box, restProps, children));
+};
+
+export default Combobox;

package/dist/esm/Combobox/ComboboxInput.js

@@ -0,0 +1,128 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { forwardRef, useCallback, useImperativeHandle, useRef, useContext, useEffect } from 'react';
+import Input from '../Input';
+import ItemListContext from '../ItemList/ItemListContext';
+import { ItemListController } from '../ItemList';
+import { useThemeProps } from '../system';
+var ComboboxInput = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useThemeProps = 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 = _objectWithoutPropertiesLoose(_useThemeProps, ["autoFocus", "defaultValue", "disabled", "innerRef", "isOpen", "isLoading", "name", "onBlur", "onChange", "onFocus", "onClear", "onClose", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "size", "type", "value"]);
+
+  var inputNode = useRef(null);
+  var focus = useCallback(function () {
+    var _inputNode$current;
+
+    (_inputNode$current = inputNode.current) == null ? void 0 : _inputNode$current.focus();
+  }, [inputNode]);
+  var blur = useCallback(function () {
+    var _inputNode$current2;
+
+    (_inputNode$current2 = inputNode.current) == null ? void 0 : _inputNode$current2.blur();
+  }, [inputNode]);
+  useImperativeHandle(ref, function () {
+    return {
+      focus: focus,
+      blur: blur
+    };
+  });
+  var itemList = useContext(ItemListContext);
+  useEffect(function () {
+    var timer = setTimeout(function () {
+      // @ts-ignore
+      itemList.setHighlightedIndex(0);
+    });
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [itemList]);
+  var handleKeyDown = useCallback(function (e) {
+    if (e.key === 'ArrowUp') {
+      e.preventDefault(); // @ts-ignore
+
+      itemList.moveHighlightedIndex(-1, {
+        contain: false
+      });
+    }
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault(); // @ts-ignore
+
+      itemList.moveHighlightedIndex(1, {
+        contain: false
+      });
+    }
+
+    if (e.key === 'Enter') {
+      e.preventDefault(); // @ts-ignore
+
+      itemList.selectHighlightedItem();
+    }
+
+    if (onKeyDown) {
+      onKeyDown(e);
+    }
+
+    if (onClose && e.key === 'Tab') {
+      onClose();
+    }
+  }, [itemList, onClose, onKeyDown]);
+  return /*#__PURE__*/React.createElement(ItemListController, null, function (itemList) {
+    var highlightedItemId = itemList.highlightedItemId,
+        id = itemList.id;
+    return /*#__PURE__*/React.createElement(Input.InputBox, _extends({
+      innerRef: innerRef,
+      size: size,
+      disabled: disabled,
+      isLoading: isLoading,
+      onClear: typeof onClear === 'function' ? onClear : undefined
+    }, restProps, {
+      grow: 1
+    }), /*#__PURE__*/React.createElement(Input.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.displayName = 'Combobox.Input';
+export default ComboboxInput;

package/dist/esm/Combobox/ComboboxItem.js

@@ -0,0 +1,44 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import { ItemListItem } from '../ItemList';
+import Menu from '../Menu';
+import { useThemeProps } from '../system';
+
+function ComboboxItem(props) {
+  var _useThemeProps = 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 = _objectWithoutPropertiesLoose(_useThemeProps, ["value", "index", "text", "disabled"]);
+
+  return /*#__PURE__*/React.createElement(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.createElement(Menu.Item, _extends({
+      disabled: disabled,
+      id: id,
+      isHighlighted: highlighted,
+      onMouseOver: highlight,
+      onMouseOut: clearHighlight,
+      onClick: function onClick(event) {
+        event.stopPropagation();
+        event.nativeEvent.stopImmediatePropagation();
+        select();
+      }
+    }, restProps));
+  });
+}
+
+ComboboxItem.displayName = 'Combobox.Item';
+export default ComboboxItem;

package/dist/esm/Combobox/ComboboxItems.js

@@ -0,0 +1,71 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useState, Children, useEffect } from 'react';
+import { matchSorter } from 'match-sorter';
+import Box from '../Box';
+import Menu from '../Menu';
+import HeadingUppercase from '../HeadingUppercase';
+import StackView from '../StackView';
+import Text from '../Text';
+import { useThemeProps } from '../system';
+import ComboboxItem from './ComboboxItem';
+
+var defaultRenderEmpty = function defaultRenderEmpty(value) {
+  return /*#__PURE__*/React.createElement(Menu.Item, null, "No results for", /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    inline: true,
+    color: "grey-7"
+  }, "\"", value, "\""));
+};
+
+var defaultRenderItem = function defaultRenderItem(item) {
+  return /*#__PURE__*/React.createElement(ComboboxItem, {
+    value: item,
+    children: item ? String(item) : null
+  });
+};
+
+function ComboboxItems(props) {
+  var _useThemeProps = 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 = _objectWithoutPropertiesLoose(_useThemeProps, ["filter", "items", "renderEmpty", "renderItem", "title", "value"]);
+
+  var _useState = 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 matchSorter(items, value.length > 0 ? value : '', filter);
+  }
+
+  useEffect(function () {
+    setSortedItems(getSortedItems({
+      items: items,
+      value: value,
+      filter: filter
+    }));
+  }, [items, value, filter]);
+  return /*#__PURE__*/React.createElement(Box, restProps, title && /*#__PURE__*/React.createElement(StackView, {
+    paddingHorizontal: 1,
+    paddingVertical: 0.5
+  }, /*#__PURE__*/React.createElement(HeadingUppercase, null, title)), Children.toArray(sortedItems.length > 0 ? sortedItems.map(function (item, index) {
+    return renderItem(item, index);
+  }) : typeof renderEmpty === 'function' ? renderEmpty(value) : renderEmpty));
+}
+
+ComboboxItems.displayName = 'Combobox.Items';
+export default ComboboxItems;