@equinor/echo-components 4.0.1 → 4.1.1

package/package.json

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

package/src/components/echoButton/EchoButton.d.ts

@@ -1,6 +1,7 @@
 import { ButtonProps } from '@equinor/eds-core-react';
 export type EchoButtonProps = ButtonProps & {
     isSelected?: boolean;
+    isLoading?: boolean;
 };
 /**
  * Wrapper for EDS Button with UI preferences support, and dark mode support (uses new light/dark CSS variables).
@@ -16,4 +17,5 @@ export declare const EchoButton: import("react").ForwardRefExoticComponent<{
     fullWidth?: boolean;
 } & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
     isSelected?: boolean;
+    isLoading?: boolean;
 } & import("react").RefAttributes<HTMLButtonElement>>;

package/src/components/index.d.ts

@@ -24,13 +24,14 @@ export * from './functionalLocationListItem/FunctionalLocationListItem';
 export * from './horizontalTabView';
 export * from './iconLink/compactIconLink/CompactIconLink';
 export * from './iconLink/inlineTagIconLink/InlineTagIconLink';
+export * from './itemCards';
 export * from './itemMarker/ItemMarker';
 export * from './itemMarker/ItemMarkerChip';
 export type { ItemMarkerChipProps } from './itemMarker/ItemMarkerChip';
 export * from './itemMarker/ItemMarkerIcon';
 export * from './itemMarker/MultipleItemMarkers';
 export * from './itemMarker/utils/itemMarkerUtils';
-export * from './itemMarkerPopover/itemMarkerPopover';
+export * from './itemMarkerPopover/OldItemMarkerPopover';
 export * from './legend';
 export * from './legendChip/LegendChip';
 export * from './legendSelector/LegendSelector';
@@ -39,6 +40,8 @@ export * from './legendSelectorMenu/LegendSelectorMenu';
 export * from './linkIcon/LinkIcon';
 export * from './listItem';
 export * from './listRow/ListRow';
+export * from './lozenge/LabelledLozenge';
+export * from './lozenge/Lozenge';
 export * from './markedContent/MarkedContent';
 export * from './mediaViewer/MediaViewer';
 export * from './multilineTabs/MultilineTabs';
@@ -52,6 +55,7 @@ export * from './secondaryMarker/SecondaryMarker';
 export * from './secondaryMarker/SecondaryMarkerExpander';
 export * from './secondaryMarker/SecondaryMarkerWithChip';
 export * from './secondaryMarker/SecondaryMarkerWrapper';
+export * from './selectionColorPicker/SelectionColorPicker';
 export * from './selectTextOnFocusAutocomplete/SelectTextOnFocusAutocomplete';
 export * from './sidebarButton/SidebarButton';
 export * from './sidesheet';

package/src/components/itemCards/equipmentItemCard/EquipmentItemCard.d.ts

@@ -0,0 +1,6 @@
+import type { EquipmentItemCardData } from './equipmentItemCard.types';
+interface EquipmentItemCardProps {
+    readonly equipment: EquipmentItemCardData;
+}
+export declare const EquipmentItemCard: ({ equipment }: EquipmentItemCardProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+export interface EquipmentItemCardData {
+    readonly id: string;
+    readonly description: string;
+    readonly type: string;
+}

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

@@ -0,0 +1,14 @@
+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 { MeasuringPointItemCard } from './measuringPointItemCard/MeasuringPointItemCard';
+export type { MeasuringPointItemCardData } from './measuringPointItemCard/measuringPointItemCard.types';
+export { NotificationItemCard } from './notificationItemCard/NotificationItemCard';
+export { type NotificationItemCardData } from './notificationItemCard/notificationItemCard.types';
+export { TagItemCard } from './tagItemCard/TagItemCard';
+export { type TagItemCardData, type TagStatus } from './tagItemCard/tagItemCard.types';
+export { WorkOrderItemCard } from './workOrderItemCard/WorkOrderItemCard';
+export type { WorkOrderItemCardData } from './workOrderItemCard/workOrderItemCard.types';

package/src/components/itemCards/itemCard/ItemCard.d.ts

@@ -0,0 +1,11 @@
+export declare const ItemCard: (({ children, className }: import("./itemCard.types").ItemCardContainerProps) => React.JSX.Element) & {
+    Header: ({ children, className }: import("./itemCard.types").ItemCardRowProps) => React.JSX.Element;
+    Body: (({ children, className }: import("./itemCard.types").ItemCardRowProps) => React.JSX.Element) & {
+        Text: ({ children, className }: import("./itemCard.types").ItemCardTextProps) => React.JSX.Element;
+    };
+    Footer: (({ children, className }: import("./itemCard.types").ItemCardRowProps) => React.JSX.Element) & {
+        Text: ({ children, className }: import("./itemCard.types").ItemCardTextProps) => React.JSX.Element;
+    };
+    Title: (props: import("./itemCard.types").ItemCardTitleProps) => React.JSX.Element;
+    Icons: ({ items, className }: import("./itemCard.types").ItemCardIconsProps) => React.JSX.Element;
+};

package/src/components/itemCards/itemCard/ItemCardBody.d.ts

@@ -0,0 +1,4 @@
+import type { ItemCardRowProps, ItemCardTextProps } from './itemCard.types';
+export declare const ItemCardBody: (({ children, className }: ItemCardRowProps) => React.JSX.Element) & {
+    Text: ({ children, className }: ItemCardTextProps) => React.JSX.Element;
+};

package/src/components/itemCards/itemCard/ItemCardContainer.d.ts

@@ -0,0 +1,2 @@
+import type { ItemCardContainerProps } from './itemCard.types';
+export declare const ItemCardContainer: ({ children, className }: ItemCardContainerProps) => React.JSX.Element;

package/src/components/itemCards/itemCard/ItemCardFooter.d.ts

@@ -0,0 +1,4 @@
+import type { ItemCardRowProps, ItemCardTextProps } from './itemCard.types';
+export declare const ItemCardFooter: (({ children, className }: ItemCardRowProps) => React.JSX.Element) & {
+    Text: ({ children, className }: ItemCardTextProps) => React.JSX.Element;
+};

package/src/components/itemCards/itemCard/ItemCardHeader.d.ts

@@ -0,0 +1,2 @@
+import type { ItemCardRowProps } from './itemCard.types';
+export declare const ItemCardHeader: ({ children, className }: ItemCardRowProps) => React.JSX.Element;

package/src/components/itemCards/itemCard/ItemCardIcons.d.ts

@@ -0,0 +1,2 @@
+import type { ItemCardIconsProps } from './itemCard.types';
+export declare const ItemCardIcons: ({ items, className }: ItemCardIconsProps) => React.JSX.Element;

package/src/components/itemCards/itemCard/ItemCardTitle.d.ts

@@ -0,0 +1,2 @@
+import type { ItemCardTitleProps } from './itemCard.types';
+export declare const ItemCardTitle: (props: ItemCardTitleProps) => React.JSX.Element;

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

@@ -0,0 +1,27 @@
+import type { ElementType, ReactNode } from 'react';
+export interface ItemCardContainerProps {
+    readonly children: ReactNode;
+    readonly className?: string;
+}
+export interface ItemCardRowProps {
+    readonly children: ReactNode;
+    readonly className?: string;
+}
+export interface ItemCardTitleProps {
+    readonly children: ReactNode;
+    readonly className?: string;
+    readonly as?: ElementType;
+}
+export interface ItemCardTextProps {
+    readonly children: ReactNode;
+    readonly className?: string;
+}
+export interface ItemCardIconItem {
+    readonly name: string;
+    readonly title?: string;
+    readonly color?: string;
+}
+export interface ItemCardIconsProps {
+    readonly items: ReadonlyArray<ItemCardIconItem>;
+    readonly className?: string;
+}

package/src/components/itemCards/measuringPointItemCard/MeasuringPointItemCard.d.ts

@@ -0,0 +1,6 @@
+import type { MeasuringPointItemCardData } from './measuringPointItemCard.types';
+interface MeasuringPointItemCardProps {
+    readonly measuringPoint: MeasuringPointItemCardData;
+}
+export declare const MeasuringPointItemCard: ({ measuringPoint }: MeasuringPointItemCardProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+import type { LastRecordedMeasurementInfo } from './lastRecordedMeasurement.types';
+interface LastRecordedMeasurementProps {
+    readonly lastRecordedMeasurement: LastRecordedMeasurementInfo;
+    readonly failureMechanismDescription: string | 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

@@ -0,0 +1,5 @@
+export interface LastRecordedMeasurementInfo {
+    readonly conditionAsText: string | undefined;
+    readonly codeAsText: string | undefined;
+    readonly measurementDateTime: string | undefined;
+}

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

@@ -0,0 +1,7 @@
+import type { LastRecordedMeasurementInfo } from './lastRecordedMeasurement/lastRecordedMeasurement.types';
+export interface MeasuringPointItemCardData {
+    readonly measuringPointId: string;
+    readonly description: string;
+    readonly lastRecordedMeasurement: LastRecordedMeasurementInfo;
+    readonly failureMechanismDescription: string | undefined;
+}

package/src/components/itemCards/notificationItemCard/NotificationItemCard.d.ts

@@ -0,0 +1,6 @@
+import type { NotificationItemCardData } from './notificationItemCard.types';
+interface NotificationItemCardProps {
+    readonly notification: NotificationItemCardData;
+}
+export declare const NotificationItemCard: ({ notification }: NotificationItemCardProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,11 @@
+export interface NotificationItemCardData {
+    readonly id: string;
+    readonly isActive?: boolean;
+    readonly description?: string;
+    readonly requiredEndDateTime?: Date;
+    readonly requiredEndDateStatus?: string;
+    readonly failureImpact?: string;
+    readonly hasAttachments?: boolean;
+    readonly hasActivityLongText?: boolean;
+    readonly hasB30Document?: boolean;
+}

package/src/components/itemCards/notificationItemCard/notificationItemCard.utils.d.ts

@@ -0,0 +1,3 @@
+import type { ItemCardIconItem } from '../itemCard/itemCard.types';
+import type { NotificationItemCardData } from './notificationItemCard.types';
+export declare const getIcons: (notification: NotificationItemCardData) => ReadonlyArray<ItemCardIconItem>;

package/src/components/itemCards/tagItemCard/TagItemCard.d.ts

@@ -0,0 +1,6 @@
+import type { TagItemCardData } from './tagItemCard.types';
+interface TagItemCardProps {
+    readonly tag: TagItemCardData;
+}
+export declare const TagItemCard: ({ tag }: TagItemCardProps) => React.JSX.Element;
+export {};

package/src/components/itemCards/tagItemCard/TagItemCardStatus.d.ts

@@ -0,0 +1,6 @@
+import type { TagStatus } from './tagItemCard.types';
+interface TagItemCardStatusProps {
+    readonly tagStatus: TagStatus;
+}
+export declare const TagItemCardStatus: (props: TagItemCardStatusProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,9 @@
+export interface TagItemCardData {
+    readonly tagNo: string;
+    readonly description: string;
+    readonly tagCategoryDescription?: string;
+    readonly instCode: string;
+    readonly plantNo: string;
+    readonly status: TagStatus;
+}
+export type TagStatus = 'Unknown' | 'AsBuilt' | 'Planned' | 'Reserved' | 'Future' | 'Historic' | 'OutOfService' | 'Voided';

package/src/components/itemCards/workOrderItemCard/WorkOrderItemCard.d.ts

@@ -0,0 +1,6 @@
+import type { WorkOrderItemCardData } from './workOrderItemCard.types';
+interface WorkOrderItemCardProps {
+    readonly workOrder: WorkOrderItemCardData;
+}
+export declare const WorkOrderItemCard: ({ workOrder }: WorkOrderItemCardProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+export interface WorkOrderItemCardData {
+    readonly id: string;
+    readonly description: string;
+    readonly isActive?: boolean;
+    readonly plantNo?: string;
+    readonly workCenter?: string;
+    readonly basicFinishDateStatus?: string;
+    readonly basicFinishDateTime?: Date;
+    readonly hasPrts?: boolean;
+    readonly hasB30Document?: boolean;
+    readonly recordTypeIds?: ReadonlyArray<string>;
+}

package/src/components/itemCards/workOrderItemCard/workOrderItemCard.utils.d.ts

@@ -0,0 +1,3 @@
+import type { ItemCardIconItem } from '../itemCard/itemCard.types';
+import type { WorkOrderItemCardData } from './workOrderItemCard.types';
+export declare const getIcons: (workOrder: WorkOrderItemCardData) => ReadonlyArray<ItemCardIconItem>;

package/src/components/itemMarkerPopover/{itemMarkerPopover.d.ts → OldItemMarkerPopover.d.ts}

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-export type ItemMarkerPopover = {
+export type OldItemMarkerPopover = {
     items: ReadonlyArray<JSX.Element> | ReadonlyArray<string>;
     isOpen: boolean;
     handleClose: () => void;
@@ -24,4 +24,6 @@ export type ItemMarkerPopover = {
  * @param {string} className - ClassName of the popover.
  * @param {CSSProperties} style - style of the popover.
  */
-export declare const ItemMarkerPopover: ({ items, isOpen, handleClose, title, zIndex, className, style }: ItemMarkerPopover) => false | import("react/jsx-runtime").JSX.Element;
+export declare const OldItemMarkerPopover: ({ items, isOpen, handleClose, title, zIndex, className, style }: OldItemMarkerPopover) => false | import("react/jsx-runtime").JSX.Element;
+/** @deprecated This component is being deprecated as a part of #419082 in favor of the new ItemMarkerPopover compound component which interacts well with ItemCard. */
+export declare const ItemMarkerPopover: ({ items, isOpen, handleClose, title, zIndex, className, style }: OldItemMarkerPopover) => false | import("react/jsx-runtime").JSX.Element;

package/src/components/itemMarkerPopover/OldItemMarkerPopoverPagination.d.ts

@@ -0,0 +1,10 @@
+type OldItemMarkerPopoverPaginationProps = {
+    itemCount: number;
+    currentItemIndex: number;
+    setCurrentItemIndex: (index: number) => void;
+};
+/**
+ * @deprecated This component is being deprecated as a part of #419082 in favor of the new ItemMarkerPopover compound component which interacts well with ItemCard.
+ */
+export declare const OldItemMarkerPopoverPagination: ({ itemCount, currentItemIndex, setCurrentItemIndex }: OldItemMarkerPopoverPaginationProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/lozenge/LabelledLozenge.d.ts

@@ -0,0 +1,10 @@
+interface LabelledLozengeProps {
+    readonly label: string;
+    readonly content: string | Date | undefined;
+    readonly backgroundColor?: string;
+    readonly labelColor?: string;
+    readonly textColor?: string;
+    readonly className?: string;
+}
+export declare const LabelledLozenge: (props: LabelledLozengeProps) => React.JSX.Element | null;
+export {};

package/src/components/lozenge/Lozenge.d.ts

@@ -0,0 +1,9 @@
+interface LozengeProps {
+    readonly text: string | Date;
+    readonly backgroundColor?: string;
+    readonly textColor?: string;
+    readonly className?: string;
+    readonly 'aria-labelledby'?: string;
+}
+export declare const Lozenge: (props: LozengeProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/selectionColorPicker/SelectionColorPicker.d.ts

@@ -0,0 +1,9 @@
+interface SelectionColorProps {
+    readonly itemColor?: string;
+    readonly colors: ReadonlyArray<string>;
+    readonly onColorSelect: (color: string) => void;
+    readonly disabled?: boolean;
+    readonly renderButtonAsSpan?: boolean;
+}
+export declare const SelectionColorPicker: ({ itemColor, colors, onColorSelect, disabled, renderButtonAsSpan }: SelectionColorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/subseaStatusLabel/SubseaStatusLabel.d.ts

@@ -1,6 +1,7 @@
 interface SubseaStatusLabelProps {
     isActive: boolean;
     className?: string;
+    textColor?: string;
 }
-export declare function SubseaStatusLabel({ isActive, className }: SubseaStatusLabelProps): import("react/jsx-runtime").JSX.Element;
+export declare function SubseaStatusLabel({ isActive, className, textColor }: SubseaStatusLabelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/src/theme/themeConst.d.ts

@@ -1,7 +1,9 @@
 export declare const themeConst: {
+    xxSmall: string;
     xSmall: string;
     smallXSmall: string;
     small: string;
+    smallToMedium: string;
     smallMedium: string;
     medium: string;
     mediumLarge: string;
@@ -15,6 +17,8 @@ export declare const themeConst: {
     breakpointLg: string;
     breakpointXl: string;
     breakpointXxl: string;
+    breakPointMaxWidthS: string;
+    breakPointMaxWidthM: string;
     fontSizeXSmall: string;
     fontSizeSmall: string;
     fontSizeSmallMedium: string;

package/src/components/itemMarkerPopover/Pagination.d.ts

@@ -1,6 +0,0 @@
-export type PaginationProps = {
-    itemCount: number;
-    currentItemIndex: number;
-    setCurrentItemIndex: (index: number) => void;
-};
-export declare const Pagination: ({ itemCount, currentItemIndex, setCurrentItemIndex }: PaginationProps) => import("react/jsx-runtime").JSX.Element;