@equinor/echo-components 1.0.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/echo-components",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "dependencies": {
     "chart.js": "4.5.0",
     "react-datepicker": "8.7.0",
@@ -8,7 +8,7 @@
     "react-window": "1.8.11"
   },
   "peerDependencies": {
-    "@equinor/echo-utils": ">= 1.0.0 < 2.0.0",
+    "@equinor/echo-utils": ">= 1.2.0 < 2.0.0",
     "@equinor/eds-core-react": "0.43.0",
     "@equinor/eds-icons": "0.22.0",
     "@equinor/eds-tokens": "0.9.2",

package/src/components/echoBottomBar/EchoBottomBar.d.ts

@@ -4,3 +4,9 @@ export interface EchoBottomBarProps {
     style?: React.CSSProperties;
 }
 export declare const EchoBottomBar: React.FC<EchoBottomBarProps>;
+/**
+ * Child for EchoBottomBar. An <li> with the needed style
+ **/
+export declare const EchoBottomBarItem: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/src/components/legendSelector/LegendSelector.d.ts

@@ -8,7 +8,6 @@ export interface LegendSelectorProps {
     showLegendToggle?: boolean;
     visual?: JSX.Element;
     placeholder?: string;
-    disabled?: boolean;
 }
 /**
  * Legend selector component that will display the selected legend type and the statuses.
@@ -20,7 +19,6 @@ export interface LegendSelectorProps {
  * @param {boolean} showLegendToggle - Boolean to show the legend toggle button. Optional.
  * @param {JSX.Element} visual - Visual or icon to be displayed before the legend selector. Optional.
  * @param {string} placeholder - Placeholder text to be displayed when no selection is selected. Optional.
- * @param {boolean} disabled - Boolean to disable the legend selector. Optional.
  * @returns {JSX.Element} - Legend selector component.
  */
 export declare const LegendSelector: React.FC<LegendSelectorProps>;

package/src/components/legendSelectorMenu/LegendSelectorMenu.d.ts

@@ -4,7 +4,6 @@ interface LegendSelectorMenuProps {
     selectedOption: string;
     onOptionClick: (option: string) => void;
     placeholder?: string;
-    disabled?: boolean;
 }
 /**
  * Legend selector component to choose which legend type to display.
@@ -13,7 +12,6 @@ interface LegendSelectorMenuProps {
  * @param {string} selectedOption- The selected item.
  * @param {(option: string) => void} onOptionClick - Function that is called when another option is clicked.
  * @param {string} placeholder - Placeholder text to be displayed when no item is selected. Optional.
- * @param {boolean} disabled - Boolean to disable the menu. Optional.
  * @returns {JSX.Element} - Legend selector menu component.
  */
 export declare const LegendSelectorMenu: React.FC<LegendSelectorMenuProps>;

package/src/components/sidebarButton/SidebarButton.d.ts

@@ -33,6 +33,7 @@ export interface SidebarButtonProps {
      * The icon to be displayed.
      */
     children: React.ReactNode;
+    showIndicator?: boolean;
 }
 /**
  * The reusable button component that is used in the sidebars/bottom bar.
@@ -57,4 +58,4 @@ export interface SidebarButtonProps {
  * }
  * @return {*}  {JSX.Element}
  */
-export declare const SidebarButton: ({ text, active, onClick, count, buttonPosition, refValue, id, children }: SidebarButtonProps) => React.JSX.Element;
+export declare const SidebarButton: ({ text, active, onClick, count, buttonPosition, refValue, id, children, showIndicator }: SidebarButtonProps) => React.JSX.Element;

package/src/hooks/index.d.ts

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

package/src/hooks/useMediaMatch.d.ts

@@ -0,0 +1,7 @@
+export type Breakpoints = 'xs' | 's' | 'md' | 'lg' | 'xl' | 'xxl';
+/**
+ * Hook for using media-queries on Typescript. Try to solve it with css before using this one.
+ * @Param breakpoint - A preset of breakpoints
+ * @return boolean - If it matches the media-query.
+ **/
+export declare const useMediaMatch: (breakpoint: Breakpoints) => boolean;

package/src/theme/themeConst.d.ts

@@ -1,11 +1,18 @@
 export declare const themeConst: {
     xSmall: string;
+    smallXSmall: string;
     small: string;
     smallMedium: string;
     medium: string;
     mediumLarge: string;
     large: string;
     xLarge: string;
+    breakpointXs: string;
+    breakpointS: string;
+    breakpointMd: string;
+    breakpointLg: string;
+    breakpointXl: string;
+    breakpointXxl: string;
     fontSizeXSmall: string;
     fontSizeSmall: string;
     fontSizeSmallMedium: string;
@@ -83,6 +90,7 @@ export declare const themeConst: {
     readonly pm20: string;
     lc: string;
     readonly lo: string;
+    readonly noValvePositionInSAP: string;
     onGoing: string;
     readonly done: string;
     asBuilt: string;
@@ -143,10 +151,15 @@ export declare const themeConst: {
     backgroundDark3: string;
     hoverDark: string;
     borderDark: string;
-    focusDark: string;
     primaryTextForDarkBackground: string;
     secondaryTextForDarkBackground: string;
     primaryInteractionForDarkBackground: string;
     uiBackgroundSemiTransparent: string;
     textStaticIconsDarkSecondary: string;
+    edsDarkUiBackgroundLighten: string;
+    edsDarkTextStaticIconsPrimary: string;
+    edsDarkInteractivePrimaryHover: string;
+    edsDarkInteractiveDisabledFill: string;
+    edsDarkInteractiveDisabledText: string;
+    selectionIndicator: string;
 };

package/style-reset.css

@@ -1 +1 @@
-#root,body,html{height:100%;overflow:hidden;position:fixed;width:100%}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:var(--equiGray5);border-radius:5px}::-webkit-scrollbar-thumb{background:var(--equiGreen1);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--eds_interactive_primary__hover)}button,input{appearance:none;background:transparent;border:inherit;color:inherit;font:inherit;outline:0}input,input:after,input:before{-webkit-user-select:initial;-khtml-user-select:initial;-moz-user-select:initial;-ms-user-select:initial;user-select:auto}li,menu,ul{list-style:none;margin-block:0;padding-inline:0}
+#root,body,html{height:100%;overflow:hidden;position:fixed;width:100%}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:var(--equiGray5);border-radius:5px}::-webkit-scrollbar-thumb{background:var(--equiGreen1);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--eds_interactive_primary__hover)}button,input{appearance:none;background:transparent;border:inherit;color:inherit;font:inherit;outline:0}input,input:after,input:before{-webkit-user-select:initial;-khtml-user-select:initial;-moz-user-select:initial;-ms-user-select:initial;user-select:auto}

package/src/hooks/useIsMobile.d.ts

@@ -1,4 +0,0 @@
-/**
- * @deprecated use isMobileDevice from @equinor/echo-utils instead
- */
-export declare function useIsMobile(): boolean;