@equinor/echo-components 4.2.0 → 4.3.0-beta-0

package/index.d.ts

@@ -1 +1 @@
-export * from "./src/index";
+export * from "./src\\index";

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@equinor/echo-components",
-  "version": "4.2.0",
+  "version": "4.3.0-beta-0",
   "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": ">= 4.2.0 < 5.0.0",
+    "@equinor/echo-utils": "4.3.0-beta-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,7 +1,7 @@
 import { ButtonProps } from '@equinor/eds-core-react';
 export type EchoButtonProps = ButtonProps & {
-    isSelected?: boolean;
-    isLoading?: boolean;
+    readonly isLoading?: boolean;
+    readonly isSelected?: boolean;
 };
 /**
  * Wrapper for EDS Button with UI preferences support, and dark mode support (uses new light/dark CSS variables).
@@ -16,6 +16,6 @@ export declare const EchoButton: import("react").ForwardRefExoticComponent<{
     type?: string;
     fullWidth?: boolean;
 } & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
-    isSelected?: boolean;
-    isLoading?: boolean;
+    readonly isLoading?: boolean;
+    readonly isSelected?: boolean;
 } & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -1,4 +1,9 @@
 import { EchoButtonProps } from './EchoButton';
+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.
  * Visually merges multiple toggle buttons together.
@@ -10,7 +15,8 @@ import { EchoButtonProps } from './EchoButton';
  * @param {boolean} [props.isSelected] - Indicates if the button is in a selected state.
  * @param {'contained' | 'contained_icon' | 'outlined'} [props.variant] - Button variant. Ghost variants are not available for toggle buttons.
  */
-export declare const EchoToggleButton: import("react").ForwardRefExoticComponent<Omit<EchoButtonProps, "variant"> & {
+export declare const EchoToggleButton: import("react").ForwardRefExoticComponent<Omit<EchoButtonProps, "color" | "variant"> & {
     isSelected?: boolean;
     variant?: Exclude<EchoButtonProps["variant"], "ghost" | "ghost_icon">;
+    color?: Exclude<EchoButtonProps["color"], "danger">;
 } & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,29 @@
+import { type EchoToggleButtonProps } from '../echoButton/EchoToggleButton';
+export interface EchoToggleButtonGroupOption<T> {
+    readonly label: string | 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?: 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/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,20 @@
+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;
+}
+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,19 @@
+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 the menu should close when this item is clicked. Defaults to true.
+     */
+    readonly closeMenuOnClick?: boolean;
+}
+/**
+ * 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 {};