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

package/dist/esm/Tooltip/Tooltip.test.js

@@ -0,0 +1,160 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import React from 'react';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import { Button, Link, StackView, Text, Tooltip, hooks } from '..';
+
+var _ref = /*#__PURE__*/React.createElement(Text, null, "Tooltip anchor");
+
+var _ref3 = /*#__PURE__*/React.createElement(Text, null, "Tooltip anchor");
+
+var _ref5 = /*#__PURE__*/React.createElement(Button, null, "Tooltip anchor");
+
+var _ref7 = /*#__PURE__*/React.createElement(Text, null, "Tooltip anchor");
+
+var _ref8 = /*#__PURE__*/React.createElement(Tooltip, {
+  title: "Test Text"
+}, /*#__PURE__*/React.createElement(Text, null, "Tooltip anchor"));
+
+describe('Tooltip', function () {
+  test('does not render string when closed', function () {
+    var string = 'Test Text';
+    render( /*#__PURE__*/React.createElement(Tooltip, {
+      title: string
+    }, _ref));
+    expect(screen.queryByText(string)).toBeNull();
+  });
+  test('renders string on hover', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var string, tooltip;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            string = 'Test Text';
+            render( /*#__PURE__*/React.createElement(Tooltip, {
+              title: string
+            }, _ref3));
+            userEvent.hover(screen.getByText('Tooltip anchor'));
+            _context.next = 5;
+            return screen.findByText(string);
+
+          case 5:
+            tooltip = _context.sent;
+            expect(tooltip).toBeInTheDocument();
+
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  test('renders string on focus', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var string, tooltip;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            string = 'Test Text';
+            render( /*#__PURE__*/React.createElement(Tooltip, {
+              title: string,
+              triggerOnFocus: true
+            }, _ref5));
+            userEvent.tab();
+            _context2.next = 5;
+            return screen.findByText(string);
+
+          case 5:
+            tooltip = _context2.sent;
+            expect(tooltip).toBeInTheDocument();
+
+          case 7:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  test('removes string after timeout', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var string, anchor, tooltip;
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            string = 'Test Text';
+            render( /*#__PURE__*/React.createElement(Tooltip, {
+              title: string
+            }, _ref7));
+            anchor = screen.getByText('Tooltip anchor');
+            expect(screen.queryByText(string)).toBeNull();
+            userEvent.hover(anchor);
+            _context3.next = 7;
+            return screen.findByText(string);
+
+          case 7:
+            tooltip = _context3.sent;
+            expect(tooltip).toBeInTheDocument();
+            userEvent.unhover(anchor);
+            _context3.next = 12;
+            return waitFor(function () {
+              expect(screen.queryByText(string)).not.toBeInTheDocument();
+            });
+
+          case 12:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  test('stays open when hovering a custom tooltip', function () {
+    var CustomTooltip = function CustomTooltip() {
+      var _hooks$useHover = hooks.useHover(),
+          hover = _hooks$useHover.hover,
+          hoverProps = _hooks$useHover.hoverProps;
+
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        title: /*#__PURE__*/React.createElement(Link, {
+          to: "#"
+        }, /*#__PURE__*/React.createElement(StackView, null, /*#__PURE__*/React.createElement(Text, {
+          "data-hover": hover
+        }, string)))
+      }, /*#__PURE__*/React.createElement(Button, hoverProps, "Tooltip anchor"));
+    };
+
+    var string = 'Test Text';
+    render( /*#__PURE__*/React.createElement(CustomTooltip, null));
+    var anchor = screen.getByText('Tooltip anchor');
+    userEvent.hover(anchor);
+    act(function () {
+      jest.runAllTimers();
+    });
+    var tooltip = screen.getByText(string);
+    expect(tooltip).toBeInTheDocument();
+    userEvent.unhover(anchor);
+    userEvent.hover(tooltip);
+    act(function () {
+      jest.runAllTimers();
+    });
+    expect(tooltip).toBeInTheDocument();
+    userEvent.unhover(tooltip);
+    act(function () {
+      jest.runAllTimers();
+    });
+    expect(tooltip).not.toBeInTheDocument();
+  });
+  test('cleans up pageViewChange listeners', function () {
+    window.removeEventListener = jest.fn().mockImplementation(function (event, callback) {});
+    document.removeEventListener = jest.fn().mockImplementation(function (event, callback) {});
+
+    var _render = render(_ref8),
+        unmount = _render.unmount;
+
+    unmount();
+    expect(window.removeEventListener).toBeCalledWith('focus', expect.any(Function));
+    expect(window.removeEventListener).toBeCalledWith('blur', expect.any(Function));
+    expect(document.removeEventListener).toBeCalledWith('visibilitychange', expect.any(Function));
+  });
+});

package/dist/esm/Tooltip/index.js

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

package/dist/esm/VariantProvider/VariantProvider.js

@@ -0,0 +1,18 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { createContext, useContext } from 'react';
+var VariantContext = /*#__PURE__*/createContext();
+export function useVariant() {
+  var variant = useContext(VariantContext);
+  return variant ? Object.keys(variant).filter(function (key) {
+    return variant[key];
+  }) : null;
+}
+export function VariantProvider(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, ["children"]);
+
+  var parentVariant = useVariant();
+  return /*#__PURE__*/React.createElement(VariantContext.Provider, {
+    value: props
+  }, children);
+}

package/dist/esm/VariantProvider/index.js

@@ -0,0 +1 @@
+export { VariantProvider as default, useVariant } from './VariantProvider';

package/dist/esm/Wizard/Step.js

@@ -0,0 +1,23 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import { useContext, useEffect } from 'react';
+import WizardContext from './WizardContext';
+
+function Step(_ref) {
+  var children = _ref.children,
+      name = _ref.name,
+      valid = _ref.valid;
+
+  var _useContext = useContext(WizardContext),
+      addStep = _useContext.addStep,
+      wizard = _objectWithoutPropertiesLoose(_useContext, ["addStep"]);
+
+  useEffect(function () {
+    return addStep({
+      name: name,
+      valid: valid
+    });
+  }, []);
+  return children(wizard);
+}
+
+export default Step;

package/dist/esm/Wizard/Wizard.js

@@ -0,0 +1,170 @@
+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, { Children, useCallback, useReducer, useState } from 'react';
+import Button from '../Button';
+import Card from '../Card';
+import Divider from '../Divider';
+import StackView from '../StackView';
+import PagerView from '../PagerView';
+import StepperProgress from '../StepperProgress';
+import Text from '../Text';
+import { useThemeProps } from '../system';
+import WizardContext from './WizardContext';
+
+var _ref2 = /*#__PURE__*/React.createElement(Divider, null);
+
+var Wizard = function Wizard(props) {
+  var _useThemeProps = useThemeProps('wizard', props),
+      _useThemeProps$autoFo = _useThemeProps.autoFocus,
+      autoFocus = _useThemeProps$autoFo === void 0 ? true : _useThemeProps$autoFo,
+      backButtonProps = _useThemeProps.backButtonProps,
+      buttonProps = _useThemeProps.buttonProps,
+      cancelButtonProps = _useThemeProps.cancelButtonProps,
+      children = _useThemeProps.children,
+      footerProps = _useThemeProps.footerProps,
+      _useThemeProps$initia = _useThemeProps.initialPayload,
+      initialPayload = _useThemeProps$initia === void 0 ? {} : _useThemeProps$initia,
+      nextButtonProps = _useThemeProps.nextButtonProps,
+      _useThemeProps$nextBu = _useThemeProps.nextButtonTitle,
+      nextButtonTitle = _useThemeProps$nextBu === void 0 ? function (_ref) {
+    var activeStepIndex = _ref.activeStepIndex,
+        steps = _ref.steps,
+        totalSteps = _ref.totalSteps;
+    return activeStepIndex >= totalSteps - 1 ? 'Finish' : 'Next';
+  } : _useThemeProps$nextBu,
+      onCancel = _useThemeProps.onCancel,
+      onSubmit = _useThemeProps.onSubmit,
+      renderProgress = _useThemeProps.renderProgress,
+      restProps = _objectWithoutPropertiesLoose(_useThemeProps, ["autoFocus", "backButtonProps", "buttonProps", "cancelButtonProps", "children", "footerProps", "initialPayload", "nextButtonProps", "nextButtonTitle", "onCancel", "onSubmit", "renderProgress"]);
+
+  var _useState = useState(0),
+      activeStepIndex = _useState[0],
+      setActiveStepIndex = _useState[1];
+
+  var _useState2 = useState([]),
+      steps = _useState2[0],
+      setSteps = _useState2[1];
+
+  var _useState3 = useState(false),
+      sendingPayload = _useState3[0],
+      setSendingPayload = _useState3[1];
+
+  var totalSteps = steps.length;
+
+  var _useReducer = useReducer(function (prevState, updatedProperty) {
+    return _objectSpread(_objectSpread({}, prevState), updatedProperty);
+  }, initialPayload),
+      payload = _useReducer[0],
+      setPayload = _useReducer[1];
+
+  var addStep = useCallback(function (step) {
+    setSteps(function (steps) {
+      return [].concat(steps, [step]);
+    });
+    return function () {
+      setSteps(function (steps) {
+        return steps.filter(function (previousStep) {
+          return previousStep.name !== step.name;
+        });
+      });
+    };
+  }, []);
+  var isCurrentStepValid = useCallback(function () {
+    var currentStep = steps[activeStepIndex];
+    return currentStep && currentStep.valid ? currentStep.valid(payload) : true;
+  }, [activeStepIndex, steps, payload]);
+  var handleSubmit = useCallback(function () {
+    if (onSubmit) {
+      var _complete = function _complete() {
+        return setSendingPayload(false);
+      };
+
+      setSendingPayload(true);
+      onSubmit(payload, _complete);
+    }
+  }, [onSubmit, payload]);
+  return /*#__PURE__*/React.createElement(WizardContext.Provider, {
+    value: {
+      activeStepIndex: activeStepIndex,
+      addStep: addStep,
+      setPayload: setPayload,
+      payload: payload,
+      totalSteps: totalSteps
+    }
+  }, /*#__PURE__*/React.createElement(StackView, _extends({
+    alignment: "center",
+    minWidth: 48,
+    maxWidth: 96
+  }, restProps), renderProgress ? renderProgress({
+    activeStepIndex: activeStepIndex,
+    steps: steps,
+    totalSteps: totalSteps
+  }) : /*#__PURE__*/React.createElement(StepperProgress, {
+    width: "80%",
+    paddingTop: 6,
+    paddingBottom: 4,
+    activeStepIndex: activeStepIndex
+  }, steps.map(function (step, index) {
+    return /*#__PURE__*/React.createElement(StepperProgress.Step, {
+      key: index,
+      renderEnd: /*#__PURE__*/React.createElement(Text, {
+        align: "center",
+        marginTop: 2
+      }, step.name)
+    });
+  })), /*#__PURE__*/React.createElement(Card, {
+    spacing: _ref2,
+    elevation: 1
+  }, /*#__PURE__*/React.createElement(PagerView, {
+    activeViewIndex: activeStepIndex,
+    autoFocus: autoFocus
+  }, Children.map(children, function (child, index) {
+    return /*#__PURE__*/React.createElement(PagerView.View, {
+      key: index
+    }, child);
+  })), /*#__PURE__*/React.createElement(StackView, _extends({
+    axis: "horizontal",
+    distribution: activeStepIndex > 0 ? 'space-between' : 'end',
+    padding: 1,
+    spacing: 1
+  }, footerProps), activeStepIndex === 0 && onCancel && /*#__PURE__*/React.createElement(Button, _extends({
+    disabled: sendingPayload,
+    onClick: onCancel,
+    size: "lg",
+    title: "Cancel",
+    variant: "naked"
+  }, buttonProps, cancelButtonProps)), activeStepIndex > 0 && /*#__PURE__*/React.createElement(Button, _extends({
+    disabled: sendingPayload,
+    iconLeft: {
+      name: 'general.leftChevron',
+      size: 'sm'
+    },
+    onClick: function onClick() {
+      return setActiveStepIndex(activeStepIndex - 1);
+    },
+    size: "lg",
+    title: "Back",
+    variant: "naked"
+  }, buttonProps, backButtonProps)), /*#__PURE__*/React.createElement(Button, _extends({
+    disabled: !isCurrentStepValid(),
+    onClick: function onClick() {
+      return activeStepIndex >= totalSteps - 1 ? handleSubmit() : setActiveStepIndex(activeStepIndex + 1);
+    },
+    size: "lg",
+    spinner: sendingPayload,
+    theme: "primary",
+    title: nextButtonTitle({
+      activeStepIndex: activeStepIndex,
+      steps: steps,
+      totalSteps: totalSteps
+    })
+  }, buttonProps, nextButtonProps))))));
+};
+
+export default Wizard;

package/dist/esm/Wizard/WizardContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+var WizardContext = /*#__PURE__*/createContext();
+export default WizardContext;

package/dist/esm/Wizard/index.js

@@ -0,0 +1,4 @@
+import Wizard from './Wizard';
+import Step from './Step';
+Wizard.Step = Step;
+export default Wizard;

package/dist/esm/WrapView/WrapView.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import StackView from '../StackView';
+import { spacingValue } from '../system';
+export function WrapView(_ref) {
+  var children = _ref.children,
+      spacing = _ref.spacing,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["children", "spacing"]);
+
+  var styles = {
+    basis: '100%'
+  };
+
+  if (spacing) {
+    styles.gap = spacingValue(spacing);
+  }
+
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    axis: "horizontal"
+  }, restProps), /*#__PURE__*/React.createElement(StackView, {
+    wrap: true,
+    axis: "horizontal",
+    css: styles
+  }, children));
+}

package/dist/esm/WrapView/index.js

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

package/dist/esm/designTokens/index.js

@@ -0,0 +1,78 @@
+import { default as tokens } from '@planningcenter/tapestry-design-tokens/dist/js/tokens.module';
+var colors = {
+  black10: 'hsl(0 0% 0% / 0.1)',
+  black40: 'hsl(0 0% 0% / 0.4)',
+  black60: 'hsl(0 0% 0% / 0.6)',
+  black80: 'hsl(0 0% 0% / 0.8)',
+  black: 'hsl(0 0% 0%)',
+  lightNeutral07: 'hsl(0 0% 7%)',
+  lightNeutral12: 'hsl(0 0% 12%)',
+  lightNeutral15: 'hsl(0 0% 15%)',
+  lightNeutral17: 'hsl(0 0% 17%)',
+  lightNeutral19: 'hsl(0 0% 19%)',
+  lightNeutral24: 'hsl(0 0% 24%)',
+  lightNeutral32: 'hsl(0 0% 32%)',
+  // NOTE: lightNeutral40 is NOT in Neutral (Grays) in Figma
+  lightNeutral40: 'hsl(0 0% 40%)',
+  lightNeutral45: 'hsl(0 0% 45%)',
+  lightNeutral50: 'hsl(0 0% 50%)',
+  lightNeutral62: 'hsl(0 0% 62%)',
+  lightNeutral68: 'hsl(0 0% 68%)',
+  lightNeutral81: 'hsl(0 0% 81%)',
+  lightNeutral88: 'hsl(0 0% 88%)',
+  lightNeutral93: 'hsl(0 0% 93%)',
+  lightNeutral95: 'hsl(0 0% 95%)',
+  lightNeutral97: 'hsl(0 0% 97%)',
+  lightNeutral98: 'hsl(0 0% 98%)',
+  lightNeutral100: 'hsl(0 0% 100%)',
+  white45: 'hsl(0 0% 100% / 0.45)',
+  white: 'hsl(0 0% 100%)'
+};
+export var designTokens = {
+  button: {
+    borderRadius: tokens.button.borderRadius.value
+  },
+  input: {
+    borderRadius: 4
+  },
+  tabNav: {
+    desktop: {
+      paddingX: 24,
+      selectedTabBackgroundColor: colors.white,
+      spacing: 8
+    },
+    mobile: {
+      backgroundColor: colors.white,
+      borderBottomColor: colors.lightNeutral88,
+      borderBottomStyle: 'solid',
+      borderBottomWidth: 1,
+      paddingX: 16,
+      spacing: 20
+    },
+    tab: {
+      badgeBackgroundColor: colors.black10,
+      badgeFontSize: 12,
+      badgeTextColor: colors.black80,
+      disabledTextColor: colors.black40,
+      iconColor: colors.lightNeutral40,
+      selectedTextColor: colors.black80,
+      textColor: colors.black60,
+      desktop: {
+        activeTextColor: colors.black80,
+        borderRadiusTop: 4,
+        defaultBackgroundColor: colors.white45,
+        hoverTextColor: colors.black80,
+        fontSize: 14,
+        height: 40,
+        paddingX: 16
+      },
+      mobile: {
+        borderBottomWidth: 3,
+        fontSize: 16,
+        height: 44,
+        paddingBottom: 10,
+        paddingTop: 7
+      }
+    }
+  }
+};

package/dist/esm/hooks/index.js

@@ -0,0 +1,8 @@
+export { useDocumentEvent } from './use-document-event';
+export { useFocus } from './use-focus';
+export { useHover } from './use-hover';
+export { useId } from './use-id';
+export { useKeyboardShortcuts } from './use-keyboard-shortcuts';
+export { useMeasure } from './use-measure';
+export { useMediaQuery } from './use-media-query';
+export { useRovingIndex } from './use-roving-index';

package/dist/esm/hooks/use-accessibility-violation.js

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import Icon from '../Icon';
+import StackView from '../StackView';
+import Text from '../Text';
+/**
+ * Provide an on-screen and optional console accessibilty violation.
+ */
+
+var _ref = /*#__PURE__*/React.createElement(StackView, {
+  axis: "horizontal",
+  alignment: "center",
+  spacing: 1
+}, /*#__PURE__*/React.createElement(Icon, {
+  name: "general.exclamationCircle",
+  size: "md",
+  color: "error"
+}), /*#__PURE__*/React.createElement(Text, {
+  fontSize: 3,
+  weight: 500
+}, "Accessibility Violation"));
+
+export function useAccessibilityViolation(
+/** Content to be displayed in tooltip when hovering element. */
+tooltipContent,
+/** Content to be displayed in the console with a reference to the element. */
+consoleContent) {
+  if (process.env.NODE_ENV === 'production') {
+    return {};
+  } else {
+    var wrapperRef = React.useRef(null);
+    var tooltipProps = {
+      title: /*#__PURE__*/React.createElement(StackView, {
+        width: 32,
+        spacing: 1,
+        cursor: "default"
+      }, _ref, /*#__PURE__*/React.createElement(Text, {
+        fontSize: 3,
+        lineHeight: 3
+      }, tooltipContent)),
+      openDelay: 0,
+      closeDelay: 300,
+      popoverProps: {
+        textAlign: 'left',
+        paddingHorizontal: 2,
+        paddingVertical: 2,
+        backgroundColor: 'surface',
+        color: 'foreground',
+        stroke: 'separator',
+        strokeWeight: 1,
+        elevation: 2
+      }
+    };
+    var wrapperProps = {
+      innerRef: wrapperRef,
+      stroke: 'error',
+      strokeAlign: 'outside',
+      strokeWeight: 4
+    };
+    React.useEffect(function () {
+      if (wrapperRef.current) {
+        console.error(consoleContent, wrapperRef.current);
+      }
+    }, []);
+    return {
+      tooltipProps: tooltipProps,
+      wrapperProps: wrapperProps
+    };
+  }
+}

package/dist/esm/hooks/use-document-event.js

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from 'react';
+/**
+ * Provide a callback for any document event type.
+ *
+ * @event {string} type - A valid [DOM event](https://developer.mozilla.org/en-US/docs/Web/Events).
+ * @param {Function} callback - Callback when specified event type occurs.
+ *
+ * @example
+ *
+ * function App() {
+ *   useDocumentEvent('keydown', event => {
+ *     console.log(`${event.key} pressed`)
+ *   })
+ *   return <div>App</div>
+ * }
+ */
+
+export function useDocumentEvent(type, callback) {
+  var savedCallback = useRef(callback);
+  useEffect(function () {
+    savedCallback.current = callback;
+  }, [callback]);
+  useEffect(function () {
+    function handleEvent(event) {
+      savedCallback.current(event);
+    }
+
+    document.addEventListener(type, handleEvent);
+    return function () {
+      document.removeEventListener(type, handleEvent);
+    };
+  }, []);
+}

package/dist/esm/hooks/use-focus.js

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+/**
+ * Determines when one or many elements take focus.
+ *
+ * @returns {{ focus: boolean, focusProps: Object }}
+ */
+
+export function useFocus() {
+  var _useState = useState(false),
+      focus = _useState[0],
+      setFocus = _useState[1];
+
+  return {
+    focus: focus,
+    focusProps: {
+      onFocus: function onFocus() {
+        return setFocus(true);
+      },
+      onBlur: function onBlur() {
+        return setFocus(false);
+      }
+    }
+  };
+}

package/dist/esm/hooks/use-hover.js

@@ -0,0 +1,18 @@
+import { useState } from 'react';
+export function useHover() {
+  var _useState = useState(false),
+      hover = _useState[0],
+      setHover = _useState[1];
+
+  return {
+    hover: hover,
+    hoverProps: {
+      onMouseEnter: function onMouseEnter() {
+        return setHover(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHover(false);
+      }
+    }
+  };
+}

package/dist/esm/hooks/use-id.js

@@ -0,0 +1,20 @@
+// this will eventually be replaced with useOpaqueIdentifier once it is stable:
+// https://github.com/facebook/react/pull/17322
+import { useRef } from 'react';
+var idCounter = 1;
+/**
+ * Generates a unique id based on the provided prefix.
+ * Be aware using the same prefix elsewhere _does not_ generate a unique id.
+ * @param {string} prefix
+ * @returns {string} unique prefixed id
+ */
+
+export function useId(prefix) {
+  var id = useRef(null);
+
+  if (id.current === null) {
+    id.current = prefix + "-" + idCounter++;
+  }
+
+  return id.current;
+}