@equinor/echo-framework 0.8.1 → 0.8.4

package/dist/components/contextualAppLinks/externalLinkButtons/externalLinkToMcApp.d.ts

@@ -1,13 +1,11 @@
 import React from 'react';
 declare type ExternalLinkToMcAppProps = {
     tagNo: string;
-    instCode: string;
 };
 /**
- * External link button to Mechanical Completion web app.
+ * External link button to McApp.
  *
  * @param {string} tagNo The tag's number to open in McApp.
- * @param {string} instCode Plant installation code.
  * @returns {React.FC<ExternalLinkToMcAppProps>} React component.
  */
 export declare const ExternalLinkToMcApp: React.FC<ExternalLinkToMcAppProps>;

package/dist/components/contextualAppLinks/externalLinkButtons/externalLinkToProCoSys.d.ts

@@ -5,9 +5,10 @@ declare type ExternalLinkToProCoSysProps = {
 };
 /**
  * External link button to ProCoSys.
+ * Will only render if the passed tagNo has any tag details in the actually selected plant.
  *
  * @param {string} tagNo The tag's number to open in ProCoSys.
- * @param {TagDetailsDto} tagDetails The given tags detailed information.
+ * @param {string} instCode Plant installation code.
  * @returns {React.FC<ExternalLinkToProCoSysProps>} React component.
  */
 export declare const ExternalLinkToProCoSys: React.FC<ExternalLinkToProCoSysProps>;

package/dist/components/contextualAppLinks/externalLinkButtons/externalLinkToSap.d.ts

@@ -2,16 +2,13 @@ import React from 'react';
 declare type ExternalLinkToSapProps = {
     tagNo: string;
     instCode: string;
-    loadingStatusCallback?: (isLoading: boolean) => void;
 };
 /**
  * External link button to SAP.
  * Will only render if the passed tagNo has any tag details in the actually selected plant and SAP is available.
- * It pings SAP to determine whether is available or not.
  *
  * @param {string} tagNo The tag's number to open in SAP.
  * @param {string} instCode Plant installation code.
- * @param {(isLoading: boolean) => void} loadingStatusCallback Callback which provides an 'isLoading' param reflecting the actual loading state of the ping to SAP.
  * @returns {React.FC<ExternalLinkToSapProps>} React component.
  */
 export declare const ExternalLinkToSap: React.FC<ExternalLinkToSapProps>;

package/dist/components/contextualAppLinks/externalLinkButtons/externalLinkToSemiDoc.d.ts

@@ -1,16 +1,12 @@
 import React from 'react';
 declare type ExternalLinkToSemiDocProps = {
     tagNo: string;
-    instCode: string;
-    loadingStatusCallback?: (isLoading: boolean) => void;
 };
 /**
  * External link button to SemiDoc.
  * Will only render if Semi is available for the passed tagNo.
  *
  * @param {string} tagNo The tag's number to open in Semi.
- * @param {string} instCode Plant installation code.
- * @param {(isLoading: boolean) => void} loadingStatusCallback Callback which provides an 'isLoading' param reflecting the actual API call state for checking Semi availability.
  * @returns {React.FC<ExternalLinkToSemiDocProps>} React component.
  */
 export declare const ExternalLinkToSemiDoc: React.FC<ExternalLinkToSemiDocProps>;

package/dist/components/contextualAppLinks/externalLinkButtons/externalLinkToTr2000.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 declare type ExternalLinkToTr2000Props = {
     tagNo: string;
     instCode: string;
-    loadingStatusCallback?: (isLoading: boolean) => void;
 };
 /**
  * External link button to TR2000.
@@ -10,7 +9,6 @@ declare type ExternalLinkToTr2000Props = {
  *
  * @param {string} tagNo The tag's number to open in TR2000.
  * @param {string} instCode Plant installation code.
- * @param {(isLoading: boolean) => void} loadingStatusCallback Callback which provides an 'isLoading' param reflecting the actual API call state for checking TR2000 availability.
  * @returns {React.FC<ExternalLinkToTr2000Props>} React component.
  */
 export declare const ExternalLinkToTr2000: React.FC<ExternalLinkToTr2000Props>;

package/dist/components/contextualAppLinks/externalLinkButtons/index.d.ts

@@ -1,4 +1,3 @@
-export * from './externalLinkToCommApp';
 export * from './externalLinkToMcApp';
 export * from './externalLinkToProCoSys';
 export * from './externalLinkToSafeX';

package/dist/components/externalLinkButton/externalLinkButton.d.ts

@@ -1,26 +1,18 @@
 import React from 'react';
-declare type ExternalLinkButtonProps = AsyncButtonProps | SyncButtonProps;
-declare type AsyncButtonProps = BaseProps & {
-    linkTo?: never;
-    getUrlToOpen: (...args: any[]) => Promise<string | undefined>;
-};
-declare type SyncButtonProps = BaseProps & {
-    linkTo: string;
-    getUrlToOpen?: never;
-};
-declare type BaseProps = {
+interface ExternalLinkButtonProps {
     buttonName: string;
     buttonIcon: string;
+    linkTo: string;
     hideText?: boolean;
     redirect?: boolean;
     buttonStyle?: ExternalLinkButtonStyle;
+    getUrlToOpen?: () => Promise<string>;
     disabledColor?: boolean;
     disabledButton?: boolean;
     hoverText?: string;
-};
+}
 export declare enum ExternalLinkButtonStyle {
-    Rounded = "Rounded",
-    Large = "Large"
+    Rounded = "Rounded"
 }
 /**
  *
@@ -31,12 +23,11 @@ export declare enum ExternalLinkButtonStyle {
  * @param {boolean} props.hideText Optional. If set to `true`, will hide `buttonName`.
  * @param {boolean} props.redirect Optional. If set to `true`, the app will not open in a new tab / window, but in the current one.
  * @param {ExternalLinkButtonStyle} props.buttonStyle Optional.
- * @param {(...args) => Promise<string | undefined>} props.getUrlToOpen Optional. Pass this custom async function to create a URL based on async data.
- * Return with 'undefined' to prevent any navigation. (Useful when the API call fails)
+ * @param {() => Promise<string>} props.getUrlToOpen Optional. Function () => Promise<string>. Custom async function to be called to handle the navigation.
  * @param {boolean} props.disabledColor Optional. If set to `true`, the button will show disabled color. (If not Rounded button style is used)
  * @param {boolean} props.disabledButton Optional.
  * @param {string} props.hoverText Optional. Applies only if Rounded button style is applied.
  * @returns {React.FC<ExternalLinkButtonProps>} React component.
  */
-export declare const ExternalLinkButton: React.FC<ExternalLinkButtonProps>;
+declare const ExternalLinkButton: React.FC<ExternalLinkButtonProps>;
 export default ExternalLinkButton;

package/dist/components/panel/corePanelLeft.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
-declare const CorePanelLeft: React.FC;
+interface CorePanelLeftProps {
+    isToggleButtonVisible?: boolean;
+}
+declare const CorePanelLeft: React.FC<CorePanelLeftProps>;
 export default CorePanelLeft;

package/dist/components/panel/corePanelRight.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
-declare const _default: React.NamedExoticComponent<{}>;
+interface CorePanelRightProps {
+    isToggleButtonVisible?: boolean;
+}
+declare const _default: React.NamedExoticComponent<CorePanelRightProps>;
 export default _default;

package/dist/components/realTimeData/hooks/useSignalR.d.ts

@@ -1,9 +1,8 @@
 import { HubConnection } from '@microsoft/signalr';
 export interface SignalRState {
-    loading: boolean;
-    status: 'ok' | 'error';
     connection?: HubConnection;
-    statusCode?: number;
+    status: string;
+    loading: boolean;
     message?: string;
 }
 declare function useSignalR(hubUrl: string): SignalRState;

package/dist/coreApplication/EchoBarComponent.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface EchoBottomBarProps {
+    isLandscape: boolean;
+}
+export declare const EchoBarComponent: React.FC<EchoBottomBarProps>;
+export default EchoBarComponent;

package/dist/coreApplication/EchoContent.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 interface CorePanelsProps {
     children: React.ReactNode;
     Legend?: React.FC;
+    isToggleButtonVisible?: boolean;
 }
 export declare const EchoContent: React.FC<CorePanelsProps>;
 export {};

package/dist/coreApplication/index.d.ts

@@ -1,3 +1,4 @@
+export * from './EchoBarComponent';
 export * from './EchoContent';
 export * from './EchoContentPanels';
 export * from './EchoEventHandler';

package/dist/hooks/hookLibrary.d.ts

@@ -1,12 +1,13 @@
 import { DataInformation } from '@equinor/echo-components';
-import { SetActiveCommPackNo, SetActiveMcPackNo, SetActiveTagNo, TagData } from './../types/hookLibrary';
+import { DeviceOrientation, SetActiveCommPackNo, SetActiveMcPackNo, SetActiveTagNo, TagData } from './../types/hookLibrary';
 export declare enum RegisteredHookName {
     useSetActiveTagNo = "useSetActiveTagNo",
     useContextMenuDataInfo = "useContextMenuDataInfo",
     useTagData = "useTagData",
     useIsContextMenuInfoLoading = "useIsContextMenuInfoLoading",
     useSetActiveCommPackNo = "useSetActiveCommPackNo",
-    useSetActiveMcPackNo = "useSetActiveMcPackNo"
+    useSetActiveMcPackNo = "useSetActiveMcPackNo",
+    useDeviceOrientation = "useDeviceOrientation"
 }
 export declare const HookLibrary: Readonly<{
     /**
@@ -46,4 +47,9 @@ export declare const HookLibrary: Readonly<{
      * @returns {SetActiveMcPackNo}
      */
     useSetActiveMcPackNo: () => SetActiveMcPackNo;
+    /**
+     * Hook for detecting device orientation from native devices.
+     * @returns {DeviceOrientation}
+     */
+    useDeviceOrientation: () => DeviceOrientation;
 }>;

package/dist/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useEchoHistory';
+export * from './useScreenOrientation';
 export * from './useTagDetails';

package/dist/hooks/useScreenOrientation.d.ts

@@ -0,0 +1 @@
+export declare function useScreenOrientation(): string;

package/dist/hooks/useSemi.d.ts

@@ -1,21 +1,17 @@
+declare type Semi = {
+    isSemiDocumentAvailable: boolean;
+    semiDocumentId: string;
+};
 /**
  * Provides information about Semi document for a given tag.
  *
- * @param {{ tagNo: string; instCode: string }} params
- * @param {string} params.tagNo The given tag's number.
- * @param {string} params.instCode Plant's inst code.
+ * @param {{ tagNo: string }} params
+ * @param {string} params.tagNo Tag number in question.
  * @returns {Semi} object
  * @returns {boolean} object.isSemiDocumentAvailable - Will be set to true if the tag has Semi document.
  * @returns {string} object.semiDocumentId - If there's a document for the given tag, this will be set.
- * @returns {boolean} object.isSemiLoading - Indicates if Semi is performing an API call (to get tag details)
  */
-export declare function useSemi({ tagNo, instCode }: {
+export declare function useSemi({ tagNo }: {
     tagNo: string;
-    instCode: string;
 }): Semi;
-declare type Semi = {
-    isSemiDocumentAvailable: boolean;
-    semiDocumentId: string;
-    isSemiLoading: boolean;
-};
 export {};

package/dist/hooks/useTagDetails.d.ts

@@ -5,16 +5,9 @@ import { TagDetailsDto } from '@equinor/echo-search';
  * @param {{ tagNo: string; instCode: string }} params
  * @param {string} params.tagNo The given tag's number.
  * @param {string} params.instCode Plant's inst code.
- * @returns {Object} response
- * @returns {TagDetailsDto | undefined} response.tagDetails
- * @returns {boolean} response.isLoading Whether tag details API call is loading or not.
- * @returns {boolean} response.hasError If the API call had any issues, this will be set to 'true'
+ * @returns {TagDetailsDto | undefined} TagDetailsDto or undefined
  */
-export declare function useTagDetails({ instCode, tagNo }: {
+export declare function useTagDetails({ tagNo, instCode }: {
     tagNo: string;
     instCode: string;
-}): {
-    tagDetails: TagDetailsDto | undefined;
-    isTagDetailsLoading: boolean;
-    hasError: boolean;
-};
+}): TagDetailsDto | undefined;

package/dist/index.d.ts

@@ -1,18 +1,19 @@
 /// <reference types="react" />
 import './globalStyles.css';
-import { getPlantsInfo, getTagDetails } from './services/api';
+import { getPlantsInfo } from './services/api/api-plantinfo';
 import './theme/theme.css';
 import { getLegendStatusColor } from './utils/legendUtils';
 export * from './components';
 export * from './coreApplication';
 export { RegisteredHookName } from './hooks/hookLibrary';
+export { useScreenOrientation } from './hooks/useScreenOrientation';
 export { RegisteredComponentName } from './services/componentRegistry/componentRegistry';
 export * from './services/eventHubActions';
 export * from './theme/themeConst';
 export type { EchoHubPlant } from './types/echoHubPlant';
 export * from './types/eventTypes';
 export * from './types/extensions';
-export type { SetActiveTagNo, TagData } from './types/hookLibrary';
+export type { DeviceOrientation, SetActiveTagNo, TagData } from './types/hookLibrary';
 export { LegendStatus, LegendType } from './types/legend';
 export type { ModelPermissions } from './types/modelPermissions';
 export { PingableSources } from './types/pingableSources';
@@ -25,9 +26,6 @@ export declare const registerEchopediaComponent: ({ name, component }: {
 }) => void;
 declare const EchoFramework: Readonly<{
     Utils: Readonly<{
-        Navigation: Readonly<{
-            goToExternalLink: (link: string, redirect?: boolean | undefined) => void;
-        }>;
         Color: Readonly<{
             getLegendStatusColor: typeof getLegendStatusColor;
         }>;
@@ -36,27 +34,24 @@ declare const EchoFramework: Readonly<{
         useEchoHistory(): (path: string, params?: {
             [key: string]: string;
         } | undefined, state?: any) => void;
-        useTagDetails({ instCode, tagNo }: {
+        useScreenOrientation(): string;
+        useTagDetails({ tagNo, instCode }: {
             tagNo: string;
             instCode: string;
-        }): {
-            tagDetails: import("@equinor/echo-search").TagDetailsDto | undefined;
-            isTagDetailsLoading: boolean;
-            hasError: boolean;
-        };
+        }): import("@equinor/echo-search").TagDetailsDto | undefined;
         useSetActiveTagNo: () => import("./types/hookLibrary").SetActiveTagNo;
         useContextMenuDataInfo: (tagNo: string, expanded: boolean, setActivePanel?: (() => void) | undefined) => import("@equinor/echo-components").DataInformation[];
         useTagData: () => import("./types/hookLibrary").TagData;
         useIsContextMenuInfoLoading: () => boolean;
         useSetActiveCommPackNo: () => import("./types/hookLibrary").SetActiveCommPackNo;
         useSetActiveMcPackNo: () => import("./types/hookLibrary").SetActiveMcPackNo;
+        useDeviceOrientation: () => import("./types/hookLibrary").DeviceOrientation;
     }>;
     EchopediaComponentLibrary: Readonly<{
         getTagItem: () => import("react").FunctionComponent<any>;
     }>;
     APIs: Readonly<{
         getPlantsInfo: typeof getPlantsInfo;
-        getTagDetails: typeof getTagDetails;
     }>;
 }>;
 export default EchoFramework;

package/dist/services/api/api-manager.d.ts

@@ -1,2 +1,2 @@
 export declare const baseApiUrl: string;
-export declare function request<T>(url: string, requestType: T, abortSignal?: AbortSignal): Promise<T>;
+export declare function request<T>(url: string, requestType: T): Promise<T>;

package/dist/services/api/index.d.ts

@@ -1,2 +1 @@
 export * from './api-plantinfo';
-export { getTagDetails } from './api-tag-details';

package/dist/src/components/containers/layout.module.css.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, '__esModule', {
 
 var styleInject_es = require('../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = ".layout-module_applicationWrapper__adzds{animation:layout-module_fadeIn__-OF4H 2s;background-color:#fff;background-image:url(../../images/frontpage-brand-placeholder-vert.jpg);background-size:cover;height:100%;overflow:auto;width:100%}@keyframes layout-module_fadeIn__-OF4H{0%{opacity:0}to{opacity:1}}@media screen and (min-width:640px){.layout-module_applicationWrapper__adzds{background-image:none}}.layout-module_mainLayoutWrapper__4kuIT{height:100%;overflow:hidden;width:100%}.layout-module_bgTransparent__bBfb-{background-color:transparent}.layout-module_footerDisclaimer__-F6dv{font-size:.7rem}.layout-module_footerLogo__CBb-F{max-height:2.5rem}.layout-module_fullBodyHeight__hQfe5{min-height:calc(100vh - 75px)!important;padding-bottom:16px}.layout-module_navbarBrand__2IOPY{color:red}::selection{background-color:#cce2ff;color:rgba(0,0,0,.87)}.layout-module_colorLayout__VHJcU{background-color:#eaf4f9;height:100%;overflow:hidden;position:relative;width:100%}.layout-module_pdfViewerNative__hnAgy{background-color:#323639;height:100%;overflow:hidden;padding-top:6.5rem;position:relative;width:100%}.layout-module_noPadding__7amV4{padding:0}.layout-module_noMargin__1eUBf{margin:0}";
+var css_248z = ".layout-module_echoContentContainer__0debO{height:100%}.layout-module_applicationWrapper__adzds{animation:layout-module_fadeIn__-OF4H 2s;background-color:#fff;background-image:url(../../images/frontpage-brand-placeholder-vert.jpg);background-size:cover;height:100%;overflow:auto;position:relative;width:100%}@keyframes layout-module_fadeIn__-OF4H{0%{opacity:0}to{opacity:1}}@media screen and (min-width:640px){.layout-module_applicationWrapper__adzds{background-image:none}}.layout-module_mainLayoutWrapper__4kuIT{height:100%;overflow:hidden;width:100%}.layout-module_bgTransparent__bBfb-{background-color:transparent}.layout-module_footerDisclaimer__-F6dv{font-size:.7rem}.layout-module_footerLogo__CBb-F{max-height:2.5rem}.layout-module_fullBodyHeight__hQfe5{min-height:calc(100vh - 75px)!important;padding-bottom:16px}.layout-module_navbarBrand__2IOPY{color:red}::selection{background-color:#cce2ff;color:rgba(0,0,0,.87)}.layout-module_colorLayout__VHJcU{background-color:#eaf4f9;height:100%;overflow:hidden;position:relative;width:100%}.layout-module_pdfViewerNative__hnAgy{background-color:#323639;height:100%;overflow:hidden;padding-top:6.5rem;position:relative;width:100%}.layout-module_cameraLayout__iVPug{background-color:\"transparent\"}.layout-module_cameraLayout__iVPug,.layout-module_defaultLayout__3MIwa{height:100%;position:relative;width:100%}.layout-module_noPadding__7amV4{padding:0}.layout-module_noMargin__1eUBf{margin:0}@media screen and (orientation:landscape) and (max-width:927px){.layout-module_echoContentContainer__0debO{display:flex;flex-direction:row}.layout-module_applicationWrapper__adzds,.layout-module_cameraLayout__iVPug,.layout-module_colorLayout__VHJcU,.layout-module_defaultLayout__3MIwa,.layout-module_pdfViewerNative__hnAgy{width:calc(100% - 48px)}}@media screen and (orientation:portrait) and (max-width:767px){.layout-module_applicationWrapper__adzds,.layout-module_cameraLayout__iVPug,.layout-module_colorLayout__VHJcU,.layout-module_defaultLayout__3MIwa,.layout-module_pdfViewerNative__hnAgy{height:calc(100% - 48px)}}";
 var style = {
+  "echoContentContainer": "layout-module_echoContentContainer__0debO",
   "applicationWrapper": "layout-module_applicationWrapper__adzds",
   "fadeIn": "layout-module_fadeIn__-OF4H",
   "mainLayoutWrapper": "layout-module_mainLayoutWrapper__4kuIT",
@@ -18,6 +19,8 @@ var style = {
   "navbarBrand": "layout-module_navbarBrand__2IOPY",
   "colorLayout": "layout-module_colorLayout__VHJcU",
   "pdfViewerNative": "layout-module_pdfViewerNative__hnAgy",
+  "cameraLayout": "layout-module_cameraLayout__iVPug",
+  "defaultLayout": "layout-module_defaultLayout__3MIwa",
   "noPadding": "layout-module_noPadding__7amV4",
   "noMargin": "layout-module_noMargin__1eUBf"
 };

package/dist/src/components/containers/layouts.js

@@ -8,6 +8,50 @@ Object.defineProperty(exports, '__esModule', {
 
 var React = require('react');
 
+var EchoBarComponent = require('../../coreApplication/EchoBarComponent.js');
+
+require('@equinor/echo-core');
+
+require('../panel/corePanelLeft.js');
+
+require('../panel/corePanelRight.js');
+
+require('../../coreApplication/EchoContent.module.css.js');
+
+require('react-router-dom');
+
+require('@equinor/echo-components');
+
+require('@equinor/eds-core-react');
+
+require('../pageMenu/accordionItem.module.css.js');
+
+require('../appLinks/AppLinks.module.css.js');
+
+require('../pageMenu/Navigation/applicationList.module.css.js');
+
+require('../pageMenu/pageMenu.module.css.js');
+
+require('../pageMenu/pageMenuDrawerItem.module.css.js');
+
+require('@equinor/echo-base');
+
+require('../pageMenu/settings/settings.module.css.js');
+
+require('../../services/api/api-manager.js');
+
+require('../pageMenu/version/version.module.css.js');
+
+require('../searchMenu/searchMenu.module.css.js');
+
+require('../../coreApplication/EchoEventHandler.module.css.js');
+
+var useScreenOrientation = require('../../hooks/useScreenOrientation.js');
+
+require('@equinor/echo-search');
+
+var hookLibrary = require('../../hooks/hookLibrary.js');
+
 var layout_module = require('./layout.module.css.js');
 
 function _interopDefaultLegacy(e) {
@@ -20,39 +64,112 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var MainLayout = function MainLayout(_ref) {
   var children = _ref.children;
+  var deviceOrientation = hookLibrary.HookLibrary.useDeviceOrientation();
+  var isLandscapeDevice = deviceOrientation.landscape;
+  var screenOrientation = useScreenOrientation.useScreenOrientation();
+  var isWeb = !deviceOrientation.landscape && !deviceOrientation.portrait;
+  var isLandscapeWeb = screenOrientation === 'landscape';
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: layout_module["default"].applicationWrapper
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: layout_module["default"].echoContentContainer
+  }, isWeb ? screenOrientation === 'landscape' && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isLandscapeWeb
+  }) : deviceOrientation.landscape && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isLandscapeDevice
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: layout_module["default"].mainLayoutWrapper
-  }, children));
+  }, children), ' ', isWeb ? screenOrientation === 'portrait' && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isLandscapeWeb
+  }) : deviceOrientation.portrait && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isLandscapeDevice
+  }));
 };
 
 var ColorLayout = function ColorLayout(_ref2) {
   var children = _ref2.children;
+  var deviceOrientation = hookLibrary.HookLibrary.useDeviceOrientation();
+  var isLandscapeDevice = deviceOrientation.landscape;
+  var screenOrientation = useScreenOrientation.useScreenOrientation();
+  var isWeb = !deviceOrientation.landscape && !deviceOrientation.portrait;
+  var isLandscapeWeb = screenOrientation === 'landscape';
   return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: layout_module["default"].echoContentContainer
+  }, ' ', isWeb ? screenOrientation === 'landscape' && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isLandscapeWeb
+  }) : deviceOrientation.landscape && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isLandscapeDevice
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: layout_module["default"].colorLayout
-  }, children);
+  }, children), isWeb ? screenOrientation === 'portrait' && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isLandscapeWeb
+  }) : deviceOrientation.portrait && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isLandscapeDevice
+  }));
 };
 
 var PdfViewerNative = function PdfViewerNative(_ref3) {
   var children = _ref3.children;
+  var deviceOrientation = hookLibrary.HookLibrary.useDeviceOrientation();
+  var isLandscapeDevice = deviceOrientation.landscape;
+  var screenOrientation = useScreenOrientation.useScreenOrientation();
+  var isWeb = !deviceOrientation.landscape && !deviceOrientation.portrait;
+  var isLandscapeWeb = screenOrientation === 'landscape';
   return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: layout_module["default"].echoContentContainer
+  }, ' ', isWeb ? screenOrientation === 'landscape' && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isLandscapeWeb
+  }) : deviceOrientation.landscape && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isLandscapeDevice
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: layout_module["default"].pdfViewerNative
-  }, children);
+  }, children), ' ', isWeb ? screenOrientation === 'portrait' && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isLandscapeWeb
+  }) : deviceOrientation.portrait && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isLandscapeDevice
+  }));
 };
 
 var CameraLayout = function CameraLayout(_ref4) {
   var children = _ref4.children;
+  var deviceOrientation = hookLibrary.HookLibrary.useDeviceOrientation();
+  var isLandscapeDevice = deviceOrientation.landscape;
+  var screenOrientation = useScreenOrientation.useScreenOrientation();
+  var isWeb = !deviceOrientation.landscape && !deviceOrientation.portrait;
+  var isLandscapeWeb = screenOrientation === 'landscape';
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      backgroundColor: 'transparent'
-    }
-  }, children);
+    className: layout_module["default"].echoContentContainer
+  }, isWeb ? screenOrientation === 'landscape' && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isLandscapeWeb
+  }) : deviceOrientation.landscape && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isLandscapeDevice
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: layout_module["default"].cameraLayout
+  }, children), ' ', isWeb ? screenOrientation === 'portrait' && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isLandscapeWeb
+  }) : deviceOrientation.portrait && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isLandscapeDevice
+  }), ' ');
 };
 
 var DefaultLayout = function DefaultLayout(_ref5) {
   var children = _ref5.children;
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children);
+  var deviceOrientation = hookLibrary.HookLibrary.useDeviceOrientation();
+  var isLandscapeDevice = deviceOrientation.landscape;
+  var screenOrientation = useScreenOrientation.useScreenOrientation();
+  var isWeb = !deviceOrientation.landscape && !deviceOrientation.portrait;
+  var isLandscapeWeb = screenOrientation === 'landscape';
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: layout_module["default"].echoContentContainer
+  }, isWeb ? screenOrientation === 'landscape' && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isLandscapeWeb
+  }) : deviceOrientation.landscape && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isLandscapeDevice
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: layout_module["default"].defaultLayout
+  }, children), isWeb ? screenOrientation === 'portrait' && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isLandscapeWeb
+  }) : deviceOrientation.portrait && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isLandscapeDevice
+  }));
 };
 
 exports.CameraLayout = CameraLayout;

package/dist/src/components/contextualAppLinks/externalAppsMenu.js

@@ -121,7 +121,7 @@ var ExternalAppsMenu = function ExternalAppsMenu(_a) {
     id: menuButtonId,
     "aria-controls": appMenuOnButtonId,
     "aria-haspopup": "true",
-    "aria-expanded": isOpen,
+    "aria-expanded": Boolean(menuState.buttonEl),
     onClick: function onClick() {
       isOpen ? closeMenu() : openMenu(buttonElRef);
     },
@@ -138,7 +138,7 @@ var ExternalAppsMenu = function ExternalAppsMenu(_a) {
   })), /*#__PURE__*/React__default["default"].createElement(edsCoreReact.Menu, {
     id: appMenuOnButtonId,
     "aria-labelledby": menuButtonId,
-    open: isOpen,
+    open: Boolean(menuState.buttonEl),
     anchorEl: buttonElRef === null || buttonElRef === void 0 ? void 0 : buttonElRef.current,
     placement: 'bottom-end',
     onClose: closeMenu,
@@ -149,9 +149,9 @@ var ExternalAppsMenu = function ExternalAppsMenu(_a) {
     onMouseLeave: function onMouseLeave() {
       closeMenu();
     }
-  }, isOpen ? /*#__PURE__*/React__default["default"].createElement("div", null, externalAppLinks.map(function (AppLink) {
+  }, /*#__PURE__*/React__default["default"].createElement("div", null, externalAppLinks.map(function (AppLink) {
     return renderAppLink(AppLink.component);
-  }), children) : null));
+  }), children)));
 };
 
 exports.ExternalAppsMenu = ExternalAppsMenu;