@equinor/echo-components 2.2.2 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/echo-components",
-  "version": "2.2.2",
+  "version": "2.3.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.2 < 3.0.0",
+    "@equinor/echo-utils": ">= 2.3.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",

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

@@ -1,8 +1,12 @@
 import { ButtonProps } from '@equinor/eds-core-react';
-export type EchoButtonProps = ButtonProps;
+type ButtonType = 'neutral' | 'accent';
+export type EchoButtonProps = ButtonProps & {
+    buttonType?: ButtonType;
+};
 /**
- * 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 +15,7 @@ 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> & {
+    buttonType?: ButtonType;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

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/index.d.ts

@@ -1,5 +1,6 @@
 import './style-reset.css';
 import '@equinor/eds-tokens/tokens.css';
+import '@equinor/eds-tokens/css/variables.css';
 import './theme/echoPrimitives.generated.css';
 import './theme/echoModes.generated.css';
 import './theme/theme.css';

package/src/theme/themeConst.d.ts

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