@equinor/echo-components 0.7.9 → 0.7.11

package/dist/components/blackLink/BlackLink.d.ts

@@ -1,5 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 interface LinkProps {
+    className?: string;
     /** The external link. */
     href: string;
     /** The link label. */
@@ -7,5 +8,5 @@ interface LinkProps {
     /** If true, the link is opened in the same window or tab. */
     preserveTab?: boolean;
 }
-declare const BlackLink: ({ href, linkText, preserveTab }: LinkProps) => JSX.Element;
+declare const BlackLink: ({ className, href, linkText, preserveTab }: LinkProps) => React.JSX.Element;
 export { BlackLink };

package/dist/components/charts/index.d.ts

@@ -0,0 +1 @@
+export { LineChart } from './lineChart/LineChart';

package/dist/components/charts/lineChart/LineChart.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="chart.js" />
+import Chart, { ChartData, Defaults } from 'chart.js/auto';
+import React from 'react';
+import { ChartCallbacks, LineChartConfig } from '../../../types/charts';
+interface Props {
+    initialSize: Chart.ChartSize;
+    chartDataSet?: ChartData;
+    chartTitle?: string;
+    xAxisTitle?: string;
+    yAxisTitle?: string;
+    id?: string;
+    testId?: string;
+    chartConfigs?: {
+        defaults?: Defaults;
+        callbacks?: ChartCallbacks;
+    };
+    lineChartConfig?: LineChartConfig;
+    onChartInstance?: (chartInstance: Chart | undefined) => void;
+}
+declare function LineChart({ initialSize, chartDataSet, chartTitle, xAxisTitle, yAxisTitle, id, testId, chartConfigs, lineChartConfig, onChartInstance }: Props): React.JSX.Element;
+export { LineChart };

package/dist/components/charts/lineChart/dummy/lineChartConfig.d.ts

@@ -0,0 +1,16 @@
+export declare const chartDataSet: {
+    labels: string[];
+    datasets: {
+        label: string;
+        data: number[];
+        borderColor: string;
+        pointBackgroundColor: string;
+        backgroundColor: string;
+        fill: boolean;
+    }[];
+};
+export declare const tooltip: {
+    callbacks: {
+        title: (tooltipItems: [Chart.ChartTooltipItem]) => string | undefined;
+    };
+};

package/dist/components/charts/lineChart/dummy/rawData.d.ts

@@ -0,0 +1,26 @@
+export declare const raw: {
+    DATA1: {
+        id: string;
+        value: number;
+        timestamp: string;
+        status: number;
+    }[];
+    DATA2: {
+        id: string;
+        value: number;
+        timestamp: string;
+        status: number;
+    }[];
+    DATA3: {
+        id: string;
+        value: number;
+        timestamp: string;
+        status: number;
+    }[];
+    DATA4: {
+        id: string;
+        value: number;
+        timestamp: string;
+        status: number;
+    }[];
+};

package/dist/components/charts/lineChart/utils.d.ts

@@ -0,0 +1,10 @@
+import { ChartData } from 'chart.js/auto';
+import { ChartCallbacks, LineChartConfig } from '../../../types/charts';
+export type ChartConfigOptions = {
+    dataConfig: ChartData;
+    chartTitle: string;
+    xAxisTitle: string;
+    yAxisTitle: string;
+    chartCallbacks?: ChartCallbacks;
+};
+export declare const generateChartConfig: ({ dataConfig, chartTitle, xAxisTitle, yAxisTitle, chartCallbacks }: ChartConfigOptions) => LineChartConfig;

package/dist/components/copyToClipboard/CopyToClipboard.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="react" />
 export interface CopyToClipboardProps {
     copyableText: string;
+    variant?: 'neutral' | 'warning' | 'error' | 'success';
+    multiline?: boolean;
+    className?: string;
 }
 declare const CopyToClipboard: (props: CopyToClipboardProps) => JSX.Element;
 export { CopyToClipboard };

package/dist/components/echoTooltip/Tooltip/Tooltip.d.ts

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import { TooltipOptions } from './useTooltip';
 declare function Tooltip({ children, ...options }: {
     children: ReactNode;
-} & TooltipOptions): JSX.Element;
+} & TooltipOptions): React.JSX.Element;
 declare const TooltipAnchor: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLElement> & {
     asChild?: boolean | undefined;
 }, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/components/echoTooltip/Tooltip/useTooltip.d.ts

@@ -11,33 +11,39 @@ declare function useTooltip({ initialOpen, placement, open: controlledOpen, onOp
     placement: Placement;
     strategy: import("@floating-ui/react").Strategy;
     middlewareData: import("@floating-ui/react").MiddlewareData;
-    x: number | null;
-    y: number | null;
+    x: number;
+    y: number;
+    isPositioned: boolean;
     update: () => void;
-    reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
-    floating: (node: HTMLElement | null) => void;
-    positionReference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+    floatingStyles: import("react").CSSProperties;
+    refs: {
+        reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: import("react").MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    elements: {
+        reference: import("@floating-ui/react-dom").ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     context: {
-        x: number | null;
-        y: number | null;
+        x: number;
+        y: number;
         update: () => void;
         placement: Placement;
         strategy: import("@floating-ui/react").Strategy;
         middlewareData: import("@floating-ui/react").MiddlewareData;
-        reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
-        floating: (node: HTMLElement | null) => void;
         isPositioned: boolean;
+        floatingStyles: import("react").CSSProperties;
         open: boolean;
-        onOpenChange: (open: boolean) => void;
+        onOpenChange: (open: boolean, event?: Event | undefined) => void;
         events: import("@floating-ui/react").FloatingEvents;
         dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
         nodeId: string | undefined;
+        floatingId: string;
         refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
         elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     };
-    refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
-    elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
-    isPositioned: boolean;
     getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
     getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
     getItemProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
@@ -49,33 +55,39 @@ declare const useTooltipContext: () => {
     placement: Placement;
     strategy: import("@floating-ui/react").Strategy;
     middlewareData: import("@floating-ui/react").MiddlewareData;
-    x: number | null;
-    y: number | null;
+    x: number;
+    y: number;
+    isPositioned: boolean;
     update: () => void;
-    reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
-    floating: (node: HTMLElement | null) => void;
-    positionReference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+    floatingStyles: import("react").CSSProperties;
+    refs: {
+        reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: import("react").MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    elements: {
+        reference: import("@floating-ui/react-dom").ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     context: {
-        x: number | null;
-        y: number | null;
+        x: number;
+        y: number;
         update: () => void;
         placement: Placement;
         strategy: import("@floating-ui/react").Strategy;
         middlewareData: import("@floating-ui/react").MiddlewareData;
-        reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
-        floating: (node: HTMLElement | null) => void;
         isPositioned: boolean;
+        floatingStyles: import("react").CSSProperties;
         open: boolean;
-        onOpenChange: (open: boolean) => void;
+        onOpenChange: (open: boolean, event?: Event | undefined) => void;
         events: import("@floating-ui/react").FloatingEvents;
         dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
         nodeId: string | undefined;
+        floatingId: string;
         refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
         elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     };
-    refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
-    elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
-    isPositioned: boolean;
     getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
     getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
     getItemProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;

package/dist/components/floatingActionButton/FloatingActionButton.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 interface WithLabel {
-    variant: 'square_icon_with_text';
+    variant: 'square_icon_with_text' | 'square_icon_with_text_below';
     label: string;
 }
 interface WithoutLabel {

package/dist/components/floatingSearchBar/FloatingSearchBar.d.ts

@@ -39,6 +39,6 @@ interface SuggestionGroupProps {
     onClick: (suggestion: Suggestion) => void;
     focusedOption: number;
 }
-declare function SuggestionGroup({ suggestionGroup, onClick, focusedOption }: SuggestionGroupProps): JSX.Element;
-export { FloatingSearchBar };
+declare function SuggestionGroup({ suggestionGroup, onClick, focusedOption }: SuggestionGroupProps): React.JSX.Element;
+export { FloatingSearchBar, SuggestionGroup };
 export type { Suggestion };

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './blackLink/BlackLink';
 export * from './buttonWithPopover/ButtonWithPopover';
+export * from './charts';
 export * from './contextMenu/ContextMenu';
 export * from './contextMenuPopover/DataInfoButton';
 export * from './copyToClipboard/CopyToClipboard';

package/dist/components/legend/MainLegend.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { LayerInfo } from '@types';
+import React, { CSSProperties } from 'react';
+import { LayerInfo } from '../../types';
 interface MainLegendProps {
     /**
      * Layer legends appearing above the main legend
@@ -9,6 +9,14 @@ interface MainLegendProps {
      * Layer information
      */
     layers: LayerInfo[];
+    /**
+     * Styling for the main legend
+     */
+    legendStyle?: CSSProperties;
+    /**
+     * Styling for the content of the legend
+     */
+    legendContentStyle?: CSSProperties;
 }
-declare function MainLegend({ legends, layers }: MainLegendProps): JSX.Element;
+declare function MainLegend({ legends, layers, legendStyle, legendContentStyle }: MainLegendProps): React.JSX.Element;
 export { MainLegend };

package/dist/components/legend/layerLegend/LayerLegend.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 interface LayerLegendProps {
     /**
      * Layer title
@@ -24,6 +24,10 @@ interface LayerLegendProps {
      * Used to disable layer legend usage
      */
     disabled?: boolean;
+    /**
+     * Styling for the content of the legend
+     */
+    style?: CSSProperties;
 }
-declare function LayerLegend({ title, iconName, itemsCount, itemsTitle, children, disabled }: LayerLegendProps): JSX.Element;
+declare function LayerLegend({ title, iconName, itemsCount, itemsTitle, children, disabled, style }: LayerLegendProps): React.JSX.Element;
 export { LayerLegend };

package/dist/components/listItem/ListItem.d.ts

@@ -39,6 +39,8 @@ interface ListItemBaseProps {
      */
     as?: React.ElementType;
     onCardClick?: () => void;
+    /** A url. The presence of this prop will automatically make the enclosing element an a-element. */
+    href?: string;
     /**
      * Style Modification
      */
@@ -46,5 +48,5 @@ interface ListItemBaseProps {
     style?: CSSProperties;
 }
 export type ListItemProps = ListItemBaseProps & WithVisualOrIconOptions;
-declare function ListItem(props: ListItemProps): JSX.Element;
+declare function ListItem(props: ListItemProps): React.JSX.Element;
 export { ListItem };

package/dist/components/listRow/ListRow.d.ts

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react';
-import { ExpandableRowProps, IconListItem } from '@types';
+import { ExpandableRowProps, IconListItem } from '../../types';
 export interface ListRowProps {
     isDraggable: boolean;
     item: IconListItem;

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

@@ -14,6 +14,6 @@ interface SheetProps extends Style {
      */
     floating?: boolean;
 }
-declare function Sheet({ side, orientation, floating, children, className, style }: SheetProps): JSX.Element;
+declare function Sheet({ side, orientation, floating, children, className, style }: SheetProps): React.JSX.Element;
 export type { SheetProps };
 export { Sheet };

package/dist/components/splitView/SplitView.d.ts

@@ -6,9 +6,9 @@ interface BaseProps {
 interface SplitViewProps extends BaseProps {
     children: [React.ReactChild, React.ReactChild | undefined];
 }
-declare function SplitView({ className, style, children }: SplitViewProps): JSX.Element;
+declare function SplitView({ className, style, children }: SplitViewProps): React.JSX.Element;
 interface RightProps extends BaseProps {
     children: React.ReactChild;
 }
-declare function Right({ className, style, children }: RightProps): JSX.Element;
+declare function Right({ className, style, children }: RightProps): React.JSX.Element;
 export { SplitView, Right };

package/dist/components/splitView/left/SplitViewLeft.d.ts

@@ -5,5 +5,5 @@ interface LeftProps {
     children: React.ReactChild;
     isMinimizable?: boolean;
 }
-declare function Left({ className, style, isMinimizable, children }: LeftProps): JSX.Element;
+declare function Left({ className, style, isMinimizable, children }: LeftProps): React.JSX.Element;
 export { Left };

package/dist/components/workOrderListItem/WorkOrderListItem.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { WorkOrderItem } from '@types';
+import { WorkOrderItem } from '../../types';
 export interface WorkOrderListItemProps {
     workOrder: WorkOrderItem;
     onCardClick?: () => void;
     itemAction?: React.ReactNode;
     isHeader?: boolean;
 }
-declare function WorkOrderListItem(props: WorkOrderListItemProps): JSX.Element;
+declare function WorkOrderListItem(props: WorkOrderListItemProps): React.JSX.Element;
 export { WorkOrderListItem };

package/dist/components/workOrderListItem/WorkOrderStatusLabel.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 interface WorkOrderStatusLabelProps {
     isActive: boolean;
 }
-export declare function WorkOrderStatusLabel({ isActive }: WorkOrderStatusLabelProps): JSX.Element;
+export declare function WorkOrderStatusLabel({ isActive }: WorkOrderStatusLabelProps): React.JSX.Element;
 export {};

package/dist/hooks/useKeyboardNavigation.d.ts

@@ -1,3 +1,4 @@
+import { SuggestionGroup } from '../components';
 export type KeyboardEvents = {
     up?: Function;
     right?: Function;
@@ -6,16 +7,12 @@ export type KeyboardEvents = {
     enter?: Function;
     escape?: Function;
 };
-declare const useListNavigator: (listLength: number, initialIndex?: number, keyboardEvents?: KeyboardEvents, listenerTarget?: Document | HTMLElement) => number;
+declare const useKeyboardNavigation: (keyboardEvents: KeyboardEvents, listenerTarget?: HTMLElement | Document) => void;
 /**
- * 1. On open: focus should be undefined/inactive. (list should scroll/show selected item if any).
- * 2. user presses a key (usually down) - scroll list to focused element, which should be first item
- * in the first section. Also set focused section.
- * 3. Potentially jump to last in list if user goes up?
+ * Handles keyboard navigation and key events in the floating search bar suggestions.
  */
-declare const useSectionNavigator: (sections: any[], initialSelected: number, keyboardEvents: KeyboardEvents, listenerTarget?: HTMLElement | Document) => {
+declare const useSearchBarSectionNavigator: (sections: SuggestionGroup[], initialSelected: number, keyboardEvents: KeyboardEvents, listenerTarget?: HTMLElement | Document) => {
     focusedSection: number;
     focusedOption: number;
 };
-declare const useKeyboardNavigation: (keyboardEvents: KeyboardEvents, listenerTarget?: HTMLElement | Document) => void;
-export { useListNavigator, useSectionNavigator, useKeyboardNavigation };
+export { useSearchBarSectionNavigator, useKeyboardNavigation };

package/dist/icons/echoAssets/external.d.ts

@@ -3,3 +3,5 @@ export declare const robim_external_ald: IconData;
 export declare const robim_external_timp: IconData;
 export declare const robim_external_timp_text: IconData;
 export declare const robim_external_iwit: IconData;
+export declare const robim_external_methane_sensor: IconData;
+export declare const robim_external_satellite: IconData;

package/dist/icons/echoAssets/index.d.ts

@@ -3,3 +3,5 @@ export * from './general';
 export * from './notifications';
 export * from './punches';
 export * from './workOrders';
+export * from './misc';
+export * from './maps';

package/dist/icons/echoAssets/maps.d.ts

@@ -0,0 +1,6 @@
+import { IconData } from '@equinor/eds-icons';
+export declare const polygon: IconData;
+export declare const polyrectangle: IconData;
+export declare const polyline: IconData;
+export declare const polygon_symbol: IconData;
+export declare const distance_circle: IconData;

package/dist/icons/echoAssets/misc.d.ts

@@ -0,0 +1,2 @@
+import { IconData } from '@equinor/eds-icons';
+export declare const measuring_point: IconData;