@blaze-cms/admin 0.146.0-rc-eagle-3.10 → 0.146.0-rc-eagle-3.11

package/lib/components/PageHeader/HeaderIconButton.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+const _excluded = ["icon", "label", "className"];
+const HeaderIconButton = _ref => {
+  let {
+      icon,
+      label,
+      className
+    } = _ref,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
+    type: "button",
+    className: `page-header__icon-button${className ? ` ${className}` : ''}`,
+    title: label,
+    "aria-label": label
+  }, rest), /*#__PURE__*/_react.default.createElement("span", {
+    className: "material-icons",
+    "aria-hidden": "true"
+  }, icon));
+};
+HeaderIconButton.propTypes = {
+  icon: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string.isRequired,
+  className: _propTypes.default.string
+};
+HeaderIconButton.defaultProps = {
+  className: ''
+};
+var _default = exports.default = HeaderIconButton;
+//# sourceMappingURL=HeaderIconButton.js.map

package/lib/components/PageHeader/HeaderIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderIconButton.js","names":["_react","_interopRequireDefault","require","_propTypes","_excluded","HeaderIconButton","_ref","icon","label","className","rest","_objectWithoutProperties2","default","createElement","_extends2","type","title","propTypes","PropTypes","string","isRequired","defaultProps","_default","exports"],"sources":["../../../src/components/PageHeader/HeaderIconButton.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst HeaderIconButton = ({ icon, label, className, ...rest }) => (\n  <button\n    type=\"button\"\n    className={`page-header__icon-button${className ? ` ${className}` : ''}`}\n    title={label}\n    aria-label={label}\n    {...rest}>\n    <span className=\"material-icons\" aria-hidden=\"true\">\n      {icon}\n    </span>\n  </button>\n);\n\nHeaderIconButton.propTypes = {\n  icon: PropTypes.string.isRequired,\n  label: PropTypes.string.isRequired,\n  className: PropTypes.string\n};\n\nHeaderIconButton.defaultProps = {\n  className: ''\n};\n\nexport default HeaderIconButton;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AAAmC,MAAAE,SAAA;AAEnC,MAAMC,gBAAgB,GAAGC,IAAA;EAAA,IAAC;MAAEC,IAAI;MAAEC,KAAK;MAAEC;IAAmB,CAAC,GAAAH,IAAA;IAANI,IAAI,OAAAC,yBAAA,CAAAC,OAAA,EAAAN,IAAA,EAAAF,SAAA;EAAA,oBACzDJ,MAAA,CAAAY,OAAA,CAAAC,aAAA,eAAAC,SAAA,CAAAF,OAAA;IACEG,IAAI,EAAC,QAAQ;IACbN,SAAS,EAAE,2BAA2BA,SAAS,GAAG,IAAIA,SAAS,EAAE,GAAG,EAAE,EAAG;IACzEO,KAAK,EAAER,KAAM;IACb,cAAYA;EAAM,GACdE,IAAI,gBACRV,MAAA,CAAAY,OAAA,CAAAC,aAAA;IAAMJ,SAAS,EAAC,gBAAgB;IAAC,eAAY;EAAM,GAChDF,IACG,CACA,CAAC;AAAA,CACV;AAEDF,gBAAgB,CAACY,SAAS,GAAG;EAC3BV,IAAI,EAAEW,kBAAS,CAACC,MAAM,CAACC,UAAU;EACjCZ,KAAK,EAAEU,kBAAS,CAACC,MAAM,CAACC,UAAU;EAClCX,SAAS,EAAES,kBAAS,CAACC;AACvB,CAAC;AAEDd,gBAAgB,CAACgB,YAAY,GAAG;EAC9BZ,SAAS,EAAE;AACb,CAAC;AAAC,IAAAa,QAAA,GAAAC,OAAA,CAAAX,OAAA,GAEaP,gBAAgB","ignoreList":[]}

package/lib/components/PageHeader/PageHeader.js

@@ -5,47 +5,103 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _MetaTitle = _interopRequireDefault(require("../MetaTitle/MetaTitle"));
+var _HeaderIconButton = _interopRequireDefault(require("./HeaderIconButton"));
+var _TitleEditor = _interopRequireDefault(require("./TitleEditor"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const PageHeader = ({
   title,
   subtitle,
   children,
   pageName,
-  onViewUrl
-}) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_MetaTitle.default, {
-  title: title,
-  pageName: pageName
-}), /*#__PURE__*/_react.default.createElement("div", {
-  className: "page-header--wrapper"
-}, /*#__PURE__*/_react.default.createElement("div", {
-  className: "page-header page-header--sticky"
-}, onViewUrl ? /*#__PURE__*/_react.default.createElement("div", {
-  className: "page-header__heading page-header__heading--active",
-  onClick: onViewUrl,
-  role: "button"
-}, title) : /*#__PURE__*/_react.default.createElement("div", {
-  className: "page-header__heading"
-}, title), /*#__PURE__*/_react.default.createElement("div", {
-  className: "page-header__button"
-}, children)), /*#__PURE__*/_react.default.createElement("div", {
-  className: "page-header page-header--base"
-}, /*#__PURE__*/_react.default.createElement("div", {
-  className: "page-header__subheading"
-}, subtitle))));
+  onViewUrl,
+  viewUrlDisabledReason,
+  onTitleChange,
+  titleActions
+}) => {
+  const [isEditingTitle, setIsEditingTitle] = (0, _react.useState)(false);
+  const isTitleEditable = typeof onTitleChange === 'function';
+  // A reason renders the button disabled instead of dropping it.
+  const showViewButton = !!onViewUrl || !!viewUrlDisabledReason;
+  const hasTitleActions = isTitleEditable || !!titleActions || showViewButton;
+  const startEditing = () => setIsEditingTitle(true);
+  const stopEditing = () => setIsEditingTitle(false);
+  const saveTitle = nextTitle => {
+    stopEditing();
+    onTitleChange(nextTitle);
+  };
+  const renderTitle = () => {
+    if (isEditingTitle) {
+      return /*#__PURE__*/_react.default.createElement(_TitleEditor.default, {
+        title: title,
+        onSave: saveTitle,
+        onCancel: stopEditing
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isTitleEditable ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "page-header__heading page-header__heading--editable",
+      onClick: startEditing,
+      title: "Edit title",
+      role: "button",
+      tabIndex: 0,
+      onKeyDown: ({
+        key
+      }) => key === 'Enter' && startEditing()
+    }, title) : /*#__PURE__*/_react.default.createElement("div", {
+      className: "page-header__heading"
+    }, title), hasTitleActions && /*#__PURE__*/_react.default.createElement("div", {
+      className: "page-header__title-actions"
+    }, isTitleEditable && /*#__PURE__*/_react.default.createElement(_HeaderIconButton.default, {
+      icon: "edit",
+      label: "Edit title",
+      onClick: startEditing,
+      "data-testid": "page-header-title-edit"
+    }), titleActions, showViewButton && /*#__PURE__*/_react.default.createElement(_HeaderIconButton.default, {
+      icon: "open_in_new",
+      label: viewUrlDisabledReason || 'View',
+      className: viewUrlDisabledReason ? 'page-header__icon-button--disabled' : '',
+      "aria-disabled": viewUrlDisabledReason ? 'true' : undefined,
+      onClick: viewUrlDisabledReason ? undefined : onViewUrl,
+      "data-testid": "page-header-view"
+    })));
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_MetaTitle.default, {
+    title: title,
+    pageName: pageName
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "page-header--wrapper"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "page-header page-header--sticky"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "page-header__title"
+  }, renderTitle()), /*#__PURE__*/_react.default.createElement("div", {
+    className: "page-header__button"
+  }, children)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "page-header page-header--base"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "page-header__subheading"
+  }, subtitle))));
+};
 PageHeader.propTypes = {
   title: _propTypes.default.string.isRequired,
   subtitle: _propTypes.default.string,
   children: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object, _propTypes.default.string]),
   pageName: _propTypes.default.string,
-  onViewUrl: _propTypes.default.func
+  onViewUrl: _propTypes.default.func,
+  viewUrlDisabledReason: _propTypes.default.string,
+  onTitleChange: _propTypes.default.func,
+  titleActions: _propTypes.default.node
 };
 PageHeader.defaultProps = {
   subtitle: '',
   children: '',
   pageName: '',
-  onViewUrl: null
+  onViewUrl: null,
+  viewUrlDisabledReason: null,
+  onTitleChange: null,
+  titleActions: null
 };
 const PageHeaderActions = ({
   children
@@ -54,5 +110,6 @@ PageHeaderActions.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object]).isRequired
 };
 PageHeader.Actions = PageHeaderActions;
+PageHeader.IconButton = _HeaderIconButton.default;
 var _default = exports.default = PageHeader;
 //# sourceMappingURL=PageHeader.js.map

package/lib/components/PageHeader/PageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.js","names":["_react","_interopRequireDefault","require","_propTypes","_MetaTitle","PageHeader","title","subtitle","children","pageName","onViewUrl","default","createElement","Fragment","className","onClick","role","propTypes","PropTypes","string","isRequired","oneOfType","array","object","func","defaultProps","PageHeaderActions","React","Children","map","child","cloneElement","Actions","_default","exports"],"sources":["../../../src/components/PageHeader/PageHeader.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport MetaTitle from '../MetaTitle/MetaTitle';\n\nconst PageHeader = ({ title, subtitle, children, pageName, onViewUrl }) => (\n  <>\n    <MetaTitle title={title} pageName={pageName} />\n    <div className=\"page-header--wrapper\">\n      <div className=\"page-header page-header--sticky\">\n        {onViewUrl ? (\n          <div\n            className=\"page-header__heading page-header__heading--active\"\n            onClick={onViewUrl}\n            role=\"button\">\n            {title}\n          </div>\n        ) : (\n          <div className=\"page-header__heading\">{title}</div>\n        )}\n        <div className=\"page-header__button\">{children}</div>\n      </div>\n      <div className=\"page-header page-header--base\">\n        <div className=\"page-header__subheading\">{subtitle}</div>\n      </div>\n    </div>\n  </>\n);\n\nPageHeader.propTypes = {\n  title: PropTypes.string.isRequired,\n  subtitle: PropTypes.string,\n  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),\n  pageName: PropTypes.string,\n  onViewUrl: PropTypes.func\n};\n\nPageHeader.defaultProps = {\n  subtitle: '',\n  children: '',\n  pageName: '',\n  onViewUrl: null\n};\n\nconst PageHeaderActions = ({ children }) => (\n  <>{React.Children.map(children, child => child && React.cloneElement(child))}</>\n);\n\nPageHeaderActions.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired\n};\n\nPageHeader.Actions = PageHeaderActions;\n\nexport default PageHeader;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,UAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEA,MAAMG,UAAU,GAAGA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,QAAQ;EAAEC,QAAQ;EAAEC;AAAU,CAAC,kBACpEV,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAAAZ,MAAA,CAAAW,OAAA,CAAAE,QAAA,qBACEb,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACR,UAAA,CAAAO,OAAS;EAACL,KAAK,EAAEA,KAAM;EAACG,QAAQ,EAAEA;AAAS,CAAE,CAAC,eAC/CT,MAAA,CAAAW,OAAA,CAAAC,aAAA;EAAKE,SAAS,EAAC;AAAsB,gBACnCd,MAAA,CAAAW,OAAA,CAAAC,aAAA;EAAKE,SAAS,EAAC;AAAiC,GAC7CJ,SAAS,gBACRV,MAAA,CAAAW,OAAA,CAAAC,aAAA;EACEE,SAAS,EAAC,mDAAmD;EAC7DC,OAAO,EAAEL,SAAU;EACnBM,IAAI,EAAC;AAAQ,GACZV,KACE,CAAC,gBAENN,MAAA,CAAAW,OAAA,CAAAC,aAAA;EAAKE,SAAS,EAAC;AAAsB,GAAER,KAAW,CACnD,eACDN,MAAA,CAAAW,OAAA,CAAAC,aAAA;EAAKE,SAAS,EAAC;AAAqB,GAAEN,QAAc,CACjD,CAAC,eACNR,MAAA,CAAAW,OAAA,CAAAC,aAAA;EAAKE,SAAS,EAAC;AAA+B,gBAC5Cd,MAAA,CAAAW,OAAA,CAAAC,aAAA;EAAKE,SAAS,EAAC;AAAyB,GAAEP,QAAc,CACrD,CACF,CACL,CACH;AAEDF,UAAU,CAACY,SAAS,GAAG;EACrBX,KAAK,EAAEY,kBAAS,CAACC,MAAM,CAACC,UAAU;EAClCb,QAAQ,EAAEW,kBAAS,CAACC,MAAM;EAC1BX,QAAQ,EAAEU,kBAAS,CAACG,SAAS,CAAC,CAACH,kBAAS,CAACI,KAAK,EAAEJ,kBAAS,CAACK,MAAM,EAAEL,kBAAS,CAACC,MAAM,CAAC,CAAC;EACpFV,QAAQ,EAAES,kBAAS,CAACC,MAAM;EAC1BT,SAAS,EAAEQ,kBAAS,CAACM;AACvB,CAAC;AAEDnB,UAAU,CAACoB,YAAY,GAAG;EACxBlB,QAAQ,EAAE,EAAE;EACZC,QAAQ,EAAE,EAAE;EACZC,QAAQ,EAAE,EAAE;EACZC,SAAS,EAAE;AACb,CAAC;AAED,MAAMgB,iBAAiB,GAAGA,CAAC;EAAElB;AAAS,CAAC,kBACrCR,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAAAZ,MAAA,CAAAW,OAAA,CAAAE,QAAA,QAAGc,cAAK,CAACC,QAAQ,CAACC,GAAG,CAACrB,QAAQ,EAAEsB,KAAK,IAAIA,KAAK,iBAAIH,cAAK,CAACI,YAAY,CAACD,KAAK,CAAC,CAAI,CAChF;AAEDJ,iBAAiB,CAACT,SAAS,GAAG;EAC5BT,QAAQ,EAAEU,kBAAS,CAACG,SAAS,CAAC,CAACH,kBAAS,CAACI,KAAK,EAAEJ,kBAAS,CAACK,MAAM,CAAC,CAAC,CAACH;AACrE,CAAC;AAEDf,UAAU,CAAC2B,OAAO,GAAGN,iBAAiB;AAAC,IAAAO,QAAA,GAAAC,OAAA,CAAAvB,OAAA,GAExBN,UAAU","ignoreList":[]}
+{"version":3,"file":"PageHeader.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_MetaTitle","_HeaderIconButton","_TitleEditor","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","PageHeader","title","subtitle","children","pageName","onViewUrl","viewUrlDisabledReason","onTitleChange","titleActions","isEditingTitle","setIsEditingTitle","useState","isTitleEditable","showViewButton","hasTitleActions","startEditing","stopEditing","saveTitle","nextTitle","renderTitle","createElement","onSave","onCancel","Fragment","className","onClick","role","tabIndex","onKeyDown","key","icon","label","undefined","propTypes","PropTypes","string","isRequired","oneOfType","array","object","func","node","defaultProps","PageHeaderActions","React","Children","map","child","cloneElement","Actions","IconButton","HeaderIconButton","_default","exports"],"sources":["../../../src/components/PageHeader/PageHeader.js"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport MetaTitle from '../MetaTitle/MetaTitle';\nimport HeaderIconButton from './HeaderIconButton';\nimport TitleEditor from './TitleEditor';\n\nconst PageHeader = ({\n  title,\n  subtitle,\n  children,\n  pageName,\n  onViewUrl,\n  viewUrlDisabledReason,\n  onTitleChange,\n  titleActions\n}) => {\n  const [isEditingTitle, setIsEditingTitle] = useState(false);\n  const isTitleEditable = typeof onTitleChange === 'function';\n  // A reason renders the button disabled instead of dropping it.\n  const showViewButton = !!onViewUrl || !!viewUrlDisabledReason;\n  const hasTitleActions = isTitleEditable || !!titleActions || showViewButton;\n\n  const startEditing = () => setIsEditingTitle(true);\n  const stopEditing = () => setIsEditingTitle(false);\n  const saveTitle = nextTitle => {\n    stopEditing();\n    onTitleChange(nextTitle);\n  };\n\n  const renderTitle = () => {\n    if (isEditingTitle) {\n      return <TitleEditor title={title} onSave={saveTitle} onCancel={stopEditing} />;\n    }\n\n    return (\n      <>\n        {isTitleEditable ? (\n          <div\n            className=\"page-header__heading page-header__heading--editable\"\n            onClick={startEditing}\n            title=\"Edit title\"\n            role=\"button\"\n            tabIndex={0}\n            onKeyDown={({ key }) => key === 'Enter' && startEditing()}>\n            {title}\n          </div>\n        ) : (\n          <div className=\"page-header__heading\">{title}</div>\n        )}\n        {hasTitleActions && (\n          <div className=\"page-header__title-actions\">\n            {isTitleEditable && (\n              <HeaderIconButton\n                icon=\"edit\"\n                label=\"Edit title\"\n                onClick={startEditing}\n                data-testid=\"page-header-title-edit\"\n              />\n            )}\n            {titleActions}\n            {showViewButton && (\n              <HeaderIconButton\n                icon=\"open_in_new\"\n                label={viewUrlDisabledReason || 'View'}\n                className={viewUrlDisabledReason ? 'page-header__icon-button--disabled' : ''}\n                aria-disabled={viewUrlDisabledReason ? 'true' : undefined}\n                onClick={viewUrlDisabledReason ? undefined : onViewUrl}\n                data-testid=\"page-header-view\"\n              />\n            )}\n          </div>\n        )}\n      </>\n    );\n  };\n\n  return (\n    <>\n      <MetaTitle title={title} pageName={pageName} />\n      <div className=\"page-header--wrapper\">\n        <div className=\"page-header page-header--sticky\">\n          <div className=\"page-header__title\">{renderTitle()}</div>\n          <div className=\"page-header__button\">{children}</div>\n        </div>\n        <div className=\"page-header page-header--base\">\n          <div className=\"page-header__subheading\">{subtitle}</div>\n        </div>\n      </div>\n    </>\n  );\n};\n\nPageHeader.propTypes = {\n  title: PropTypes.string.isRequired,\n  subtitle: PropTypes.string,\n  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),\n  pageName: PropTypes.string,\n  onViewUrl: PropTypes.func,\n  viewUrlDisabledReason: PropTypes.string,\n  onTitleChange: PropTypes.func,\n  titleActions: PropTypes.node\n};\n\nPageHeader.defaultProps = {\n  subtitle: '',\n  children: '',\n  pageName: '',\n  onViewUrl: null,\n  viewUrlDisabledReason: null,\n  onTitleChange: null,\n  titleActions: null\n};\n\nconst PageHeaderActions = ({ children }) => (\n  <>{React.Children.map(children, child => child && React.cloneElement(child))}</>\n);\n\nPageHeaderActions.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired\n};\n\nPageHeader.Actions = PageHeaderActions;\nPageHeader.IconButton = HeaderIconButton;\n\nexport default PageHeader;\n"],"mappings":"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","ignoreList":[]}

package/lib/components/PageHeader/TitleEditor.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _HeaderIconButton = _interopRequireDefault(require("./HeaderIconButton"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const TitleEditor = ({
+  title,
+  onSave,
+  onCancel
+}) => {
+  const [value, setValue] = (0, _react.useState)(title);
+  const inputRef = (0, _react.useRef)(null);
+  // Blur and the tick/cross clicks can both fire for one edit; only the first wins.
+  // Blur discards: a change is only kept through Enter or the tick.
+  const isDone = (0, _react.useRef)(false);
+  (0, _react.useEffect)(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, []);
+  const finish = callback => {
+    if (isDone.current) return;
+    isDone.current = true;
+    callback();
+  };
+  const save = () => finish(() => {
+    const nextTitle = value.trim();
+    if (!nextTitle || nextTitle === title) {
+      onCancel();
+      return;
+    }
+    onSave(nextTitle);
+  });
+  const cancel = () => finish(onCancel);
+  const onKeyDown = event => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      save();
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      cancel();
+    }
+  };
+  const keepInputFocus = event => event.preventDefault();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "page-header__title-editor"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    ref: inputRef,
+    type: "text",
+    className: "page-header__title-input",
+    value: value,
+    onChange: ({
+      target
+    }) => setValue(target.value),
+    onKeyDown: onKeyDown,
+    onBlur: cancel,
+    "aria-label": "Title",
+    "data-testid": "page-header-title-input"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "page-header__title-editor-actions"
+  }, /*#__PURE__*/_react.default.createElement(_HeaderIconButton.default, {
+    icon: "check",
+    label: "Save title",
+    onMouseDown: keepInputFocus,
+    onClick: save,
+    "data-testid": "page-header-title-save"
+  }), /*#__PURE__*/_react.default.createElement(_HeaderIconButton.default, {
+    icon: "close",
+    label: "Cancel",
+    onMouseDown: keepInputFocus,
+    onClick: cancel,
+    "data-testid": "page-header-title-cancel"
+  })));
+};
+TitleEditor.propTypes = {
+  title: _propTypes.default.string.isRequired,
+  onSave: _propTypes.default.func.isRequired,
+  onCancel: _propTypes.default.func.isRequired
+};
+var _default = exports.default = TitleEditor;
+//# sourceMappingURL=TitleEditor.js.map

package/lib/components/PageHeader/TitleEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TitleEditor.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_HeaderIconButton","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TitleEditor","title","onSave","onCancel","value","setValue","useState","inputRef","useRef","isDone","useEffect","current","focus","select","finish","callback","save","nextTitle","trim","cancel","onKeyDown","event","key","preventDefault","keepInputFocus","createElement","className","ref","type","onChange","target","onBlur","icon","label","onMouseDown","onClick","propTypes","PropTypes","string","isRequired","func","_default","exports"],"sources":["../../../src/components/PageHeader/TitleEditor.js"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport HeaderIconButton from './HeaderIconButton';\n\nconst TitleEditor = ({ title, onSave, onCancel }) => {\n  const [value, setValue] = useState(title);\n  const inputRef = useRef(null);\n  // Blur and the tick/cross clicks can both fire for one edit; only the first wins.\n  // Blur discards: a change is only kept through Enter or the tick.\n  const isDone = useRef(false);\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.focus();\n      inputRef.current.select();\n    }\n  }, []);\n\n  const finish = callback => {\n    if (isDone.current) return;\n    isDone.current = true;\n    callback();\n  };\n\n  const save = () =>\n    finish(() => {\n      const nextTitle = value.trim();\n      if (!nextTitle || nextTitle === title) {\n        onCancel();\n        return;\n      }\n      onSave(nextTitle);\n    });\n\n  const cancel = () => finish(onCancel);\n\n  const onKeyDown = event => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      save();\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      cancel();\n    }\n  };\n\n  const keepInputFocus = event => event.preventDefault();\n\n  return (\n    <div className=\"page-header__title-editor\">\n      <input\n        ref={inputRef}\n        type=\"text\"\n        className=\"page-header__title-input\"\n        value={value}\n        onChange={({ target }) => setValue(target.value)}\n        onKeyDown={onKeyDown}\n        onBlur={cancel}\n        aria-label=\"Title\"\n        data-testid=\"page-header-title-input\"\n      />\n      <div className=\"page-header__title-editor-actions\">\n        <HeaderIconButton\n          icon=\"check\"\n          label=\"Save title\"\n          onMouseDown={keepInputFocus}\n          onClick={save}\n          data-testid=\"page-header-title-save\"\n        />\n        <HeaderIconButton\n          icon=\"close\"\n          label=\"Cancel\"\n          onMouseDown={keepInputFocus}\n          onClick={cancel}\n          data-testid=\"page-header-title-cancel\"\n        />\n      </div>\n    </div>\n  );\n};\n\nTitleEditor.propTypes = {\n  title: PropTypes.string.isRequired,\n  onSave: PropTypes.func.isRequired,\n  onCancel: PropTypes.func.isRequired\n};\n\nexport default TitleEditor;\n"],"mappings":"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","ignoreList":[]}

package/lib-es/components/PageHeader/HeaderIconButton.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+const _excluded = ["icon", "label", "className"];
+import React from 'react';
+import PropTypes from 'prop-types';
+const HeaderIconButton = _ref => {
+  let {
+      icon,
+      label,
+      className
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("button", _extends({
+    type: "button",
+    className: `page-header__icon-button${className ? ` ${className}` : ''}`,
+    title: label,
+    "aria-label": label
+  }, rest), /*#__PURE__*/React.createElement("span", {
+    className: "material-icons",
+    "aria-hidden": "true"
+  }, icon));
+};
+HeaderIconButton.propTypes = {
+  icon: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  className: PropTypes.string
+};
+HeaderIconButton.defaultProps = {
+  className: ''
+};
+export default HeaderIconButton;
+//# sourceMappingURL=HeaderIconButton.js.map

package/lib-es/components/PageHeader/HeaderIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderIconButton.js","names":["React","PropTypes","HeaderIconButton","_ref","icon","label","className","rest","_objectWithoutProperties","_excluded","createElement","_extends","type","title","propTypes","string","isRequired","defaultProps"],"sources":["../../../src/components/PageHeader/HeaderIconButton.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst HeaderIconButton = ({ icon, label, className, ...rest }) => (\n  <button\n    type=\"button\"\n    className={`page-header__icon-button${className ? ` ${className}` : ''}`}\n    title={label}\n    aria-label={label}\n    {...rest}>\n    <span className=\"material-icons\" aria-hidden=\"true\">\n      {icon}\n    </span>\n  </button>\n);\n\nHeaderIconButton.propTypes = {\n  icon: PropTypes.string.isRequired,\n  label: PropTypes.string.isRequired,\n  className: PropTypes.string\n};\n\nHeaderIconButton.defaultProps = {\n  className: ''\n};\n\nexport default HeaderIconButton;\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAElC,MAAMC,gBAAgB,GAAGC,IAAA;EAAA,IAAC;MAAEC,IAAI;MAAEC,KAAK;MAAEC;IAAmB,CAAC,GAAAH,IAAA;IAANI,IAAI,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAAA,oBACzDT,KAAA,CAAAU,aAAA,WAAAC,QAAA;IACEC,IAAI,EAAC,QAAQ;IACbN,SAAS,EAAE,2BAA2BA,SAAS,GAAG,IAAIA,SAAS,EAAE,GAAG,EAAE,EAAG;IACzEO,KAAK,EAAER,KAAM;IACb,cAAYA;EAAM,GACdE,IAAI,gBACRP,KAAA,CAAAU,aAAA;IAAMJ,SAAS,EAAC,gBAAgB;IAAC,eAAY;EAAM,GAChDF,IACG,CACA,CAAC;AAAA,CACV;AAEDF,gBAAgB,CAACY,SAAS,GAAG;EAC3BV,IAAI,EAAEH,SAAS,CAACc,MAAM,CAACC,UAAU;EACjCX,KAAK,EAAEJ,SAAS,CAACc,MAAM,CAACC,UAAU;EAClCV,SAAS,EAAEL,SAAS,CAACc;AACvB,CAAC;AAEDb,gBAAgB,CAACe,YAAY,GAAG;EAC9BX,SAAS,EAAE;AACb,CAAC;AAED,eAAeJ,gBAAgB","ignoreList":[]}

package/lib-es/components/PageHeader/PageHeader.js

@@ -1,44 +1,99 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import MetaTitle from '../MetaTitle/MetaTitle';
+import HeaderIconButton from './HeaderIconButton';
+import TitleEditor from './TitleEditor';
 const PageHeader = ({
   title,
   subtitle,
   children,
   pageName,
-  onViewUrl
-}) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MetaTitle, {
-  title: title,
-  pageName: pageName
-}), /*#__PURE__*/React.createElement("div", {
-  className: "page-header--wrapper"
-}, /*#__PURE__*/React.createElement("div", {
-  className: "page-header page-header--sticky"
-}, onViewUrl ? /*#__PURE__*/React.createElement("div", {
-  className: "page-header__heading page-header__heading--active",
-  onClick: onViewUrl,
-  role: "button"
-}, title) : /*#__PURE__*/React.createElement("div", {
-  className: "page-header__heading"
-}, title), /*#__PURE__*/React.createElement("div", {
-  className: "page-header__button"
-}, children)), /*#__PURE__*/React.createElement("div", {
-  className: "page-header page-header--base"
-}, /*#__PURE__*/React.createElement("div", {
-  className: "page-header__subheading"
-}, subtitle))));
+  onViewUrl,
+  viewUrlDisabledReason,
+  onTitleChange,
+  titleActions
+}) => {
+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+  const isTitleEditable = typeof onTitleChange === 'function';
+  // A reason renders the button disabled instead of dropping it.
+  const showViewButton = !!onViewUrl || !!viewUrlDisabledReason;
+  const hasTitleActions = isTitleEditable || !!titleActions || showViewButton;
+  const startEditing = () => setIsEditingTitle(true);
+  const stopEditing = () => setIsEditingTitle(false);
+  const saveTitle = nextTitle => {
+    stopEditing();
+    onTitleChange(nextTitle);
+  };
+  const renderTitle = () => {
+    if (isEditingTitle) {
+      return /*#__PURE__*/React.createElement(TitleEditor, {
+        title: title,
+        onSave: saveTitle,
+        onCancel: stopEditing
+      });
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isTitleEditable ? /*#__PURE__*/React.createElement("div", {
+      className: "page-header__heading page-header__heading--editable",
+      onClick: startEditing,
+      title: "Edit title",
+      role: "button",
+      tabIndex: 0,
+      onKeyDown: ({
+        key
+      }) => key === 'Enter' && startEditing()
+    }, title) : /*#__PURE__*/React.createElement("div", {
+      className: "page-header__heading"
+    }, title), hasTitleActions && /*#__PURE__*/React.createElement("div", {
+      className: "page-header__title-actions"
+    }, isTitleEditable && /*#__PURE__*/React.createElement(HeaderIconButton, {
+      icon: "edit",
+      label: "Edit title",
+      onClick: startEditing,
+      "data-testid": "page-header-title-edit"
+    }), titleActions, showViewButton && /*#__PURE__*/React.createElement(HeaderIconButton, {
+      icon: "open_in_new",
+      label: viewUrlDisabledReason || 'View',
+      className: viewUrlDisabledReason ? 'page-header__icon-button--disabled' : '',
+      "aria-disabled": viewUrlDisabledReason ? 'true' : undefined,
+      onClick: viewUrlDisabledReason ? undefined : onViewUrl,
+      "data-testid": "page-header-view"
+    })));
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MetaTitle, {
+    title: title,
+    pageName: pageName
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "page-header--wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "page-header page-header--sticky"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "page-header__title"
+  }, renderTitle()), /*#__PURE__*/React.createElement("div", {
+    className: "page-header__button"
+  }, children)), /*#__PURE__*/React.createElement("div", {
+    className: "page-header page-header--base"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "page-header__subheading"
+  }, subtitle))));
+};
 PageHeader.propTypes = {
   title: PropTypes.string.isRequired,
   subtitle: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
   pageName: PropTypes.string,
-  onViewUrl: PropTypes.func
+  onViewUrl: PropTypes.func,
+  viewUrlDisabledReason: PropTypes.string,
+  onTitleChange: PropTypes.func,
+  titleActions: PropTypes.node
 };
 PageHeader.defaultProps = {
   subtitle: '',
   children: '',
   pageName: '',
-  onViewUrl: null
+  onViewUrl: null,
+  viewUrlDisabledReason: null,
+  onTitleChange: null,
+  titleActions: null
 };
 const PageHeaderActions = ({
   children
@@ -47,5 +102,6 @@ PageHeaderActions.propTypes = {
   children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired
 };
 PageHeader.Actions = PageHeaderActions;
+PageHeader.IconButton = HeaderIconButton;
 export default PageHeader;
 //# sourceMappingURL=PageHeader.js.map

package/lib-es/components/PageHeader/PageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.js","names":["React","PropTypes","MetaTitle","PageHeader","title","subtitle","children","pageName","onViewUrl","createElement","Fragment","className","onClick","role","propTypes","string","isRequired","oneOfType","array","object","func","defaultProps","PageHeaderActions","Children","map","child","cloneElement","Actions"],"sources":["../../../src/components/PageHeader/PageHeader.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport MetaTitle from '../MetaTitle/MetaTitle';\n\nconst PageHeader = ({ title, subtitle, children, pageName, onViewUrl }) => (\n  <>\n    <MetaTitle title={title} pageName={pageName} />\n    <div className=\"page-header--wrapper\">\n      <div className=\"page-header page-header--sticky\">\n        {onViewUrl ? (\n          <div\n            className=\"page-header__heading page-header__heading--active\"\n            onClick={onViewUrl}\n            role=\"button\">\n            {title}\n          </div>\n        ) : (\n          <div className=\"page-header__heading\">{title}</div>\n        )}\n        <div className=\"page-header__button\">{children}</div>\n      </div>\n      <div className=\"page-header page-header--base\">\n        <div className=\"page-header__subheading\">{subtitle}</div>\n      </div>\n    </div>\n  </>\n);\n\nPageHeader.propTypes = {\n  title: PropTypes.string.isRequired,\n  subtitle: PropTypes.string,\n  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),\n  pageName: PropTypes.string,\n  onViewUrl: PropTypes.func\n};\n\nPageHeader.defaultProps = {\n  subtitle: '',\n  children: '',\n  pageName: '',\n  onViewUrl: null\n};\n\nconst PageHeaderActions = ({ children }) => (\n  <>{React.Children.map(children, child => child && React.cloneElement(child))}</>\n);\n\nPageHeaderActions.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired\n};\n\nPageHeader.Actions = PageHeaderActions;\n\nexport default PageHeader;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,SAAS,MAAM,wBAAwB;AAE9C,MAAMC,UAAU,GAAGA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,QAAQ;EAAEC,QAAQ;EAAEC;AAAU,CAAC,kBACpER,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAU,QAAA,qBACEV,KAAA,CAAAS,aAAA,CAACP,SAAS;EAACE,KAAK,EAAEA,KAAM;EAACG,QAAQ,EAAEA;AAAS,CAAE,CAAC,eAC/CP,KAAA,CAAAS,aAAA;EAAKE,SAAS,EAAC;AAAsB,gBACnCX,KAAA,CAAAS,aAAA;EAAKE,SAAS,EAAC;AAAiC,GAC7CH,SAAS,gBACRR,KAAA,CAAAS,aAAA;EACEE,SAAS,EAAC,mDAAmD;EAC7DC,OAAO,EAAEJ,SAAU;EACnBK,IAAI,EAAC;AAAQ,GACZT,KACE,CAAC,gBAENJ,KAAA,CAAAS,aAAA;EAAKE,SAAS,EAAC;AAAsB,GAAEP,KAAW,CACnD,eACDJ,KAAA,CAAAS,aAAA;EAAKE,SAAS,EAAC;AAAqB,GAAEL,QAAc,CACjD,CAAC,eACNN,KAAA,CAAAS,aAAA;EAAKE,SAAS,EAAC;AAA+B,gBAC5CX,KAAA,CAAAS,aAAA;EAAKE,SAAS,EAAC;AAAyB,GAAEN,QAAc,CACrD,CACF,CACL,CACH;AAEDF,UAAU,CAACW,SAAS,GAAG;EACrBV,KAAK,EAAEH,SAAS,CAACc,MAAM,CAACC,UAAU;EAClCX,QAAQ,EAAEJ,SAAS,CAACc,MAAM;EAC1BT,QAAQ,EAAEL,SAAS,CAACgB,SAAS,CAAC,CAAChB,SAAS,CAACiB,KAAK,EAAEjB,SAAS,CAACkB,MAAM,EAAElB,SAAS,CAACc,MAAM,CAAC,CAAC;EACpFR,QAAQ,EAAEN,SAAS,CAACc,MAAM;EAC1BP,SAAS,EAAEP,SAAS,CAACmB;AACvB,CAAC;AAEDjB,UAAU,CAACkB,YAAY,GAAG;EACxBhB,QAAQ,EAAE,EAAE;EACZC,QAAQ,EAAE,EAAE;EACZC,QAAQ,EAAE,EAAE;EACZC,SAAS,EAAE;AACb,CAAC;AAED,MAAMc,iBAAiB,GAAGA,CAAC;EAAEhB;AAAS,CAAC,kBACrCN,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAU,QAAA,QAAGV,KAAK,CAACuB,QAAQ,CAACC,GAAG,CAAClB,QAAQ,EAAEmB,KAAK,IAAIA,KAAK,IAAIzB,KAAK,CAAC0B,YAAY,CAACD,KAAK,CAAC,CAAI,CAChF;AAEDH,iBAAiB,CAACR,SAAS,GAAG;EAC5BR,QAAQ,EAAEL,SAAS,CAACgB,SAAS,CAAC,CAAChB,SAAS,CAACiB,KAAK,EAAEjB,SAAS,CAACkB,MAAM,CAAC,CAAC,CAACH;AACrE,CAAC;AAEDb,UAAU,CAACwB,OAAO,GAAGL,iBAAiB;AAEtC,eAAenB,UAAU","ignoreList":[]}
+{"version":3,"file":"PageHeader.js","names":["React","useState","PropTypes","MetaTitle","HeaderIconButton","TitleEditor","PageHeader","title","subtitle","children","pageName","onViewUrl","viewUrlDisabledReason","onTitleChange","titleActions","isEditingTitle","setIsEditingTitle","isTitleEditable","showViewButton","hasTitleActions","startEditing","stopEditing","saveTitle","nextTitle","renderTitle","createElement","onSave","onCancel","Fragment","className","onClick","role","tabIndex","onKeyDown","key","icon","label","undefined","propTypes","string","isRequired","oneOfType","array","object","func","node","defaultProps","PageHeaderActions","Children","map","child","cloneElement","Actions","IconButton"],"sources":["../../../src/components/PageHeader/PageHeader.js"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport MetaTitle from '../MetaTitle/MetaTitle';\nimport HeaderIconButton from './HeaderIconButton';\nimport TitleEditor from './TitleEditor';\n\nconst PageHeader = ({\n  title,\n  subtitle,\n  children,\n  pageName,\n  onViewUrl,\n  viewUrlDisabledReason,\n  onTitleChange,\n  titleActions\n}) => {\n  const [isEditingTitle, setIsEditingTitle] = useState(false);\n  const isTitleEditable = typeof onTitleChange === 'function';\n  // A reason renders the button disabled instead of dropping it.\n  const showViewButton = !!onViewUrl || !!viewUrlDisabledReason;\n  const hasTitleActions = isTitleEditable || !!titleActions || showViewButton;\n\n  const startEditing = () => setIsEditingTitle(true);\n  const stopEditing = () => setIsEditingTitle(false);\n  const saveTitle = nextTitle => {\n    stopEditing();\n    onTitleChange(nextTitle);\n  };\n\n  const renderTitle = () => {\n    if (isEditingTitle) {\n      return <TitleEditor title={title} onSave={saveTitle} onCancel={stopEditing} />;\n    }\n\n    return (\n      <>\n        {isTitleEditable ? (\n          <div\n            className=\"page-header__heading page-header__heading--editable\"\n            onClick={startEditing}\n            title=\"Edit title\"\n            role=\"button\"\n            tabIndex={0}\n            onKeyDown={({ key }) => key === 'Enter' && startEditing()}>\n            {title}\n          </div>\n        ) : (\n          <div className=\"page-header__heading\">{title}</div>\n        )}\n        {hasTitleActions && (\n          <div className=\"page-header__title-actions\">\n            {isTitleEditable && (\n              <HeaderIconButton\n                icon=\"edit\"\n                label=\"Edit title\"\n                onClick={startEditing}\n                data-testid=\"page-header-title-edit\"\n              />\n            )}\n            {titleActions}\n            {showViewButton && (\n              <HeaderIconButton\n                icon=\"open_in_new\"\n                label={viewUrlDisabledReason || 'View'}\n                className={viewUrlDisabledReason ? 'page-header__icon-button--disabled' : ''}\n                aria-disabled={viewUrlDisabledReason ? 'true' : undefined}\n                onClick={viewUrlDisabledReason ? undefined : onViewUrl}\n                data-testid=\"page-header-view\"\n              />\n            )}\n          </div>\n        )}\n      </>\n    );\n  };\n\n  return (\n    <>\n      <MetaTitle title={title} pageName={pageName} />\n      <div className=\"page-header--wrapper\">\n        <div className=\"page-header page-header--sticky\">\n          <div className=\"page-header__title\">{renderTitle()}</div>\n          <div className=\"page-header__button\">{children}</div>\n        </div>\n        <div className=\"page-header page-header--base\">\n          <div className=\"page-header__subheading\">{subtitle}</div>\n        </div>\n      </div>\n    </>\n  );\n};\n\nPageHeader.propTypes = {\n  title: PropTypes.string.isRequired,\n  subtitle: PropTypes.string,\n  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),\n  pageName: PropTypes.string,\n  onViewUrl: PropTypes.func,\n  viewUrlDisabledReason: PropTypes.string,\n  onTitleChange: PropTypes.func,\n  titleActions: PropTypes.node\n};\n\nPageHeader.defaultProps = {\n  subtitle: '',\n  children: '',\n  pageName: '',\n  onViewUrl: null,\n  viewUrlDisabledReason: null,\n  onTitleChange: null,\n  titleActions: null\n};\n\nconst PageHeaderActions = ({ children }) => (\n  <>{React.Children.map(children, child => child && React.cloneElement(child))}</>\n);\n\nPageHeaderActions.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired\n};\n\nPageHeader.Actions = PageHeaderActions;\nPageHeader.IconButton = HeaderIconButton;\n\nexport default PageHeader;\n"],"mappings":"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","ignoreList":[]}

package/lib-es/components/PageHeader/TitleEditor.js

@@ -0,0 +1,80 @@
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import HeaderIconButton from './HeaderIconButton';
+const TitleEditor = ({
+  title,
+  onSave,
+  onCancel
+}) => {
+  const [value, setValue] = useState(title);
+  const inputRef = useRef(null);
+  // Blur and the tick/cross clicks can both fire for one edit; only the first wins.
+  // Blur discards: a change is only kept through Enter or the tick.
+  const isDone = useRef(false);
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, []);
+  const finish = callback => {
+    if (isDone.current) return;
+    isDone.current = true;
+    callback();
+  };
+  const save = () => finish(() => {
+    const nextTitle = value.trim();
+    if (!nextTitle || nextTitle === title) {
+      onCancel();
+      return;
+    }
+    onSave(nextTitle);
+  });
+  const cancel = () => finish(onCancel);
+  const onKeyDown = event => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      save();
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      cancel();
+    }
+  };
+  const keepInputFocus = event => event.preventDefault();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "page-header__title-editor"
+  }, /*#__PURE__*/React.createElement("input", {
+    ref: inputRef,
+    type: "text",
+    className: "page-header__title-input",
+    value: value,
+    onChange: ({
+      target
+    }) => setValue(target.value),
+    onKeyDown: onKeyDown,
+    onBlur: cancel,
+    "aria-label": "Title",
+    "data-testid": "page-header-title-input"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "page-header__title-editor-actions"
+  }, /*#__PURE__*/React.createElement(HeaderIconButton, {
+    icon: "check",
+    label: "Save title",
+    onMouseDown: keepInputFocus,
+    onClick: save,
+    "data-testid": "page-header-title-save"
+  }), /*#__PURE__*/React.createElement(HeaderIconButton, {
+    icon: "close",
+    label: "Cancel",
+    onMouseDown: keepInputFocus,
+    onClick: cancel,
+    "data-testid": "page-header-title-cancel"
+  })));
+};
+TitleEditor.propTypes = {
+  title: PropTypes.string.isRequired,
+  onSave: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired
+};
+export default TitleEditor;
+//# sourceMappingURL=TitleEditor.js.map

package/lib-es/components/PageHeader/TitleEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TitleEditor.js","names":["React","useEffect","useRef","useState","PropTypes","HeaderIconButton","TitleEditor","title","onSave","onCancel","value","setValue","inputRef","isDone","current","focus","select","finish","callback","save","nextTitle","trim","cancel","onKeyDown","event","key","preventDefault","keepInputFocus","createElement","className","ref","type","onChange","target","onBlur","icon","label","onMouseDown","onClick","propTypes","string","isRequired","func"],"sources":["../../../src/components/PageHeader/TitleEditor.js"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport HeaderIconButton from './HeaderIconButton';\n\nconst TitleEditor = ({ title, onSave, onCancel }) => {\n  const [value, setValue] = useState(title);\n  const inputRef = useRef(null);\n  // Blur and the tick/cross clicks can both fire for one edit; only the first wins.\n  // Blur discards: a change is only kept through Enter or the tick.\n  const isDone = useRef(false);\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.focus();\n      inputRef.current.select();\n    }\n  }, []);\n\n  const finish = callback => {\n    if (isDone.current) return;\n    isDone.current = true;\n    callback();\n  };\n\n  const save = () =>\n    finish(() => {\n      const nextTitle = value.trim();\n      if (!nextTitle || nextTitle === title) {\n        onCancel();\n        return;\n      }\n      onSave(nextTitle);\n    });\n\n  const cancel = () => finish(onCancel);\n\n  const onKeyDown = event => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      save();\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      cancel();\n    }\n  };\n\n  const keepInputFocus = event => event.preventDefault();\n\n  return (\n    <div className=\"page-header__title-editor\">\n      <input\n        ref={inputRef}\n        type=\"text\"\n        className=\"page-header__title-input\"\n        value={value}\n        onChange={({ target }) => setValue(target.value)}\n        onKeyDown={onKeyDown}\n        onBlur={cancel}\n        aria-label=\"Title\"\n        data-testid=\"page-header-title-input\"\n      />\n      <div className=\"page-header__title-editor-actions\">\n        <HeaderIconButton\n          icon=\"check\"\n          label=\"Save title\"\n          onMouseDown={keepInputFocus}\n          onClick={save}\n          data-testid=\"page-header-title-save\"\n        />\n        <HeaderIconButton\n          icon=\"close\"\n          label=\"Cancel\"\n          onMouseDown={keepInputFocus}\n          onClick={cancel}\n          data-testid=\"page-header-title-cancel\"\n        />\n      </div>\n    </div>\n  );\n};\n\nTitleEditor.propTypes = {\n  title: PropTypes.string.isRequired,\n  onSave: PropTypes.func.isRequired,\n  onCancel: PropTypes.func.isRequired\n};\n\nexport default TitleEditor;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/admin",
-  "version": "0.146.0-rc-eagle-3.10",
+  "version": "0.146.0-rc-eagle-3.11",
   "description": "Blaze example project",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -36,15 +36,15 @@
     "@blaze-cms/admin-ui-utils": "0.146.0-rc-eagle-3.10",
     "@blaze-cms/core-errors-ui": "0.146.0-rc-eagle-3.0",
     "@blaze-cms/core-ui": "0.146.0-rc-eagle-3.6",
-    "@blaze-cms/plugin-admin-core-ui": "0.146.0-rc-eagle-3.10",
-    "@blaze-cms/plugin-auth-local-ui": "0.146.0-rc-eagle-3.10",
-    "@blaze-cms/plugin-auth-ui": "0.146.0-rc-eagle-3.10",
-    "@blaze-cms/plugin-data-ui": "0.146.0-rc-eagle-3.10",
-    "@blaze-cms/plugin-google-maps-ui": "0.146.0-rc-eagle-3.10",
-    "@blaze-cms/plugin-gtm-ui": "0.146.0-rc-eagle-3.10",
-    "@blaze-cms/plugin-media-ui": "0.146.0-rc-eagle-3.10",
-    "@blaze-cms/plugin-page-builder-ui": "0.146.0-rc-eagle-3.10",
-    "@blaze-cms/react-form-builder": "0.146.0-rc-eagle-3.10",
+    "@blaze-cms/plugin-admin-core-ui": "0.146.0-rc-eagle-3.11",
+    "@blaze-cms/plugin-auth-local-ui": "0.146.0-rc-eagle-3.11",
+    "@blaze-cms/plugin-auth-ui": "0.146.0-rc-eagle-3.11",
+    "@blaze-cms/plugin-data-ui": "0.146.0-rc-eagle-3.11",
+    "@blaze-cms/plugin-google-maps-ui": "0.146.0-rc-eagle-3.11",
+    "@blaze-cms/plugin-gtm-ui": "0.146.0-rc-eagle-3.11",
+    "@blaze-cms/plugin-media-ui": "0.146.0-rc-eagle-3.11",
+    "@blaze-cms/plugin-page-builder-ui": "0.146.0-rc-eagle-3.11",
+    "@blaze-cms/react-form-builder": "0.146.0-rc-eagle-3.11",
     "@blaze-cms/setup-ui": "0.146.0-rc-eagle-3.0",
     "@blaze-react/alert": "^0.7.0",
     "@blaze-react/modal": "^0.7.0",
@@ -65,5 +65,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "782e5e3c8df78fc8c873288a155958ff5b5c6705"
+  "gitHead": "7608ce3003f6f888840e6dd27c2888a97a1be839"
 }

package/src/components/PageHeader/HeaderIconButton.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const HeaderIconButton = ({ icon, label, className, ...rest }) => (
+  <button
+    type="button"
+    className={`page-header__icon-button${className ? ` ${className}` : ''}`}
+    title={label}
+    aria-label={label}
+    {...rest}>
+    <span className="material-icons" aria-hidden="true">
+      {icon}
+    </span>
+  </button>
+);
+
+HeaderIconButton.propTypes = {
+  icon: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  className: PropTypes.string
+};
+
+HeaderIconButton.defaultProps = {
+  className: ''
+};
+
+export default HeaderIconButton;

package/src/components/PageHeader/PageHeader.js

@@ -1,44 +1,114 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import MetaTitle from '../MetaTitle/MetaTitle';
+import HeaderIconButton from './HeaderIconButton';
+import TitleEditor from './TitleEditor';
 
-const PageHeader = ({ title, subtitle, children, pageName, onViewUrl }) => (
-  <>
-    <MetaTitle title={title} pageName={pageName} />
-    <div className="page-header--wrapper">
-      <div className="page-header page-header--sticky">
-        {onViewUrl ? (
+const PageHeader = ({
+  title,
+  subtitle,
+  children,
+  pageName,
+  onViewUrl,
+  viewUrlDisabledReason,
+  onTitleChange,
+  titleActions
+}) => {
+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+  const isTitleEditable = typeof onTitleChange === 'function';
+  // A reason renders the button disabled instead of dropping it.
+  const showViewButton = !!onViewUrl || !!viewUrlDisabledReason;
+  const hasTitleActions = isTitleEditable || !!titleActions || showViewButton;
+
+  const startEditing = () => setIsEditingTitle(true);
+  const stopEditing = () => setIsEditingTitle(false);
+  const saveTitle = nextTitle => {
+    stopEditing();
+    onTitleChange(nextTitle);
+  };
+
+  const renderTitle = () => {
+    if (isEditingTitle) {
+      return <TitleEditor title={title} onSave={saveTitle} onCancel={stopEditing} />;
+    }
+
+    return (
+      <>
+        {isTitleEditable ? (
           <div
-            className="page-header__heading page-header__heading--active"
-            onClick={onViewUrl}
-            role="button">
+            className="page-header__heading page-header__heading--editable"
+            onClick={startEditing}
+            title="Edit title"
+            role="button"
+            tabIndex={0}
+            onKeyDown={({ key }) => key === 'Enter' && startEditing()}>
             {title}
           </div>
         ) : (
           <div className="page-header__heading">{title}</div>
         )}
-        <div className="page-header__button">{children}</div>
-      </div>
-      <div className="page-header page-header--base">
-        <div className="page-header__subheading">{subtitle}</div>
+        {hasTitleActions && (
+          <div className="page-header__title-actions">
+            {isTitleEditable && (
+              <HeaderIconButton
+                icon="edit"
+                label="Edit title"
+                onClick={startEditing}
+                data-testid="page-header-title-edit"
+              />
+            )}
+            {titleActions}
+            {showViewButton && (
+              <HeaderIconButton
+                icon="open_in_new"
+                label={viewUrlDisabledReason || 'View'}
+                className={viewUrlDisabledReason ? 'page-header__icon-button--disabled' : ''}
+                aria-disabled={viewUrlDisabledReason ? 'true' : undefined}
+                onClick={viewUrlDisabledReason ? undefined : onViewUrl}
+                data-testid="page-header-view"
+              />
+            )}
+          </div>
+        )}
+      </>
+    );
+  };
+
+  return (
+    <>
+      <MetaTitle title={title} pageName={pageName} />
+      <div className="page-header--wrapper">
+        <div className="page-header page-header--sticky">
+          <div className="page-header__title">{renderTitle()}</div>
+          <div className="page-header__button">{children}</div>
+        </div>
+        <div className="page-header page-header--base">
+          <div className="page-header__subheading">{subtitle}</div>
+        </div>
       </div>
-    </div>
-  </>
-);
+    </>
+  );
+};
 
 PageHeader.propTypes = {
   title: PropTypes.string.isRequired,
   subtitle: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
   pageName: PropTypes.string,
-  onViewUrl: PropTypes.func
+  onViewUrl: PropTypes.func,
+  viewUrlDisabledReason: PropTypes.string,
+  onTitleChange: PropTypes.func,
+  titleActions: PropTypes.node
 };
 
 PageHeader.defaultProps = {
   subtitle: '',
   children: '',
   pageName: '',
-  onViewUrl: null
+  onViewUrl: null,
+  viewUrlDisabledReason: null,
+  onTitleChange: null,
+  titleActions: null
 };
 
 const PageHeaderActions = ({ children }) => (
@@ -50,5 +120,6 @@ PageHeaderActions.propTypes = {
 };
 
 PageHeader.Actions = PageHeaderActions;
+PageHeader.IconButton = HeaderIconButton;
 
 export default PageHeader;

package/src/components/PageHeader/TitleEditor.js

@@ -0,0 +1,88 @@
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import HeaderIconButton from './HeaderIconButton';
+
+const TitleEditor = ({ title, onSave, onCancel }) => {
+  const [value, setValue] = useState(title);
+  const inputRef = useRef(null);
+  // Blur and the tick/cross clicks can both fire for one edit; only the first wins.
+  // Blur discards: a change is only kept through Enter or the tick.
+  const isDone = useRef(false);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, []);
+
+  const finish = callback => {
+    if (isDone.current) return;
+    isDone.current = true;
+    callback();
+  };
+
+  const save = () =>
+    finish(() => {
+      const nextTitle = value.trim();
+      if (!nextTitle || nextTitle === title) {
+        onCancel();
+        return;
+      }
+      onSave(nextTitle);
+    });
+
+  const cancel = () => finish(onCancel);
+
+  const onKeyDown = event => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      save();
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      cancel();
+    }
+  };
+
+  const keepInputFocus = event => event.preventDefault();
+
+  return (
+    <div className="page-header__title-editor">
+      <input
+        ref={inputRef}
+        type="text"
+        className="page-header__title-input"
+        value={value}
+        onChange={({ target }) => setValue(target.value)}
+        onKeyDown={onKeyDown}
+        onBlur={cancel}
+        aria-label="Title"
+        data-testid="page-header-title-input"
+      />
+      <div className="page-header__title-editor-actions">
+        <HeaderIconButton
+          icon="check"
+          label="Save title"
+          onMouseDown={keepInputFocus}
+          onClick={save}
+          data-testid="page-header-title-save"
+        />
+        <HeaderIconButton
+          icon="close"
+          label="Cancel"
+          onMouseDown={keepInputFocus}
+          onClick={cancel}
+          data-testid="page-header-title-cancel"
+        />
+      </div>
+    </div>
+  );
+};
+
+TitleEditor.propTypes = {
+  title: PropTypes.string.isRequired,
+  onSave: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired
+};
+
+export default TitleEditor;