@cloudflare/component-page 9.2.12 → 9.2.13

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 9.2.13
+
+### Patch Changes
+
+- 0b80625bc2: Pass through additional props to the Main Component from Page Component
+
+  This enable a user to provide props that override the default props used with the <Main /> component inside Page.tsx.
+
 ## 9.2.12
 
 ### Patch Changes

package/es/Page.js

@@ -1,3 +1,11 @@
+var _excluded = ["title", "parentPageLabel", "description", "documentationLabel", "documentationHref", "centerHeader", "beta", "testId", "className", "sidebar", "type", "sidebarPosition", "autofocus", "control", "titleRef", "parentPageLabelRef", "children", "navigation", "onDocumentationButtonClick", "documentationAsButton"];
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 import React, { useEffect, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 import { createStyledComponent } from '@cloudflare/style-container';
@@ -139,7 +147,9 @@ var Page = _ref2 => {
     navigation,
     onDocumentationButtonClick,
     documentationAsButton
-  } = _ref2;
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
   var history = useHistory();
   var skipTargetRef = useRef(null);
   var path = history === null || history === void 0 ? void 0 : (_history$location = history.location) === null || _history$location === void 0 ? void 0 : _history$location.pathname;
@@ -156,13 +166,13 @@ var Page = _ref2 => {
     }
   }, [path]);
   var sidebarInside = sidebarPosition === 'inside';
-  return /*#__PURE__*/React.createElement(Main, {
+  return /*#__PURE__*/React.createElement(Main, _extends({
     "data-testid": testId,
     className: className,
     display: sidebar && sidebarInside ? undefined : 'flex',
     py: 4,
     mb: 4
-  }, /*#__PURE__*/React.createElement(Div, {
+  }, props), /*#__PURE__*/React.createElement(Div, {
     ml: "auto",
     mr: sidebar && !sidebarInside ? 0 : 'auto',
     display: sidebar && sidebarInside ? ['block', 'block', 'flex'] : undefined,

package/lib/Page.js

@@ -29,10 +29,18 @@ var _componentIcon = require("@cloudflare/component-icon");
 
 var _componentButton = require("@cloudflare/component-button");
 
+var _excluded = ["title", "parentPageLabel", "description", "documentationLabel", "documentationHref", "centerHeader", "beta", "testId", "className", "sidebar", "type", "sidebarPosition", "autofocus", "control", "titleRef", "parentPageLabelRef", "children", "navigation", "onDocumentationButtonClick", "documentationAsButton"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 var maxWidthByType = {
   narrow: '64em',
   wide: '79em',
@@ -164,7 +172,9 @@ var Page = function Page(_ref2) {
       children = _ref2.children,
       navigation = _ref2.navigation,
       onDocumentationButtonClick = _ref2.onDocumentationButtonClick,
-      documentationAsButton = _ref2.documentationAsButton;
+      documentationAsButton = _ref2.documentationAsButton,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
   var history = (0, _reactRouterDom.useHistory)();
   var skipTargetRef = (0, _react.useRef)(null);
   var path = history === null || history === void 0 ? void 0 : (_history$location = history.location) === null || _history$location === void 0 ? void 0 : _history$location.pathname;
@@ -181,13 +191,13 @@ var Page = function Page(_ref2) {
     }
   }, [path]);
   var sidebarInside = sidebarPosition === 'inside';
-  return /*#__PURE__*/_react.default.createElement(_elements.Main, {
+  return /*#__PURE__*/_react.default.createElement(_elements.Main, _extends({
     "data-testid": testId,
     className: className,
     display: sidebar && sidebarInside ? undefined : 'flex',
     py: 4,
     mb: 4
-  }, /*#__PURE__*/_react.default.createElement(_elements.Div, {
+  }, props), /*#__PURE__*/_react.default.createElement(_elements.Div, {
     ml: "auto",
     mr: sidebar && !sidebarInside ? 0 : 'auto',
     display: sidebar && sidebarInside ? ['block', 'block', 'flex'] : undefined,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-page",
   "description": "Cloudflare Page Component",
-  "version": "9.2.12",
+  "version": "9.2.13",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",

package/src/Page.tsx

@@ -195,7 +195,8 @@ const Page = ({
   children,
   navigation,
   onDocumentationButtonClick,
-  documentationAsButton
+  documentationAsButton,
+  ...props
 }: Props) => {
   const history = useHistory();
   const skipTargetRef = useRef<HTMLAnchorElement>(null);
@@ -223,6 +224,7 @@ const Page = ({
       display={sidebar && sidebarInside ? undefined : 'flex'}
       py={4}
       mb={4}
+      {...props}
     >
       <Div
         ml="auto"