@equinor/echo-components 0.11.16 → 0.11.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/echo-components",
-  "version": "0.11.16",
+  "version": "0.11.17",
   "dependencies": {
     "chart.js": "4.4.4",
     "react-datepicker": "4.25.0",

package/src/components/iconLink/compactIconLink/CompactIconLink.d.ts

@@ -2,7 +2,7 @@ export interface CompactIconLinkProps {
     title: string;
     meta: string;
     legendColor?: string;
-    onClickHandler: () => void;
+    onClickHandler?: () => void;
     icon?: string | React.ReactNode;
     className?: string;
 }

package/src/components/index.d.ts

@@ -30,12 +30,14 @@ export * from './itemMarkerPopover/itemMarkerPopover';
 export * from './legend';
 export * from './legendChip/legendChip';
 export * from './legendSelector/legendSelector';
+export * from './legendSelectorAccordion/legendSelectorAccordion';
 export * from './legendSelectorMenu/legendSelectorMenu';
 export * from './linkIcon/LinkIcon';
 export * from './listItem';
 export * from './listRow/ListRow';
 export * from './markedContent/MarkedContent';
 export * from './multilineTabs/MultilineTabs';
+export * from './noDataLabel';
 export * from './notificationListItem/NotificationListItem';
 export * from './pcMatrix/PCMatrix';
 export * from './rightPanel';

package/src/components/itemMarker/MultipleItemMarkers.d.ts

@@ -1,12 +1,5 @@
 import React, { ReactNode } from 'react';
 import { ItemMarkerPosition } from './utils/itemMarkerUtils';
-export interface MultipleItemMarkersProps {
-    children: ReactNode;
-    isTransparent?: boolean;
-    pointerPosition?: ItemMarkerPosition;
-    className?: string;
-    onClick?: () => void;
-}
 /**
  * Generic component that renders multiple item markers
  *
@@ -19,4 +12,11 @@ export interface MultipleItemMarkersProps {
  *
  * @returns {JSX.Element} The rendered component
  */
+export interface MultipleItemMarkersProps {
+    children: ReactNode;
+    isTransparent?: boolean;
+    pointerPosition?: ItemMarkerPosition;
+    className?: string;
+    onClick?: () => void;
+}
 export declare const MultipleItemMarkers: React.FC<MultipleItemMarkersProps>;

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

@@ -3,7 +3,6 @@ export type ItemMarkerPopover = {
     items: JSX.Element[] | string[];
     isOpen: boolean;
     handleClose: () => void;
-    togglePopover: () => void;
     title: string;
     closeOnOutsideClick?: boolean;
     containerHasMultipleItemMarkers?: boolean;
@@ -11,4 +10,4 @@ export type ItemMarkerPopover = {
     className?: string;
     style?: CSSProperties;
 };
-export declare const ItemMarkerPopover: ({ items, isOpen, handleClose, togglePopover, title, closeOnOutsideClick, containerHasMultipleItemMarkers, zIndex, className, style }: ItemMarkerPopover) => false | import("react/jsx-runtime").JSX.Element;
+export declare const ItemMarkerPopover: ({ items, isOpen, handleClose, title, containerHasMultipleItemMarkers, zIndex, className, style }: ItemMarkerPopover) => false | import("react/jsx-runtime").JSX.Element;

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

@@ -24,6 +24,10 @@ interface LayerLegendProps {
      * Used to disable layer legend usage
      */
     disabled?: boolean;
+    /**
+     * If the layer is currently hidden
+     */
+    layerIsHidden?: boolean;
     /**
      * Styling for the content of the legend
      */
@@ -33,5 +37,5 @@ interface LayerLegendProps {
      */
     className?: string;
 }
-declare function LayerLegend({ title, iconName, itemsCount, itemsTitle, children, disabled, style, className }: LayerLegendProps): import("react/jsx-runtime").JSX.Element;
+declare function LayerLegend({ title, iconName, itemsCount, itemsTitle, children, disabled, layerIsHidden, style, className }: LayerLegendProps): import("react/jsx-runtime").JSX.Element;
 export { LayerLegend };

package/src/components/legendChip/legendChip.d.ts

@@ -1,14 +1,16 @@
 import React from 'react';
-interface LegendChipProps {
+export interface LegendChipProps {
     legendStatus: string;
     backgroundColor: string;
+    disabled?: boolean;
     onClick?: (isDisabled: boolean) => void;
 }
 /**
  * Legend chip component to display a legend status chip.
  * @param {string} legend - The legend status to be displayed.
  * @param {string} backgroundColor - The background color of the chip.
+ * @param {boolean} disabled - Boolean to disable the chip. Optional.
  * @param {(isDisabled: boolean) => void} onClick - Function to be called when the chip is clicked.
+ * @returns {JSX.Element} - Legend chip component.
  */
 export declare const LegendChip: React.FC<LegendChipProps>;
-export {};

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

@@ -1,17 +1,26 @@
 import React from 'react';
+import { LegendChipProps } from '../legendChip/legendChip';
 export interface LegendSelectorProps {
-    items: string[];
-    selectedItem: string;
-    setSelectedItem: (selectedItem: string) => void;
-    legends: JSX.Element[];
-    icon?: JSX.Element;
+    options: string[];
+    selectedOption: string;
+    onOptionClick: () => void;
+    legends: LegendChipProps[];
+    showLegendToggle?: boolean;
+    visual?: JSX.Element;
+    placeholder?: string;
+    disabled?: boolean;
 }
 /**
  * Legend selector component that will display the selected legend type and the statuses.
- * @param {JSX.Element[]} items - List of items to be displayed in the menu.
- * @param {string} selectedItem - The selected item.
- * @param {(selectedItem: string) => void} setSelectedItem - Function to set the selected item.
+ * Note that this component is meant to be displayed on a darker background, and should be used with the LegendSelectorAccordion as display in the LegendSelector story in the storybook.
+ * @param {JSX.Element[]} options - List of options to be displayed in the selection-selector.
+ * @param {string} selectedOption - The selected option.
+ * @param {() => void} onOptionsClick - Function that is called when another option is clicked.
  * @param {JSX.Element[]} legends - List of legend chip components to be displayed.
- * @param {JSX.Element} icon - Icon to be displayed before the legend selector. Optional.
+ * @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/legendSelector/useVisibleLegends.d.ts

@@ -0,0 +1,9 @@
+import { LegendChipProps } from '../legendChip/legendChip';
+/**
+ * Hook that returns the visible legends based on the available width.
+ * @param {boolean} showAllLegends - Boolean to show all legends.
+ * @param {LegendChipProps[]} legends - Array of legends.
+ * @param {number} availableWidth - The available width for showing the legends, in px.
+ * @returns {LegendChipProps[]} - Array of visible legends.
+ */
+export declare const useVisibleLegends: (showAllLegends: boolean, legends: LegendChipProps[], availableWidth: number) => LegendChipProps[];

package/src/components/legendSelectorAccordion/legendSelectorAccordion.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface LegendSelectorAccordionProps {
+    title: string;
+    children: React.ReactNode;
+    visual?: JSX.Element;
+    caption?: string;
+    actions?: React.ReactNode;
+}
+/**
+ * Legend selector accordion component to display the legend selector for the data layers.
+ * This component is meant to be used as a wrapper and consumes the LegendSelector, LegendSelectorMenu and/or LegendChip
+ * in the combinations that might be needed.
+ * @param {string} title - The title of the accordion/type of legend.
+ * @param {React.ReactNode} children - The children to be displayed in the accordion.
+ * @param {JSX.Element} visual - The visual or icon to be displayed in the accordion header. Optional.
+ * @param {string} caption - The caption to be displayed in the accordion header. Optional.
+ * @param {React.ReactNode} actions - The actions to be displayed in the accordion header. Optional.
+ * @returns {JSX.Element} - Legend selector accordion component.
+ */
+export declare const LegendSelectorAccordion: React.FC<LegendSelectorAccordionProps>;

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

@@ -1,14 +1,20 @@
 import React from 'react';
 interface LegendSelectorMenuProps {
-    items: string[];
-    selectedItem: string;
-    setSelectedItem: (selectedItem: string) => void;
+    options: string[];
+    selectedOption: string;
+    onOptionClick: (selectedItem: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
 }
 /**
  * Legend selector component to choose which legend type to display.
- * @param {JSX.Element[]} items - List of items to be displayed in the menu.
- * @param {string} selectedItem - The selected item.
- * @param {(selectedItem: string) => void} setSelectedItem - Function to set the selected item.
+ * This component is part of the LegendSelector, but can be used on it's own when needed.
+ * @param {JSX.Element[]} options- List of items to be displayed in the menu.
+ * @param {string} selectedOption- The selected item.
+ * @param {() => 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>;
 export {};

package/src/components/noDataLabel/NoDataLabel.d.ts

@@ -0,0 +1,6 @@
+interface NoDataLabelProps {
+    text: string;
+    className?: string;
+}
+declare function NoDataLabel({ text, className }: NoDataLabelProps): import("react/jsx-runtime").JSX.Element;
+export { NoDataLabel };

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

@@ -0,0 +1 @@
+export * from './NoDataLabel';

package/src/elements/tagIcon/TagIconShadow.d.ts

@@ -10,4 +10,4 @@ interface TagIconShadowWrapperProps {
  * @return {*} {JSX.Element} wrapped child element in a shadow
  */
 export declare const TagIconShadowWrapper: React.FC<TagIconShadowWrapperProps>;
-export default TagIconShadowWrapper;
+export {};

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

@@ -1,9 +1,8 @@
 export * from './badges';
 export * from './external';
 export * from './general';
-export * from './legendMarker';
-export * from './legendMarkerChip';
 export * from './maps';
+export * from './markerIcons';
 export * from './misc';
 export * from './notifications';
 export * from './punches';

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

@@ -4,3 +4,4 @@ export declare const polyrectangle: IconData;
 export declare const polyline: IconData;
 export declare const polygon_symbol: IconData;
 export declare const distance_circle: IconData;
+export declare const rov_panel: IconData;

package/src/icons/echoAssets/markerIcons.d.ts

@@ -0,0 +1,7 @@
+import { IconData } from '@equinor/eds-icons';
+export declare const marker_fill: IconData;
+export declare const marker_stroke: IconData;
+export declare const marker_icon: IconData;
+export declare const badges: IconData;
+export declare const badges_first: IconData;
+export declare const badges_second: IconData;

package/src/utils/index.d.ts

@@ -3,3 +3,4 @@ export * from './date';
 export * from './notification';
 export * from './tag';
 export * from './workorder';
+export * from './string';

package/src/utils/string.d.ts

@@ -0,0 +1 @@
+export declare function removeLeadingZeros(inputString: string): string;

package/src/__mocks__/svgrMock.d.ts

@@ -1,3 +0,0 @@
-declare const _default: "SvgrURL";
-export default _default;
-export declare const ReactComponent = "svg";

package/src/icons/echoAssets/legendMarker.d.ts

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