@planningcenter/tapestry-react 3.0.0 → 4.0.0-rc.1

package/dist/esm/NumberField/NumberField.test.js

@@ -1,293 +0,0 @@
-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, { useState } from 'react';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import userEvent from '@testing-library/user-event';
-import NumberField from './NumberField';
-describe('value', function () {
-  var TestApp = function TestApp(_ref) {
-    var initialValue = _ref.value,
-        props = _objectWithoutPropertiesLoose(_ref, ["value"]);
-
-    var _useState = useState(initialValue),
-        value = _useState[0],
-        setValue = _useState[1];
-
-    var defaultProps = _objectSpread({
-      pad: 0,
-      highlightOnInteraction: false,
-      placeholder: '',
-      autoWidth: false
-    }, props);
-
-    return /*#__PURE__*/React.createElement(NumberField, _extends({
-      "data-testid": "test",
-      value: value,
-      onChange: setValue
-    }, defaultProps));
-  };
-
-  var setup = function setup(props) {
-    var _render = render( /*#__PURE__*/React.createElement(TestApp, props)),
-        getByTestId = _render.getByTestId;
-
-    return getByTestId('test');
-  };
-
-  it('renders', function () {
-    var numberField = setup({
-      value: 5
-    });
-    expect(numberField).toHaveValue('5');
-  });
-  it('pads if asked to', function () {
-    var numberField = setup({
-      value: 5,
-      pad: 2
-    });
-    expect(numberField).toHaveValue('05');
-  });
-  it('uses placeholder when empty', function () {
-    var placeholder = 'pick something!';
-    var numberField = setup({
-      placeholder: placeholder
-    });
-    expect(numberField).toHaveAttribute('placeholder', placeholder);
-  });
-  describe('min', function () {
-    it('is used if typed value is lower after blur', function () {
-      var numberField = setup({
-        value: 2,
-        min: 1
-      });
-      userEvent.type(numberField, '{backspace}0');
-      userEvent.tab();
-      expect(numberField).toHaveValue('1');
-    });
-    it('prevents arrow down from going below', function () {
-      var numberField = setup({
-        value: 1,
-        min: 1
-      });
-      userEvent.type(numberField, '{arrowdown}');
-      expect(numberField).toHaveValue('1');
-    });
-  });
-  describe('max', function () {
-    it('is used if typed value is higher after blur', function () {
-      var numberField = setup({
-        value: 0,
-        max: 1
-      });
-      userEvent.type(numberField, '2');
-      userEvent.tab();
-      expect(numberField).toHaveValue('1');
-    });
-    it('prevents arrow up from going above', function () {
-      var numberField = setup({
-        value: 1,
-        max: 1
-      });
-      userEvent.type(numberField, '{arrowup}');
-      expect(numberField).toHaveValue('1');
-    });
-  });
-  describe('pad', function () {
-    it('add appropriate pad', function () {
-      var numberField = setup({
-        value: 0,
-        pad: 2
-      });
-      userEvent.type(numberField, '12{backspace}');
-      expect(numberField).toHaveValue('01');
-    });
-  });
-});
-
-var _ref2 = /*#__PURE__*/React.createElement("input", {
-  "data-testid": "test-b"
-});
-
-describe('moveFocusOnMax', function () {
-  var TestApp = function TestApp(props) {
-    var _useState2 = useState(0),
-        value = _useState2[0],
-        setValue = _useState2[1];
-
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NumberField, _extends({}, props, {
-      "data-testid": "test-a",
-      value: value,
-      onChange: setValue
-    })), _ref2);
-  };
-
-  var setup = function setup() {
-    var props = {
-      max: 12,
-      pad: 2,
-      moveFocusOnMax: true
-    };
-
-    var _render2 = render( /*#__PURE__*/React.createElement(TestApp, props)),
-        getByTestId = _render2.getByTestId;
-
-    return [getByTestId('test-a'), getByTestId('test-b')];
-  };
-
-  it('moves focus when any further input would exceed max', function () {
-    var _setup = setup(),
-        numberField = _setup[0],
-        nextTabbable = _setup[1];
-
-    userEvent.type(numberField, '2');
-    jest.runAllTimers();
-    expect(nextTabbable).toHaveFocus();
-  });
-  it('does not move focus when some further input is possible without exceeding max', function () {
-    var _setup2 = setup(),
-        numberField = _setup2[0],
-        nextTabbable = _setup2[1];
-
-    userEvent.type(numberField, '1'); // (10, 11, 12) are still possible
-
-    jest.runAllTimers();
-    expect(numberField).toHaveFocus();
-  });
-});
-describe('ignoredKeys', function () {
-  var TestApp = function TestApp(props) {
-    var _useState3 = useState(1),
-        value = _useState3[0],
-        setValue = _useState3[1];
-
-    return /*#__PURE__*/React.createElement(NumberField, _extends({}, props, {
-      "data-testid": "test",
-      value: value,
-      onChange: setValue
-    }));
-  };
-
-  var setup = function setup() {
-    var props = {
-      ignoredKeys: ['ArrowUp', 'ArrowDown']
-    };
-
-    var _render3 = render( /*#__PURE__*/React.createElement(TestApp, props)),
-        getByTestId = _render3.getByTestId;
-
-    return getByTestId('test');
-  };
-
-  it('prevents specified keys from changing values', function () {
-    var numberField = setup();
-    userEvent.type(numberField, '{arrowup}');
-    jest.runAllTimers();
-    expect(numberField).toHaveValue('1');
-    userEvent.type(numberField, '{arrowdown}');
-    jest.runAllTimers();
-    expect(numberField).toHaveValue('1');
-  });
-  it('allows other keys from change the value', function () {
-    var numberField = setup();
-    userEvent.type(numberField, '2');
-    jest.runAllTimers();
-    expect(numberField).toHaveValue('12');
-  });
-});
-describe('use buttons to increment/decrement value', function () {
-  var TestApp = function TestApp(props) {
-    var _useState4 = useState(1),
-        value = _useState4[0],
-        setValue = _useState4[1];
-
-    return /*#__PURE__*/React.createElement(NumberField, _extends({}, props, {
-      "data-testid": "test",
-      hasControls: true,
-      onChange: setValue,
-      value: value
-    }));
-  };
-
-  var _ref3 = /*#__PURE__*/React.createElement(TestApp, {
-    step: 1
-  });
-
-  it('user input: pointer', function () {
-    var _render4 = render(_ref3),
-        container = _render4.container;
-
-    var input = container.querySelector('input');
-    var decrementButton = container.querySelector('[aria-label="Decrement by 1"]');
-    var incrementButton = container.querySelector('[aria-label="Increment by 1"]');
-    expect(decrementButton).toBeInTheDocument();
-    expect(incrementButton).toBeInTheDocument();
-    expect(input).toHaveValue('1');
-    userEvent.click(incrementButton);
-    expect(input).toHaveValue('2');
-    userEvent.click(incrementButton);
-    expect(input).toHaveValue('3');
-    userEvent.click(decrementButton);
-    expect(input).toHaveValue('2');
-    userEvent.click(decrementButton);
-    expect(input).toHaveValue('1');
-  });
-
-  var _ref4 = /*#__PURE__*/React.createElement(TestApp, {
-    step: 1
-  });
-
-  it('user input: keyboard', function () {
-    var _render5 = render(_ref4),
-        container = _render5.container;
-
-    var input = container.querySelector('input');
-    var decrementButton = container.querySelector('[aria-label="Decrement by 1"]');
-    var incrementButton = container.querySelector('[aria-label="Increment by 1"]');
-    expect(decrementButton).toBeInTheDocument();
-    expect(incrementButton).toBeInTheDocument();
-    expect(input).toHaveValue('1');
-    userEvent.tab(); // focus on input
-
-    userEvent.tab(); // focus on "increment button"
-
-    userEvent.keyboard('{enter}');
-    expect(input).toHaveValue('2');
-    userEvent.keyboard('{enter}');
-    expect(input).toHaveValue('3');
-    userEvent.tab(); // focus on "decrement button"
-
-    userEvent.keyboard('{enter}');
-    expect(input).toHaveValue('2');
-  });
-
-  var _ref5 = /*#__PURE__*/React.createElement(TestApp, {
-    step: 5
-  });
-
-  it('user input: pointer w/ custom step', function () {
-    var _render6 = render(_ref5),
-        container = _render6.container;
-
-    var input = container.querySelector('input');
-    var decrementButton = container.querySelector('[aria-label="Decrement by 5"]');
-    var incrementButton = container.querySelector('[aria-label="Increment by 5"]');
-    expect(decrementButton).toBeInTheDocument();
-    expect(incrementButton).toBeInTheDocument();
-    expect(input).toHaveValue('1');
-    userEvent.click(incrementButton);
-    expect(input).toHaveValue('6');
-    userEvent.click(incrementButton);
-    expect(input).toHaveValue('11');
-    userEvent.click(decrementButton);
-    expect(input).toHaveValue('6');
-    userEvent.click(decrementButton);
-    expect(input).toHaveValue('1');
-  });
-});

package/dist/esm/NumberField/index.js

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

package/dist/esm/Page/PageActions.js

@@ -1,17 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
-import StackView from '../StackView';
-
-function PageActions(props) {
-  return /*#__PURE__*/React.createElement(StackView, _extends({
-    alignment: "center",
-    alignSelf: "end",
-    axis: "horizontal",
-    distribution: "end",
-    flex: "1",
-    paddingBottom: 2,
-    spacing: 1
-  }, props));
-}
-
-export default PageActions;

package/dist/esm/Page/PageBody.js

@@ -1,43 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { Children, cloneElement } from 'react';
-import { useThemeValue } from '../system';
-import StackView from '../StackView';
-
-function PageBody(_ref) {
-  var children = _ref.children,
-      inset = _ref.inset,
-      sidebar = _ref.sidebar,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["children", "inset", "sidebar"]);
-
-  var themeProps = useThemeValue('pageBody');
-  var childrenToRender = sidebar ? Children.toArray([/*#__PURE__*/cloneElement(sidebar, {
-    basis: 28
-  }), /*#__PURE__*/React.createElement(StackView, {
-    grow: 1,
-    padding: 3,
-    shrink: 1
-  }, children)]) : children;
-  return /*#__PURE__*/React.createElement(StackView, _extends({
-    padding: sidebar && !inset ? 0 : 3,
-    backgroundColor: "backgroundSecondary",
-    mediaQueries: {
-      md: {
-        axis: sidebar && !inset ? 'horizontal' : undefined
-      }
-    }
-  }, themeProps, restProps), inset ? /*#__PURE__*/React.createElement(StackView, {
-    borderColor: "separatorSecondary",
-    borderWidth: 1,
-    mediaQueries: {
-      md: {
-        axis: sidebar ? 'horizontal' : undefined
-      }
-    },
-    padding: sidebar ? null : 3,
-    radius: 3,
-    shrink: 1
-  }, childrenToRender) : childrenToRender);
-}
-
-export default PageBody;

package/dist/esm/Page/PageButton.js

@@ -1,13 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
-import { useThemeValue } from '../system';
-import Button from '../Button';
-
-function PageButton(props) {
-  var themeProps = useThemeValue('pageButton');
-  return /*#__PURE__*/React.createElement(Button, _extends({
-    theme: "white"
-  }, themeProps, props));
-}
-
-export default PageButton;

package/dist/esm/Page/PageDropdown.js

@@ -1,14 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
-import { useThemeValue } from '../system';
-import Dropdown from '../Dropdown';
-
-function PageDropdown(props) {
-  var themeProps = useThemeValue('pageDropdown');
-  return /*#__PURE__*/React.createElement(Dropdown, _extends({
-    theme: "white",
-    variant: "outline"
-  }, themeProps, props));
-}
-
-export default PageDropdown;

package/dist/esm/Page/PageHeader.js

@@ -1,33 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React from 'react';
-import { useThemeValue } from '../system';
-import StackView from '../StackView';
-
-function PageHeader(_ref) {
-  var children = _ref.children,
-      toolbar = _ref.toolbar,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["children", "toolbar"]);
-
-  var themeProps = useThemeValue('pageHeader');
-  return /*#__PURE__*/React.createElement(StackView, _extends({
-    as: "header",
-    axis: "vertical",
-    backgroundColor: "primary-light",
-    paddingHorizontal: 2,
-    minHeight: 8,
-    mediaQueries: {
-      sm: {
-        paddingHorizontal: 3
-      }
-    },
-    spacing: 0
-  }, themeProps, restProps), children && /*#__PURE__*/React.createElement(StackView, {
-    alignment: "center",
-    axis: "horizontal",
-    paddingTop: 2,
-    width: "100%"
-  }, children), toolbar);
-}
-
-export default PageHeader;

package/dist/esm/Page/PageTab.js

@@ -1,19 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
-import Tab from '../Tab';
-import { useThemeValue } from '../system';
-
-function PageTab(props) {
-  var themeProps = useThemeValue('pageTab');
-  return /*#__PURE__*/React.createElement(Tab, _extends({
-    mediaQueries: {
-      sm: {
-        paddingHorizontal: 3
-      }
-    },
-    paddingHorizontal: 1.5,
-    size: "lg"
-  }, themeProps, props));
-}
-
-export default PageTab;

package/dist/esm/Page/PageTabList.js

@@ -1,11 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
-import StackView from '../StackView';
-export default function PageTabList(props) {
-  return /*#__PURE__*/React.createElement(StackView, _extends({
-    axis: "horizontal",
-    paddingTop: 2,
-    spacing: 0.5,
-    alignSelf: "end"
-  }, props));
-}

package/dist/esm/Page/PageTitle.js

@@ -1,15 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
-import { useThemeValue } from '../system';
-import Heading from '../Heading';
-
-function PageTitle(props) {
-  var themeProps = useThemeValue('pageTitle');
-  return /*#__PURE__*/React.createElement(Heading, _extends({
-    color: "white",
-    fontSize: "25px",
-    level: 2
-  }, themeProps, props));
-}
-
-export default PageTitle;

package/dist/esm/Page/PageToolbar.js

@@ -1,36 +0,0 @@
-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 { useThemeValue } from '../system';
-
-function PageToolbar(_ref) {
-  var _mediaQueries;
-
-  var stackBelow = _ref.stackBelow,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["stackBelow"]);
-
-  var themeBreakpoints = useThemeValue('breakpoints');
-  var breakpoint = Object.keys(themeBreakpoints).includes(stackBelow) ? stackBelow : 'sm';
-  var stackProps = stackBelow ? {
-    axis: 'vertical',
-    alignment: 'stretch',
-    spacing: 2,
-    mediaQueries: (_mediaQueries = {}, _mediaQueries[breakpoint] = {
-      axis: 'horizontal',
-      alignment: 'center',
-      paddingBottom: 0,
-      spacing: 0
-    }, _mediaQueries)
-  } : null;
-  return /*#__PURE__*/React.createElement(StackView, _extends({
-    alignment: "center",
-    axis: "horizontal",
-    distribution: "space-between",
-    flex: 1,
-    spacing: 2,
-    width: "100%"
-  }, stackProps, restProps));
-}
-
-export default PageToolbar;

package/dist/esm/Page/index.js

@@ -1,10 +0,0 @@
-import PageActions from './PageActions';
-import PageBody from './PageBody';
-import PageButton from './PageButton';
-import PageDropdown from './PageDropdown';
-import PageHeader from './PageHeader';
-import PageTab from './PageTab';
-import PageTabList from './PageTabList';
-import PageTitle from './PageTitle';
-import PageToolbar from './PageToolbar';
-export { PageActions, PageBody, PageButton, PageDropdown, PageHeader, PageTab, PageTabList, PageTitle, PageToolbar };