@equinor/echo-components 2.2.3 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/echo-components",
-  "version": "2.2.3",
+  "version": "2.4.0",
   "dependencies": {
     "chart.js": "4.5.1",
     "react-datepicker": "8.7.0",
@@ -8,10 +8,10 @@
     "react-window": "1.8.11"
   },
   "peerDependencies": {
-    "@equinor/echo-utils": ">= 2.2.3 < 3.0.0",
+    "@equinor/echo-utils": ">= 2.4.0 < 3.0.0",
     "@equinor/eds-core-react": "0.49.0",
     "@equinor/eds-icons": "0.22.0",
-    "@equinor/eds-tokens": "0.10.0",
+    "@equinor/eds-tokens": "2.1.0",
     "classnames": "2.5.1",
     "lodash": ">= 4.17.21 < 5",
     "react": ">= 17.0.2",
@@ -20,6 +20,10 @@
     "sortablejs": ">= 1.15.1 < 2",
     "zustand": ">= 4.4.7 < 5"
   },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": "./index.cjs.js"
+  },
   "main": "./index.cjs.js",
   "type": "commonjs",
   "types": "./index.d.ts"

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

@@ -1,8 +1,11 @@
 import { ButtonProps } from '@equinor/eds-core-react';
-export type EchoButtonProps = ButtonProps;
+export type EchoButtonProps = ButtonProps & {
+    isSelected?: boolean;
+};
 /**
- * Wrapper for EDS Button with UI preferences support.
- * If EDS implements mode and density in the future (as in figma), this can be removed.
+ * 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: import("react").ForwardRefExoticComponent<{
     color?: "primary" | "secondary" | "danger";
@@ -11,4 +14,6 @@ export declare const EchoButton: import("react").ForwardRefExoticComponent<{
     disabled?: boolean;
     type?: string;
     fullWidth?: boolean;
-} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    isSelected?: boolean;
+} & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,16 @@
+import { EchoButtonProps } from './EchoButton';
+/**
+ * Temporary EDS toggle button, remove when EDS 1.0 is available.
+ * Visually merges multiple toggle buttons together.
+ * It uses EchoButton as a base and adds isSelected prop and aria-pressed attribute for accessibility.
+ * Note: Ghost variants are not supported for toggle buttons as they don't provide clear visual feedback for the selected state.
+ *
+ * @component
+ * @param {object} props - Component props
+ * @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"> & {
+    isSelected?: boolean;
+    variant?: Exclude<EchoButtonProps["variant"], "ghost" | "ghost_icon">;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/src/components/index.d.ts

@@ -14,6 +14,7 @@ export * from './dropdown/Dropdown';
 export * from './echoBottomBar/EchoBottomBar';
 export * from './echoButton/EchoActionButton';
 export * from './echoButton/EchoButton';
+export * from './echoButton/EchoToggleButton';
 export * from './echoCard/index';
 export * from './echoHeader/EchoHeader';
 export * from './echoMenu/EchoMenu';

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

@@ -19,6 +19,7 @@ export interface ItemMarkerProps {
     maxNumberOfChips?: number;
     zIndex?: number | string;
     highlightColor?: string;
+    isGhosted?: boolean;
 }
 /**
  * Renders an item marker with optional chips.

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

@@ -2,6 +2,5 @@ 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;
+export declare const Pagination: ({ itemCount, currentItemIndex, setCurrentItemIndex }: PaginationProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -9,4 +9,19 @@ export type ItemMarkerPopover = {
     className?: string;
     style?: CSSProperties;
 };
+/**
+ * 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.
+ * When using ListItem for the content, using the css parameter -webkit-text-fill-color is recommended for overriding the text color.
+ * To override the hover effect for ListItem, override the elements in the ListItem like this: > li:hover
+ * This component will always render in dark mode.
+ * @param {JSX.Element[] | string[]} items - List of items to be displayed in the popover.
+ * @param {boolean} isOpen - If true, popover is open.
+ * @param {() => void} handleClose - Function to close the popover (this is used to handle closing only, not toggling it).
+ * @param {string} title - Title of the popover.
+ * @param {number} zIndex - Z-index of the popover.
+ * @param {string} className - ClassName of the popover.
+ * @param {CSSProperties} style - style of the popover.
+ */
 export declare const ItemMarkerPopover: ({ items, isOpen, handleClose, title, zIndex, className, style }: ItemMarkerPopover) => false | import("react/jsx-runtime").JSX.Element;

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

@@ -5,6 +5,7 @@ export interface LegendChipProps {
     disabled?: boolean;
     onClick?: (isDisabled: boolean) => void;
     showAsPlainLabel?: boolean;
+    colors?: string[];
 }
 /**
  * Legend chip component to display a legend status chip.

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

@@ -12,6 +12,7 @@ export interface LegendSelectorProps {
 /**
  * Legend selector component that will display the selected legend type and the statuses.
  * 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.
+ * Will always render dark.
  * @param {JSX.Element[]} options - List of options to be displayed in the selection-selector.
  * @param {string} selectedOption - The selected option.
  * @param {(option: string) => void} onOptionsClick - Function that is called when another option is clicked.

package/src/index.d.ts

@@ -1,7 +1,9 @@
 import './style-reset.css';
+import '@equinor/eds-tokens/css/variables.css';
 import '@equinor/eds-tokens/tokens.css';
-import './theme/echoPrimitives.generated.css';
 import './theme/echoModes.generated.css';
+import './theme/echoPrimitives.generated.css';
+import './theme/echoUI.generated.css';
 import './theme/theme.css';
 export * from './components';
 export * from './elements';
@@ -10,8 +12,8 @@ export * from './hooks';
 export * from './icons';
 export * from './providers/UIPreferenceProvider';
 export * from './structure';
-export { echoPrimitives } from './theme/echoPrimitives.generated';
 export { echoModes } from './theme/echoModes.generated';
+export { echoPrimitives } from './theme/echoPrimitives.generated';
 export { themeConst } from './theme/themeConst';
 export * from './types';
 export * from './utils';

package/src/providers/UIPreferenceProvider.d.ts

@@ -9,7 +9,8 @@ interface UIPreferencesContextType {
 }
 interface UIPreferencesProviderProps {
     children: ReactNode;
-    mode: Mode;
+    /** @deprecated - Follows the old color scheme, use new EDS tokens instead if needed */
+    mode?: Mode;
     density?: Density;
 }
 /**

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

@@ -253,6 +253,7 @@ export declare const echoModes: {
     readonly stidNotificationsSeverityTextIconDefaultSeverity: "#000000";
     readonly stidOfpDocumentsFillOfpdark: "#ffc67a";
     readonly stidOfpDocumentsFillOfplight: "#ffe7d6";
+    readonly stidOfpDocumentsFillNone: "rgba(255 255 255 / 0)";
     readonly stidOfpDocumentsFillBlue: "#d5eaf4";
     readonly stidOfpDocumentsFillGrey: "#bebebe";
     readonly stidOfpDocumentsTextIconOfpdark: "#000000";

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

@@ -36,6 +36,7 @@ export declare const echoPrimitives: {
     readonly edsPrimaryEdsMossGreen_100: "#007079";
     readonly standardItemStatusMultiple: "#3d3d3d";
     readonly standardItemStatusUnknown_1: "#bebebe";
+    readonly miscEchoCustomUiHoverOverlay: "rgba(0 0 0 / 0.9)";
     readonly miscEchoCustomUiMarkerActive: "#00ffff";
     readonly miscTextIconBlack: "#000000";
     readonly miscTextIconWhite: "#ffffff";

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

@@ -0,0 +1,8 @@
+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";
+};

package/src/theme/themeConst.d.ts

@@ -161,5 +161,6 @@ export declare const themeConst: {
     edsDarkInteractivePrimaryHover: string;
     edsDarkInteractiveDisabledFill: string;
     edsDarkInteractiveDisabledText: string;
+    edsDarkTextStaticIconsSecondary: string;
     selectionIndicator: string;
 };