@shopgate/pwa-ui-material 7.23.5 → 7.23.6

package/AppBar/index.js

@@ -1,8 +1,8 @@
-import React,{useMemo,useRef,useLayoutEffect}from'react';import PropTypes from'prop-types';import{getAbsoluteHeight}from'@shopgate/pwa-common/helpers/dom';import{themeShadows,themeColors}from'@shopgate/pwa-common/helpers/config';import{setCSSCustomProp}from'@shopgate/engage/styles';import Field from"./components/Field";import Icon from"./components/Icon";import Title from"./components/Title";import Right from"./components/Right";import Center from"./components/Center";import Left from"./components/Left";import Below from"./components/Below";import styles from"./style";/**
+import React,{useMemo,useRef,useLayoutEffect}from'react';import PropTypes from'prop-types';import{getAbsoluteHeight}from'@shopgate/pwa-common/helpers/dom';import{themeShadows,themeColors}from'@shopgate/pwa-common/helpers/config';import{setCSSCustomProp}from'@shopgate/engage/styles';import{SurroundPortals}from'@shopgate/engage/components';import{APP_BAR_CONTENT}from'@shopgate/engage/core/constants';import Field from"./components/Field";import Icon from"./components/Icon";import Title from"./components/Title";import Right from"./components/Right";import Center from"./components/Center";import Left from"./components/Left";import Below from"./components/Below";import styles from"./style";/**
  * Updates the --app-bar-height custom property
  * @param {Object} ref The app bar ref.
  */var updateAppBarHeight=function updateAppBarHeight(ref){if(!ref.current){return;}setCSSCustomProp('--app-bar-height',"".concat(getAbsoluteHeight(ref.current),"px"));};/**
  * The AppBar component
  * @param {Object} props The component props.
  * @returns {JSX}
- */var AppBar=function AppBar(_ref){var below=_ref.below,center=_ref.center,left=_ref.left,right=_ref.right,backgroundColor=_ref.backgroundColor,textColor=_ref.textColor,shadow=_ref.shadow;var contentRef=useRef(null);var style=useMemo(function(){return{background:backgroundColor,color:textColor,boxShadow:!shadow?'none':themeShadows.material};},[backgroundColor,shadow,textColor]);var observer=useMemo(function(){return new MutationObserver(function(){updateAppBarHeight(contentRef);});},[contentRef]);useLayoutEffect(function(){updateAppBarHeight(contentRef);observer.observe(contentRef.current,{childList:true});return function(){observer.disconnect();};},[contentRef,observer]);return React.createElement("header",{ref:contentRef,className:"".concat(styles.outer," ui-material__app-bar"),"data-test-id":"Navigator",role:"banner",style:style},React.createElement("div",{className:styles.inner},React.createElement(Left,{elements:left}),React.createElement(Center,{elements:center}),React.createElement(Right,{elements:right})),React.createElement(Below,{elements:below}));};AppBar.defaultProps={backgroundColor:themeColors.light,below:null,center:null,left:null,right:null,shadow:true,textColor:themeColors.dark};AppBar.Field=Field;AppBar.Icon=Icon;AppBar.Title=Title;export default AppBar;
+ */var AppBar=function AppBar(_ref){var below=_ref.below,center=_ref.center,left=_ref.left,right=_ref.right,backgroundColor=_ref.backgroundColor,textColor=_ref.textColor,shadow=_ref.shadow;var contentRef=useRef(null);var style=useMemo(function(){return{background:backgroundColor,color:textColor,boxShadow:!shadow?'none':themeShadows.material};},[backgroundColor,shadow,textColor]);var observer=useMemo(function(){return new MutationObserver(function(){updateAppBarHeight(contentRef);});},[contentRef]);useLayoutEffect(function(){updateAppBarHeight(contentRef);observer.observe(contentRef.current,{childList:true});return function(){observer.disconnect();};},[contentRef,observer]);return React.createElement("header",{ref:contentRef,className:"".concat(styles.outer," ui-material__app-bar"),"data-test-id":"Navigator",role:"banner",style:style},React.createElement(SurroundPortals,{portalName:APP_BAR_CONTENT},React.createElement("div",{className:styles.inner},React.createElement(Left,{elements:left}),React.createElement(Center,{elements:center}),React.createElement(Right,{elements:right}))),React.createElement(Below,{elements:below}));};AppBar.defaultProps={backgroundColor:themeColors.light,below:null,center:null,left:null,right:null,shadow:true,textColor:themeColors.dark};AppBar.Field=Field;AppBar.Icon=Icon;AppBar.Title=Title;export default AppBar;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@shopgate/pwa-ui-material",
-  "version": "7.23.5",
+  "version": "7.23.6",
   "description": "Shopgate's material design UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@shopgate/pwa-common": "7.23.5",
+    "@shopgate/pwa-common": "7.23.6",
     "react": "~16.14.0",
     "react-dom": "~16.14.0",
     "redux": "^4.2.1"