@paprika/takeover 1.0.23 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## 1.1.0
+
+### Minor Changes
+
+- 70cac61: - Update `react-focus-lock` package to support wrapping in a web component
+
+### Patch Changes
+
+- Updated dependencies [3a068d6]
+- Updated dependencies [70cac61]
+  - @paprika/overlay@1.0.15
+
+## 1.1.0-next.1
+
+### Minor Changes
+
+- 70cac61: - Update `react-focus-lock` package to support wrapping in a web component
+
+### Patch Changes
+
+- Updated dependencies [70cac61]
+  - @paprika/overlay@1.0.15-next.1
+
+## 1.0.24-next.0
+
+### Patch Changes
+
+- Updated dependencies [3a068d6]
+  - @paprika/overlay@1.0.15-next.0
+
 ## 1.0.23
 
 ### Patch Changes

package/README.md

@@ -22,26 +22,28 @@ npm install @paprika/takeover
 
 ### Takeover
 
-| Prop         | Type   | required | default   | Description                                            |
-| ------------ | ------ | -------- | --------- | ------------------------------------------------------ |
-| a11yText     | string | false    | null      |                                                        |
-| children     | node   | true     | -         | The content for the Takeover                           |
-| isOpen       | bool   | true     | -         | Control the visibility of the Takeover                 |
-| onAfterClose | func   | false    | () => {}  | Callback once the Takeover has been closed event       |
-| onAfterOpen  | func   | false    | () => {}  | Callback once the Takeover has been opened event       |
-| onClose      | func   | false    | () => {}  | Callback triggered when the takeover needs to be close |
-| zIndex       | number | false    | zValue(5) | The z-index of the Takeover content                    |
+| Prop         | Type   | required | default   | Description                                                  |
+| ------------ | ------ | -------- | --------- | ------------------------------------------------------------ |
+| a11yText     | string | false    | null      |                                                              |
+| children     | node   | true     | -         | The content for the Takeover                                 |
+| isOpen       | bool   | true     | -         | Control the visibility of the Takeover                       |
+| onAfterClose | func   | false    | () => {}  | Callback once the Takeover has been closed event             |
+| onAfterOpen  | func   | false    | () => {}  | Callback once the Takeover has been opened event             |
+| onClose      | func   | false    | () => {}  | Callback triggered when the takeover needs to be close       |
+| zIndex       | number | false    | zValue(5) | The z-index of the Takeover content                          |
+| isFullWidth  | custom | false    | false     | Set Takeover to full width without any margins and max-width |
 
 ### Takeover.Header
 
-| Prop           | Type                                                    | required | default                   | Description |
-| -------------- | ------------------------------------------------------- | -------- | ------------------------- | ----------- |
-| children       | node                                                    | true     | -                         |             |
-| hasCloseButton | bool                                                    | false    | true                      |             |
-| kind           | [ Header.types.kind.DEFAULT, Header.types.kind.PRIMARY] | false    | Header.types.kind.DEFAULT |             |
-| level          | [ 1, 2, 3, 4, 5, 6]                                     | false    | 3                         |             |
-| onClose        | func                                                    | false    | () => {}                  |             |
-| refHeading     | custom                                                  | false    | null                      |             |
+| Prop           | Type                                                    | required | default                   | Description                                                           |
+| -------------- | ------------------------------------------------------- | -------- | ------------------------- | --------------------------------------------------------------------- |
+| children       | node                                                    | true     | -                         |                                                                       |
+| hasCloseButton | bool                                                    | false    | true                      |                                                                       |
+| kind           | [ Header.types.kind.DEFAULT, Header.types.kind.PRIMARY] | false    | Header.types.kind.DEFAULT |                                                                       |
+| level          | [ 1, 2, 3, 4, 5, 6]                                     | false    | 2                         |                                                                       |
+| onClose        | func                                                    | false    | () => {}                  |                                                                       |
+| refHeading     | custom                                                  | false    | null                      |                                                                       |
+| tools          | node                                                    | false    | null                      | Add node object to the right side of heading next to the close button |
 
 ### Takeover.FocusLock
 

package/lib/Takeover.js

@@ -50,7 +50,7 @@ var _Content = _interopRequireDefault(require("./components/Content/Content"));
 
 var sc = _interopRequireWildcard(require("./Takeover.styles"));
 
-var _excluded = ["a11yText", "isOpen", "onClose", "onAfterClose", "onAfterOpen", "zIndex"];
+var _excluded = ["a11yText", "isOpen", "onClose", "onAfterClose", "onAfterOpen", "zIndex", "isFullWidth"];
 
 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); }
 
@@ -80,14 +80,18 @@ var propTypes = {
   onClose: _propTypes["default"].func,
 
   /** The z-index of the Takeover content */
-  zIndex: _propTypes["default"].number
+  zIndex: _propTypes["default"].number,
+
+  /** Set Takeover to full width without any margins and max-width */
+  isFullWidth: _propTypes["default"]["boolean"]
 };
 var defaultProps = {
   a11yText: null,
   onClose: function onClose() {},
   onAfterClose: function onAfterClose() {},
   onAfterOpen: function onAfterOpen() {},
-  zIndex: (0, _helpers.zValue)(5)
+  zIndex: (0, _helpers.zValue)(5),
+  isFullWidth: false
 };
 
 function Takeover(props) {
@@ -97,6 +101,7 @@ function Takeover(props) {
       onAfterClose = props.onAfterClose,
       onAfterOpen = props.onAfterOpen,
       zIndex = props.zIndex,
+      isFullWidth = props.isFullWidth,
       moreProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
   var _extractChildren = (0, _helpers2.extractChildren)(moreProps.children, ["Takeover.Content", "Takeover.FocusLock", "Takeover.Header", "Takeover.Overlay"]),
@@ -114,14 +119,15 @@ function Takeover(props) {
 
   var overlayProps = _objectSpread(_objectSpread({
     "data-pka-anchor": "takeover.overlay",
-    hasBackdrop: false,
+    hasBackdrop: true,
     focusLockOptions: focusLockOptions
   }, overlayExtracted && overlayExtracted.props), {}, {
     isOpen: isOpen,
     onAfterClose: onAfterClose,
     onAfterOpen: onAfterOpen,
     onClose: onClose,
-    zIndex: zIndex
+    zIndex: zIndex,
+    isBackdropClickDisabled: true
   });
 
   function getAriaLabel() {
@@ -137,7 +143,8 @@ function Takeover(props) {
 
   return /*#__PURE__*/_react["default"].createElement(_overlay["default"], overlayProps, function (state) {
     return /*#__PURE__*/_react["default"].createElement(sc.Takeover, (0, _extends2["default"])({
-      state: state
+      state: state,
+      isFullWidth: isFullWidth
     }, moreProps, {
       "aria-label": getAriaLabel(),
       "aria-modal": true,

package/lib/Takeover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Takeover.js"],"names":["propTypes","a11yText","PropTypes","string","children","node","isRequired","isOpen","bool","onAfterClose","func","onAfterOpen","onClose","zIndex","number","defaultProps","Takeover","props","moreProps","contentExtracted","focusLockExtracted","headerExtracted","overlayExtracted","focusLockProps","focusLockOptions","as","sc","FocusLock","overlayProps","hasBackdrop","getAriaLabel","console","error","state","displayName","Header","Content","Overlay"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { zValue } from \"@paprika/stylers/lib/helpers\";\nimport { extractChildren } from \"@paprika/helpers\";\nimport OriginalOverlay from \"@paprika/overlay\";\nimport Overlay from \"./components/Overlay\";\nimport FocusLock from \"./components/FocusLock\";\nimport Header from \"./components/Header/Header\";\nimport Content from \"./components/Content/Content\";\nimport * as sc from \"./Takeover.styles\";\n\nconst propTypes = {\n  /* Description of the Takeover dialog for assistive technology */\n  a11yText: PropTypes.string,\n\n  /** The content for the Takeover */\n  children: PropTypes.node.isRequired,\n\n  /** Control the visibility of the Takeover */\n  isOpen: PropTypes.bool.isRequired,\n\n  /** Callback once the Takeover has been closed event */\n  onAfterClose: PropTypes.func,\n\n  /** Callback once the Takeover has been opened event */\n  onAfterOpen: PropTypes.func,\n\n  /** Callback triggered when the takeover needs to be close */\n  onClose: PropTypes.func,\n\n  /** The z-index of the Takeover content */\n  zIndex: PropTypes.number,\n};\n\nconst defaultProps = {\n  a11yText: null,\n  onClose: () => {},\n  onAfterClose: () => {},\n  onAfterOpen: () => {},\n  zIndex: zValue(5),\n};\n\nexport default function Takeover(props) {\n  const { a11yText, isOpen, onClose, onAfterClose, onAfterOpen, zIndex, ...moreProps } = props;\n\n  const {\n    \"Takeover.Content\": contentExtracted,\n    \"Takeover.FocusLock\": focusLockExtracted,\n    \"Takeover.Header\": headerExtracted,\n    \"Takeover.Overlay\": overlayExtracted,\n    children,\n  } = extractChildren(moreProps.children, [\n    \"Takeover.Content\",\n    \"Takeover.FocusLock\",\n    \"Takeover.Header\",\n    \"Takeover.Overlay\",\n  ]);\n\n  const focusLockProps = focusLockExtracted ? focusLockExtracted.props : {};\n  const focusLockOptions = {\n    as: sc.FocusLock,\n    ...(focusLockProps || {}),\n  };\n\n  const overlayProps = {\n    \"data-pka-anchor\": \"takeover.overlay\",\n    hasBackdrop: false,\n    focusLockOptions,\n    ...(overlayExtracted && overlayExtracted.props),\n    isOpen,\n    onAfterClose,\n    onAfterOpen,\n    onClose,\n    zIndex,\n  };\n\n  function getAriaLabel() {\n    if (a11yText) return a11yText;\n    if (!headerExtracted || typeof headerExtracted.props.children !== \"string\") {\n      console.error(\n        \"Accessibility is important 😇\\nThe Takeover requires either an a11yText prop or a Takeover.Header with a string for children.\"\n      );\n      return null;\n    }\n\n    return headerExtracted.props.children;\n  }\n\n  return (\n    <OriginalOverlay {...overlayProps}>\n      {state => (\n        <sc.Takeover\n          state={state}\n          {...moreProps}\n          aria-label={getAriaLabel()}\n          aria-modal\n          data-pka-anchor=\"takeover\"\n          role=\"dialog\"\n          zIndex={zIndex}\n        >\n          {headerExtracted && <sc.Header {...headerExtracted.props} onClose={onClose} />}\n          {contentExtracted && (\n            <sc.Content role=\"region\" tabIndex=\"0\">\n              {contentExtracted}\n            </sc.Content>\n          )}\n          {children}\n        </sc.Takeover>\n      )}\n    </OriginalOverlay>\n  );\n}\n\nTakeover.displayName = \"Takeover\";\nTakeover.propTypes = propTypes;\nTakeover.defaultProps = defaultProps;\n\nTakeover.Header = Header;\nTakeover.Content = Content;\nTakeover.FocusLock = FocusLock;\nTakeover.Overlay = Overlay;\n"],"file":"Takeover.js"}
+{"version":3,"sources":["../src/Takeover.js"],"names":["propTypes","a11yText","PropTypes","string","children","node","isRequired","isOpen","bool","onAfterClose","func","onAfterOpen","onClose","zIndex","number","isFullWidth","defaultProps","Takeover","props","moreProps","contentExtracted","focusLockExtracted","headerExtracted","overlayExtracted","focusLockProps","focusLockOptions","as","sc","FocusLock","overlayProps","hasBackdrop","isBackdropClickDisabled","getAriaLabel","console","error","state","displayName","Header","Content","Overlay"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { zValue } from \"@paprika/stylers/lib/helpers\";\nimport { extractChildren } from \"@paprika/helpers\";\nimport OriginalOverlay from \"@paprika/overlay\";\nimport Overlay from \"./components/Overlay\";\nimport FocusLock from \"./components/FocusLock\";\nimport Header from \"./components/Header/Header\";\nimport Content from \"./components/Content/Content\";\nimport * as sc from \"./Takeover.styles\";\n\nconst propTypes = {\n  /* Description of the Takeover dialog for assistive technology */\n  a11yText: PropTypes.string,\n\n  /** The content for the Takeover */\n  children: PropTypes.node.isRequired,\n\n  /** Control the visibility of the Takeover */\n  isOpen: PropTypes.bool.isRequired,\n\n  /** Callback once the Takeover has been closed event */\n  onAfterClose: PropTypes.func,\n\n  /** Callback once the Takeover has been opened event */\n  onAfterOpen: PropTypes.func,\n\n  /** Callback triggered when the takeover needs to be close */\n  onClose: PropTypes.func,\n\n  /** The z-index of the Takeover content */\n  zIndex: PropTypes.number,\n\n  /** Set Takeover to full width without any margins and max-width */\n  isFullWidth: PropTypes.boolean,\n};\n\nconst defaultProps = {\n  a11yText: null,\n  onClose: () => {},\n  onAfterClose: () => {},\n  onAfterOpen: () => {},\n  zIndex: zValue(5),\n  isFullWidth: false,\n};\n\nexport default function Takeover(props) {\n  const { a11yText, isOpen, onClose, onAfterClose, onAfterOpen, zIndex, isFullWidth, ...moreProps } = props;\n\n  const {\n    \"Takeover.Content\": contentExtracted,\n    \"Takeover.FocusLock\": focusLockExtracted,\n    \"Takeover.Header\": headerExtracted,\n    \"Takeover.Overlay\": overlayExtracted,\n    children,\n  } = extractChildren(moreProps.children, [\n    \"Takeover.Content\",\n    \"Takeover.FocusLock\",\n    \"Takeover.Header\",\n    \"Takeover.Overlay\",\n  ]);\n\n  const focusLockProps = focusLockExtracted ? focusLockExtracted.props : {};\n  const focusLockOptions = {\n    as: sc.FocusLock,\n    ...(focusLockProps || {}),\n  };\n\n  const overlayProps = {\n    \"data-pka-anchor\": \"takeover.overlay\",\n    hasBackdrop: true,\n    focusLockOptions,\n    ...(overlayExtracted && overlayExtracted.props),\n    isOpen,\n    onAfterClose,\n    onAfterOpen,\n    onClose,\n    zIndex,\n    isBackdropClickDisabled: true,\n  };\n\n  function getAriaLabel() {\n    if (a11yText) return a11yText;\n    if (!headerExtracted || typeof headerExtracted.props.children !== \"string\") {\n      console.error(\n        \"Accessibility is important 😇\\nThe Takeover requires either an a11yText prop or a Takeover.Header with a string for children.\"\n      );\n      return null;\n    }\n\n    return headerExtracted.props.children;\n  }\n\n  return (\n    <OriginalOverlay {...overlayProps}>\n      {state => (\n        <sc.Takeover\n          state={state}\n          isFullWidth={isFullWidth}\n          {...moreProps}\n          aria-label={getAriaLabel()}\n          aria-modal\n          data-pka-anchor=\"takeover\"\n          role=\"dialog\"\n          zIndex={zIndex}\n        >\n          {headerExtracted && <sc.Header {...headerExtracted.props} onClose={onClose} />}\n          {contentExtracted && (\n            <sc.Content role=\"region\" tabIndex=\"0\">\n              {contentExtracted}\n            </sc.Content>\n          )}\n          {children}\n        </sc.Takeover>\n      )}\n    </OriginalOverlay>\n  );\n}\n\nTakeover.displayName = \"Takeover\";\nTakeover.propTypes = propTypes;\nTakeover.defaultProps = defaultProps;\n\nTakeover.Header = Header;\nTakeover.Content = Content;\nTakeover.FocusLock = FocusLock;\nTakeover.Overlay = Overlay;\n"],"file":"Takeover.js"}

package/lib/Takeover.styles.js

@@ -22,6 +22,8 @@ var _tokens = _interopRequireDefault(require("@paprika/tokens"));
 
 var _stylers = _interopRequireDefault(require("@paprika/stylers"));
 
+var _helpers = require("@paprika/stylers/lib/helpers");
+
 var _Header = _interopRequireDefault(require("./components/Header/Header"));
 
 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); }
@@ -48,8 +50,9 @@ var Takeover = _styledComponents["default"].div.withConfig({
   componentId: "sc-1pjp0u6-1"
 })(function (_ref) {
   var zIndex = _ref.zIndex,
-      state = _ref.state;
-  return (0, _styledComponents.css)(["background-color:", ";bottom:0;display:flex;flex-direction:column;left:0;position:fixed;right:0;top:0;transition:all ", "ms ease;z-index:", ";", ";"], _tokens["default"].backgroundColor.level0, _tokens["default"].overlay.animationDuration, zIndex, states[state]);
+      state = _ref.state,
+      isFullWidth = _ref.isFullWidth;
+  return (0, _styledComponents.css)(["background-color:", ";border:1px ", " solid;border-radius:", ";bottom:0;box-shadow:0 12px 24px 0 rgba(0,0,0,0.12),0 0px 6px 0 rgba(0,0,0,0.16);display:flex;flex-direction:column;left:0;margin:", ";", ";position:fixed;right:0;top:0;transition:all ", "ms ease;z-index:", ";", ""], _tokens["default"].backgroundColor.level0, _tokens["default"].border.color, _tokens["default"].card.borderRadius, (0, _helpers.spacer)(3), states[state], _tokens["default"].overlay.animationDuration, zIndex, !isFullWidth && " \n        max-width: 1248px;\n        @media only screen and (min-width: 1280px) {\n        margin: ".concat((0, _helpers.spacer)(3), " auto;\n      }\n      "));
 });
 
 exports.Takeover = Takeover;

package/lib/Takeover.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Takeover.styles.js"],"names":["FocusLock","styled","div","openedCss","css","closedCss","states","entering","entered","exiting","exited","Takeover","zIndex","state","tokens","backgroundColor","level0","overlay","animationDuration","Header","OriginalHeader","Content","stylers","focusRing","subtle"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAEO,IAAMA,SAAS,GAAGC,6BAAOC,GAAV;AAAA;AAAA;AAAA,yHAAf;;;AAaP,IAAMC,SAAS,OAAGC,qBAAH,iBAAf;AAIA,IAAMC,SAAS,OAAGD,qBAAH,iBAAf;AAIA,IAAME,MAAM,GAAG;AACbC,EAAAA,QAAQ,EAAEJ,SADG;AAEbK,EAAAA,OAAO,EAAEL,SAFI;AAGbM,EAAAA,OAAO,EAAEJ,SAHI;AAIbK,EAAAA,MAAM,EAAEL;AAJK,CAAf;;AAOO,IAAMM,QAAQ,GAAGV,6BAAOC,GAAV;AAAA;AAAA;AAAA,GACnB;AAAA,MAAGU,MAAH,QAAGA,MAAH;AAAA,MAAWC,KAAX,QAAWA,KAAX;AAAA,aAAuBT,qBAAvB,2JACsBU,mBAAOC,eAAP,CAAuBC,MAD7C,EASoBF,mBAAOG,OAAP,CAAeC,iBATnC,EAUaN,MAVb,EAWIN,MAAM,CAACO,KAAD,CAXV;AAAA,CADmB,CAAd;;;AAgBA,IAAMM,MAAM,GAAG,kCAAOC,kBAAP,CAAH;AAAA;AAAA;AAAA,kBAAZ;;;AAIA,IAAMC,OAAO,GAAGpB,6BAAOC,GAAV;AAAA;AAAA;AAAA,mDAKdoB,oBAAQC,SAAR,CAAkBC,MAAlB,CAAyB,IAAzB,CALc,CAAb","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tokens from \"@paprika/tokens\";\nimport stylers from \"@paprika/stylers\";\nimport OriginalHeader from \"./components/Header/Header\";\n\nexport const FocusLock = styled.div`\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &::before,\n  &::after {\n    content: \"\";\n    display: block;\n  }\n`;\n\nconst openedCss = css`\n  opacity: 1;\n`;\n\nconst closedCss = css`\n  opacity: 0;\n`;\n\nconst states = {\n  entering: openedCss,\n  entered: openedCss,\n  exiting: closedCss,\n  exited: closedCss,\n};\n\nexport const Takeover = styled.div(\n  ({ zIndex, state }) => css`\n    background-color: ${tokens.backgroundColor.level0};\n    bottom: 0;\n    display: flex;\n    flex-direction: column;\n    left: 0;\n    position: fixed;\n    right: 0;\n    top: 0;\n    transition: all ${tokens.overlay.animationDuration}ms ease;\n    z-index: ${zIndex};\n    ${states[state]};\n  `\n);\n\nexport const Header = styled(OriginalHeader)`\n  flex: none;\n`;\n\nexport const Content = styled.div`\n  flex-grow: 1;\n  overflow-y: auto;\n\n  &:focus {\n    ${stylers.focusRing.subtle(true)};\n  }\n`;\n"],"file":"Takeover.styles.js"}
+{"version":3,"sources":["../src/Takeover.styles.js"],"names":["FocusLock","styled","div","openedCss","css","closedCss","states","entering","entered","exiting","exited","Takeover","zIndex","state","isFullWidth","tokens","backgroundColor","level0","border","color","card","borderRadius","overlay","animationDuration","Header","OriginalHeader","Content","stylers","focusRing","subtle"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEO,IAAMA,SAAS,GAAGC,6BAAOC,GAAV;AAAA;AAAA;AAAA,yHAAf;;;AAaP,IAAMC,SAAS,OAAGC,qBAAH,iBAAf;AAIA,IAAMC,SAAS,OAAGD,qBAAH,iBAAf;AAIA,IAAME,MAAM,GAAG;AACbC,EAAAA,QAAQ,EAAEJ,SADG;AAEbK,EAAAA,OAAO,EAAEL,SAFI;AAGbM,EAAAA,OAAO,EAAEJ,SAHI;AAIbK,EAAAA,MAAM,EAAEL;AAJK,CAAf;;AAOO,IAAMM,QAAQ,GAAGV,6BAAOC,GAAV;AAAA;AAAA;AAAA,GACnB;AAAA,MAAGU,MAAH,QAAGA,MAAH;AAAA,MAAWC,KAAX,QAAWA,KAAX;AAAA,MAAkBC,WAAlB,QAAkBA,WAAlB;AAAA,aAAoCV,qBAApC,2RACsBW,mBAAOC,eAAP,CAAuBC,MAD7C,EAEgBF,mBAAOG,MAAP,CAAcC,KAF9B,EAGmBJ,mBAAOK,IAAP,CAAYC,YAH/B,EASY,qBAAO,CAAP,CATZ,EAUIf,MAAM,CAACO,KAAD,CAVV,EAcoBE,mBAAOO,OAAP,CAAeC,iBAdnC,EAeaX,MAfb,EAgBI,CAACE,WAAD,mHAIY,qBAAO,CAAP,CAJZ,4BAhBJ;AAAA,CADmB,CAAd;;;AA2BA,IAAMU,MAAM,GAAG,kCAAOC,kBAAP,CAAH;AAAA;AAAA;AAAA,kBAAZ;;;AAIA,IAAMC,OAAO,GAAGzB,6BAAOC,GAAV;AAAA;AAAA;AAAA,mDAKdyB,oBAAQC,SAAR,CAAkBC,MAAlB,CAAyB,IAAzB,CALc,CAAb","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tokens from \"@paprika/tokens\";\nimport stylers from \"@paprika/stylers\";\nimport { spacer } from \"@paprika/stylers/lib/helpers\";\nimport OriginalHeader from \"./components/Header/Header\";\n\nexport const FocusLock = styled.div`\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &::before,\n  &::after {\n    content: \"\";\n    display: block;\n  }\n`;\n\nconst openedCss = css`\n  opacity: 1;\n`;\n\nconst closedCss = css`\n  opacity: 0;\n`;\n\nconst states = {\n  entering: openedCss,\n  entered: openedCss,\n  exiting: closedCss,\n  exited: closedCss,\n};\n\nexport const Takeover = styled.div(\n  ({ zIndex, state, isFullWidth }) => css`\n    background-color: ${tokens.backgroundColor.level0};\n    border: 1px ${tokens.border.color} solid;\n    border-radius: ${tokens.card.borderRadius};\n    bottom: 0;\n    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.12), 0 0px 6px 0 rgba(0, 0, 0, 0.16);\n    display: flex;\n    flex-direction: column;\n    left: 0;\n    margin: ${spacer(3)};\n    ${states[state]};\n    position: fixed;\n    right: 0;\n    top: 0;\n    transition: all ${tokens.overlay.animationDuration}ms ease;\n    z-index: ${zIndex};\n    ${!isFullWidth &&\n      ` \n        max-width: 1248px;\n        @media only screen and (min-width: 1280px) {\n        margin: ${spacer(3)} auto;\n      }\n      `}\n  `\n);\n\nexport const Header = styled(OriginalHeader)`\n  flex: none;\n`;\n\nexport const Content = styled.div`\n  flex-grow: 1;\n  overflow-y: auto;\n\n  &:focus {\n    ${stylers.focusRing.subtle(true)};\n  }\n`;\n"],"file":"Takeover.styles.js"}

package/lib/components/Header/Header.js

@@ -32,7 +32,7 @@ var types = _interopRequireWildcard(require("../../types"));
 
 var sc = _interopRequireWildcard(require("./Header.styles"));
 
-var _excluded = ["children", "level", "hasCloseButton", "kind", "onClose", "refHeading"];
+var _excluded = ["children", "level", "hasCloseButton", "kind", "onClose", "refHeading", "tools"];
 
 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); }
 
@@ -45,6 +45,7 @@ var Header = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       kind = props.kind,
       onClose = props.onClose,
       refHeading = props.refHeading,
+      tools = props.tools,
       moreProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   return /*#__PURE__*/_react["default"].createElement(sc.Header, (0, _extends2["default"])({
     ref: ref,
@@ -53,13 +54,16 @@ var Header = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     level: level,
     displayLevel: 3,
     isLight: true,
-    ref: refHeading
-  }, children), hasCloseButton && /*#__PURE__*/_react["default"].createElement(sc.CloseButton, null, /*#__PURE__*/_react["default"].createElement(_button["default"].Close, {
+    ref: refHeading,
+    title: typeof children === "string" ? children : null
+  }, children), /*#__PURE__*/_react["default"].createElement(sc.HeaderRightContainer, null, tools && /*#__PURE__*/_react["default"].createElement(sc.ToolContainer, {
+    "data-pka-anchor": "takeover.header.tools"
+  }, tools), hasCloseButton && /*#__PURE__*/_react["default"].createElement(sc.CloseButton, null, /*#__PURE__*/_react["default"].createElement(_button["default"].Close, {
     "data-pka-anchor": "takeover.header.close-button",
     onClick: onClose,
     isDark: kind === "primary" || null,
     size: "medium"
-  })));
+  }))));
 });
 
 Header.types = {
@@ -74,14 +78,18 @@ var propTypes = {
   kind: _propTypes["default"].oneOf([Header.types.kind.DEFAULT, Header.types.kind.PRIMARY]),
   level: _propTypes["default"].oneOf([1, 2, 3, 4, 5, 6]),
   onClose: _propTypes["default"].func,
-  refHeading: (0, _helpers.RefOf)()
+  refHeading: (0, _helpers.RefOf)(),
+
+  /** Add node object to the right side of heading next to the close button */
+  tools: _propTypes["default"].node
 };
 var defaultProps = {
   hasCloseButton: true,
-  level: 3,
+  level: 2,
   kind: Header.types.kind.DEFAULT,
   onClose: function onClose() {},
-  refHeading: null
+  refHeading: null,
+  tools: null
 };
 Header.displayName = "Takeover.Header";
 Header.propTypes = propTypes;

package/lib/components/Header/Header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Header/Header.js"],"names":["Header","React","forwardRef","props","ref","children","level","hasCloseButton","kind","onClose","refHeading","moreProps","types","DEFAULT","PRIMARY","propTypes","PropTypes","node","isRequired","bool","oneOf","func","defaultProps","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,IAAMA,MAAM,gBAAGC,kBAAMC,UAAN,CAAiB,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAC9C,MAAQC,QAAR,GAAqFF,KAArF,CAAQE,QAAR;AAAA,MAAkBC,KAAlB,GAAqFH,KAArF,CAAkBG,KAAlB;AAAA,MAAyBC,cAAzB,GAAqFJ,KAArF,CAAyBI,cAAzB;AAAA,MAAyCC,IAAzC,GAAqFL,KAArF,CAAyCK,IAAzC;AAAA,MAA+CC,OAA/C,GAAqFN,KAArF,CAA+CM,OAA/C;AAAA,MAAwDC,UAAxD,GAAqFP,KAArF,CAAwDO,UAAxD;AAAA,MAAuEC,SAAvE,6CAAqFR,KAArF;AAEA,sBACE,gCAAC,EAAD,CAAI,MAAJ;AAAW,IAAA,GAAG,EAAEC,GAAhB;AAAqB,IAAA,IAAI,EAAEI;AAA3B,KAAqCG,SAArC,gBACE,gCAAC,EAAD,CAAI,OAAJ;AAAY,IAAA,KAAK,EAAEL,KAAnB;AAA0B,IAAA,YAAY,EAAE,CAAxC;AAA2C,IAAA,OAAO,MAAlD;AAAmD,IAAA,GAAG,EAAEI;AAAxD,KACGL,QADH,CADF,EAIGE,cAAc,iBACb,gCAAC,EAAD,CAAI,WAAJ,qBACE,gCAAC,kBAAD,CAAQ,KAAR;AACE,uBAAgB,8BADlB;AAEE,IAAA,OAAO,EAAEE,OAFX;AAGE,IAAA,MAAM,EAAED,IAAI,KAAK,SAAT,IAAsB,IAHhC;AAIE,IAAA,IAAI,EAAC;AAJP,IADF,CALJ,CADF;AAiBD,CApBc,CAAf;;AAsBAR,MAAM,CAACY,KAAP,GAAe;AACbJ,EAAAA,IAAI,EAAE;AAAEK,IAAAA,OAAO,EAAED,KAAK,CAACC,OAAjB;AAA0BC,IAAAA,OAAO,EAAEF,KAAK,CAACE;AAAzC;AADO,CAAf;AAIA,IAAMC,SAAS,GAAG;AAChBV,EAAAA,QAAQ,EAAEW,sBAAUC,IAAV,CAAeC,UADT;AAEhBX,EAAAA,cAAc,EAAES,sBAAUG,IAFV;AAGhBX,EAAAA,IAAI,EAAEQ,sBAAUI,KAAV,CAAgB,CAACpB,MAAM,CAACY,KAAP,CAAaJ,IAAb,CAAkBK,OAAnB,EAA4Bb,MAAM,CAACY,KAAP,CAAaJ,IAAb,CAAkBM,OAA9C,CAAhB,CAHU;AAIhBR,EAAAA,KAAK,EAAEU,sBAAUI,KAAV,CAAgB,CAAC,CAAD,EAAI,CAAJ,EAAO,CAAP,EAAU,CAAV,EAAa,CAAb,EAAgB,CAAhB,CAAhB,CAJS;AAKhBX,EAAAA,OAAO,EAAEO,sBAAUK,IALH;AAMhBX,EAAAA,UAAU,EAAE;AANI,CAAlB;AASA,IAAMY,YAAY,GAAG;AACnBf,EAAAA,cAAc,EAAE,IADG;AAEnBD,EAAAA,KAAK,EAAE,CAFY;AAGnBE,EAAAA,IAAI,EAAER,MAAM,CAACY,KAAP,CAAaJ,IAAb,CAAkBK,OAHL;AAInBJ,EAAAA,OAAO,EAAE,mBAAM,CAAE,CAJE;AAKnBC,EAAAA,UAAU,EAAE;AALO,CAArB;AAQAV,MAAM,CAACuB,WAAP,GAAqB,iBAArB;AACAvB,MAAM,CAACe,SAAP,GAAmBA,SAAnB;AACAf,MAAM,CAACsB,YAAP,GAAsBA,YAAtB;eAEetB,M","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { RefOf } from \"@paprika/helpers\";\nimport Button from \"@paprika/button\";\nimport * as types from \"../../types\";\nimport * as sc from \"./Header.styles\";\n\nconst Header = React.forwardRef((props, ref) => {\n  const { children, level, hasCloseButton, kind, onClose, refHeading, ...moreProps } = props;\n\n  return (\n    <sc.Header ref={ref} kind={kind} {...moreProps}>\n      <sc.Heading level={level} displayLevel={3} isLight ref={refHeading}>\n        {children}\n      </sc.Heading>\n      {hasCloseButton && (\n        <sc.CloseButton>\n          <Button.Close\n            data-pka-anchor=\"takeover.header.close-button\"\n            onClick={onClose}\n            isDark={kind === \"primary\" || null}\n            size=\"medium\"\n          />\n        </sc.CloseButton>\n      )}\n    </sc.Header>\n  );\n});\n\nHeader.types = {\n  kind: { DEFAULT: types.DEFAULT, PRIMARY: types.PRIMARY },\n};\n\nconst propTypes = {\n  children: PropTypes.node.isRequired,\n  hasCloseButton: PropTypes.bool,\n  kind: PropTypes.oneOf([Header.types.kind.DEFAULT, Header.types.kind.PRIMARY]),\n  level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),\n  onClose: PropTypes.func,\n  refHeading: RefOf(),\n};\n\nconst defaultProps = {\n  hasCloseButton: true,\n  level: 3,\n  kind: Header.types.kind.DEFAULT,\n  onClose: () => {},\n  refHeading: null,\n};\n\nHeader.displayName = \"Takeover.Header\";\nHeader.propTypes = propTypes;\nHeader.defaultProps = defaultProps;\n\nexport default Header;\n"],"file":"Header.js"}
+{"version":3,"sources":["../../../src/components/Header/Header.js"],"names":["Header","React","forwardRef","props","ref","children","level","hasCloseButton","kind","onClose","refHeading","tools","moreProps","types","DEFAULT","PRIMARY","propTypes","PropTypes","node","isRequired","bool","oneOf","func","defaultProps","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,IAAMA,MAAM,gBAAGC,kBAAMC,UAAN,CAAiB,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAC9C,MAAQC,QAAR,GAA4FF,KAA5F,CAAQE,QAAR;AAAA,MAAkBC,KAAlB,GAA4FH,KAA5F,CAAkBG,KAAlB;AAAA,MAAyBC,cAAzB,GAA4FJ,KAA5F,CAAyBI,cAAzB;AAAA,MAAyCC,IAAzC,GAA4FL,KAA5F,CAAyCK,IAAzC;AAAA,MAA+CC,OAA/C,GAA4FN,KAA5F,CAA+CM,OAA/C;AAAA,MAAwDC,UAAxD,GAA4FP,KAA5F,CAAwDO,UAAxD;AAAA,MAAoEC,KAApE,GAA4FR,KAA5F,CAAoEQ,KAApE;AAAA,MAA8EC,SAA9E,6CAA4FT,KAA5F;AACA,sBACE,gCAAC,EAAD,CAAI,MAAJ;AAAW,IAAA,GAAG,EAAEC,GAAhB;AAAqB,IAAA,IAAI,EAAEI;AAA3B,KAAqCI,SAArC,gBACE,gCAAC,EAAD,CAAI,OAAJ;AACE,IAAA,KAAK,EAAEN,KADT;AAEE,IAAA,YAAY,EAAE,CAFhB;AAGE,IAAA,OAAO,MAHT;AAIE,IAAA,GAAG,EAAEI,UAJP;AAKE,IAAA,KAAK,EAAE,OAAOL,QAAP,KAAoB,QAApB,GAA+BA,QAA/B,GAA0C;AALnD,KAOGA,QAPH,CADF,eAUE,gCAAC,EAAD,CAAI,oBAAJ,QACGM,KAAK,iBAAI,gCAAC,EAAD,CAAI,aAAJ;AAAkB,uBAAgB;AAAlC,KAA2DA,KAA3D,CADZ,EAEGJ,cAAc,iBACb,gCAAC,EAAD,CAAI,WAAJ,qBACE,gCAAC,kBAAD,CAAQ,KAAR;AACE,uBAAgB,8BADlB;AAEE,IAAA,OAAO,EAAEE,OAFX;AAGE,IAAA,MAAM,EAAED,IAAI,KAAK,SAAT,IAAsB,IAHhC;AAIE,IAAA,IAAI,EAAC;AAJP,IADF,CAHJ,CAVF,CADF;AA0BD,CA5Bc,CAAf;;AA8BAR,MAAM,CAACa,KAAP,GAAe;AACbL,EAAAA,IAAI,EAAE;AAAEM,IAAAA,OAAO,EAAED,KAAK,CAACC,OAAjB;AAA0BC,IAAAA,OAAO,EAAEF,KAAK,CAACE;AAAzC;AADO,CAAf;AAIA,IAAMC,SAAS,GAAG;AAChBX,EAAAA,QAAQ,EAAEY,sBAAUC,IAAV,CAAeC,UADT;AAEhBZ,EAAAA,cAAc,EAAEU,sBAAUG,IAFV;AAGhBZ,EAAAA,IAAI,EAAES,sBAAUI,KAAV,CAAgB,CAACrB,MAAM,CAACa,KAAP,CAAaL,IAAb,CAAkBM,OAAnB,EAA4Bd,MAAM,CAACa,KAAP,CAAaL,IAAb,CAAkBO,OAA9C,CAAhB,CAHU;AAIhBT,EAAAA,KAAK,EAAEW,sBAAUI,KAAV,CAAgB,CAAC,CAAD,EAAI,CAAJ,EAAO,CAAP,EAAU,CAAV,EAAa,CAAb,EAAgB,CAAhB,CAAhB,CAJS;AAKhBZ,EAAAA,OAAO,EAAEQ,sBAAUK,IALH;AAMhBZ,EAAAA,UAAU,EAAE,qBANI;;AAOhB;AACAC,EAAAA,KAAK,EAAEM,sBAAUC;AARD,CAAlB;AAWA,IAAMK,YAAY,GAAG;AACnBhB,EAAAA,cAAc,EAAE,IADG;AAEnBD,EAAAA,KAAK,EAAE,CAFY;AAGnBE,EAAAA,IAAI,EAAER,MAAM,CAACa,KAAP,CAAaL,IAAb,CAAkBM,OAHL;AAInBL,EAAAA,OAAO,EAAE,mBAAM,CAAE,CAJE;AAKnBC,EAAAA,UAAU,EAAE,IALO;AAMnBC,EAAAA,KAAK,EAAE;AANY,CAArB;AASAX,MAAM,CAACwB,WAAP,GAAqB,iBAArB;AACAxB,MAAM,CAACgB,SAAP,GAAmBA,SAAnB;AACAhB,MAAM,CAACuB,YAAP,GAAsBA,YAAtB;eAEevB,M","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { RefOf } from \"@paprika/helpers\";\nimport Button from \"@paprika/button\";\nimport * as types from \"../../types\";\nimport * as sc from \"./Header.styles\";\n\nconst Header = React.forwardRef((props, ref) => {\n  const { children, level, hasCloseButton, kind, onClose, refHeading, tools, ...moreProps } = props;\n  return (\n    <sc.Header ref={ref} kind={kind} {...moreProps}>\n      <sc.Heading\n        level={level}\n        displayLevel={3}\n        isLight\n        ref={refHeading}\n        title={typeof children === \"string\" ? children : null}\n      >\n        {children}\n      </sc.Heading>\n      <sc.HeaderRightContainer>\n        {tools && <sc.ToolContainer data-pka-anchor=\"takeover.header.tools\">{tools}</sc.ToolContainer>}\n        {hasCloseButton && (\n          <sc.CloseButton>\n            <Button.Close\n              data-pka-anchor=\"takeover.header.close-button\"\n              onClick={onClose}\n              isDark={kind === \"primary\" || null}\n              size=\"medium\"\n            />\n          </sc.CloseButton>\n        )}\n      </sc.HeaderRightContainer>\n    </sc.Header>\n  );\n});\n\nHeader.types = {\n  kind: { DEFAULT: types.DEFAULT, PRIMARY: types.PRIMARY },\n};\n\nconst propTypes = {\n  children: PropTypes.node.isRequired,\n  hasCloseButton: PropTypes.bool,\n  kind: PropTypes.oneOf([Header.types.kind.DEFAULT, Header.types.kind.PRIMARY]),\n  level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),\n  onClose: PropTypes.func,\n  refHeading: RefOf(),\n  /** Add node object to the right side of heading next to the close button */\n  tools: PropTypes.node,\n};\n\nconst defaultProps = {\n  hasCloseButton: true,\n  level: 2,\n  kind: Header.types.kind.DEFAULT,\n  onClose: () => {},\n  refHeading: null,\n  tools: null,\n};\n\nHeader.displayName = \"Takeover.Header\";\nHeader.propTypes = propTypes;\nHeader.defaultProps = defaultProps;\n\nexport default Header;\n"],"file":"Header.js"}

package/lib/components/Header/Header.styles.js

@@ -14,7 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.CloseButton = exports.Heading = exports.Header = void 0;
+exports.HeaderRightContainer = exports.ToolContainer = exports.CloseButton = exports.Heading = exports.Header = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -38,20 +38,36 @@ var Header = _styledComponents["default"].div.withConfig({
   componentId: "sc-rrojnl-0"
 })(function (_ref) {
   var kind = _ref.kind;
-  return (0, _styledComponents.css)(["align-items:center;box-shadow:", ";box-sizing:border-box;display:flex;justify-content:space-between;min-height:", ";width:100%;z-index:1;&:focus{outline:0;}", ""], _tokens["default"].shadow, (0, _helpers.spacer)(6), kinds[kind]);
+  return (0, _styledComponents.css)(["align-items:center;box-shadow:", ";box-sizing:border-box;display:flex;justify-content:space-between;min-height:", ";width:100%;z-index:1;&:focus{outline:0;}", ""], _tokens["default"].shadow, (0, _helpers.spacer)(8), kinds[kind]);
 });
 
 exports.Header = Header;
 var Heading = (0, _styledComponents["default"])(_heading["default"]).withConfig({
   displayName: "Headerstyles__Heading",
   componentId: "sc-rrojnl-1"
-})(["margin:0 0 0 ", ";"], (0, _helpers.spacer)(2));
+})(["flex:1;margin:0;overflow:hidden;padding-left:", ";text-overflow:ellipsis;white-space:nowrap;"], (0, _helpers.spacer)(3));
 exports.Heading = Heading;
 
 var CloseButton = _styledComponents["default"].div.withConfig({
   displayName: "Headerstyles__CloseButton",
   componentId: "sc-rrojnl-2"
-})(["border-left:1px solid ", ";padding:", ";"], _tokens["default"].border.color, (0, _helpers.spacer)(1));
+})(["border-left:1px solid ", ";padding:", ";"], _tokens["default"].border.color, (0, _helpers.spacer)(2));
 
 exports.CloseButton = CloseButton;
+
+var ToolContainer = _styledComponents["default"].div.withConfig({
+  displayName: "Headerstyles__ToolContainer",
+  componentId: "sc-rrojnl-3"
+})(function () {
+  return (0, _styledComponents.css)(["padding-right:", ";[data-pka-anchor=\"button\"]{margin-right:", ";&:last-of-type{margin-left:0;}&:first-of-type{margin-left:", ";}}"], (0, _helpers.spacer)(2), (0, _helpers.spacer)(1), (0, _helpers.spacer)(1));
+});
+
+exports.ToolContainer = ToolContainer;
+
+var HeaderRightContainer = _styledComponents["default"].div.withConfig({
+  displayName: "Headerstyles__HeaderRightContainer",
+  componentId: "sc-rrojnl-4"
+})(["align-items:stretch;display:flex;height:100%;", ",", "{align-items:center;display:flex;}"], CloseButton, ToolContainer);
+
+exports.HeaderRightContainer = HeaderRightContainer;
 //# sourceMappingURL=Header.styles.js.map

package/lib/components/Header/Header.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Header/Header.styles.js"],"names":["kinds","DEFAULT","tokens","color","white","black","PRIMARY","purple","Header","styled","div","kind","css","shadow","Heading","OriginalHeading","CloseButton","border"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,KAAK,GAAG;AACZC,EAAAA,OAAO,wBAAiBC,mBAAOC,KAAP,CAAaC,KAA9B,sBAA+CF,mBAAOC,KAAP,CAAaE,KAA5D,MADK;AAEZC,EAAAA,OAAO,wBAAiBJ,mBAAOC,KAAP,CAAaI,MAA9B,sBAAgDL,mBAAOC,KAAP,CAAaC,KAA7D;AAFK,CAAd;;AAKO,IAAMI,MAAM,GAAGC,6BAAOC,GAAV;AAAA;AAAA;AAAA,GACjB;AAAA,MAAGC,IAAH,QAAGA,IAAH;AAAA,aAAcC,qBAAd,wKAEgBV,mBAAOW,MAFvB,EAMgB,qBAAO,CAAP,CANhB,EAcIb,KAAK,CAACW,IAAD,CAdT;AAAA,CADiB,CAAZ;;;AAmBA,IAAMG,OAAO,GAAG,kCAAOC,mBAAP,CAAH;AAAA;AAAA;AAAA,2BACF,qBAAO,CAAP,CADE,CAAb;;;AAIA,IAAMC,WAAW,GAAGP,6BAAOC,GAAV;AAAA;AAAA;AAAA,iDACGR,mBAAOe,MAAP,CAAcd,KADjB,EAEX,qBAAO,CAAP,CAFW,CAAjB","sourcesContent":["import styled, { css } from \"styled-components\";\nimport OriginalHeading from \"@paprika/heading\";\nimport { spacer } from \"@paprika/stylers/lib/helpers\";\nimport tokens from \"@paprika/tokens/lib/tokens\";\n\nconst kinds = {\n  DEFAULT: `background: ${tokens.color.white}; color: ${tokens.color.black};`,\n  PRIMARY: `background: ${tokens.color.purple}; color: ${tokens.color.white};`,\n};\n\nexport const Header = styled.div(\n  ({ kind }) => css`\n    align-items: center;\n    box-shadow: ${tokens.shadow};\n    box-sizing: border-box;\n    display: flex;\n    justify-content: space-between;\n    min-height: ${spacer(6)};\n    width: 100%;\n    z-index: 1;\n\n    &:focus {\n      outline: 0;\n    }\n\n    ${kinds[kind]}\n  `\n);\n\nexport const Heading = styled(OriginalHeading)`\n  margin: 0 0 0 ${spacer(2)};\n`;\n\nexport const CloseButton = styled.div`\n  border-left: 1px solid ${tokens.border.color};\n  padding: ${spacer(1)};\n`;\n"],"file":"Header.styles.js"}
+{"version":3,"sources":["../../../src/components/Header/Header.styles.js"],"names":["kinds","DEFAULT","tokens","color","white","black","PRIMARY","purple","Header","styled","div","kind","css","shadow","Heading","OriginalHeading","CloseButton","border","ToolContainer","HeaderRightContainer"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,KAAK,GAAG;AACZC,EAAAA,OAAO,wBAAiBC,mBAAOC,KAAP,CAAaC,KAA9B,sBAA+CF,mBAAOC,KAAP,CAAaE,KAA5D,MADK;AAEZC,EAAAA,OAAO,wBAAiBJ,mBAAOC,KAAP,CAAaI,MAA9B,sBAAgDL,mBAAOC,KAAP,CAAaC,KAA7D;AAFK,CAAd;;AAKO,IAAMI,MAAM,GAAGC,6BAAOC,GAAV;AAAA;AAAA;AAAA,GACjB;AAAA,MAAGC,IAAH,QAAGA,IAAH;AAAA,aAAcC,qBAAd,wKAEgBV,mBAAOW,MAFvB,EAMgB,qBAAO,CAAP,CANhB,EAaIb,KAAK,CAACW,IAAD,CAbT;AAAA,CADiB,CAAZ;;;AAkBA,IAAMG,OAAO,GAAG,kCAAOC,mBAAP,CAAH;AAAA;AAAA;AAAA,qGAIF,qBAAO,CAAP,CAJE,CAAb;;;AASA,IAAMC,WAAW,GAAGP,6BAAOC,GAAV;AAAA;AAAA;AAAA,iDACGR,mBAAOe,MAAP,CAAcd,KADjB,EAEX,qBAAO,CAAP,CAFW,CAAjB;;;;AAKA,IAAMe,aAAa,GAAGT,6BAAOC,GAAV;AAAA;AAAA;AAAA,GACxB;AAAA,aAAME,qBAAN,2IACmB,qBAAO,CAAP,CADnB,EAGoB,qBAAO,CAAP,CAHpB,EAQqB,qBAAO,CAAP,CARrB;AAAA,CADwB,CAAnB;;;;AAeA,IAAMO,oBAAoB,GAAGV,6BAAOC,GAAV;AAAA;AAAA;AAAA,iGAI7BM,WAJ6B,EAIbE,aAJa,CAA1B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport OriginalHeading from \"@paprika/heading\";\nimport { spacer } from \"@paprika/stylers/lib/helpers\";\nimport tokens from \"@paprika/tokens/lib/tokens\";\n\nconst kinds = {\n  DEFAULT: `background: ${tokens.color.white}; color: ${tokens.color.black};`,\n  PRIMARY: `background: ${tokens.color.purple}; color: ${tokens.color.white};`,\n};\n\nexport const Header = styled.div(\n  ({ kind }) => css`\n    align-items: center;\n    box-shadow: ${tokens.shadow};\n    box-sizing: border-box;\n    display: flex;\n    justify-content: space-between;\n    min-height: ${spacer(8)};\n    width: 100%;\n    z-index: 1;\n    &:focus {\n      outline: 0;\n    }\n\n    ${kinds[kind]}\n  `\n);\n\nexport const Heading = styled(OriginalHeading)`\n  flex: 1;\n  margin: 0;\n  overflow: hidden;\n  padding-left: ${spacer(3)};\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nexport const CloseButton = styled.div`\n  border-left: 1px solid ${tokens.border.color};\n  padding: ${spacer(2)};\n`;\n\nexport const ToolContainer = styled.div(\n  () => css`\n    padding-right: ${spacer(2)};\n    [data-pka-anchor=\"button\"] {\n      margin-right: ${spacer(1)};\n      &:last-of-type {\n        margin-left: 0;\n      }\n      &:first-of-type {\n        margin-left: ${spacer(1)};\n      }\n    }\n  `\n);\n\nexport const HeaderRightContainer = styled.div`\n  align-items: stretch;\n  display: flex;\n  height: 100%;\n  ${CloseButton}, ${ToolContainer} {\n    align-items: center;\n    display: flex;\n  }\n`;\n"],"file":"Header.styles.js"}

package/lib/index.d.ts

@@ -17,6 +17,8 @@ interface TakeoverProps {
   onClose?: (...args: any[]) => any;
   /** The z-index of the Takeover content */
   zIndex?: number;
+  /** Set Takeover to full width without any margins and max-width */
+  isFullWidth?: custom;
 }
 
 declare namespace Takeover {
@@ -35,6 +37,8 @@ declare namespace Takeover {
     onClose?: (...args: any[]) => any;
 
     refHeading?: custom;
+    /** Add node object to the right side of heading next to the close button */
+    tools?: React.ReactNode;
   }
 }
 declare namespace Takeover {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paprika/takeover",
-  "version": "1.0.23",
+  "version": "1.1.0",
   "description": "The Takeover component can toggle a full-screen view to help the user focus on complex UI tasks.",
   "author": "@paprika",
   "main": "lib/index.js",
@@ -20,11 +20,11 @@
     "@paprika/constants": "^1.0.0",
     "@paprika/heading": "^1.0.14",
     "@paprika/helpers": "^2.3.0",
-    "@paprika/overlay": "^1.0.14",
+    "@paprika/overlay": "^1.0.15",
     "@paprika/stylers": "^1.1.6",
     "@paprika/tokens": "^2.0.0",
     "prop-types": "^15.7.2",
-    "react-focus-lock": "^2.2.1",
+    "react-focus-lock": "^2.8.1",
     "react-transition-group": "^4.3.0"
   },
   "peerDependencies": {