@equinor/echo-components 2.3.0 → 2.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/echo-components",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "dependencies": {
     "chart.js": "4.5.1",
     "react-datepicker": "8.7.0",
@@ -8,7 +8,7 @@
     "react-window": "1.8.11"
   },
   "peerDependencies": {
-    "@equinor/echo-utils": ">= 2.3.0 < 3.0.0",
+    "@equinor/echo-utils": ">= 2.4.1 < 3.0.0",
     "@equinor/eds-core-react": "0.49.0",
     "@equinor/eds-icons": "0.22.0",
     "@equinor/eds-tokens": "2.1.0",
@@ -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,7 +1,6 @@
 import { ButtonProps } from '@equinor/eds-core-react';
-type ButtonType = 'neutral' | 'accent';
 export type EchoButtonProps = ButtonProps & {
-    buttonType?: ButtonType;
+    isSelected?: boolean;
 };
 /**
  * Wrapper for EDS Button with UI preferences support, and dark mode support (uses new light/dark CSS variables).
@@ -16,6 +15,5 @@ export declare const EchoButton: import("react").ForwardRefExoticComponent<{
     type?: string;
     fullWidth?: boolean;
 } & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
-    buttonType?: ButtonType;
+    isSelected?: boolean;
 } & import("react").RefAttributes<HTMLButtonElement>>;
-export {};

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/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,8 +1,9 @@
 import './style-reset.css';
-import '@equinor/eds-tokens/tokens.css';
 import '@equinor/eds-tokens/css/variables.css';
-import './theme/echoPrimitives.generated.css';
+import '@equinor/eds-tokens/tokens.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';
@@ -11,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";
+};