@equinor/echo-framework 0.8.4 → 0.8.7

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

@@ -0,0 +1,47 @@
+import { TagDetailsDto } from '@equinor/echo-search';
+import { ProCoSysApiTag } from '../../../types/api-proCoSysTagResponse';
+declare type GetTagDetailsAndProCoSysDataResult = {
+    tagDetails: TagDetailsDto | undefined;
+    proCoSysTag: ProCoSysApiTag | undefined;
+    hasError: boolean;
+};
+/**
+ * Specific tool for external link buttons to help build URLS for deep linking into ProCoSys web app.
+ * Fetches both tag details and tag information from ProCoSys.
+ *
+ * @param {Object} params
+ * @param {string} params.tagNo The tag number to query.
+ * @param {string} params.instCode Plant installation code for the given tag.
+ * @returns {GetTagDetailsAndProCoSysDataResult} response - The returned promise will resolve once both API calls are resolved. (with Promise.all)
+ * @returns {TagDetailsDto} response.tagDetails - Result of tag details API call.
+ * @returns {ProCoSysApiTag} response.proCoSysTag - Tag related information from the ProCoSys system.
+ * @returns {hasError} response.hasError - indicates if there were any errors during the API calls. The exception is handled under the hood.
+ */
+export declare function getTagDetailsAndProCoSysData({ tagNo, instCode }: {
+    tagNo: any;
+    instCode: any;
+}): Promise<GetTagDetailsAndProCoSysDataResult>;
+declare type getTagDetailsWithErrorHandlingResponse = {
+    tagDetails: TagDetailsDto | undefined;
+    hasError: boolean;
+};
+/**
+ * Wraps the 'getTagDetails' function. Handles and logs any Error thrown by it whi;e displaying an error message toast.
+ * Use 'getTagDetails' if you want complete freedom on how you handle any exceptions.
+ *
+ * If there were any errors during the API call, the returned value will have a 'hasError' flag set to 'true'.
+ *
+ * @param {Object} params
+ * @param {string} params.tagNo The tag number to query.
+ * @param {string} params.instCode Plant installation code for the given tag.
+ * @param {AbortSignal} params.abortSignal A signal object that allows you to communicate with a DOM request (such as a Fetch) and abort it if required via an AbortController object.
+ * @returns {getTagDetailsWithErrorHandlingResponse} response
+ * @returns {TagDetailsDto} response.tagDetails - Result of tag details API call.
+ * @returns {hasError} response.hasError - indicates if there were any errors during the API call.
+ */
+export declare function getTagDetailsWithErrorHandling({ tagNo, instCode, abortSignal }: {
+    tagNo: string;
+    instCode?: string;
+    abortSignal?: AbortSignal;
+}): Promise<getTagDetailsWithErrorHandlingResponse>;
+export {};

package/dist/components/contextualAppLinks/externalLinkButtons/externalLinkButtons.helpers.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+declare type ExternalLinkToCommAppProps = {
+    tagNo: string;
+    instCode: string;
+};
+/**
+ * External link button to Commissioning web app.
+ *
+ * @param {string} tagNo The tag's number to open in the Comm app.
+ * @param {string} instCode Plant installation code.
+ * @returns {React.FC<ExternalLinkToMcAppProps>} React component.
+ */
+export declare const ExternalLinkToCommApp: React.FC<ExternalLinkToCommAppProps>;
+export {};

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

@@ -1,11 +1,13 @@
 import React from 'react';
 declare type ExternalLinkToMcAppProps = {
     tagNo: string;
+    instCode: string;
 };
 /**
- * External link button to McApp.
+ * External link button to Mechanical Completion web app.
  *
  * @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,10 +5,9 @@ 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 {string} instCode Plant installation code.
+ * @param {TagDetailsDto} tagDetails The given tags detailed information.
  * @returns {React.FC<ExternalLinkToProCoSysProps>} React component.
  */
 export declare const ExternalLinkToProCoSys: React.FC<ExternalLinkToProCoSysProps>;

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

@@ -2,13 +2,16 @@ 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,12 +1,16 @@
 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,6 +2,7 @@ import React from 'react';
 declare type ExternalLinkToTr2000Props = {
     tagNo: string;
     instCode: string;
+    loadingStatusCallback?: (isLoading: boolean) => void;
 };
 /**
  * External link button to TR2000.
@@ -9,6 +10,7 @@ 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/iconButtonSpinner.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+declare type SpinnerProps = {
+    size?: 16 | 24 | 32 | 40 | 48;
+    customClassNames?: {
+        spinner?: string;
+        container?: string;
+    };
+};
+/**
+ * Local component for external link buttons. Provides a spinner overlay for any icon buttons, which might have any async calls.
+ * @param {Object} param
+ * @param {number} param.size The size of the spinner. Default value is 24.
+ * @param {Object} param.customClassNames Optional custom class names to customize the component's parts.
+ * @param {string} param.customClassNames.spinner Class name applied on the spinner.
+ * @param {string} param.customClassNames.container Class name applied on the container element.
+ */
+export declare const IconButtonSpinner: ({ customClassNames, size }: SpinnerProps) => JSX.Element;
+export {};

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

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

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

@@ -1,18 +1,26 @@
 import React from 'react';
-interface ExternalLinkButtonProps {
+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 = {
     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"
+    Rounded = "Rounded",
+    Large = "Large"
 }
 /**
  *
@@ -23,11 +31,12 @@ 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 {() => Promise<string>} props.getUrlToOpen Optional. Function () => Promise<string>. Custom async function to be called to handle the navigation.
+ * @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 {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.
  */
-declare const ExternalLinkButton: React.FC<ExternalLinkButtonProps>;
+export declare const ExternalLinkButton: React.FC<ExternalLinkButtonProps>;
 export default ExternalLinkButton;

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

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

package/dist/hooks/useSemi.d.ts

@@ -1,17 +1,21 @@
-declare type Semi = {
-    isSemiDocumentAvailable: boolean;
-    semiDocumentId: string;
-};
 /**
  * Provides information about Semi document for a given tag.
  *
- * @param {{ tagNo: string }} params
- * @param {string} params.tagNo Tag number in question.
+ * @param {{ tagNo: string; instCode: string }} params
+ * @param {string} params.tagNo The given tag's number.
+ * @param {string} params.instCode Plant's inst code.
  * @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 }: {
+export declare function useSemi({ tagNo, instCode }: {
     tagNo: string;
+    instCode: string;
 }): Semi;
+declare type Semi = {
+    isSemiDocumentAvailable: boolean;
+    semiDocumentId: string;
+    isSemiLoading: boolean;
+};
 export {};

package/dist/hooks/useTagDetails.d.ts

@@ -5,9 +5,16 @@ 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 {TagDetailsDto | undefined} TagDetailsDto or undefined
+ * @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'
  */
-export declare function useTagDetails({ tagNo, instCode }: {
+export declare function useTagDetails({ instCode, tagNo }: {
     tagNo: string;
     instCode: string;
-}): TagDetailsDto | undefined;
+}): {
+    tagDetails: TagDetailsDto | undefined;
+    isTagDetailsLoading: boolean;
+    hasError: boolean;
+};

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import './globalStyles.css';
-import { getPlantsInfo } from './services/api/api-plantinfo';
+import { getPlantsInfo, getTagDetails } from './services/api';
 import './theme/theme.css';
 import { getLegendStatusColor } from './utils/legendUtils';
 export * from './components';
@@ -26,6 +26,9 @@ 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;
         }>;
@@ -35,10 +38,14 @@ declare const EchoFramework: Readonly<{
             [key: string]: string;
         } | undefined, state?: any) => void;
         useScreenOrientation(): string;
-        useTagDetails({ tagNo, instCode }: {
+        useTagDetails({ instCode, tagNo }: {
             tagNo: string;
             instCode: string;
-        }): import("@equinor/echo-search").TagDetailsDto | undefined;
+        }): {
+            tagDetails: import("@equinor/echo-search").TagDetailsDto | undefined;
+            isTagDetailsLoading: boolean;
+            hasError: boolean;
+        };
         useSetActiveTagNo: () => import("./types/hookLibrary").SetActiveTagNo;
         useContextMenuDataInfo: (tagNo: string, expanded: boolean, setActivePanel?: (() => void) | undefined) => import("@equinor/echo-components").DataInformation[];
         useTagData: () => import("./types/hookLibrary").TagData;
@@ -52,6 +59,7 @@ declare const EchoFramework: Readonly<{
     }>;
     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): Promise<T>;
+export declare function request<T>(url: string, requestType: T, abortSignal?: AbortSignal): Promise<T>;

package/dist/services/api/api-tag-details.d.ts

@@ -0,0 +1,18 @@
+import { TagDetailsDto } from '@equinor/echo-search';
+/**
+ * Wraps Search.Tags.getTagDetailsAsync(), and throws proper NotFoundError if search was unable to find the given tag.
+ * It also converts Search's result.error responses to proper errors and throws them.
+ *
+ * @param {Object} param
+ * @param {string} params.tagNo The tag number to query.
+ * @param {string} params.instCode Plant installation code for the given tag.
+ * @param {AbortSignal} params.abortSignal A signal object that allows you to communicate with a DOM request (such as a Fetch) and abort it if required via an AbortController object.
+ * @throws {NotFoundError} NotFoundError when there are no matches for the tagNo instCode pair.
+ * @throws {BaseError} In any other failed API call.
+ * @returns {Promise<TagDetailsDto>} Promise resolving in tag details DTO.
+ */
+export declare function getTagDetails({ tagNo, instCode, abortSignal }: {
+    tagNo: string;
+    instCode?: string;
+    abortSignal?: AbortSignal;
+}): Promise<TagDetailsDto>;

package/dist/services/api/api-tag-details.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,17 @@
+import { ProCoSysApiTag } from '../../types/api-proCoSysTagResponse';
+/**
+ * Fetches tag information from ProCoSys.
+ *
+ * @param {Object} param
+ * @param {string} params.tagNo The tag number to query.
+ * @param {string} params.instCode Plant installation code for the given tag.
+ * @param {AbortSignal} params.abortSignal A signal object that allows you to communicate with a DOM request (such as a Fetch) and abort it if required via an AbortController object.
+ * @throws {BaseError} If the response can't be parsed to JSON.
+ * @throws {Error} In any other API call issues.
+ * @returns {Promise<TProCoSysApiTag[]>} Promise resolving in array of tags.
+ */
+export declare function getTagFromProCoSys({ instCode, tagNo, abortSignal }: {
+    instCode: string;
+    tagNo: string;
+    abortSignal?: AbortSignal;
+}): Promise<ProCoSysApiTag[]>;

package/dist/services/api/api-tags.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/dist/services/echopediaAnalyticsModule/echopediaAnalyticsModule.d.ts

@@ -0,0 +1 @@
+export declare const echopediaAnalyticsModule: import("@equinor/echo-core").AnalyticsModule;

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, '__esModule', {
 
 var styleInject_es = require('../../../node_modules/style-inject/dist/style-inject.es.js');
 
-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 css_248z = ".layout-module_echoContentContainer__0debO{height:100%;padding:env(safe-area-inset-top,20px) env(safe-area-inset-right,20px) env(safe-area-inset-bottom,20px) env(safe-area-inset-left,20px);width: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",

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

@@ -16,8 +16,6 @@ require('../panel/corePanelLeft.js');
 
 require('../panel/corePanelRight.js');
 
-require('../../coreApplication/EchoContent.module.css.js');
-
 require('react-router-dom');
 
 require('@equinor/echo-components');
@@ -48,8 +46,12 @@ require('../../coreApplication/EchoEventHandler.module.css.js');
 
 var useScreenOrientation = require('../../hooks/useScreenOrientation.js');
 
+require('@equinor/echo-utils');
+
 require('@equinor/echo-search');
 
+require('../../services/echopediaAnalyticsModule/echopediaAnalyticsModule.js');
+
 var hookLibrary = require('../../hooks/hookLibrary.js');
 
 var layout_module = require('./layout.module.css.js');
@@ -64,111 +66,106 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var MainLayout = function MainLayout(_ref) {
   var children = _ref.children;
-  var deviceOrientation = hookLibrary.HookLibrary.useDeviceOrientation();
+
+  var _hookLibrary$HookLibr = hookLibrary.HookLibrary.useDeviceOrientation(),
+      deviceOrientation = _hookLibrary$HookLibr.deviceOrientation;
+
   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
+  }, (isWeb && screenOrientation === 'landscape' || !isWeb && deviceOrientation.landscape) && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isWeb ? isLandscapeWeb : isLandscapeDevice
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: layout_module["default"].mainLayoutWrapper
-  }, children), ' ', isWeb ? screenOrientation === 'portrait' && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
-    isLandscape: isLandscapeWeb
-  }) : deviceOrientation.portrait && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
-    isLandscape: isLandscapeDevice
+  }, children), (isWeb && screenOrientation === 'portrait' || !isWeb && deviceOrientation.portrait) && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isWeb ? isLandscapeWeb : isLandscapeDevice
   }));
 };
 
 var ColorLayout = function ColorLayout(_ref2) {
   var children = _ref2.children;
-  var deviceOrientation = hookLibrary.HookLibrary.useDeviceOrientation();
+
+  var _hookLibrary$HookLibr2 = hookLibrary.HookLibrary.useDeviceOrientation(),
+      deviceOrientation = _hookLibrary$HookLibr2.deviceOrientation;
+
   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
+  }, (isWeb && screenOrientation === 'landscape' || !isWeb && deviceOrientation.landscape) && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isWeb ? isLandscapeWeb : isLandscapeDevice
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: layout_module["default"].colorLayout
-  }, children), isWeb ? screenOrientation === 'portrait' && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
-    isLandscape: isLandscapeWeb
-  }) : deviceOrientation.portrait && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
-    isLandscape: isLandscapeDevice
+  }, children), (isWeb && screenOrientation === 'portrait' || !isWeb && deviceOrientation.portrait) && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isWeb ? isLandscapeWeb : isLandscapeDevice
   }));
 };
 
 var PdfViewerNative = function PdfViewerNative(_ref3) {
   var children = _ref3.children;
-  var deviceOrientation = hookLibrary.HookLibrary.useDeviceOrientation();
+
+  var _hookLibrary$HookLibr3 = hookLibrary.HookLibrary.useDeviceOrientation(),
+      deviceOrientation = _hookLibrary$HookLibr3.deviceOrientation;
+
   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
+  }, (isWeb && screenOrientation === 'landscape' || !isWeb && deviceOrientation.landscape) && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isWeb ? isLandscapeWeb : isLandscapeDevice
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: layout_module["default"].pdfViewerNative
-  }, children), ' ', isWeb ? screenOrientation === 'portrait' && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
-    isLandscape: isLandscapeWeb
-  }) : deviceOrientation.portrait && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
-    isLandscape: isLandscapeDevice
+  }, children), ' ', (isWeb && screenOrientation === 'portrait' || !isWeb && deviceOrientation.portrait) && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isWeb ? isLandscapeWeb : isLandscapeDevice
   }));
 };
 
 var CameraLayout = function CameraLayout(_ref4) {
   var children = _ref4.children;
-  var deviceOrientation = hookLibrary.HookLibrary.useDeviceOrientation();
+
+  var _hookLibrary$HookLibr4 = hookLibrary.HookLibrary.useDeviceOrientation(),
+      deviceOrientation = _hookLibrary$HookLibr4.deviceOrientation;
+
   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
+  }, (isWeb && screenOrientation === 'landscape' || !isWeb && deviceOrientation.landscape) && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isWeb ? isLandscapeWeb : 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
-  }), ' ');
+  }, children), (isWeb && screenOrientation === 'portrait' || !isWeb && deviceOrientation.portrait) && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isWeb ? isLandscapeWeb : isLandscapeDevice
+  }));
 };
 
 var DefaultLayout = function DefaultLayout(_ref5) {
   var children = _ref5.children;
-  var deviceOrientation = hookLibrary.HookLibrary.useDeviceOrientation();
+
+  var _hookLibrary$HookLibr5 = hookLibrary.HookLibrary.useDeviceOrientation(),
+      deviceOrientation = _hookLibrary$HookLibr5.deviceOrientation;
+
   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
+  }, (isWeb && screenOrientation === 'landscape' || !isWeb && deviceOrientation.landscape) && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isWeb ? isLandscapeWeb : 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
+  }, children), (isWeb && screenOrientation === 'portrait' || !isWeb && deviceOrientation.portrait) && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isLandscape: isWeb ? isLandscapeWeb : isLandscapeDevice
   }));
 };
 

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": Boolean(menuState.buttonEl),
+    "aria-expanded": isOpen,
     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: Boolean(menuState.buttonEl),
+    open: isOpen,
     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();
     }
-  }, /*#__PURE__*/React__default["default"].createElement("div", null, externalAppLinks.map(function (AppLink) {
+  }, isOpen ? /*#__PURE__*/React__default["default"].createElement("div", null, externalAppLinks.map(function (AppLink) {
     return renderAppLink(AppLink.component);
-  }), children)));
+  }), children) : null));
 };
 
 exports.ExternalAppsMenu = ExternalAppsMenu;