@equinor/echo-components 5.0.0-beta-r19 → 5.0.0-beta-r19-1

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@equinor/echo-components",
-  "version": "5.0.0-beta-r19",
+  "version": "5.0.0-beta-r19-1",
   "dependencies": {
     "chart.js": "4.5.1",
-    "react-datepicker": "8.10.0",
+    "react-datepicker": "9.1.0",
     "react-swipeable": "7.0.2",
     "react-window": "1.8.11"
   },
   "peerDependencies": {
-    "@equinor/echo-utils": "5.0.0-beta-r19",
+    "@equinor/echo-utils": "5.0.0-beta-r19-1",
     "@equinor/eds-core-react": "0.49.0",
     "@equinor/eds-icons": "0.22.0",
     "@equinor/eds-tokens": "2.1.0",

package/src/components/accordionWithSwitch/AccordionWithSwitch.d.ts

@@ -22,6 +22,8 @@ interface AccordionWithSwitchProps {
     switchDisabled?: boolean;
     /** Optional warning element to be displayed */
     warning?: React.JSX.Element;
+    /** Optional test ID for the accordion */
+    testId?: string;
 }
-export declare const AccordionWithSwitch: ({ title, description, handleSwitchClick, children, descriptionHeading, disableAccordionOnSwitchOff, isExpanded, isToggledOn, switchDisabled, switchAriaLabel, warning }: AccordionWithSwitchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccordionWithSwitch: ({ title, description, handleSwitchClick, children, descriptionHeading, disableAccordionOnSwitchOff, isExpanded, isToggledOn, switchDisabled, switchAriaLabel, warning, testId }: AccordionWithSwitchProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,13 +1,13 @@
 import { ButtonProps } from '@equinor/eds-core-react';
 import React from 'react';
 export type EchoButtonProps = ButtonProps & {
-    isSelected?: boolean;
-    isLoading?: boolean;
-    ref?: React.Ref<HTMLButtonElement>;
+    readonly isSelected?: boolean;
+    readonly isLoading?: boolean;
+    readonly ref?: React.Ref<HTMLButtonElement>;
 };
 /**
  * Wrapper for EDS Button with UI preferences support, and dark mode support (uses new light/dark CSS variables).
  * This button component should be removed when EDS 1.0 is fully adopted, then we would use the button component from there.
  * For now we need this to be able to implement temporary styles with dark support.
  */
-export declare const EchoButton: ({ ref, isSelected, isLoading, ...rest }: EchoButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EchoButton: (props: EchoButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import { EchoButtonProps } from './EchoButton';
-type EchoToggleButtonProps = Omit<EchoButtonProps, 'variant'> & {
+export type EchoToggleButtonProps = Omit<EchoButtonProps, 'variant' | 'color'> & {
     isSelected?: boolean;
     variant?: Exclude<EchoButtonProps['variant'], 'ghost' | 'ghost_icon'>;
+    color?: Exclude<EchoButtonProps['color'], 'danger'>;
 };
 /**
  * Temporary EDS toggle button, remove when EDS 1.0 is available.
@@ -18,4 +19,3 @@ type EchoToggleButtonProps = Omit<EchoButtonProps, 'variant'> & {
 export declare const EchoToggleButton: ({ children, className, isSelected, variant, ref, ...restProps }: EchoToggleButtonProps & {
     ref?: React.Ref<HTMLButtonElement>;
 }) => import("react/jsx-runtime").JSX.Element;
-export {};

package/src/components/echoToggleButtonGroup/EchoToggleButtonGroup.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { type EchoToggleButtonProps } from '../echoButton/EchoToggleButton';
+export interface EchoToggleButtonGroupOption<T> {
+    readonly label: string | React.JSX.Element;
+    readonly value: T;
+}
+interface EchoToggleButtonGroupProps<T> {
+    readonly className?: string;
+    readonly options: ReadonlyArray<EchoToggleButtonGroupOption<T>>;
+    readonly selectedOption: T;
+    readonly onOptionSelected?: (option: T, e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    readonly variant?: EchoToggleButtonProps['variant'];
+    readonly color?: EchoToggleButtonProps['color'];
+}
+/**
+ * EchoToggleButtonGroup is a controlled component that renders a group of selectable buttons.
+ *
+ * Displays each option as a button, highlights the currently selected option, and calls the `onSelect` callback when a different option is chosen.
+ * Uses Echo UI components and compact density for consistent styling. Uses EDS colors with color-scheme for automatic dark mode support.
+ *
+ * @component
+ * @param {object} props - Component props
+ * @param {string} [props.className] - Optional additional CSS class for custom styling.
+ * @param {ReadonlyArray<EchoToggleButtonGroupOption<T>>} props.options - List of selectable options.
+ * @param {EchoToggleButtonGroupOption<T>} props.selectedOption - The currently selected option.
+ * @param {(option: T) => void} [props.onOptionSelected] - Callback invoked when a new option is selected.
+ * @returns {JSX.Element | null} The rendered button group, or null if no options are provided.
+ */
+export declare const EchoToggleButtonGroup: <T>(props: EchoToggleButtonGroupProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/src/components/index.d.ts

@@ -18,6 +18,7 @@ export * from './echoButton/EchoToggleButton';
 export * from './echoCard/index';
 export * from './echoHeader/EchoHeader';
 export * from './echoMenu/EchoMenu';
+export * from './echoToggleButtonGroup/EchoToggleButtonGroup';
 export * from './floatingActionButton';
 export * from './floatingActionButton/FloatingActionButton';
 export * from './functionalLocationListItem/FunctionalLocationListItem';
@@ -31,6 +32,7 @@ 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';
@@ -55,6 +57,9 @@ export * from './secondaryMarker/SecondaryMarker';
 export * from './secondaryMarker/SecondaryMarkerExpander';
 export * from './secondaryMarker/SecondaryMarkerWithChip';
 export * from './secondaryMarker/SecondaryMarkerWrapper';
+export type { SelectionBarMenuState } from './selectionBar/menu/SelectionBarMenu';
+export * from './selectionBar/SelectionBar';
+export type { SelectionBarFeedbackType } from './selectionBar/selectionBarFeedback.types';
 export * from './selectionColorPicker/SelectionColorPicker';
 export * from './selectTextOnFocusAutocomplete/SelectTextOnFocusAutocomplete';
 export * from './sidebarButton/SidebarButton';

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

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+export type ArrowPosition = 'left' | 'right' | 'top' | 'bottom' | 'none';
+export interface ItemMarkerPopoverProps {
+    /**
+     * Children should be ItemMarkerPopover.Header, ItemMarkerPopover.Content, and/or ItemMarkerPopover.Footer
+     */
+    readonly children: ReactNode;
+    readonly className?: string;
+    readonly zIndex?: number;
+    /**
+     * Position of the arrow pointer. Defaults to 'left' (arrow points left, popover opens to the right).
+     */
+    readonly arrowPosition?: ArrowPosition;
+}
+export declare const ItemMarkerPopover: (({ children, className, zIndex, arrowPosition }: ItemMarkerPopoverProps) => import("react/jsx-runtime").JSX.Element) & {
+    Header: ((props: import("./ItemMarkerPopoverHeader").ItemMarkerPopoverHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
+        Pagination: (props: import("./itemMarkerPopoverHeader/ItemMarkerPopoverHeaderPagination").ItemMarkerPopoverHeaderPaginationProps) => import("react/jsx-runtime").JSX.Element;
+        Title: (props: import("./itemMarkerPopoverHeader/ItemMarkerPopoverHeaderTitle").HeaderTitleProps) => import("react/jsx-runtime").JSX.Element;
+    };
+    Content: (props: import("./ItemMarkerPopoverContent").ItemMarkerPopoverContentProps) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ children, className }: import("./ItemMarkerPopoverFooter").ItemMarkerPopoverFooterProps) => import("react/jsx-runtime").JSX.Element;
+};

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export interface ItemMarkerPopoverContentProps {
+    /**
+     * Main content (typically a card component)
+     */
+    readonly children: ReactNode;
+    readonly className?: string;
+    readonly onClick?: () => void;
+}
+export declare const Content: (props: ItemMarkerPopoverContentProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export interface ItemMarkerPopoverFooterProps {
+    /**
+     * Footer content (typically SelectionBar)
+     */
+    readonly children: ReactNode;
+    readonly className?: string;
+}
+export declare const Footer: ({ children, className }: ItemMarkerPopoverFooterProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+export interface ItemMarkerPopoverHeaderProps {
+    readonly onClose: () => void;
+    /**
+     * Children: use Header.Pagination and Header.Title
+     */
+    readonly children: ReactNode;
+    readonly className?: string;
+}
+/**
+ * @example
+ * <Header onClose={() => console.log('close popover')}>
+ *     <Header.Pagination
+ *         currentIndex={1}
+ *         totalCount={5}
+ *         onPrevious={() => console.log('previous item')}
+ *         onNext={() => console.log('next item')}
+ *     />
+ *     <Header.Title>Item 1</Header.Title>
+ * </Header>
+ */
+export declare const Header: ((props: ItemMarkerPopoverHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
+    Pagination: (props: import("./itemMarkerPopoverHeader/ItemMarkerPopoverHeaderPagination").ItemMarkerPopoverHeaderPaginationProps) => import("react/jsx-runtime").JSX.Element;
+    Title: (props: import("./itemMarkerPopoverHeader/ItemMarkerPopoverHeaderTitle").HeaderTitleProps) => import("react/jsx-runtime").JSX.Element;
+};

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

@@ -10,6 +10,8 @@ export type OldItemMarkerPopover = {
     style?: CSSProperties;
 };
 /**
+ * /** @deprecated This component is being deprecated as a part of #419082 in favor of the new ItemMarkerPopover compound component which interacts well with ItemCard.
+ *
  * Popover component that can display a single item, or a pagination of multiple items.
  * NB:
  * The content that is being passed in needs to be styled accordingly to the dark theme.
@@ -25,5 +27,3 @@ export type OldItemMarkerPopover = {
  * @param {CSSProperties} style - style of the popover.
  */
 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/itemMarkerPopoverHeader/ItemMarkerPopoverHeaderPagination.d.ts

@@ -0,0 +1,8 @@
+export interface ItemMarkerPopoverHeaderPaginationProps {
+    readonly currentIndex: number;
+    readonly totalCount: number;
+    readonly onPrevious: () => void;
+    readonly onNext: () => void;
+    readonly className?: string;
+}
+export declare const ItemMarkerPopoverHeaderPagination: (props: ItemMarkerPopoverHeaderPaginationProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+export interface HeaderTitleProps {
+    readonly children: string;
+    readonly className?: string;
+}
+export declare const ItemMarkerPopoverHeaderTitle: (props: HeaderTitleProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,7 +4,7 @@ export interface LegendSelectorProps {
     options: ReadonlyArray<string>;
     selectedOption: string;
     onOptionClick: (option: string) => void;
-    legends: LegendChipProps[];
+    legends: ReadonlyArray<LegendChipProps>;
     showLegendToggle?: boolean;
     visual?: React.JSX.Element;
     placeholder?: string;

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

@@ -6,4 +6,4 @@ import { LegendChipProps } from '../legendChip/LegendChip';
  * @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[];
+export declare const useVisibleLegends: (showAllLegends: boolean, legends: ReadonlyArray<LegendChipProps>, availableWidth: number) => ReadonlyArray<LegendChipProps>;

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

@@ -5,6 +5,7 @@ interface LegendSelectorAccordionBaseProps {
     visual?: React.JSX.Element;
     caption?: string;
     actions?: React.ReactNode;
+    testId?: string;
 }
 interface UncontrolledProps extends LegendSelectorAccordionBaseProps {
     isExpanded?: never;

package/src/components/multilineTabs/MultilineTabs.d.ts

@@ -17,6 +17,7 @@ export interface MultilineTabsProps {
     activeTabIndex: number;
     onTabChange?: (index: number) => void;
     initiallyExpanded?: boolean;
+    testId?: string;
     children: ReactElement<typeof Tabs.Panels>;
 }
 /**

package/src/components/selectionBar/SelectionBar.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+export interface SelectionBarProps {
+    readonly children: ReactNode;
+    readonly className?: string;
+}
+export declare const SelectionBar: (({ children, className }: SelectionBarProps) => import("react/jsx-runtime").JSX.Element) & {
+    Content: ({ children, className }: import("./SelectionBarContent").SelectionBarContentProps) => import("react/jsx-runtime").JSX.Element;
+    Menu: ((props: import("./menu/SelectionBarMenu").SelectionBarMenuProps) => import("react/jsx-runtime").JSX.Element) & {
+        MenuItem: (props: import("./menu/SelectionBarMenuItem").SelectionBarMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+    };
+    Counter: (props: import("./SelectionBarCounter").SelectionBarCounterProps) => import("react/jsx-runtime").JSX.Element;
+    Feedback: ({ feedbackType, className }: import("./SelectionBarFeedback").SelectionBarFeedbackProps) => import("react/jsx-runtime").JSX.Element;
+};

package/src/components/selectionBar/SelectionBarContent.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface SelectionBarContentProps {
+    readonly children: ReactNode;
+    readonly className?: string;
+}
+/**
+ * Flexible content area within the SelectionBar.
+ * Put any components or elements here.
+ */
+export declare const SelectionBarContent: ({ children, className }: SelectionBarContentProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/selectionBar/SelectionBarCounter.d.ts

@@ -0,0 +1,16 @@
+export interface SelectionBarCounterProps {
+    /** Number of currently selected items */
+    readonly selectedItems: number;
+    /** Total number of items available */
+    readonly totalItems: number;
+}
+/**
+ * Displays a selection count in the format "selected / total".
+ *
+ * @example
+ * ```tsx
+ * <SelectionBar.Counter selectedItems={2} totalItems={5} />
+ * // Renders: "2 / 5"
+ * ```
+ */
+export declare const SelectionBarCounter: (props: SelectionBarCounterProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/selectionBar/SelectionBarFeedback.d.ts

@@ -0,0 +1,20 @@
+import type { SelectionBarFeedbackType } from './selectionBarFeedback.types';
+export interface SelectionBarFeedbackProps {
+    /** The type of feedback to display */
+    readonly feedbackType: SelectionBarFeedbackType;
+    /** Optional additional CSS class */
+    readonly className?: string;
+}
+/**
+ * Displays feedback status within the SelectionBar (e.g., "Added", "Removed", "Failed to add").
+ *
+ * @example
+ * ```tsx
+ * <SelectionBar.Feedback feedbackType="added" />
+ * // Renders: ✓ Added (in success color)
+ *
+ * <SelectionBar.Feedback feedbackType="addError" />
+ * // Renders: ⚠ Failed to add (in error color)
+ * ```
+ */
+export declare const SelectionBarFeedback: ({ feedbackType, className }: SelectionBarFeedbackProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/selectionBar/menu/SelectionBarMenu.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from 'react';
+export type SelectionBarMenuState = 'unselected' | 'selected' | 'loading';
+export interface SelectionBarMenuProps {
+    readonly children: ReactNode;
+    /**
+     * Unique ID for the menu
+     */
+    readonly menuId?: string;
+    readonly className?: string;
+    readonly state?: SelectionBarMenuState;
+    /**
+     * This will overwrite the default onClick used for opening the menu.
+     * Useful for special case where we only have one list, and we want to
+     * auto-add to that without opening the menu.
+     */
+    readonly overwriteMenuTriggerClick?: () => void;
+    /**
+     * Custom label for the button when state is 'unselected'. Defaults to 'Add to selection'.
+     */
+    readonly unselectedLabel?: string;
+    /**
+     * Custom label for the button when state is 'selected'. Defaults to 'Remove'.
+     */
+    readonly selectedLabel?: string;
+    readonly 'data-testid'?: string;
+}
+export declare const SelectionBarMenu: ((props: SelectionBarMenuProps) => import("react/jsx-runtime").JSX.Element) & {
+    MenuItem: (props: import("./SelectionBarMenuItem").SelectionBarMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+};

package/src/components/selectionBar/menu/SelectionBarMenuItem.d.ts

@@ -0,0 +1,24 @@
+export type SelectionBarMenuItemVariant = 'add' | 'remove';
+export interface SelectionBarMenuItemProps {
+    readonly children: string | string[];
+    readonly onClick: (event: React.MouseEvent<Element, MouseEvent>) => void;
+    readonly disabled?: boolean;
+    /**
+     * Determines the icon and styling of the menu item. Defaults to 'add'.
+     */
+    readonly variant?: SelectionBarMenuItemVariant;
+    readonly hasBorderBottom?: boolean;
+    /**
+     * Whether to show the variant icon. Defaults to true.
+     */
+    readonly showIcon?: boolean;
+    /**
+     * Whether the menu should close when this item is clicked. Defaults to true.
+     */
+    readonly closeMenuOnClick?: boolean;
+    readonly 'data-testid'?: string;
+}
+/**
+ * Menu item for use within SelectionBar.Menu
+ */
+export declare const SelectionBarMenuItem: (props: SelectionBarMenuItemProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/selectionBar/selectionBarFeedback.types.d.ts

@@ -0,0 +1 @@
+export type SelectionBarFeedbackType = 'added' | 'removed' | 'addError' | 'removeError' | 'colorChanged' | 'colorChangeError';

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

@@ -1,9 +1,10 @@
 interface SelectionColorProps {
+    readonly className?: string;
     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 declare const SelectionColorPicker: ({ itemColor, colors, onColorSelect, disabled, renderButtonAsSpan, className }: SelectionColorProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,17 +0,0 @@
-import { TooltipItem } from 'chart.js';
-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: TooltipItem<"line">[]) => string | undefined;
-    };
-};

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

@@ -1,26 +0,0 @@
-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/src/icons/echoAssets/legendMarkerChip.d.ts

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

package/src/theme/echoUI.generated.d.ts

@@ -1,8 +0,0 @@
-export declare const echoUI: {
-    readonly bgFabResting: "rgba(0 0 0 / 0.8)";
-    readonly bgFabHover: "rgba(0 0 0 / 0.9)";
-    readonly bgLightenLighten_16: "rgba(255 255 255 / 0.16)";
-    readonly bgLightenLighten_10: "rgba(255 255 255 / 0.1)";
-    readonly bgLightenLighten_30: "rgba(255 255 255 / 0.3)";
-    readonly miscMarkerActive: "#00ffff";
-};