@cloudflare/component-page 10.1.21 → 11.0.1

package/lib/Heading.js

@@ -103,8 +103,6 @@ function Heading(_ref5) {
 
     return /*#__PURE__*/_react.default.createElement(Heading, _extends({
       role: role
-    }, props, {
-      "data-source-file": "@cloudflare/component-page:src/Heading.tsx:104"
-    }));
+    }, props));
   });
 }

package/lib/Page.js

@@ -9,8 +9,6 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactRouterDom = require("react-router-dom");
-
 var _styleContainer = require("@cloudflare/style-container");
 
 var _elements = require("@cloudflare/elements");
@@ -31,6 +29,8 @@ var _componentButton = require("@cloudflare/component-button");
 
 var _componentTooltip = require("@cloudflare/component-tooltip");
 
+var _utilCl1CompatRouter = require("@cloudflare/util-cl1-compat-router");
+
 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); }
@@ -69,68 +69,55 @@ var PageHeader = function PageHeader(_ref) {
   var titlesCount = Math.min([title, description].filter(Boolean).length, 2);
   var isMobile = (0, _utilResponsive.useIsMobile)();
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, navigation && !isMobile && /*#__PURE__*/_react.default.createElement(_elements.Div, {
-    mb: 4,
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:72"
+    mb: 4
   }, navigation), /*#__PURE__*/_react.default.createElement(_elements.Div, {
     display: control ? ['block', 'flex'] : 'block',
     justifyContent: "space-between",
-    mb: headerVisible ? 3 : 0,
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:73"
+    mb: headerVisible ? 3 : 0
   }, /*#__PURE__*/_react.default.createElement(_elements.Header, {
-    textAlign: centerHeader ? 'center' : undefined,
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:78"
+    textAlign: centerHeader ? 'center' : undefined
   }, parentPageLabel && /*#__PURE__*/_react.default.createElement(_elements.P, {
     my: 0,
     lineHeight: 1.5,
     color: "gray.3",
     fontWeight: 600,
-    innerRef: parentPageLabelRef,
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:80"
+    innerRef: parentPageLabelRef
   }, parentPageLabel), title && /*#__PURE__*/_react.default.createElement(_elements.Div, {
     display: "flex",
-    alignItems: "center",
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:91"
+    alignItems: "center"
   }, /*#__PURE__*/_react.default.createElement(_Heading.Heading, {
     mt: 0,
     mb: 2,
-    innerRef: titleRef,
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:92"
+    innerRef: titleRef
   }, isMobile && navigation && /*#__PURE__*/_react.default.isValidElement(navigation) && /*#__PURE__*/_react.default.createElement(_componentLink.Link, {
     mr: 2,
-    onClick: navigation.props.onClick,
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:94"
+    onClick: navigation.props.onClick
   }, /*#__PURE__*/_react.default.createElement(_componentIcon.Icon, {
-    type: "backward",
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:95"
+    type: "backward"
   })), title), beta && /*#__PURE__*/_react.default.createElement(_componentLabel.Label, {
     hue: "orange",
     mx: 2,
-    verticalAlign: "middle",
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:101"
+    verticalAlign: "middle"
   }, /*#__PURE__*/_react.default.createElement(_intlReact.Trans, {
     _: "Beta",
-    id: "common.beta",
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:102"
+    id: "common.beta"
   }))), description && /*#__PURE__*/_react.default.createElement(_elements.P, {
     color: "gray.3",
     mt: 0,
     mb: documentationHref ? 2 : 3,
     lineHeight: 1.25,
     fontWeight: 400,
-    wordBreak: "break-word",
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:108"
+    wordBreak: "break-word"
   }, description), documentationAsButton && !isMobile ? /*#__PURE__*/_react.default.createElement(_componentTooltip.Tooltip, {
     place: "right",
     message: /*#__PURE__*/_react.default.createElement(_intlReact.Trans, {
       id: "common.open_documentation",
-      _: 'Open documentation',
-      "data-source-file": "@cloudflare/component-page:src/Page.tsx:123"
+      _: 'Open documentation'
     }),
     Component: _elements.Span,
     buttonProps: {
       width: 'fit-content'
-    },
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:120"
+    }
   }, /*#__PURE__*/_react.default.createElement(_componentButton.Button, {
     type: "primary",
     borderRadius: '20vh',
@@ -139,23 +126,19 @@ var PageHeader = function PageHeader(_ref) {
     onClick: onDocumentationButtonClick,
     px: 3,
     py: 1,
-    ariaLabel: "open documentation - ".concat(documentationLabel),
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:131"
+    ariaLabel: "open documentation - ".concat(documentationLabel)
   }, documentationLabel)) : documentationHref && /*#__PURE__*/_react.default.createElement(_componentLink.DocumentationLink, {
     fontSize: 2,
     iconSize: 14,
     mb: [3, 0],
     href: documentationHref,
-    display: "inline-block",
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:146"
+    display: "inline-block"
   }, documentationLabel ? documentationLabel : /*#__PURE__*/_react.default.createElement(_intlReact.Trans, {
     id: "common.documentation",
-    _: 'Documentation',
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:156"
+    _: 'Documentation'
   }))), control), /*#__PURE__*/_react.default.createElement(_Heading.Section, {
     level: titlesCount,
-    offset: maxPageTitles - titlesCount,
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:164"
+    offset: maxPageTitles - titlesCount
   }, children));
 };
 
@@ -206,21 +189,23 @@ var Page = function Page(_ref2) {
       documentationAsButton = _ref2.documentationAsButton,
       props = _objectWithoutProperties(_ref2, _excluded);
 
-  var location = (0, _reactRouterDom.useLocation)();
   var skipTargetRef = (0, _react.useRef)(null);
-  var path = location === null || location === void 0 ? void 0 : location.pathname;
+
+  var _useLocation = (0, _utilCl1CompatRouter.useLocation)(),
+      pathname = _useLocation.pathname;
+
   (0, _react.useEffect)(function () {
     // If autofocus is enabled, then focus will move to the title block when
     // the page is navigated to (but not when the dash is first loaded)
     if (autofocus) {
       if (!firstPage) {
-        firstPage = path;
-      } else if (firstPage !== path || !firstLoad) {
+        firstPage = pathname;
+      } else if (firstPage !== pathname || !firstLoad) {
         focus(skipTargetRef.current);
         firstLoad = false;
       }
     }
-  }, [path]);
+  }, [pathname]);
   var sidebarInside = sidebarPosition === 'inside';
   return /*#__PURE__*/_react.default.createElement(_elements.Main, _extends({
     "data-testid": testId,
@@ -228,25 +213,20 @@ var Page = function Page(_ref2) {
     display: sidebar && sidebarInside ? undefined : 'flex',
     py: 4,
     mb: 4
-  }, props, {
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:237"
-  }), /*#__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,
     width: type === 'unbounded' ? '100%' : '90%',
-    maxWidth: maxWidthByType[type] || maxWidthByType.narrow,
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:245"
+    maxWidth: maxWidthByType[type] || maxWidthByType.narrow
   }, /*#__PURE__*/_react.default.createElement(_elements.Div, {
     width: sidebar && sidebarInside ? [1, 1, 2 / 3] : undefined,
     pr: sidebar && sidebarInside ? [0, 0, 3] : undefined,
-    mt: 0,
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:254"
+    mt: 0
   }, /*#__PURE__*/_react.default.createElement("a", {
     id: "skipTarget",
     ref: skipTargetRef,
-    tabIndex: -1,
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:259"
+    tabIndex: -1
   }), /*#__PURE__*/_react.default.createElement(PageHeader, {
     title: title,
     parentPageLabel: parentPageLabel,
@@ -261,13 +241,11 @@ var Page = function Page(_ref2) {
     parentPageLabelRef: parentPageLabelRef,
     navigation: navigation,
     onDocumentationButtonClick: onDocumentationButtonClick,
-    documentationAsButton: documentationAsButton,
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:261"
+    documentationAsButton: documentationAsButton
   })), sidebar && sidebarInside && /*#__PURE__*/_react.default.createElement(_elements.Div, {
     width: [1, 1, 1 / 3],
     pl: [0, 0, 3],
-    pt: [4, 4, 0],
-    "data-source-file": "@cloudflare/component-page:src/Page.tsx:279"
+    pt: [4, 4, 0]
   }, sidebar)), !sidebarInside && sidebar);
 };