@planningcenter/tapestry-react 2.3.0 → 2.5.0

package/dist/cjs/Button/Button.js

@@ -54,8 +54,10 @@ function Button(_ref) {
       title = _ref.title,
       to = _ref.to,
       tooltip = _ref.tooltip,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'button' : _ref$type,
       variant = _ref.variant,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children", "disabled", "external", "icon", "iconLeft", "iconRight", "onClick", "onKeyDown", "size", "spinner", "square", "theme", "title", "to", "tooltip", "variant"]);
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children", "disabled", "external", "icon", "iconLeft", "iconRight", "onClick", "onKeyDown", "size", "spinner", "square", "theme", "title", "to", "tooltip", "type", "variant"]);
   var buttonThemes = (0, _system.useThemeValue)('button.themes');
 
   var _useBoxSize = (0, _system.useBoxSize)(size),
@@ -80,7 +82,8 @@ function Button(_ref) {
     strokeAlign: 'inside',
     strokeWeight: 1,
     userSelect: 'none',
-    zIndex: 1
+    zIndex: 1,
+    type: type
   };
   var spinnerColor;
 
@@ -229,12 +232,13 @@ function Button(_ref) {
 
 
   if (restProps.as) {
-    buttonProps.to = to;
-  } // set button type to prevent nested buttons from unintentionally submiting forms 
+    buttonProps.to = to; // remove type if it is not a button
 
-
-  if (buttonProps.as === "button") {
-    buttonProps.type = "button";
+    if (restProps.as !== "button") {
+      buttonProps = _objectSpread(_objectSpread({}, buttonProps), {}, {
+        type: null
+      });
+    }
   }
 
   if (process.env.NODE_ENV !== 'production') {
@@ -255,8 +259,8 @@ function Button(_ref) {
       restProps = (0, _utils.mergeProps)(restProps, wrapperProps);
     }
 
-    if (restProps['type'] === 'submit') {
-      throw Error("Tapestry-React: <Button/> does not support type=\"submit\" please add an explicit onClick handler.");
+    if (type && restProps.as && restProps.as !== "button") {
+      throw Error("Tapestry-React: <Button/> type prop is only supported by <button> and not <" + restProps.as + ">.");
     }
   }
 

package/dist/cjs/Scrim/Scrim.js

@@ -30,7 +30,7 @@ var Scrim = /*#__PURE__*/React.forwardRef(function (props, _ref) {
     zIndex: 10000,
     overflow: "auto" // @ts-ignore
     ,
-    backgroundColor: "hsla(0,0%,0%,0.74)"
+    backgroundColor: "hsla(0,0%,0%,0.4)"
   }, props));
 });
 exports.Scrim = Scrim;

package/dist/cjs/Sidebar/Sidebar.js

@@ -42,7 +42,7 @@ function Sidebar(_ref) {
   }, restProps), (0, _react.jsx)(_reactStickyBox["default"], {
     css: flexColumnCss
   }, _react2.Children.map(children, function (child) {
-    if (child && child.type !== Sidebar.List || child && child.type !== Sidebar.Item) {
+    if (child && child.type !== Sidebar.List && child.type !== Sidebar.Item) {
       console.warn("Invalid component nesting. " + child.type + " cannot appear as a child of <Sidebar>. Only <Sidebar.List/> or <Sidebar.Item/> may be used.");
     }
 

package/dist/esm/Button/Button.js

@@ -46,8 +46,10 @@ export function Button(_ref) {
       title = _ref.title,
       to = _ref.to,
       tooltip = _ref.tooltip,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'button' : _ref$type,
       variant = _ref.variant,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["children", "disabled", "external", "icon", "iconLeft", "iconRight", "onClick", "onKeyDown", "size", "spinner", "square", "theme", "title", "to", "tooltip", "variant"]);
+      restProps = _objectWithoutPropertiesLoose(_ref, ["children", "disabled", "external", "icon", "iconLeft", "iconRight", "onClick", "onKeyDown", "size", "spinner", "square", "theme", "title", "to", "tooltip", "type", "variant"]);
 
   var buttonThemes = useThemeValue('button.themes');
 
@@ -73,7 +75,8 @@ export function Button(_ref) {
     strokeAlign: 'inside',
     strokeWeight: 1,
     userSelect: 'none',
-    zIndex: 1
+    zIndex: 1,
+    type: type
   };
   var spinnerColor;
 
@@ -222,12 +225,13 @@ export function Button(_ref) {
 
 
   if (restProps.as) {
-    buttonProps.to = to;
-  } // set button type to prevent nested buttons from unintentionally submiting forms 
+    buttonProps.to = to; // remove type if it is not a button
 
-
-  if (buttonProps.as === "button") {
-    buttonProps.type = "button";
+    if (restProps.as !== "button") {
+      buttonProps = _objectSpread(_objectSpread({}, buttonProps), {}, {
+        type: null
+      });
+    }
   }
 
   if (process.env.NODE_ENV !== 'production') {
@@ -240,8 +244,8 @@ export function Button(_ref) {
       restProps = mergeProps(restProps, wrapperProps);
     }
 
-    if (restProps['type'] === 'submit') {
-      throw Error("Tapestry-React: <Button/> does not support type=\"submit\" please add an explicit onClick handler.");
+    if (type && restProps.as && restProps.as !== "button") {
+      throw Error("Tapestry-React: <Button/> type prop is only supported by <button> and not <" + restProps.as + ">.");
     }
   }
 

package/dist/esm/Scrim/Scrim.js

@@ -18,7 +18,7 @@ var Scrim = /*#__PURE__*/React.forwardRef(function (props, _ref) {
     zIndex: 10000,
     overflow: "auto" // @ts-ignore
     ,
-    backgroundColor: "hsla(0,0%,0%,0.74)"
+    backgroundColor: "hsla(0,0%,0%,0.4)"
   }, props));
 });
 export { Scrim };

package/dist/esm/Sidebar/Sidebar.js

@@ -28,7 +28,7 @@ function Sidebar(_ref) {
   }, restProps), jsx(StickyBox, {
     css: flexColumnCss
   }, Children.map(children, function (child) {
-    if (child && child.type !== Sidebar.List || child && child.type !== Sidebar.Item) {
+    if (child && child.type !== Sidebar.List && child.type !== Sidebar.Item) {
       console.warn("Invalid component nesting. " + child.type + " cannot appear as a child of <Sidebar>. Only <Sidebar.List/> or <Sidebar.Item/> may be used.");
     }
 

package/dist/types/Button/Button.d.ts

@@ -64,6 +64,10 @@ declare type ButtonProps = {
      * Wraps button in a [`<Tooltip />`](./tooltip). Accepts any valid Tooltip props.
      */
     tooltip?: string | Object;
+    /**
+     * Sets the button type to `button`, `submit`, or `reset`. Default is `button`. Type is only valid for `<button>`s.
+     */
+    type?: 'button' | 'submit' | 'reset';
     /**
      * Determines the modified style of the button.
      */
@@ -74,7 +78,7 @@ declare type ButtonProps = {
     mediaQueries?: object;
 } & StackViewProps;
 declare type Props = React.RefAttributes<any> & React.HTMLAttributes<any> & ButtonProps & MediaQueries<ButtonProps>;
-export declare function Button({ children, disabled, external, icon, iconLeft, iconRight, onClick, onKeyDown, size, spinner, square, theme, title, to, tooltip, variant, ...restProps }: Props): JSX.Element;
+export declare function Button({ children, disabled, external, icon, iconLeft, iconRight, onClick, onKeyDown, size, spinner, square, theme, title, to, tooltip, type, variant, ...restProps }: Props): JSX.Element;
 export declare namespace Button {
     var Input: React.ForwardRefExoticComponent<Pick<React.RefAttributes<any> & React.HTMLAttributes<any> & {
         children: React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any>) | (new (props: any) => React.Component<any, any, any>)> | ((inputProps: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "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",
@@ -88,7 +88,7 @@
     "typescript": "^4.1.5"
   },
   "dependencies": {
-    "@planningcenter/icons": "^14.0.0",
+    "@planningcenter/icons": "^14.11.0",
     "@planningcenter/react-beautiful-dnd": "^13.2.1",
     "@popmotion/popcorn": "^0.4.4",
     "@popperjs/core": "^2.11.6",

package/src/Button/Button.tsx

@@ -91,6 +91,11 @@ type ButtonProps = {
    */
   tooltip?: string | Object
 
+  /**
+   * Sets the button type to `button`, `submit`, or `reset`. Default is `button`. Type is only valid for `<button>`s.
+   */
+  type?: 'button' | 'submit' | 'reset'
+
   /**
    * Determines the modified style of the button.
    */
@@ -125,6 +130,7 @@ export function Button({
   title,
   to,
   tooltip,
+  type = 'button',
   variant,
   ...restProps
 }: Props) {
@@ -153,6 +159,7 @@ export function Button({
     strokeWeight: 1,
     userSelect: 'none',
     zIndex: 1,
+    type,
   }
 
   let spinnerColor
@@ -296,11 +303,14 @@ export function Button({
   // pass to if as is defined
   if ((restProps as any).as) {
     buttonProps.to = to
-  }
 
-  // set button type to prevent nested buttons from unintentionally submiting forms 
-  if (buttonProps.as === "button") {
-    buttonProps.type = "button"
+    // remove type if it is not a button
+    if ((restProps as any).as !== "button") {
+      buttonProps = {
+        ...buttonProps,
+        type: null,
+      }
+    }
   }
 
   if (process.env.NODE_ENV !== 'production') {
@@ -330,9 +340,14 @@ export function Button({
       tooltip = tooltipProps
       restProps = mergeProps(restProps, wrapperProps)
     }
-    if (restProps['type'] === 'submit') {
+
+    if (
+      type &&
+      (restProps as any).as &&
+      (restProps as any).as !== "button"
+    ) {
       throw Error(
-        `Tapestry-React: <Button/> does not support type="submit" please add an explicit onClick handler.`
+        `Tapestry-React: <Button/> type prop is only supported by <button> and not <${(restProps as any).as}>.`
       )
     }
   }

package/src/Scrim/Scrim.tsx

@@ -26,7 +26,7 @@ const Scrim = React.forwardRef(function (props: ScrimProps, _ref: any) {
       zIndex={10000}
       overflow="auto"
       // @ts-ignore
-      backgroundColor="hsla(0,0%,0%,0.74)"
+      backgroundColor="hsla(0,0%,0%,0.4)"
       {...props}
     />
   )

package/src/Sidebar/Sidebar.js

@@ -30,8 +30,9 @@ function Sidebar({ children, ...restProps }: Props) {
       <StickyBox css={flexColumnCss}>
         {Children.map(children, (child) => {
           if (
-            (child && child.type !== Sidebar.List) ||
-            (child && child.type !== Sidebar.Item)
+            child &&
+            child.type !== Sidebar.List &&
+            child.type !== Sidebar.Item
           ) {
             console.warn(
               `Invalid component nesting. ${child.type} cannot appear as a child of <Sidebar>. Only <Sidebar.List/> or <Sidebar.Item/> may be used.`