@equinor/echo-components 0.11.10 → 0.11.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/echo-components",
-  "version": "0.11.10",
+  "version": "0.11.11",
   "dependencies": {
     "chart.js": "4.4.3",
     "react-datepicker": "4.25.0",

package/src/components/autohiddenContent/AutohiddenContent.d.ts

@@ -12,5 +12,9 @@ type AutohiddenContentProps = {
     /** The content to autohide. */
     children: ReactElement<HTMLElement | string | number>;
 };
+/** A component that autohides its children content after a specified delay.
+ * <p>The implementer may choose between removing the content from the DOM; which will probably shift the layout, or
+ * they can turn the content invisible with CSS.</p>
+ */
 export declare function AutohiddenContent({ delay, hideMethod, onHide, children }: AutohiddenContentProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -1,5 +1,6 @@
 import { TooltipProps } from '@equinor/eds-core-react';
-type LinkProps = Omit<TooltipProps, 'href' | 'children'> & {
+export type LinkProps = Omit<TooltipProps, 'href' | 'children'> & {
+    /** To override styles. */
     className?: string;
     /** The external link. */
     href: string;
@@ -7,9 +8,14 @@ type LinkProps = Omit<TooltipProps, 'href' | 'children'> & {
     linkText: string;
     /** If true, the link is opened in the same window or tab. */
     preserveTab?: boolean;
-    /** The text to be displayed in the tooltip. */
+    /** The text to be displayed in the tooltip. The tooltip is not rendered on touch devices.*/
     tooltipText?: string;
+    /** An optional callback when the link is clicked. */
     onClick?: () => void;
 };
+/** A semantic link component that features link text and icon.
+ *
+ * @example
+ * <BlackLink href="https://example.com" linkText="Link to somewhere" tooltipText="This links somewhere" />
+*/
 export declare const BlackLink: ({ className, href, linkText, preserveTab, tooltipText, onClick, enterDelay, placement, ...toolTipRest }: LinkProps) => import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,9 +1,18 @@
 import React from 'react';
 export interface CopyToClipboardProps {
+    /** The text to be copied. */
     copyableText: string;
+    /** The EDS standard variant which alters the colours. Defaults to neutral. */
     variant?: 'neutral' | 'warning' | 'error' | 'success';
+    /** If the copyable text is very long, this can be optionally set. */
     multiline?: boolean;
+    /** To override styles. */
     className?: string;
 }
+/** A component that simplifies the copying of text.
+ * <p>The user can select the text inside the input element to have it highlighted, or
+ *  they can click the copy button to copy the text.</p>
+ * <p>The component uses Clipboard API, but is not concerned with permissions.</p>
+ * */
 declare const CopyToClipboard: ({ copyableText, className, multiline, variant }: CopyToClipboardProps) => React.JSX.Element;
 export { CopyToClipboard };

package/src/components/horizontalTabView/HorizontalTabView.d.ts

@@ -1,5 +1,21 @@
 import { TabListProps, TabPanelsProps, TabsProps } from '@equinor/eds-core-react';
-/** The topmost wrapper element for the tab view.*/
+/** Allows markup to be horizontally sectioned in tabs. <br />
+ * The component is a drop in replacement for the regular EDS tabs.
+ *
+ * @example
+ * const { HorizontalTabs, Tab, TabPanels, Tabs, TabPanel } = HorizontalTabView;
+ *
+ * <HorizontalTabs onChange={setActiveTab} activeTab={activeTab}>
+        <Tabs>
+            <Tab>Tab 1</Tab>
+            <Tab>Tab 2</Tab>
+        </Tabs>
+        <TabPanels>
+            <TabPanel>Tab Content 1</TabPanel>
+            <TabPanel>Tab Content 2</TabPanel>
+        </TabPanels>
+    </HorizontalTabs>
+*/
 export declare function TabView(props: TabsProps): import("react/jsx-runtime").JSX.Element;
 /** Returns the parent element of the tabs themselves. */
 export declare function Tabs(props: TabListProps): import("react/jsx-runtime").JSX.Element;

package/src/components/index.d.ts

@@ -23,7 +23,12 @@ export * from './itemMarker/ItemMarker';
 export * from './itemMarker/ItemMarkerExpanded';
 export * from './itemMarker/ItemMarkerIcon';
 export * from './itemMarker/MultipleItemMarkers';
+export * from './itemMarkerAndPopoverWrapper/itemMarkerAndPopoverWrapper';
+export * from './itemMarkerPopover/itemMarkerPopover';
 export * from './legend';
+export * from './legendChip/legendChip';
+export * from './legendSelector/legendSelector';
+export * from './legendSelectorMenu/legendSelectorMenu';
 export * from './linkIcon/LinkIcon';
 export * from './listItem';
 export * from './listRow/ListRow';
@@ -32,6 +37,7 @@ export * from './multilineTabs/MultilineTabs';
 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/itemMarkerAndPopoverWrapper/itemMarkerAndPopoverWrapper.d.ts

@@ -0,0 +1,16 @@
+type ItemMarkerAndPopoverWrapperProps = {
+    title: string;
+    items: JSX.Element[];
+    itemMarker: JSX.Element;
+    closeOnOutsideClick?: boolean;
+};
+/**
+ *
+ * @param {string} title - Title of the popover.
+ * @param {JSX.Element[]} items - List of items to be displayed in the popover.
+ * @param {JSX.Element} itemMarker - Item marker component. This can also be the MultipleIconMarkers component.
+ * @param {boolean} closeOnOutsideClick - If true, popover will close on outside click (optional).
+ * @returns  {JSX.Element} Component
+ */
+export declare const ItemMarkerAndPopoverWrapper: ({ title, items, itemMarker, closeOnOutsideClick }: ItemMarkerAndPopoverWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,9 @@
+export type ItemMarkerPopover = {
+    items: JSX.Element[] | string[];
+    isOpen: boolean;
+    handleClose: () => void;
+    togglePopover: () => void;
+    title: string;
+    closeOnOutsideClick?: boolean;
+};
+export declare const ItemMarkerPopover: ({ items, isOpen, handleClose, togglePopover, title, closeOnOutsideClick }: ItemMarkerPopover) => false | import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+interface LegendChipProps {
+    legendStatus: string;
+    backgroundColor: string;
+    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 {(isDisabled: boolean) => void} onClick - Function to be called when the chip is clicked.
+ */
+export declare const LegendChip: React.FC<LegendChipProps>;
+export {};

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

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface LegendSelectorProps {
+    items: string[];
+    selectedItem: string;
+    setSelectedItem: (selectedItem: string) => void;
+    legends: JSX.Element[];
+    icon?: JSX.Element;
+}
+/**
+ * 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.
+ * @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.
+ */
+export declare const LegendSelector: React.FC<LegendSelectorProps>;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+interface LegendSelectorMenuProps {
+    items: string[];
+    selectedItem: string;
+    setSelectedItem: (selectedItem: string) => void;
+}
+/**
+ * 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.
+ */
+export declare const LegendSelectorMenu: React.FC<LegendSelectorMenuProps>;
+export {};

package/src/components/linkIcon/LinkIcon.d.ts

@@ -1,9 +1,16 @@
 import { TooltipProps } from '@equinor/eds-core-react';
 type LinkIconProps = Omit<TooltipProps, 'children'> & {
+    /** Optionally override tooltip styles. */
     tooltipClassName?: string;
+    /** Optionally override link styles. */
     className?: string;
+    /** The link destination. */
     href: string;
     onClick?: () => void;
 };
+/** A simple link component that only features an icon.
+ * <p>Implementers can optionally specify a tooltip to further clarify the destination.
+ * <br /> On touch devices, this tooltip is <u>not rendered.</u></p>
+ */
 export declare function LinkIcon({ href, className, tooltipClassName, onClick, ...toolTipProps }: LinkIconProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -44,9 +44,15 @@ interface ListItemBaseProps {
     /**
      * Style Modification
      */
-    className?: string;
     style?: CSSProperties;
+    className?: string;
+    cardClassName?: string;
+    /**
+     * Intended for displaying optional messages regarding the given list item
+     */
     footer?: React.ReactNode;
+    iconColor?: string;
+    hideIcon?: boolean;
 }
 export type ListItemProps = ListItemBaseProps & WithVisualOrIconOptions;
 declare function ListItem(props: ListItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { TabsProps } from '@equinor/eds-core-react';
+import { ReactNode } from 'react';
+interface ScrollableTabsProps extends TabsProps {
+    /** Unique ID for the top level element */
+    id: string;
+    /** 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({ id, className, tabsListContent, tabsPanelContent, variant }: ScrollableTabsProps): import("react/jsx-runtime").JSX.Element;
+export { ScrollableTabs };

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

@@ -1,12 +1,14 @@
 export * from './badges';
 export * from './external';
 export * from './general';
+export * from './legendMarker';
+export * from './legendMarkerChip';
 export * from './maps';
 export * from './misc';
 export * from './notifications';
 export * from './punches';
 export * from './sap';
-export * from "./sidesheet";
+export * from './sidesheet';
 export * from './subsea';
 export * from './workOrders';
 export * from './xld';

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

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

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

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

package/src/theme/themeConst.d.ts

@@ -121,4 +121,12 @@ export declare const themeConst: {
     readonly hoverIconWithNotification: string;
     tertiaryText: string;
     secondaryText: string;
+    backgroundDark: string;
+    backgroundDark2: string;
+    backgroundDark3: string;
+    hoverDark: string;
+    borderDark: string;
+    focusDark: string;
+    primaryTextForDarkBackground: string;
+    secondaryTextForDarkBackground: string;
 };