@equinor/echo-components 6.0.0 → 6.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/echo-components",
-  "version": "6.0.0",
+  "version": "6.2.0",
   "dependencies": {
     "chart.js": "4.5.1",
     "react-datepicker": "9.1.0",
@@ -8,7 +8,7 @@
     "react-window": "1.8.11"
   },
   "peerDependencies": {
-    "@equinor/echo-utils": ">= 6.0.0 < 7.0.0",
+    "@equinor/echo-utils": ">= 6.2.0 < 7.0.0",
     "@equinor/eds-core-react": "0.49.0",
     "@equinor/eds-icons": "0.22.0",
     "@equinor/eds-tokens": "2.1.0",

package/src/components/compoundListItem/CompoundListItem.d.ts

@@ -0,0 +1,52 @@
+import { type ReactNode } from 'react';
+export { useCompoundListItemContext } from './compoundListItem.context';
+export type { CompoundListItemActionsProps } from './components/CompoundListItemActions';
+export type { CompoundListItemContentProps } from './components/CompoundListItemContent';
+export type { CompoundListItemFooterProps } from './components/CompoundListItemFooter';
+export type { CompoundListItemHelpTextProps } from './components/CompoundListItemHelpText';
+export type { CompoundListItemIconProps } from './components/CompoundListItemIcon';
+export type { CompoundListItemContextValue } from './compoundListItem.context';
+interface CompoundListItemCommonProps {
+    readonly children?: ReactNode;
+    /**
+     * Whether the item is currently active. Defaults to true.
+     * When false, the content is dimmed. Action buttons and the navigation
+     * chevron keep full opacity so they remain visually interactive.
+     * @default true
+     */
+    readonly isActive?: boolean;
+    /**
+     * The HTML element to render as the wrapper for the list item. Defaults to 'li'.
+     */
+    readonly as?: 'li' | 'div';
+}
+/**
+ * Non-interactive list item. Use when the item is purely informational and has no actions or navigation.
+ * Omits interactive attributes and styling.
+ */
+type CompoundListItemStaticProps = CompoundListItemCommonProps;
+/**
+ * Clickable list item rendered as a button. Use when the item has an onClick handler but does not navigate to a new page.
+ */
+interface CompoundListItemButtonProps extends CompoundListItemCommonProps {
+    readonly onClick: () => void;
+    /** Accessible label describing the action, e.g. `Open details for 11-AB-1234`. */
+    readonly ariaLabel: string;
+}
+interface CompoundListItemLinkProps extends CompoundListItemCommonProps {
+    readonly href: string;
+    /** Accessible label describing the navigation target, e.g. `Go to details page for 11-AB-1234`. */
+    readonly ariaLabel: string;
+}
+export type CompoundListItemBaseProps = CompoundListItemStaticProps | CompoundListItemButtonProps | CompoundListItemLinkProps;
+export declare const CompoundListItem: ((props: CompoundListItemBaseProps) => import("react/jsx-runtime").JSX.Element) & {
+    Content: (({ children }: import("./components/CompoundListItemContent").CompoundListItemContentProps) => import("react/jsx-runtime").JSX.Element) & {
+        Icon: (props: import("./components/CompoundListItemIcon").CompoundListItemIconProps) => import("react/jsx-runtime").JSX.Element;
+        Actions: (({ children }: import("./components/CompoundListItemActions").CompoundListItemActionsProps) => import("react/jsx-runtime").JSX.Element) & {
+            Item: ({ children, tooltip }: import("./components/CompoundListItemActionItem").CompoundListItemActionItemProps) => import("react/jsx-runtime").JSX.Element;
+        };
+    };
+    Footer: (({ children }: import("./components/CompoundListItemFooter").CompoundListItemFooterProps) => import("react/jsx-runtime").JSX.Element) & {
+        HelpText: ({ children, showWarningIcon }: import("./components/CompoundListItemHelpText").CompoundListItemHelpTextProps) => import("react/jsx-runtime").JSX.Element;
+    };
+};

package/src/components/compoundListItem/components/CompoundListItemActionItem.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export interface CompoundListItemActionItemProps {
+    readonly children: ReactNode;
+    /** Optional EDS tooltip rendered around the child. */
+    readonly tooltip?: string;
+}
+/**
+ * Individual action item for CompoundListItem.
+ * Meant to be used within `CompoundListItem.Actions` for a consistent structure and
+ * styling of row-level actions.
+ */
+export declare const CompoundListItemActionItem: ({ children, tooltip }: CompoundListItemActionItemProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/compoundListItem/components/CompoundListItemActions.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export interface CompoundListItemActionsProps {
+    readonly children: ReactNode;
+}
+export declare const CompoundListItemActions: (({ children }: CompoundListItemActionsProps) => import("react/jsx-runtime").JSX.Element) & {
+    Item: ({ children, tooltip }: import("./CompoundListItemActionItem").CompoundListItemActionItemProps) => import("react/jsx-runtime").JSX.Element;
+};

package/src/components/compoundListItem/components/CompoundListItemContent.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+export interface CompoundListItemContentProps {
+    readonly children: ReactNode;
+}
+/**
+ * Content section for CompoundListItem. Contains the icon, main content, and actions.
+ * Renders a horizontal row layout. Navigation chevron is shown when parent is clickable.
+ */
+export declare const CompoundListItemContent: ({ children }: CompoundListItemContentProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/compoundListItem/components/CompoundListItemFooter.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+export interface CompoundListItemFooterProps {
+    readonly children: ReactNode;
+}
+/**
+ * Footer section for CompoundListItem, rendered below the main content row but inside the clickable area.
+ * Use this for help text, warnings, or any custom content that should appear below the main row.
+ */
+export declare const CompoundListItemFooter: ({ children }: CompoundListItemFooterProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/compoundListItem/components/CompoundListItemHelpText.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+export interface CompoundListItemHelpTextProps {
+    readonly children: ReactNode;
+    /**
+     * If true, shows a warning icon before the help text.
+     * @default false
+     */
+    readonly showWarningIcon?: boolean;
+}
+/**
+ * Displays styled text with an optional warning icon.
+ */
+export declare const CompoundListItemHelpText: ({ children, showWarningIcon }: CompoundListItemHelpTextProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/compoundListItem/components/CompoundListItemIcon.d.ts

@@ -0,0 +1,10 @@
+export interface CompoundListItemIconProps {
+    readonly color?: string;
+    readonly backgroundColor?: string;
+    readonly name: string;
+}
+/**
+ * Icon section for CompoundListItem. Renders a circular background with an
+ * icon. Colors can be customized via props or fall back to theme defaults.
+ */
+export declare const CompoundListItemIcon: (props: CompoundListItemIconProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/compoundListItem/compoundListItem.context.d.ts

@@ -0,0 +1,9 @@
+export interface CompoundListItemContextValue {
+    readonly isClickable: boolean;
+    readonly isActive: boolean;
+}
+export declare const CompoundListItemProvider: import("react").Provider<CompoundListItemContextValue | undefined>;
+/**
+ * Hook to access CompoundListItem context. Must be used within a CompoundListItem component.
+ */
+export declare const useCompoundListItemContext: () => CompoundListItemContextValue;

package/src/components/index.d.ts

@@ -3,6 +3,7 @@ export * from './autohiddenContent/AutohiddenContent';
 export * from './blackLink/BlackLink';
 export * from './buttonWithPopover/ButtonWithPopover';
 export * from './charts';
+export * from './compoundListItem/CompoundListItem';
 export * from './contextMenu/ContextMenu';
 export * from './contextMenuPopover/DataInfoButton';
 export * from './copyToClipboard/CopyToClipboard';
@@ -51,7 +52,6 @@ export * from './noDataLabel';
 export * from './notificationListItem/NotificationListItem';
 export * from './pcMatrix/PCMatrix';
 export * from './rightPanel';
-export * from './scrollableTabs/ScrollableTabs';
 export * from './searchBar';
 export * from './secondaryMarker/SecondaryMarker';
 export * from './secondaryMarker/SecondaryMarkerExpander';

package/src/components/itemCards/coordinateItemCard/CoordinateItemCard.d.ts

@@ -0,0 +1,6 @@
+import type { CoordinateItemCardData } from './coordinateItemCard.types';
+interface CoordinateItemCardProps {
+    readonly coordinate: CoordinateItemCardData;
+}
+export declare const CoordinateItemCard: ({ coordinate }: CoordinateItemCardProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/itemCards/coordinateItemCard/coordinateItemCard.types.d.ts

@@ -0,0 +1,9 @@
+export interface CoordinateItemCardData {
+    readonly name: string;
+    readonly x: number;
+    readonly y: number;
+    readonly z: number;
+    readonly instCode: string;
+    readonly plantCode: string;
+    readonly relatedToDisplay?: string;
+}

package/src/components/itemCards/index.d.ts

@@ -1,9 +1,11 @@
+export { CoordinateItemCard } from './coordinateItemCard/CoordinateItemCard';
+export type { CoordinateItemCardData } from './coordinateItemCard/coordinateItemCard.types';
 export { EquipmentItemCard } from './equipmentItemCard/EquipmentItemCard';
 export type { EquipmentItemCardData } from './equipmentItemCard/equipmentItemCard.types';
 export { ItemCard } from './itemCard/ItemCard';
 export { type ItemCardIconItem, type ItemCardIconsProps } from './itemCard/itemCard.types';
 export { LastRecordedMeasurement } from './measuringPointItemCard/lastRecordedMeasurement/LastRecordedMeasurement';
-export type { LastRecordedMeasurementInfo } from './measuringPointItemCard/lastRecordedMeasurement/lastRecordedMeasurement.types';
+export type { LastRecordedMeasurementInfo, MeasurementLabelledText } from './measuringPointItemCard/lastRecordedMeasurement/lastRecordedMeasurement.types';
 export { MeasuringPointItemCard } from './measuringPointItemCard/MeasuringPointItemCard';
 export type { MeasuringPointItemCardData } from './measuringPointItemCard/measuringPointItemCard.types';
 export { NotificationItemCard } from './notificationItemCard/NotificationItemCard';

package/src/components/itemCards/measuringPointItemCard/lastRecordedMeasurement/LastRecordedMeasurement.d.ts

@@ -3,5 +3,5 @@ interface LastRecordedMeasurementProps {
     readonly lastRecordedMeasurement: LastRecordedMeasurementInfo;
     readonly failureMechanismDescription: string | undefined;
 }
-export declare const LastRecordedMeasurement: ({ lastRecordedMeasurement, failureMechanismDescription }: LastRecordedMeasurementProps) => "" | import("react/jsx-runtime").JSX.Element | undefined;
+export declare const LastRecordedMeasurement: ({ lastRecordedMeasurement, failureMechanismDescription }: LastRecordedMeasurementProps) => import("react/jsx-runtime").JSX.Element | undefined;
 export {};

package/src/components/itemCards/measuringPointItemCard/lastRecordedMeasurement/lastRecordedMeasurement.types.d.ts

@@ -1,5 +1,9 @@
+export interface MeasurementLabelledText {
+    readonly label: string;
+    readonly value: string;
+}
 export interface LastRecordedMeasurementInfo {
-    readonly conditionAsText: string | undefined;
-    readonly codeAsText: string | undefined;
+    readonly recordedConditionLabelledText: MeasurementLabelledText | undefined;
+    readonly recordedCodeLabelledText: MeasurementLabelledText | undefined;
     readonly measurementDateTime: string | undefined;
 }

package/src/components/searchBar/common/types.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export interface Suggestion {
     label: string;
     id: string;
@@ -10,7 +11,7 @@ export interface SuggestionGroup {
 }
 export interface SearchSuggestionsProps {
     suggestionGroups: SuggestionGroup[];
-    containerRef: HTMLFormElement | null;
+    containerRef: React.RefObject<HTMLFormElement | null>;
     onClick: (suggestion: Suggestion) => void;
     styles: {
         readonly [key: string]: string;

package/src/helpers/tagCategoryIcon.d.ts

@@ -14,6 +14,7 @@ export declare enum TagCategoryType {
     Signal = "signal",
     Telecom = "telecom",
     JunctionBox = "junction box",
+    IoT = "iot",
     Administrative = "administrative"
 }
 /**
@@ -31,6 +32,7 @@ export declare enum TagCategoryType {
  *         | 'signal'
  *         | 'telecom'
  *         | 'junction box'
+ *         | 'iot'
  *         | 'administrative'
  * @return {*}  {React.JSX.Element} Relevant icon for the provided tagCategoryDescription
  */

package/src/components/scrollableTabs/ScrollableTabs.d.ts

@@ -1,12 +0,0 @@
-import { TabsProps } from '@equinor/eds-core-react';
-import { ReactNode } from 'react';
-interface ScrollableTabsProps extends TabsProps {
-    /** To override styles. */
-    className?: string;
-    /** The list of tabs to be rendered. */
-    tabsListContent: ReactNode[];
-    /** The list of tab content. Rendered inside EDSTab.Panel */
-    tabsPanelContent: ReactNode[];
-}
-declare function ScrollableTabs({ className, tabsListContent, tabsPanelContent, variant }: ScrollableTabsProps): import("react/jsx-runtime").JSX.Element;
-export { ScrollableTabs };