@equinor/echo-components 0.5.11 → 0.5.12

package/dist/components/sidesheet/sheet/utils.d.ts

@@ -1,2 +1,2 @@
 import { SideSheetOrientation } from '../enums';
-export declare function getSheetContainerClass(side?: 'left' | 'right', orientation?: SideSheetOrientation, floating?: boolean): string;
+export declare function GetSheetContainerClass(side?: 'left' | 'right', orientation?: SideSheetOrientation, floating?: boolean, isMobile?: boolean): string;

package/dist/hooks/index.d.ts

@@ -1,2 +1,3 @@
-export * from './useKeyboardNavigation';
 export * from './useEventListener';
+export * from './useIsMobile';
+export * from './useKeyboardNavigation';

package/dist/hooks/useIsMobile.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hook for checking if page is loaded from mobile device.
+ * @returns boolean true if on mobile.
+ */
+export declare function useIsMobile(): boolean;

package/dist/index.js

@@ -14899,6 +14899,28 @@ var useEventListener = function useEventListener(eventName, handler, options) {
   }, [eventName, element]);
 };
 
+var useInitial = EchoUtils.Hooks.useInitial;
+/**
+ * Hook for checking if page is loaded from mobile device.
+ * @returns boolean true if on mobile.
+ */
+function useIsMobile() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMobile = _useState2[0],
+    setIsMobile = _useState2[1];
+  useInitial(function () {
+    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+      // true for mobile device
+      setIsMobile(true);
+    } else {
+      // false for not mobile device
+      setIsMobile(false);
+    }
+  });
+  return isMobile;
+}
+
 var Keys = {
   ArrowUp: "up",
   ArrowRight: "right",
@@ -21100,7 +21122,8 @@ var css_248z$7 = ".Sheet-module_container__MJ-Md{background-color:var(--white);b
 var styles$6 = {"container":"Sheet-module_container__MJ-Md","verticalContainer":"Sheet-module_verticalContainer__0wKqY Sheet-module_container__MJ-Md","blockContainer":"Sheet-module_blockContainer__JZVGn","rightContainer":"Sheet-module_rightContainer__u1DzS Sheet-module_verticalContainer__0wKqY Sheet-module_container__MJ-Md","leftContainer":"Sheet-module_leftContainer__8nvAG Sheet-module_verticalContainer__0wKqY Sheet-module_container__MJ-Md","horizontalContainer":"Sheet-module_horizontalContainer__ibaGL Sheet-module_container__MJ-Md","fullscreenContainer":"Sheet-module_fullscreenContainer__5qqvB Sheet-module_container__MJ-Md"};
 styleInject(css_248z$7);
 
-function getSheetContainerClass(side, orientation, floating) {
+function GetSheetContainerClass(side, orientation, floating, isMobile) {
+  if (isMobile) return styles$6.fullscreenContainer;
   switch (orientation) {
     case SideSheetOrientation.Horizontal:
       return styles$6.horizontalContainer;
@@ -21126,9 +21149,10 @@ function Sheet(_ref) {
     children = _ref.children,
     className = _ref.className,
     style = _ref.style;
+  var isMobile = useIsMobile();
   var containerClass = useMemo(function () {
-    return getSheetContainerClass(side, orientation, floating);
-  }, [side, orientation, floating]);
+    return GetSheetContainerClass(side, orientation, floating, isMobile);
+  }, [side, orientation, floating, isMobile]);
   if (className !== undefined) {
     containerClass += ' ' + className;
   }
@@ -21147,9 +21171,10 @@ function SheetTopArea(_ref) {
     onOrientationChange = _ref.onOrientationChange,
     closeSheet = _ref.closeSheet,
     previous = _ref.previous;
+  var isMobile = useIsMobile();
   return /*#__PURE__*/React__default.createElement("div", {
     className: styles$5.topArea
-  }, /*#__PURE__*/React__default.createElement("div", null, previous), orientation && onOrientationChange && /*#__PURE__*/React__default.createElement(SheetOrientationActions, {
+  }, /*#__PURE__*/React__default.createElement("div", null, previous), orientation && onOrientationChange && !isMobile && /*#__PURE__*/React__default.createElement(SheetOrientationActions, {
     orientation: orientation,
     onOrientationChange: onOrientationChange
   }), /*#__PURE__*/React__default.createElement(Button, {
@@ -21759,5 +21784,5 @@ var OptionsList = function OptionsList(_ref) {
   }));
 };
 
-export { ButtonWithPopover, ContextMenu, DataInfoButton, DialogGenerator, DraggableItemsWrapper, Dropdown, EchoBottomBar, EchoCard, EchoHeader, FloatingActionButton, FloatingSearchBar, Icon, IconList, InlineTagIconLink, LinkCard, ListItem, ListRow, OptionsList, Panel, PanelContent, PanelWrapper, RadioButtonGroup, ReactDatePicker, RoundIconButton, RoundIconButtonVariants, SideSheet, SideSheetOrientation, SidebarButton, SliderField, SplitView, TagCategoryIcon, TagCategoryType, TagContextMenu, TagIcon, TagIconShadowWrapper, TextIconButton, TimePicker, classnames$1 as classnames, echoIcons, getIcon, notifications_m1, notifications_m2, notifications_m3, notifications_m4, notifications_m5, notifications_m6, notifications_m9, notifications_main_group, robim_external_ald, robim_external_iwit, robim_external_timp, robim_external_timp_text, themeConst, useKeyboardNavigation, useListNavigator, usePanelContext, useSectionNavigator, workorders_main_group, workorders_pm01, workorders_pm02, workorders_pm03, workorders_pm04, workorders_pm05, workorders_pm06, workorders_pm10, workorders_pm15, workorders_pm20 };
+export { ButtonWithPopover, ContextMenu, DataInfoButton, DialogGenerator, DraggableItemsWrapper, Dropdown, EchoBottomBar, EchoCard, EchoHeader, FloatingActionButton, FloatingSearchBar, Icon, IconList, InlineTagIconLink, LinkCard, ListItem, ListRow, OptionsList, Panel, PanelContent, PanelWrapper, RadioButtonGroup, ReactDatePicker, RoundIconButton, RoundIconButtonVariants, SideSheet, SideSheetOrientation, SidebarButton, SliderField, SplitView, TagCategoryIcon, TagCategoryType, TagContextMenu, TagIcon, TagIconShadowWrapper, TextIconButton, TimePicker, classnames$1 as classnames, echoIcons, getIcon, notifications_m1, notifications_m2, notifications_m3, notifications_m4, notifications_m5, notifications_m6, notifications_m9, notifications_main_group, robim_external_ald, robim_external_iwit, robim_external_timp, robim_external_timp_text, themeConst, useIsMobile, useKeyboardNavigation, useListNavigator, usePanelContext, useSectionNavigator, workorders_main_group, workorders_pm01, workorders_pm02, workorders_pm03, workorders_pm04, workorders_pm05, workorders_pm06, workorders_pm10, workorders_pm15, workorders_pm20 };
 //# sourceMappingURL=index.js.map