@planningcenter/tapestry-react 2.10.0-rc.15 → 2.10.0-rc.16

package/dist/cjs/Badge/Status.js

@@ -81,8 +81,7 @@ var Status = function Status(_ref) {
       title: title
     }, restProps));
   }
-}; // @ts-ignore error TS2339: Property 'displayName' does not exist on type 'typeof Status'.
-
+};
 
 Status.displayName = 'Badge.Status';
 var _default = Status;

package/dist/cjs/CheckboxGroup/CheckboxGroup.js

@@ -1,55 +1,38 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _utils = require("../utils");
 
 var _CheckboxGroupContext = _interopRequireDefault(require("./CheckboxGroupContext"));
 
-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) { (0, _defineProperty2["default"])(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; }
-
 var CheckboxGroup = function CheckboxGroup(_ref) {
   var children = _ref.children,
       name = _ref.name,
-      _onChange = _ref.onChange,
+      onChange = _ref.onChange,
       value = _ref.value;
 
-  var _useState = (0, _react.useState)({
-    name: name,
-    value: value,
-    onChange: function onChange(event) {
-      return handleChange(event, value, _onChange);
-    }
-  }),
-      state = _useState[0],
-      setState = _useState[1];
+  var _useState = (0, _react.useState)(value),
+      stateValue = _useState[0],
+      setStateValue = _useState[1];
 
   (0, _react.useEffect)(function () {
-    if (!(0, _utils.shallowEqual)(value, state.value)) {
-      setState(function (s) {
-        return _objectSpread(_objectSpread({}, s), {}, {
-          value: value
-        });
-      });
+    if (!(0, _utils.shallowEqual)(value, stateValue)) {
+      setStateValue(value);
     }
-  }, [value, state.value]);
-
-  var handleChange = function handleChange(event, currentValue, changeCallback) {
+  }, [value, stateValue]);
+  var handleChange = (0, _react.useCallback)(function (event) {
     var _event$target = event.target,
         checked = _event$target.checked,
         checkboxValue = _event$target.value;
-    var newValue = [].concat(currentValue);
+    var newValue = [].concat(stateValue);
 
     if (checked) {
       newValue.push(checkboxValue);
@@ -61,11 +44,15 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
       }
     }
 
-    changeCallback(newValue);
+    onChange(newValue);
+  }, [stateValue, onChange]);
+  var contextValue = {
+    name: name,
+    value: stateValue,
+    onChange: handleChange
   };
-
   return /*#__PURE__*/_react["default"].createElement(_CheckboxGroupContext["default"].Provider, {
-    value: state
+    value: contextValue
   }, children);
 };
 

package/dist/esm/Badge/Status.js

@@ -66,8 +66,7 @@ var Status = function Status(_ref) {
       title: title
     }, restProps));
   }
-}; // @ts-ignore error TS2339: Property 'displayName' does not exist on type 'typeof Status'.
-
+};
 
 Status.displayName = 'Badge.Status';
 export default Status;

package/dist/esm/CheckboxGroup/CheckboxGroup.js

@@ -1,44 +1,27 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-
-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, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { shallowEqual } from '../utils';
 import CheckboxGroupContext from './CheckboxGroupContext';
 
 var CheckboxGroup = function CheckboxGroup(_ref) {
   var children = _ref.children,
       name = _ref.name,
-      _onChange = _ref.onChange,
+      onChange = _ref.onChange,
       value = _ref.value;
 
-  var _useState = useState({
-    name: name,
-    value: value,
-    onChange: function onChange(event) {
-      return handleChange(event, value, _onChange);
-    }
-  }),
-      state = _useState[0],
-      setState = _useState[1];
+  var _useState = useState(value),
+      stateValue = _useState[0],
+      setStateValue = _useState[1];
 
   useEffect(function () {
-    if (!shallowEqual(value, state.value)) {
-      setState(function (s) {
-        return _objectSpread(_objectSpread({}, s), {}, {
-          value: value
-        });
-      });
+    if (!shallowEqual(value, stateValue)) {
+      setStateValue(value);
     }
-  }, [value, state.value]);
-
-  var handleChange = function handleChange(event, currentValue, changeCallback) {
+  }, [value, stateValue]);
+  var handleChange = useCallback(function (event) {
     var _event$target = event.target,
         checked = _event$target.checked,
         checkboxValue = _event$target.value;
-    var newValue = [].concat(currentValue);
+    var newValue = [].concat(stateValue);
 
     if (checked) {
       newValue.push(checkboxValue);
@@ -50,11 +33,15 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
       }
     }
 
-    changeCallback(newValue);
+    onChange(newValue);
+  }, [stateValue, onChange]);
+  var contextValue = {
+    name: name,
+    value: stateValue,
+    onChange: handleChange
   };
-
   return /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
-    value: state
+    value: contextValue
   }, children);
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.10.0-rc.15",
+  "version": "2.10.0-rc.16",
   "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
   "author": "Front End Systems Engineering <frontend@pco.bz>",
   "main": "dist/cjs/index.js",

package/src/Badge/Status.tsx

@@ -84,7 +84,6 @@ const Status = ({
   }
 }
 
-// @ts-ignore error TS2339: Property 'displayName' does not exist on type 'typeof Status'.
 Status.displayName = 'Badge.Status'
 
 export default Status

package/src/CheckboxGroup/CheckboxGroup.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 
 import { shallowEqual } from '../utils'
 
@@ -29,39 +29,39 @@ const CheckboxGroup = ({
   onChange,
   value,
 }: CheckboxGroupProps): JSX.Element => {
-  const [state, setState] = useState({
-    name,
-    value,
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
-      handleChange(event, value, onChange),
-  })
+  const [stateValue, setStateValue] = useState(value)
 
   useEffect(() => {
-    if (!shallowEqual(value, state.value)) {
-      setState((s) => ({ ...s, value }))
+    if (!shallowEqual(value, stateValue)) {
+      setStateValue(value)
     }
-  }, [value, state.value])
+  }, [value, stateValue])
 
-  const handleChange = (
-    event: React.ChangeEvent<HTMLInputElement>,
-    currentValue: string[],
-    changeCallback: (value: string[]) => void
-  ) => {
-    const { checked, value: checkboxValue } = event.target
-    const newValue = [...currentValue]
-    if (checked) {
-      newValue.push(checkboxValue)
-    } else {
-      const index = newValue.indexOf(checkboxValue)
-      if (index > -1) {
-        newValue.splice(index, 1)
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const { checked, value: checkboxValue } = event.target
+      const newValue = [...stateValue]
+      if (checked) {
+        newValue.push(checkboxValue)
+      } else {
+        const index = newValue.indexOf(checkboxValue)
+        if (index > -1) {
+          newValue.splice(index, 1)
+        }
       }
-    }
-    changeCallback(newValue)
+      onChange(newValue)
+    },
+    [stateValue, onChange]
+  )
+
+  const contextValue = {
+    name,
+    value: stateValue,
+    onChange: handleChange,
   }
 
   return (
-    <CheckboxGroupContext.Provider value={state}>
+    <CheckboxGroupContext.Provider value={contextValue}>
       {children}
     </CheckboxGroupContext.Provider>
   )