@equinor/echo-framework 0.9.10 → 0.9.13

package/dist/components/containers/layouts.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type LayoutKey = 'main' | 'camera' | 'nativePdf' | 'colorLayout' | undefined;
+export declare type LayoutKey = 'main' | 'nativePdf' | 'colorLayout' | undefined;
 export interface LayoutProps {
     layoutKey?: string;
     children: React.ReactNode;

package/dist/coreApplication/EchoBarComponent.d.ts

@@ -1,12 +1,9 @@
 import React from 'react';
-export declare enum BarButtonVariants {
-    Home = "home",
-    Search = "search",
-    Camera = "camera",
-    Menu = "menu"
-}
 interface EchoBottomBarProps {
     isBottomBarVisible: boolean;
+    activeAppMenuItem: string;
+    updateActiveAppMenuItem: (newActiveAppMenuItem: string) => void;
 }
 export declare const EchoBarComponent: React.FC<EchoBottomBarProps>;
-export default EchoBarComponent;
+declare const _default: React.NamedExoticComponent<EchoBottomBarProps>;
+export default _default;

package/dist/coreApplication/EchoContent.d.ts

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

package/dist/coreApplication/EchoUserInterfaceContextProvider.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface EchoUiContextState {
+    activeAppMenuItem: string;
+    updateActiveAppMenuItem: (newActiveAppMenuItem: string) => void;
+}
+export declare const useEchoUiContext: () => EchoUiContextState;
+interface EchoUiContextProviderProps {
+    children: React.ReactNode;
+}
+export declare const EchoUiContextProvider: React.FC<EchoUiContextProviderProps>;
+export {};

package/dist/coreApplication/index.d.ts

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

package/dist/hooks/hookLibrary.d.ts

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

package/dist/hooks/useScreenValues.d.ts

@@ -1,17 +1,13 @@
-import { DeviceOrientation, ScreenOrientation } from '../types/hookLibrary';
+import { ScreenOrientation } from '../types/hookLibrary';
 /**
  * Provides screen values for current screen.
  *
- * @returns {Object} response
- * @returns {boolean} response.isWeb If Echo is used on web or on the device.
- * @returns {DeviceOrientation} response.screenOrientationDevice
- * @returns {ScreenOrientation} response.screenOrientationWeb
+ * @returns {boolean} response.isScreenMobileSize If the device screen is small or not
+ * @returns {ScreenOrientation} response.screenOrientation
  */
 declare type DeviceValues = {
-    isWeb: boolean;
     isScreenMobileSize: boolean;
-    screenOrientationDevice: DeviceOrientation;
-    screenOrientationWeb: ScreenOrientation;
+    screenOrientation: ScreenOrientation;
 };
 export declare function useScreenValues(): DeviceValues;
 export {};

package/dist/hooks/useWindowSize.d.ts

@@ -1,9 +1,9 @@
 /**
  * Get the current size of the browser window.
- * @returns {width?: number; height?: number} Width and height of the current browser window size.
- * Returns undefined if there is no window object (for example: executed on server side)
+ * @returns {width?: number; height?: number} Width and height of the current browser size.
+
  */
 export declare function useWindowSize(): {
-    width?: number;
-    height?: number;
+    width: number;
+    height: number;
 };

package/dist/index.d.ts

@@ -15,7 +15,7 @@ export * from './theme/themeConst';
 export type { EchoHubPlant } from './types/echoHubPlant';
 export * from './types/eventTypes';
 export * from './types/extensions';
-export type { DeviceOrientation, SetActiveTagNo, TagData } from './types/hookLibrary';
+export type { SetActiveTagNo, TagData } from './types/hookLibrary';
 export { LegendStatus, LegendType } from './types/legend';
 export type { ModelPermissions } from './types/modelPermissions';
 export { PingableSources } from './types/pingableSources';
@@ -39,13 +39,10 @@ declare const EchoFramework: Readonly<{
         useEchoHistory(): (path: string, params?: {
             [key: string]: string;
         } | undefined, state?: any) => void;
-        useIsCompactLayout(isLandscape: boolean): boolean;
         useScreenOrientation(): import("./types/hookLibrary").ScreenOrientation;
         useScreenValues(): {
-            isWeb: boolean;
-            isMobileWidth: boolean;
-            screenOrientationDevice: import("./types/hookLibrary").DeviceOrientation;
-            screenOrientationWeb: import("./types/hookLibrary").ScreenOrientation;
+            isScreenMobileSize: boolean;
+            screenOrientation: import("./types/hookLibrary").ScreenOrientation;
         };
         useTagDetails({ instCode, tagNo }: {
             tagNo: string;
@@ -61,8 +58,6 @@ declare const EchoFramework: Readonly<{
         useIsContextMenuInfoLoading: () => boolean;
         useSetActiveCommPackNo: () => import("./types/hookLibrary").SetActiveCommPackNo;
         useSetActiveMcPackNo: () => import("./types/hookLibrary").SetActiveMcPackNo;
-        useDeviceOrientation: () => import("./types/hookLibrary").DeviceOrientation;
-        useInternalLinkToScan: () => (params?: string | undefined) => void;
     }>;
     EchopediaComponentLibrary: Readonly<{
         getTagItem: () => import("react").FunctionComponent<any>;

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

@@ -56,6 +56,8 @@ require('../searchMenu/searchMenu.module.css.js');
 
 require('../../coreApplication/EchoEventHandler.module.css.js');
 
+var EchoUserInterfaceContextProvider = require('../../coreApplication/EchoUserInterfaceContextProvider.js');
+
 var layout_module = require('./layout.module.css.js');
 
 function _interopDefaultLegacy(e) {
@@ -73,20 +75,26 @@ var Layout = function Layout(_ref) {
       children = _ref.children;
 
   var _useScreenValues$useS = useScreenValues.useScreenValues(),
-      isWeb = _useScreenValues$useS.isWeb,
       isScreenMobileSize = _useScreenValues$useS.isScreenMobileSize,
-      screenOrientationDevice = _useScreenValues$useS.screenOrientationDevice,
-      screenOrientationWeb = _useScreenValues$useS.screenOrientationWeb;
+      screenOrientation = _useScreenValues$useS.screenOrientation;
+
+  var _EchoUserInterfaceCon = EchoUserInterfaceContextProvider.useEchoUiContext(),
+      activeAppMenuItem = _EchoUserInterfaceCon.activeAppMenuItem,
+      updateActiveAppMenuItem = _EchoUserInterfaceCon.updateActiveAppMenuItem;
 
-  var ModuleLayoutClassNames = index["default"](layout_module["default"].deviceOrientation, (_index$default = {}, _defineProperty(_index$default, layout_module["default"].mainLayoutWrapper, layoutKey === 'main'), _defineProperty(_index$default, layout_module["default"].colorLayout, layoutKey === 'colorLayout'), _defineProperty(_index$default, layout_module["default"].pdfViewerNative, layoutKey === 'nativePdf'), _defineProperty(_index$default, layout_module["default"].cameraLayout, layoutKey === 'camera'), _defineProperty(_index$default, layout_module["default"].defaultLayout, layoutKey === undefined), _index$default));
+  var ModuleLayoutClassNames = index["default"](layout_module["default"].deviceOrientation, (_index$default = {}, _defineProperty(_index$default, layout_module["default"].mainLayoutWrapper, layoutKey === 'main'), _defineProperty(_index$default, layout_module["default"].colorLayout, layoutKey === 'colorLayout'), _defineProperty(_index$default, layout_module["default"].pdfViewerNative, layoutKey === 'nativePdf'), _defineProperty(_index$default, layout_module["default"].defaultLayout, layoutKey === undefined), _index$default));
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: layout_module["default"].echoContentContainer
-  }, (isWeb && screenOrientationWeb === 'landscape' || screenOrientationDevice.landscape) && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
-    isBottomBarVisible: isScreenMobileSize
+  }, screenOrientation === 'landscape' && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isBottomBarVisible: isScreenMobileSize,
+    activeAppMenuItem: activeAppMenuItem,
+    updateActiveAppMenuItem: updateActiveAppMenuItem
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: ModuleLayoutClassNames
-  }, children), (isWeb && screenOrientationWeb === 'portrait' || screenOrientationDevice.portrait) && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
-    isBottomBarVisible: isScreenMobileSize
+  }, children), screenOrientation === 'portrait' && /*#__PURE__*/React__default["default"].createElement(EchoBarComponent.EchoBarComponent, {
+    isBottomBarVisible: isScreenMobileSize,
+    activeAppMenuItem: activeAppMenuItem,
+    updateActiveAppMenuItem: updateActiveAppMenuItem
   }));
 };
 

package/dist/src/components/contextualAppLinks/externalLinkButtons/externalLinkToTr2000.js

@@ -26,8 +26,6 @@ var React = require('react');
 
 require('react-router-dom');
 
-require('../../../hooks/hookLibrary.js');
-
 var useTagDetails = require('../../../hooks/useTagDetails.js');
 
 var externalLinkButton = require('../../externalLinkButton/externalLinkButton.js');

package/dist/src/components/panel/corePanelLeft.js

@@ -70,7 +70,7 @@ var CorePanelLeft = function CorePanelLeft(_ref) {
     className: corePanelLeft_module["default"].drawer,
     style: panelUI.panel
   }, activePanel && PanelContent ? /*#__PURE__*/React__default["default"].createElement(PanelContent, null) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null)), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: corePanelLeft_module["default"].buttonContainer,
+    className: corePanelLeft_module["default"].buttonContainer + ' ' + "".concat(isPanelActive ? corePanelLeft_module["default"].buttonContainerActive : corePanelLeft_module["default"].buttonContainerClosed),
     style: panelUI.panelButton
   }, panels.map(function (panel, i) {
     var Icon = panel.icon;

package/dist/src/components/panel/corePanelLeft.module.css.js

@@ -6,13 +6,15 @@ Object.defineProperty(exports, '__esModule', {
 
 var styleInject_es = require('../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = ".corePanelLeft-module_wrapper__d2Omx{height:100%;left:-550px;max-width:550px;position:fixed;top:0;transition:all .4s ease-in-out;width:550px;z-index:2}@media screen and (max-width:550px){.corePanelLeft-module_wrapperClosed__Zd1CL{left:-75vw;max-width:75vw;width:75vw}.corePanelLeft-module_active__-A3TW{width:100%}}.corePanelLeft-module_active__-A3TW{left:0;z-index:var(--echo-framework-z-level-panel-left)}@media screen and (max-width:892px) and (orientation:portrait){.corePanelLeft-module_wrapper__d2Omx{height:calc(100% - 48px)}}@media screen and (max-width:1078px) and (orientation:landscape){.corePanelLeft-module_active__-A3TW{left:48px}}.corePanelLeft-module_drawer__Wdb3G{background-color:#fff;border-left:2px solid #f7f7f7;box-shadow:0 6px 4px #00000040;display:flex;flex-direction:column;height:100%;opacity:0;overflow-y:hidden;position:relative;transition:opacity .4s ease-in-out;width:auto}.corePanelLeft-module_active__-A3TW .corePanelLeft-module_drawer__Wdb3G{opacity:1}.corePanelLeft-module_buttonContainer__bs-Uu{display:flex;flex-direction:column;position:absolute;right:-70px;top:0}@media screen and (max-width:1078px) and (orientation:landscape){.corePanelLeft-module_buttonContainer__bs-Uu{right:-118px}}.corePanelLeft-module_button__SqyKk{margin-left:var(--medium);margin-top:var(--small)}";
+var css_248z = ".corePanelLeft-module_wrapper__d2Omx{height:100%;left:-550px;max-width:550px;position:fixed;top:0;transition:all .4s ease-in-out;width:550px;z-index:2}@media screen and (max-width:550px){.corePanelLeft-module_wrapperClosed__Zd1CL{left:-75vw;max-width:75vw;padding:env(safe-area-inset-top,56px) env(safe-area-inset-right,56px) env(safe-area-inset-bottom,56px) env(safe-area-inset-left,56px);width:75vw}.corePanelLeft-module_active__-A3TW{width:100%}}.corePanelLeft-module_active__-A3TW{left:0;z-index:var(--echo-framework-z-level-panel-left)}@media screen and (max-width:892px) and (orientation:portrait){.corePanelLeft-module_wrapper__d2Omx{height:calc(100% - 48px)}}@media screen and (max-width:1078px) and (orientation:landscape){.corePanelLeft-module_active__-A3TW{left:48px;padding:env(safe-area-inset-top,56px) env(safe-area-inset-right,56px) env(safe-area-inset-bottom,56px) env(safe-area-inset-left,56px)}}.corePanelLeft-module_drawer__Wdb3G{background-color:#fff;border-left:2px solid #f7f7f7;box-shadow:0 6px 4px #00000040;display:flex;flex-direction:column;height:100%;opacity:0;overflow-y:hidden;position:relative;transition:opacity .4s ease-in-out;width:auto}.corePanelLeft-module_active__-A3TW .corePanelLeft-module_drawer__Wdb3G{opacity:1}.corePanelLeft-module_buttonContainer__bs-Uu{display:flex;flex-direction:column;position:absolute;right:-70px;top:0}@media screen and (max-width:1078px) and (orientation:landscape){.corePanelLeft-module_buttonContainerActive__oAcAV{right:calc(-70px + env(safe-area-inset-right, 20px))}.corePanelLeft-module_buttonContainerClosed__55yp-{right:calc(-118px - env(safe-area-inset-right, 20px))}}.corePanelLeft-module_button__SqyKk{margin-left:var(--medium);margin-top:var(--small)}";
 var style = {
   "wrapper": "corePanelLeft-module_wrapper__d2Omx",
   "wrapperClosed": "corePanelLeft-module_wrapperClosed__Zd1CL",
   "active": "corePanelLeft-module_active__-A3TW",
   "drawer": "corePanelLeft-module_drawer__Wdb3G",
   "buttonContainer": "corePanelLeft-module_buttonContainer__bs-Uu",
+  "buttonContainerActive": "corePanelLeft-module_buttonContainerActive__oAcAV",
+  "buttonContainerClosed": "corePanelLeft-module_buttonContainerClosed__55yp-",
   "button": "corePanelLeft-module_button__SqyKk"
 };
 styleInject_es["default"](css_248z);

package/dist/src/components/panel/corePanelRight.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 = ".corePanelRight-module_wrapper__YN3Zr{height:100%;max-width:550px;position:fixed;right:-352px;top:0;transition:all .4s ease-in-out;width:352px;z-index:2}.corePanelRight-module_active__RIMQt{right:0;z-index:var(--echo-framework-z-level-panel-main)}@media screen and (max-width:550px){.corePanelRight-module_active__RIMQt{width:100%}}@media screen and (max-width:892px) and (orientation:portrait){.corePanelRight-module_wrapper__YN3Zr{height:calc(100% - 48px)}}@media screen and (max-width:1078px) and (orientation:landscape){.corePanelRight-module_wrapper__YN3Zr{left:-352px}.corePanelRight-module_active__RIMQt{left:48px;z-index:var(--echo-framework-z-level-panel-main)}}.corePanelRight-module_drawer__1-ucH{background-color:#fff;border-left:2px solid #f7f7f7;box-shadow:0 6px 4px #00000040;display:flex;flex-direction:column;height:100%;opacity:0;overflow-y:auto;position:relative;transition:opacity .4s ease-in-out;width:auto}.corePanelRight-module_active__RIMQt .corePanelRight-module_drawer__1-ucH{opacity:1}.corePanelRight-module_buttonContainer__62imJ{display:flex;flex-direction:column;left:-90px;position:absolute;top:0}.corePanelRight-module_button__WBdfZ{margin-left:var(--medium);margin-top:var(--small)}";
+var css_248z = ".corePanelRight-module_wrapper__YN3Zr{height:100%;max-width:550px;position:fixed;right:-352px;top:0;transition:all .4s ease-in-out;width:352px;z-index:2}.corePanelRight-module_active__RIMQt{right:0;z-index:var(--echo-framework-z-level-panel-main)}@media screen and (max-width:550px){.corePanelRight-module_active__RIMQt{width:100%}}@media screen and (max-width:892px) and (orientation:portrait){.corePanelRight-module_wrapper__YN3Zr{height:calc(100% - 48px)}}@media screen and (max-width:1078px) and (orientation:landscape){.corePanelRight-module_wrapper__YN3Zr{left:-352px}.corePanelRight-module_active__RIMQt{left:48px;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);z-index:var(--echo-framework-z-level-panel-main)}}.corePanelRight-module_drawer__1-ucH{background-color:#fff;border-left:2px solid #f7f7f7;box-shadow:0 6px 4px #00000040;display:flex;flex-direction:column;height:100%;opacity:0;overflow-y:auto;position:relative;transition:opacity .4s ease-in-out;width:auto}.corePanelRight-module_active__RIMQt .corePanelRight-module_drawer__1-ucH{opacity:1}.corePanelRight-module_buttonContainer__62imJ{display:flex;flex-direction:column;left:-90px;position:absolute;top:0}.corePanelRight-module_button__WBdfZ{margin-left:var(--medium);margin-top:var(--small)}";
 var style = {
   "wrapper": "corePanelRight-module_wrapper__YN3Zr",
   "active": "corePanelRight-module_active__RIMQt",

package/dist/src/coreApplication/EchoBarComponent.js

@@ -32,8 +32,6 @@ var React = require('react');
 
 var reactRouterDom = require('react-router-dom');
 
-var hookLibrary = require('../hooks/hookLibrary.js');
-
 var logo_ee = require('../icons/logo_ee.js');
 
 var EchoContent_module = require('./EchoContent.module.css.js');
@@ -48,24 +46,12 @@ var EchoUtils__default = /*#__PURE__*/_interopDefaultLegacy(EchoUtils);
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-exports.BarButtonVariants = void 0;
-
-(function (BarButtonVariants) {
-  BarButtonVariants["Home"] = "home";
-  BarButtonVariants["Search"] = "search";
-  BarButtonVariants["Camera"] = "camera";
-  BarButtonVariants["Menu"] = "menu";
-})(exports.BarButtonVariants || (exports.BarButtonVariants = {}));
-
 var EchoBarComponent = function EchoBarComponent(_ref) {
-  var isBottomBarVisible = _ref.isBottomBarVisible;
+  var isBottomBarVisible = _ref.isBottomBarVisible,
+      activeAppMenuItem = _ref.activeAppMenuItem,
+      updateActiveAppMenuItem = _ref.updateActiveAppMenuItem;
   var useStateSafe = EchoUtils__default["default"].Hooks.useStateSafe;
 
-  var _React$useState = React.useState(''),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      activeKey = _React$useState2[0],
-      setActiveKey = _React$useState2[1];
-
   var _useStateSafe = useStateSafe(false),
       _useStateSafe2 = _slicedToArray(_useStateSafe, 2),
       isSyncing = _useStateSafe2[0],
@@ -74,20 +60,16 @@ var EchoBarComponent = function EchoBarComponent(_ref) {
   var _EchoCore$usePanels = EchoCore.usePanels(),
       setActivePanel = _EchoCore$usePanels.setActivePanel,
       activePanel = _EchoCore$usePanels.activePanel;
-  /* Use this call once the new camera is ready */
-  // const goToInternalLink = useInternalLink();
-  // goToInternalLink(InternalApplicationLinks.OnlineCamera);
-
 
-  var goToCameraLink = hookLibrary.HookLibrary.useInternalLinkToScan();
+  var goToInternalLink = EchoCore.useInternalLink();
 
   var _EchoCore$usePlantSet = EchoCore.usePlantSettings(),
       selectedInstCode = _EchoCore$usePlantSet.instCode;
 
   var history = reactRouterDom.useHistory();
   React.useEffect(function () {
-    var unSubscribeSyncing = echoBase.eventHub.subscribe('isSyncing', function (active) {
-      setIsSyncing(active);
+    var unSubscribeSyncing = echoBase.eventHub.subscribe('isSyncing', function (syncing) {
+      setIsSyncing(syncing);
     });
     return function () {
       unSubscribeSyncing();
@@ -97,28 +79,29 @@ var EchoBarComponent = function EchoBarComponent(_ref) {
   var onClickButton = function onClickButton(key) {
     setActivePanel('');
 
-    if (key === activeKey) {
-      if (key === exports.BarButtonVariants.Menu || exports.BarButtonVariants.Search) {
+    if (key === activeAppMenuItem) {
+      if (key === 'menu' || key === 'search') {
+        updateActiveAppMenuItem('');
         setActivePanel('');
       } else {
-        history.goBack();
+        goToInternalLink("/");
       }
 
-      setActiveKey('');
+      updateActiveAppMenuItem('');
     } else {
-      setActiveKey(key);
+      updateActiveAppMenuItem(key);
 
       switch (key) {
-        case exports.BarButtonVariants.Home:
+        case 'home':
           return history.push("/?instCode=".concat(selectedInstCode));
 
-        case exports.BarButtonVariants.Search:
+        case 'search':
           return setActivePanel(EchoCore.ECHO_CORE_SEARCH);
 
-        case exports.BarButtonVariants.Camera:
-          return goToCameraLink();
+        case 'camera':
+          return goToInternalLink("newcamera");
 
-        case exports.BarButtonVariants.Menu:
+        case 'menu':
           return setActivePanel(EchoCore.ECHO_CORE_MAIN);
 
         default:
@@ -126,7 +109,7 @@ var EchoBarComponent = function EchoBarComponent(_ref) {
       }
     }
 
-    setActiveKey('');
+    updateActiveAppMenuItem('');
   };
 
   var EchoIcon = logo_ee.icon;
@@ -139,34 +122,34 @@ var EchoBarComponent = function EchoBarComponent(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(edsCoreReact.Button, {
     variant: "ghost_icon",
     onClick: function onClick() {
-      return onClickButton(exports.BarButtonVariants.Home);
+      return onClickButton('home');
     }
   }, /*#__PURE__*/React__default["default"].createElement(EchoIcon, null))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(EchoContent_module["default"].barButtons, " ").concat(activeKey === 'search' && activePanel === 'echoCoreSearch' ? EchoContent_module["default"].activeBottomBarButton : '')
+    className: "".concat(EchoContent_module["default"].barButtons, " ").concat(activeAppMenuItem === 'search' && activePanel === 'echoCoreSearch' ? EchoContent_module["default"].activeBottomBarButton : '')
   }, /*#__PURE__*/React__default["default"].createElement(edsCoreReact.Button, {
     variant: "ghost_icon",
     onClick: function onClick() {
-      return onClickButton(exports.BarButtonVariants.Search);
+      return onClickButton('search');
     }
   }, /*#__PURE__*/React__default["default"].createElement(echoComponents.Icon, {
     name: 'search',
     color: echoComponents.themeConst.echoText
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(EchoContent_module["default"].barButtons, " ").concat(activeKey === 'camera' && EchoContent_module["default"].activeBottomBarButton)
+    className: "".concat(EchoContent_module["default"].barButtons, " ").concat(activeAppMenuItem === 'camera' ? EchoContent_module["default"].activeBottomBarButton : '')
   }, /*#__PURE__*/React__default["default"].createElement(edsCoreReact.Button, {
     variant: "ghost_icon",
     onClick: function onClick() {
-      return onClickButton(exports.BarButtonVariants.Camera);
+      return onClickButton('camera');
     }
   }, /*#__PURE__*/React__default["default"].createElement(echoComponents.Icon, {
     name: 'camera',
     color: echoComponents.themeConst.echoText
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(EchoContent_module["default"].barButtons, " ").concat(activeKey === 'menu' && activePanel === 'echoCoreMain' ? EchoContent_module["default"].activeBottomBarButton : '')
+    className: "".concat(EchoContent_module["default"].barButtons, " ").concat(activeAppMenuItem === 'menu' && activePanel === 'echoCoreMain' ? EchoContent_module["default"].activeBottomBarButton : '')
   }, /*#__PURE__*/React__default["default"].createElement(edsCoreReact.Button, {
     variant: "ghost_icon",
     onClick: function onClick() {
-      return onClickButton(exports.BarButtonVariants.Menu);
+      return onClickButton('menu');
     }
   }, isSyncing ? /*#__PURE__*/React__default["default"].createElement(echoComponents.Icon, {
     className: EchoContent_module["default"].spinningIcon,
@@ -179,4 +162,3 @@ var EchoBarComponent = function EchoBarComponent(_ref) {
 };
 
 exports.EchoBarComponent = EchoBarComponent;
-exports["default"] = EchoBarComponent;

package/dist/src/coreApplication/EchoContent.js

@@ -36,16 +36,17 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var EchoContent = function EchoContent(_ref) {
   var children = _ref.children,
+      isLeftAndRightPanelHidden = _ref.isLeftAndRightPanelHidden,
       Legend = _ref.Legend;
 
   var _useScreenValues$useS = useScreenValues.useScreenValues(),
       isScreenMobileSize = _useScreenValues$useS.isScreenMobileSize;
 
-  return /*#__PURE__*/React__default["default"].createElement(EchoCore.ModuleContextProvider, null, /*#__PURE__*/React__default["default"].createElement(corePanelLeft["default"], {
+  return /*#__PURE__*/React__default["default"].createElement(EchoCore.ModuleContextProvider, null, !isLeftAndRightPanelHidden && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(corePanelLeft["default"], {
     isToggleButtonVisible: !isScreenMobileSize
   }), /*#__PURE__*/React__default["default"].createElement(corePanelRight["default"], {
     isToggleButtonVisible: !isScreenMobileSize
-  }), children, Legend && /*#__PURE__*/React__default["default"].createElement(Legend, null));
+  })), children, Legend && /*#__PURE__*/React__default["default"].createElement(Legend, null));
 };
 
 exports.EchoContent = EchoContent;

package/dist/src/coreApplication/EchoUserInterfaceContextProvider.js

@@ -0,0 +1,66 @@
+'use strict';
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var React = require('react');
+
+function _interopDefaultLegacy(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var EchoUiContext = /*#__PURE__*/React__default["default"].createContext({
+  activeAppMenuItem: '',
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- need to match interface
+  updateActiveAppMenuItem: function updateActiveAppMenuItem(newActiveAppMenuItem) {
+    throw new Error('Echo UI Context not initialized');
+  }
+});
+
+var useEchoUiContext = function useEchoUiContext() {
+  return React__default["default"].useContext(EchoUiContext);
+};
+
+var EchoUiContextProvider = function EchoUiContextProvider(_ref) {
+  var children = _ref.children;
+
+  var _React__default$defau = React__default["default"].useState(''),
+      _React__default$defau2 = _slicedToArray(_React__default$defau, 2),
+      activeAppMenuItem = _React__default$defau2[0],
+      setActiveAppMenuItem = _React__default$defau2[1];
+
+  var updateActiveAppMenuItem = React__default["default"].useCallback(function (newActiveAppMenuItem) {
+    return setActiveAppMenuItem(newActiveAppMenuItem);
+  }, []);
+  var value = React__default["default"].useMemo(function () {
+    return {
+      activeAppMenuItem: activeAppMenuItem,
+      updateActiveAppMenuItem: updateActiveAppMenuItem
+    };
+  }, [activeAppMenuItem, updateActiveAppMenuItem]);
+  return /*#__PURE__*/React__default["default"].createElement(EchoUiContext.Provider, {
+    value: value
+  }, children);
+};
+
+exports.EchoUiContextProvider = EchoUiContextProvider;
+exports.useEchoUiContext = useEchoUiContext;

package/dist/src/hooks/hookLibrary.js

@@ -25,8 +25,6 @@ exports.RegisteredHookName = void 0;
   RegisteredHookName["useIsContextMenuInfoLoading"] = "useIsContextMenuInfoLoading";
   RegisteredHookName["useSetActiveCommPackNo"] = "useSetActiveCommPackNo";
   RegisteredHookName["useSetActiveMcPackNo"] = "useSetActiveMcPackNo";
-  RegisteredHookName["useDeviceOrientation"] = "useDeviceOrientation";
-  RegisteredHookName["useInternalLinkToScan"] = "useInternalLinkToScan";
 })(exports.RegisteredHookName || (exports.RegisteredHookName = {}));
 
 var HookLibrary = Object.freeze({
@@ -83,21 +81,6 @@ var HookLibrary = Object.freeze({
    */
   useSetActiveMcPackNo: function useSetActiveMcPackNo() {
     return EchoCore__default["default"].echoHookRegistry.getHookByName(exports.RegisteredHookName.useSetActiveMcPackNo)();
-  },
-
-  /**
-   * Hook for detecting device orientation from native devices.
-   * @returns {DeviceOrientation}
-   */
-  useDeviceOrientation: function useDeviceOrientation() {
-    return EchoCore__default["default"].echoHookRegistry.getHookByName(exports.RegisteredHookName.useDeviceOrientation)();
-  },
-
-  /**
-   * Hook for opening camera.
-   */
-  useInternalLinkToScan: function useInternalLinkToScan() {
-    return EchoCore__default["default"].echoHookRegistry.getHookByName(exports.RegisteredHookName.useInternalLinkToScan)();
   }
 });
 exports.HookLibrary = HookLibrary;

package/dist/src/hooks/useIsCompactLayout.js

@@ -34,7 +34,7 @@ function useIsCompactLayout(isLandscape) {
       setIsMobileWidth = _React$useState2[1]; //This calculation is connected to the viewport metatag in index.html
 
 
-  var scaledClientWidth = !!windowSize.width && windowSize.width * 0.86;
+  var scaledClientWidth = windowSize.width * 0.86;
   var roundedClientWidth = Math.ceil(scaledClientWidth);
   var smallScreenPortrait = roundedClientWidth < 768 && !isLandscape;
   var smallScreenLandscape = roundedClientWidth < 928 && isLandscape;

package/dist/src/hooks/useScreenValues.js

@@ -12,8 +12,6 @@ require('react-router-dom');
 
 var useScreenOrientation = require('./useScreenOrientation.js');
 
-var hookLibrary = require('./hookLibrary.js');
-
 var useIsCompactLayout = require('./useIsCompactLayout.js');
 
 require('@equinor/echo-utils');
@@ -26,22 +24,11 @@ require('../services/echopediaAnalyticsModule/echopediaAnalyticsModule.js');
 
 function useScreenValues() {
   var screenOrientation = useScreenOrientation.useScreenOrientation();
-
-  var _hookLibrary$HookLibr = hookLibrary.HookLibrary.useDeviceOrientation(),
-      landscape = _hookLibrary$HookLibr.landscape,
-      portrait = _hookLibrary$HookLibr.portrait;
-
-  var isWeb = !landscape && !portrait;
-  var isLandscapeWeb = screenOrientation === 'landscape';
-  var isScreenMobileSize = useIsCompactLayout.useIsCompactLayout(isWeb ? isLandscapeWeb : landscape);
+  var isLandscape = screenOrientation === 'landscape';
+  var isScreenMobileSize = useIsCompactLayout.useIsCompactLayout(isLandscape);
   return {
-    isWeb: isWeb,
     isScreenMobileSize: isScreenMobileSize,
-    screenOrientationDevice: {
-      landscape: landscape,
-      portrait: portrait
-    },
-    screenOrientationWeb: screenOrientation
+    screenOrientation: screenOrientation
   };
 }
 

package/dist/src/hooks/useWindowSize.js

@@ -20,8 +20,8 @@ var React = require('react'); // useWindowSize from usehooks.com
 
 /**
  * Get the current size of the browser window.
- * @returns {width?: number; height?: number} Width and height of the current browser window size.
- * Returns undefined if there is no window object (for example: executed on server side)
+ * @returns {width?: number; height?: number} Width and height of the current browser size.
+
  */
 
 

package/dist/src/index.js

@@ -88,6 +88,8 @@ var EchoContentPanels = require('./coreApplication/EchoContentPanels.js');
 
 var EchoEventHandler = require('./coreApplication/EchoEventHandler.js');
 
+var EchoUserInterfaceContextProvider = require('./coreApplication/EchoUserInterfaceContextProvider.js');
+
 var toastActions = require('./services/eventHubActions/toastActions.js');
 
 var themeConst = require('./theme/themeConst.js');
@@ -185,17 +187,13 @@ exports.EchoRoutes = routes.EchoRoutes;
 exports.TagNumber = tagNumber.TagNumber;
 exports.Toaster = toaster.Toaster;
 exports.Toasters = toasters.Toasters;
-Object.defineProperty(exports, 'BarButtonVariants', {
-  enumerable: true,
-  get: function get() {
-    return EchoBarComponent.BarButtonVariants;
-  }
-});
 exports.EchoBarComponent = EchoBarComponent.EchoBarComponent;
 exports.EchoContent = EchoContent.EchoContent;
 exports.mainMenu = EchoContentPanels.mainMenu;
 exports.searchPanel = EchoContentPanels.searchPanel;
 exports.EchoEventHandler = EchoEventHandler.EchoEventHandler;
+exports.EchoUiContextProvider = EchoUserInterfaceContextProvider.EchoUiContextProvider;
+exports.useEchoUiContext = EchoUserInterfaceContextProvider.useEchoUiContext;
 exports.displayToast = toastActions.displayToast;
 exports.themeConst = themeConst.themeConst;
 Object.defineProperty(exports, 'ExtendableComponentName', {

package/dist/src/index2.js

@@ -30,15 +30,19 @@ require('@equinor/echo-components');
 
 require('../node_modules/classnames/index.js');
 
-var EchoBarComponent = require('./coreApplication/EchoBarComponent.js');
+require('@equinor/echo-base');
 
-require('./components/panel/corePanelLeft.js');
+require('@equinor/echo-utils');
 
-require('./components/panel/corePanelRight.js');
+require('@equinor/eds-core-react');
 
 require('react-router-dom');
 
-require('@equinor/eds-core-react');
+require('./coreApplication/EchoContent.module.css.js');
+
+require('./components/panel/corePanelLeft.js');
+
+require('./components/panel/corePanelRight.js');
 
 require('./components/pageMenu/accordionItem.module.css.js');
 
@@ -48,8 +52,6 @@ require('./components/pageMenu/pageMenu.module.css.js');
 
 require('./components/pageMenu/pageMenuDrawerItem.module.css.js');
 
-require('@equinor/echo-base');
-
 require('./components/pageMenu/settings/settings.module.css.js');
 
 require('./services/api/api-manager.js');
@@ -66,8 +68,6 @@ var externalLinkButton = require('./components/externalLinkButton/externalLinkBu
 
 require('./services/echopediaAnalyticsModule/echopediaAnalyticsModule.js');
 
-require('@equinor/echo-utils');
-
 var pingableSources = require('./types/pingableSources.js');
 
 var index = require('./components/contextualAppLinks/index.js');
@@ -155,13 +155,6 @@ exports.getLegendStatusColor = legendUtils.getLegendStatusColor;
 exports.legendTypeToLegendStatus = legendUtils.legendTypeToLegendStatus;
 exports.valueToEnum = legendUtils.valueToEnum;
 exports.goToExternalLink = navigationUtils.goToExternalLink;
-Object.defineProperty(exports, 'BarButtonVariants', {
-  enumerable: true,
-  get: function get() {
-    return EchoBarComponent.BarButtonVariants;
-  }
-});
-exports.EchoBarComponent = EchoBarComponent.EchoBarComponent;
 exports.ExternalLinkButton = externalLinkButton.ExternalLinkButton;
 Object.defineProperty(exports, 'ExternalLinkButtonStyle', {
   enumerable: true,

package/dist/types/hookLibrary.d.ts

@@ -2,8 +2,4 @@ export declare type SetActiveTagNo = (tagNo: string, activeTagTab?: string, acti
 export declare type TagData = [(tagNo: string, instCode: string) => void];
 export declare type SetActiveCommPackNo = (commPackNo: string, activeCommPackProject: string, activeCommPackTab?: string, activeCommPackSubTab?: string) => void;
 export declare type SetActiveMcPackNo = (mcPackNo: string, activeMcPackProject: string, activeMcPackTab?: string, activeMcPackSubTab?: string) => void;
-export interface DeviceOrientation {
-    portrait: boolean;
-    landscape: boolean;
-}
 export declare type ScreenOrientation = 'landscape' | 'portrait' | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@equinor/echo-framework",
-    "version": "0.9.10",
+    "version": "0.9.13",
     "description": "Modules and components for EchoWeb, utilizing EchoCore",
     "main": "dist/src/index.js",
     "types": "dist/index.d.ts",