@planningcenter/tapestry-react 2.1.1 → 2.2.0

package/dist/esm/Combobox/ComboboxInput.js

@@ -1,160 +1,122 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React, { Component } from 'react';
+import React, { forwardRef, useCallback, useImperativeHandle, useRef, useContext, useEffect } from 'react';
 import Input from '../Input';
-import { ItemListController } from '../ItemList';
-
-var ComboboxInput = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(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;
-
-    _defineProperty(_assertThisInitialized(_this), "setInputNode", function (node) {
-      _this.inputNode = node;
-    });
-
-    _defineProperty(_assertThisInitialized(_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();
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleDocumentKeyDown", function (e) {
-      if (_this.props.onClear && e.key === 'Escape') {
-        _this.props.onClear();
-      }
+import ItemListContext from '../ItemList/ItemListContext';
+import { useThemeProps } from '../system';
+
+function ComboboxInput(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 () {
+    inputNode.current.focus();
+  }, [inputNode]);
+  var blur = useCallback(function () {
+    inputNode.current.blur();
+  }, [inputNode]);
+  useImperativeHandle(ref, function () {
+    return {
+      focus: focus,
+      blur: blur
+    };
+  });
+  var itemList = useContext(ItemListContext);
+  var highlightedItemId = itemList.highlightedItemId,
+      id = itemList.id;
+  useEffect(function () {
+    setTimeout(function () {
+      itemList.setHighlightedIndex(0);
     });
-
-    return _this;
-  }
-
-  var _proto = ComboboxInput.prototype;
-
-  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
-    var _this2 = this;
-
-    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);
+  }, [itemList.items]);
+  var handleKeyDown = useCallback(function (e) {
+    if (e.key === 'ArrowUp') {
+      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 = _objectWithoutPropertiesLoose(_this$props, ["autoFocus", "defaultValue", "disabled", "innerRef", "isOpen", "isLoading", "name", "onBlur", "onChange", "onFocus", "onClear", "onClose", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "size", "type", "value"]);
-
-    return /*#__PURE__*/React.createElement(ItemListController, null, function (itemList) {
-      var highlightedItemId = itemList.highlightedItemId,
-          id = itemList.id;
 
-      if (!_this3.itemList) {
-        _this3.itemList = itemList;
-      }
-
-      return /*#__PURE__*/React.createElement(Input.InputBox, _extends({
-        innerRef: innerRef,
-        size: size,
-        disabled: disabled,
-        isLoading: isLoading,
-        onClear: onClear
-      }, restProps, {
-        grow: 1
-      }), /*#__PURE__*/React.createElement(Input.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
-      }));
-    });
-  };
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      itemList.moveHighlightedIndex(1, {
+        contain: false
+      });
+    }
 
-  return ComboboxInput;
-}(Component);
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      itemList.selectHighlightedItem();
+    }
 
-_defineProperty(ComboboxInput, "displayName", 'Combobox.Input');
+    if (onKeyDown) {
+      onKeyDown(e);
+    }
 
+    if (onClose && e.key === 'Tab') {
+      onClose();
+    }
+  });
+  var handleDocumentKeyDown = useCallback(function (e) {
+    if (onClear && e.key === 'Escape') {
+      onClear();
+    }
+  });
+  return /*#__PURE__*/React.createElement(Input.InputBox, _extends({
+    innerRef: innerRef,
+    size: size,
+    disabled: disabled,
+    isLoading: isLoading,
+    onClear: onClear
+  }, 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 = /*#__PURE__*/forwardRef(ComboboxInput);
+ComboboxInput.displayName = 'Combobox.Input';
 export default ComboboxInput;

package/dist/esm/Combobox/ComboboxItem.js

@@ -1,58 +1,44 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React, { Component } from 'react';
+import React from 'react';
 import { ItemListItem } from '../ItemList';
 import Menu from '../Menu';
-
-var ComboboxItem = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(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 = _objectWithoutPropertiesLoose(_this$props, ["value", "index", "text", "disabled"]);
-
-    return /*#__PURE__*/React.createElement(ItemListItem, {
-      data: value,
+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,
-      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));
-    });
-  };
-
-  return ComboboxItem;
-}(Component);
-
-_defineProperty(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';
 export default ComboboxItem;

package/dist/esm/Combobox/ComboboxItems.js

@@ -1,14 +1,12 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React, { Component, Children } from 'react';
+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 { shallowEqual } from '../utils';
+import { useThemeProps } from '../system';
 import ComboboxItem from './ComboboxItem';
 
 var defaultRenderEmpty = function defaultRenderEmpty(value) {
@@ -26,64 +24,48 @@ var defaultRenderItem = function defaultRenderItem(item) {
   });
 };
 
-var ComboboxItems = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(ComboboxItems, _Component);
+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"]);
 
-  function ComboboxItems(props) {
-    var _this;
+  var _useState = useState(getSortedItems({
+    items: items,
+    value: value,
+    filter: filter
+  })),
+      sortedItems = _useState[0],
+      setSortedItems = _useState[1];
 
-    _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 || !shallowEqual(lastProps.items, this.props.items) || !shallowEqual(lastProps.filter, this.props.filter)) {
-      this.setState({
-        sortedItems: this.getSortedItems(this.props)
-      });
-    }
-  };
-
-  _proto.getSortedItems = function getSortedItems(_ref) {
+  function getSortedItems(_ref) {
     var items = _ref.items,
         value = _ref.value,
         filter = _ref.filter;
     return 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 = _objectWithoutPropertiesLoose(_this$props, ["filter", "items", "renderEmpty", "renderItem", "title", "value"]);
-
-    var sortedItems = this.state.sortedItems;
-    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));
-  };
-
-  return ComboboxItems;
-}(Component);
-
-_defineProperty(ComboboxItems, "displayName", 'Combobox.Items');
+  }
 
-_defineProperty(ComboboxItems, "defaultProps", {
-  value: '',
-  renderEmpty: defaultRenderEmpty,
-  renderItem: defaultRenderItem
-});
+  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;

package/dist/esm/Combobox/index.js

@@ -1,2 +1,10 @@
 import Combobox from './Combobox';
+import ComboboxInput from './ComboboxInput';
+import ComboboxItem from './ComboboxItem';
+import ComboboxItems from './ComboboxItems';
+import ComboboxPopover from './ComboboxPopover';
+Combobox.Input = ComboboxInput;
+Combobox.Item = ComboboxItem;
+Combobox.Items = ComboboxItems;
+Combobox.Popover = ComboboxPopover;
 export default Combobox;