@planningcenter/tapestry-react 2.1.2 → 2.2.0

package/dist/esm/Tabs/Tabs.js

@@ -1,133 +1,89 @@
 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, Children } from 'react';
+import React, { useState, useRef, useCallback, Children } from 'react';
 import StackView from '../StackView';
 import { generateId } from '../utils';
-import Tab from './Tab';
-import TabList, { TABLIST_DISPLAY_NAME } from './TabList';
-import TabPanel from './TabPanel';
-import TabPanels, { TABPANELS_DISPLAY_NAME } from './TabPanels';
-
-var Tabs = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(Tabs, _Component);
-
-  function Tabs() {
-    var _this;
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+import { useThemeProps } from '../system';
+import { TABLIST_DISPLAY_NAME } from './TabList';
+import { TABPANELS_DISPLAY_NAME } from './TabPanels';
+
+function Tabs(props) {
+  var _useThemeProps = useThemeProps('tabs', props),
+      _useThemeProps$active = _useThemeProps.activeIndex,
+      activeIndex = _useThemeProps$active === void 0 ? null : _useThemeProps$active,
+      children = _useThemeProps.children,
+      _useThemeProps$defaul = _useThemeProps.defaultActiveIndex,
+      defaultActiveIndex = _useThemeProps$defaul === void 0 ? 0 : _useThemeProps$defaul,
+      onChange = _useThemeProps.onChange,
+      restProps = _objectWithoutPropertiesLoose(_useThemeProps, ["activeIndex", "children", "defaultActiveIndex", "onChange"]);
+
+  var id = generateId('tabs');
+
+  var _useState = useState(defaultActiveIndex),
+      localActiveIndex = _useState[0],
+      setLocalActiveIndex = _useState[1];
+
+  var tabListRef = useRef(null);
+  var setActiveIndex = useCallback(function (index) {
+    if (onChange) {
+      onChange(index);
     }
 
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
+    if (activeIndex === null) {
+      setLocalActiveIndex(index);
+    }
+  });
+  var getActiveIndex = useCallback(function () {
+    return activeIndex === null ? localActiveIndex : activeIndex;
+  });
+  var getNextTab = useCallback(function (startIndex, direction) {
+    var tabCount = tabListRef.current.children.length;
+    var nextIndex = startIndex + direction;
+
+    if (nextIndex < 0) {
+      nextIndex = tabCount - 1;
+    } else if (nextIndex >= tabCount) {
+      nextIndex = 0;
+    }
 
-    _defineProperty(_assertThisInitialized(_this), "id", generateId('tabs'));
+    var nextTab = tabListRef.current.children[nextIndex];
 
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      activeIndex: _this.props.defaultActiveIndex
-    });
+    if (nextTab.getAttribute('aria-disabled') === 'true') {
+      return getNextTab(nextIndex, direction);
+    } else {
+      return nextTab;
+    }
+  });
+  var moveTabFocus = useCallback(function (direction) {
+    var nextTab = getNextTab(getActiveIndex(), direction);
 
-    _defineProperty(_assertThisInitialized(_this), "setTabList", function (node) {
+    if (nextTab) {
+      nextTab.focus();
+    }
+  });
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    innerRef: function innerRef(node) {
       if (node) {
-        _this.tabList = node.querySelector('[role="tablist"]');
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "setActiveIndex", function (activeIndex) {
-      if (_this.props.onChange) {
-        _this.props.onChange(activeIndex);
-      }
-
-      if (_this.props.activeIndex === null) {
-        _this.setState({
-          activeIndex: activeIndex
-        });
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "getActiveIndex", function () {
-      return _this.props.activeIndex === null ? _this.state.activeIndex : _this.props.activeIndex;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "getNextTab", function (startIndex, direction) {
-      var tabCount = _this.tabList.children.length;
-      var nextIndex = startIndex + direction;
-
-      if (nextIndex < 0) {
-        nextIndex = tabCount - 1;
-      } else if (nextIndex >= tabCount) {
-        nextIndex = 0;
-      }
-
-      var nextTab = _this.tabList.children[nextIndex];
-
-      if (nextTab.getAttribute('aria-disabled') === 'true') {
-        return _this.getNextTab(nextIndex, direction);
-      } else {
-        return nextTab;
+        tabListRef.current = node.querySelector('[role="tablist"]');
       }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "moveTabFocus", function (direction) {
-      var nextTab = _this.getNextTab(_this.getActiveIndex(), direction);
-
-      if (nextTab) {
-        nextTab.focus();
-      }
-    });
-
-    return _this;
-  }
-
-  var _proto = Tabs.prototype;
-
-  _proto.render = function render() {
-    var _this2 = this;
-
-    var _this$props = this.props,
-        activeIndex = _this$props.activeIndex,
-        children = _this$props.children,
-        defaultActiveIndex = _this$props.defaultActiveIndex,
-        onChange = _this$props.onChange,
-        restProps = _objectWithoutPropertiesLoose(_this$props, ["activeIndex", "children", "defaultActiveIndex", "onChange"]);
-
-    return /*#__PURE__*/React.createElement(StackView, _extends({
-      innerRef: this.setTabList
-    }, restProps), Children.map(children, function (child, index) {
-      if (child && child.type.displayName === TABLIST_DISPLAY_NAME) {
-        return /*#__PURE__*/React.cloneElement(child, {
-          id: _this2.id,
-          activeIndex: _this2.getActiveIndex(),
-          moveTabFocus: _this2.moveTabFocus,
-          setActiveIndex: _this2.setActiveIndex
-        });
-      } else if (child && child.type.displayName === TABPANELS_DISPLAY_NAME) {
-        return /*#__PURE__*/React.cloneElement(child, {
-          id: _this2.id,
-          activeIndex: _this2.getActiveIndex()
-        });
-      } else {
-        return child;
-      }
-    }));
-  };
-
-  return Tabs;
-}(Component);
-
-_defineProperty(Tabs, "Tab", Tab);
-
-_defineProperty(Tabs, "TabList", TabList);
-
-_defineProperty(Tabs, "TabPanel", TabPanel);
-
-_defineProperty(Tabs, "TabPanels", TabPanels);
-
-_defineProperty(Tabs, "defaultProps", {
-  activeIndex: null,
-  defaultActiveIndex: 0
-});
+    }
+  }, restProps), Children.map(children, function (child, index) {
+    if (child && child.type.displayName === TABLIST_DISPLAY_NAME) {
+      return /*#__PURE__*/React.cloneElement(child, {
+        id: id,
+        activeIndex: getActiveIndex(),
+        moveTabFocus: moveTabFocus,
+        setActiveIndex: setActiveIndex
+      });
+    } else if (child && child.type.displayName === TABPANELS_DISPLAY_NAME) {
+      return /*#__PURE__*/React.cloneElement(child, {
+        id: id,
+        activeIndex: getActiveIndex()
+      });
+    } else {
+      return child;
+    }
+  }));
+}
 
 export default Tabs;

package/dist/esm/Tabs/index.js

@@ -1,2 +1,10 @@
 import Tabs from './Tabs';
+import Tab from './Tab';
+import TabList from './TabList';
+import TabPanel from './TabPanel';
+import TabPanels from './TabPanels';
+Tabs.Tab = Tab;
+Tabs.TabList = TabList;
+Tabs.TabPanel = TabPanel;
+Tabs.TabPanels = TabPanels;
 export default Tabs;

package/dist/esm/ThemeProvider/ThemeProvider.js

@@ -25,7 +25,7 @@ export var themeStorage = {
     return window.localStorage.setItem(STORAGE_KEY, value);
   }
 };
-export var themeInitializerScript = "\ntry {\n  var theme = window.localStorage.getItem('" + STORAGE_KEY + "')\n  if (theme) {\n    document.body.dataset.theme = theme\n  }\n} catch (e) {}\n";
+export var themeInitializerScript = "\ntry {\n  var theme = window.localStorage.getItem('" + STORAGE_KEY + "')\n  if (theme) {\n    document.documentElement.dataset.theme = theme\n  }\n} catch (e) {}\n";
 var emptyTheme = {};
 
 function mergeThemes(a, b) {

package/dist/esm/Tooltip/Tooltip.js

@@ -1,12 +1,10 @@
 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, Children, cloneElement } from 'react';
+import React, { Children, cloneElement, forwardRef, useState, useCallback, useImperativeHandle, useEffect } from 'react';
 import mitt from 'mitt';
 import Popover from '../Popover';
 import { composeEvents, pageViewChange } from '../utils';
+import { useThemeProps } from '../system';
 var emitter = mitt();
 var globalTimeoutId = null;
 var instantDelay = false;
@@ -22,209 +20,170 @@ function clearGlobalTimeout() {
   clearTimeout(globalTimeoutId);
 }
 
-var Tooltip = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(Tooltip, _Component);
-
-  function Tooltip() {
-    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), "state", {
-      isPopoverOpen: _this.props.defaultOpen
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "isPageInView", true);
-
-    _defineProperty(_assertThisInitialized(_this), "isFocused", false);
-
-    _defineProperty(_assertThisInitialized(_this), "isMouseDown", false);
-
-    _defineProperty(_assertThisInitialized(_this), "openTimeoutId", null);
-
-    _defineProperty(_assertThisInitialized(_this), "closeTimeoutId", null);
-
-    _defineProperty(_assertThisInitialized(_this), "cleanupPageViewChange", pageViewChange(function (inView) {
-      return setTimeout(function () {
-        return _this.isPageInView = inView;
-      });
-    }));
-
-    _defineProperty(_assertThisInitialized(_this), "handleCloseOpenTooltips", function (instance) {
-      if (_assertThisInitialized(_this) !== instance) {
-        _this.close();
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "createOpenTimeout", function () {
-      clearGlobalTimeout();
-
-      if (_this.openTimeoutId === null) {
-        clearTimeout(_this.closeTimeoutId);
-        _this.closeTimeoutId = null;
-
-        if (_this.state.isPopoverOpen === false) {
-          emitter.emit('CLOSE_OPEN_TOOLTIPS');
-          _this.openTimeoutId = setTimeout(function () {
-            return _this.open();
-          }, instantDelay ? 0 : _this.props.openDelay);
-        }
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "createCloseTimeout", function () {
-      startGlobalTimeout();
-
-      if (_this.closeTimeoutId === null) {
-        clearTimeout(_this.openTimeoutId);
-        _this.openTimeoutId = null;
-        _this.closeTimeoutId = setTimeout(function () {
-          _this.close();
-        }, _this.props.closeDelay);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "open", function () {
-      clearTimeout(_this.closeTimeoutId);
-      _this.closeTimeoutId = null;
-
-      _this.setState({
-        isPopoverOpen: true
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "close", function () {
-      clearTimeout(_this.openTimeoutId);
-      _this.openTimeoutId = null;
-
-      _this.setState({
-        isPopoverOpen: false
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "toggle", function () {
-      _this.setState(function (state) {
-        return {
-          isPopoverOpen: !state.isPopoverOpen
-        };
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleFocus", function () {
-      if (_this.isPageInView && !_this.isMouseDown) {
-        _this.open();
-      }
+function Tooltip(props, ref) {
+  var _useThemeProps = useThemeProps('tooltip', props),
+      children = _useThemeProps.children,
+      _useThemeProps$openDe = _useThemeProps.openDelay,
+      openDelay = _useThemeProps$openDe === void 0 ? 500 : _useThemeProps$openDe,
+      _useThemeProps$closeD = _useThemeProps.closeDelay,
+      closeDelay = _useThemeProps$closeD === void 0 ? 300 : _useThemeProps$closeD,
+      _useThemeProps$defaul = _useThemeProps.defaultOpen,
+      defaultOpen = _useThemeProps$defaul === void 0 ? false : _useThemeProps$defaul,
+      _useThemeProps$keepIn = _useThemeProps.keepInView,
+      keepInView = _useThemeProps$keepIn === void 0 ? true : _useThemeProps$keepIn,
+      placement = _useThemeProps.placement,
+      popoverProps = _useThemeProps.popoverProps,
+      renderTo = _useThemeProps.renderTo,
+      title = _useThemeProps.title,
+      _useThemeProps$trigge = _useThemeProps.triggerOnFocus,
+      triggerOnFocus = _useThemeProps$trigge === void 0 ? true : _useThemeProps$trigge,
+      _useThemeProps$trigge2 = _useThemeProps.triggerOnHover,
+      triggerOnHover = _useThemeProps$trigge2 === void 0 ? true : _useThemeProps$trigge2,
+      childProps = _objectWithoutPropertiesLoose(_useThemeProps, ["children", "openDelay", "closeDelay", "defaultOpen", "keepInView", "placement", "popoverProps", "renderTo", "title", "triggerOnFocus", "triggerOnHover"]);
+
+  var isPageInView = true;
+  var isFocused = false;
+  var isMouseDown = false;
+  var openTimeoutId = null;
+  var closeTimeoutId = null; // prevents tooltips showing when focused and navigating back to a page after leaving
+
+  var cleanupPageViewChange = useCallback(pageViewChange(function (inView) {
+    return setTimeout(function () {
+      return isPageInView = inView;
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleMouseDown", function () {
-      _this.isMouseDown = true;
-
-      _this.close();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleMouseUp", function () {
-      _this.isMouseDown = false;
-    });
-
-    return _this;
-  }
-
-  var _proto = Tooltip.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
-    emitter.on('CLOSE_OPEN_TOOLTIPS', this.handleCloseOpenTooltips);
+  }));
+
+  var _useState = useState(defaultOpen),
+      isPopoverOpen = _useState[0],
+      setIsPopoverOpen = _useState[1];
+
+  useEffect(function () {
+    emitter.on('CLOSE_OPEN_TOOLTIPS', close);
+    return function () {
+      emitter.off('CLOSE_OPEN_TOOLTIPS', close);
+      clearTimeout(openTimeoutId);
+      clearTimeout(closeTimeoutId);
+      cleanupPageViewChange();
+    };
+  }, []);
+
+  var open = function open() {
+    clearTimeout(closeTimeoutId);
+    closeTimeoutId = null;
+    setIsPopoverOpen(true);
   };
 
-  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
-    if (lastProps.triggerOnFocus !== this.props.triggerOnFocus && this.props.triggerOnFocus === false || lastProps.triggerOnHover !== this.props.triggerOnHover && this.triggerOnHover === false) {
-      this.close();
-    }
+  var close = function close() {
+    clearTimeout(openTimeoutId);
+    openTimeoutId = null;
+    setIsPopoverOpen(false);
   };
 
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    emitter.off('CLOSE_OPEN_TOOLTIPS', this.handleCloseOpenTooltips);
-    clearTimeout(this.openTimeoutId);
-    clearTimeout(this.closeTimeoutId);
-    this.cleanupPageViewChange();
+  var toggle = function toggle() {
+    setIsPopoverOpen(!isPopoverOpen);
   };
 
-  _proto.render = function render() {
-    var _this$props = this.props,
-        children = _this$props.children,
-        openDelay = _this$props.openDelay,
-        closeDelay = _this$props.closeDelay,
-        defaultOpen = _this$props.defaultOpen,
-        keepInView = _this$props.keepInView,
-        placement = _this$props.placement,
-        popoverProps = _this$props.popoverProps,
-        renderTo = _this$props.renderTo,
-        title = _this$props.title,
-        triggerOnFocus = _this$props.triggerOnFocus,
-        triggerOnHover = _this$props.triggerOnHover,
-        childProps = _objectWithoutPropertiesLoose(_this$props, ["children", "openDelay", "closeDelay", "defaultOpen", "keepInView", "placement", "popoverProps", "renderTo", "title", "triggerOnFocus", "triggerOnHover"]);
-
-    var isPopoverOpen = this.state.isPopoverOpen;
-    var child = Children.only(children);
-    var _child$props = child.props,
-        onFocus = _child$props.onFocus,
-        onBlur = _child$props.onBlur,
-        onMouseEnter = _child$props.onMouseEnter,
-        onMouseLeave = _child$props.onMouseLeave,
-        onMouseDown = _child$props.onMouseDown,
-        onMouseUp = _child$props.onMouseUp;
-
-    if (!title) {
-      return /*#__PURE__*/cloneElement(child, childProps);
+  useImperativeHandle(ref, function () {
+    return {
+      open: open,
+      close: close,
+      toggle: toggle
+    };
+  });
+  useEffect(function () {
+    if (triggerOnFocus === false) {
+      close();
     }
-
-    if (triggerOnFocus) {
-      childProps.onFocus = composeEvents(this.handleFocus, onFocus);
-      childProps.onBlur = composeEvents(this.close, onBlur);
-      childProps.onMouseDown = composeEvents(this.handleMouseDown, onMouseDown);
-      childProps.onMouseUp = composeEvents(this.handleMouseUp, onMouseUp);
+  }, [triggerOnFocus]);
+  useEffect(function () {
+    if (triggerOnHover === false) {
+      close();
     }
-
-    if (triggerOnHover) {
-      childProps.onMouseEnter = composeEvents(this.createOpenTimeout, onMouseEnter);
-      childProps.onMouseLeave = composeEvents(this.createCloseTimeout, onMouseLeave);
+  }, [triggerOnHover]);
+  var createOpenTimeout = useCallback(function () {
+    clearGlobalTimeout();
+
+    if (openTimeoutId === null) {
+      clearTimeout(closeTimeoutId);
+      closeTimeoutId = null;
+
+      if (isPopoverOpen === false) {
+        emitter.emit('CLOSE_OPEN_TOOLTIPS');
+        openTimeoutId = setTimeout(function () {
+          return open();
+        }, instantDelay ? 0 : openDelay);
+      }
+    }
+  });
+  var createCloseTimeout = useCallback(function () {
+    startGlobalTimeout();
+
+    if (closeTimeoutId === null) {
+      clearTimeout(openTimeoutId);
+      openTimeoutId = null;
+      closeTimeoutId = setTimeout(function () {
+        close();
+      }, closeDelay);
     }
+  });
+  var handleFocus = useCallback(function () {
+    if (isPageInView && !isMouseDown) {
+      open();
+    }
+  });
+  var handleMouseDown = useCallback(function () {
+    isMouseDown = true;
+    close();
+  });
+  var handleMouseUp = useCallback(function () {
+    isMouseDown = false;
+  });
+  var child = Children.only(children);
+  var _child$props = child.props,
+      onFocus = _child$props.onFocus,
+      onBlur = _child$props.onBlur,
+      onMouseEnter = _child$props.onMouseEnter,
+      onMouseLeave = _child$props.onMouseLeave,
+      onMouseDown = _child$props.onMouseDown,
+      onMouseUp = _child$props.onMouseUp;
+
+  if (!title) {
+    return /*#__PURE__*/cloneElement(child, childProps);
+  }
 
-    return /*#__PURE__*/React.createElement(Popover, _extends({
-      shouldFlip: true,
-      paddingHorizontal: 0.75,
-      paddingVertical: 0.25,
-      fontSize: 5,
-      textAlign: "center",
-      radius: 2,
-      backgroundColor: "grey-9",
-      color: "rgba(255,255,255,0.94)",
-      zIndex: 9999
-    }, popoverProps, {
-      anchorElement: /*#__PURE__*/cloneElement(child, childProps),
-      onMouseEnter: this.createOpenTimeout,
-      onMouseLeave: this.createCloseTimeout,
-      keepInView: keepInView,
-      placement: placement,
-      renderTo: renderTo,
-      children: title,
-      open: isPopoverOpen
-    }));
-  };
+  if (triggerOnFocus) {
+    childProps.onFocus = composeEvents(handleFocus, onFocus);
+    childProps.onBlur = composeEvents(close, onBlur);
+    childProps.onMouseDown = composeEvents(handleMouseDown, onMouseDown);
+    childProps.onMouseUp = composeEvents(handleMouseUp, onMouseUp);
+  }
 
-  return Tooltip;
-}(Component);
+  if (triggerOnHover) {
+    childProps.onMouseEnter = composeEvents(createOpenTimeout, onMouseEnter);
+    childProps.onMouseLeave = composeEvents(createCloseTimeout, onMouseLeave);
+  }
 
-_defineProperty(Tooltip, "defaultProps", {
-  openDelay: 500,
-  closeDelay: 300,
-  keepInView: true,
-  triggerOnFocus: true,
-  triggerOnHover: true,
-  defaultOpen: false
-});
+  return /*#__PURE__*/React.createElement(Popover, _extends({
+    shouldFlip: true,
+    paddingHorizontal: 0.75,
+    paddingVertical: 0.25,
+    fontSize: 5,
+    textAlign: "center",
+    radius: 2,
+    backgroundColor: "grey-9",
+    color: "rgba(255,255,255,0.94)",
+    zIndex: 9999
+  }, popoverProps, {
+    anchorElement: /*#__PURE__*/cloneElement(child, childProps),
+    onMouseEnter: createOpenTimeout,
+    onMouseLeave: createCloseTimeout,
+    keepInView: keepInView,
+    placement: placement,
+    renderTo: renderTo,
+    children: title,
+    open: isPopoverOpen
+  }));
+}
 
+Tooltip = /*#__PURE__*/forwardRef(Tooltip);
 export default Tooltip;