@equinor/echo-components 0.11.9 → 0.11.10

package/package.json

@@ -1,22 +1,23 @@
 {
   "name": "@equinor/echo-components",
-  "version": "0.11.9",
+  "version": "0.11.10",
   "dependencies": {
     "chart.js": "4.4.3",
+    "react-datepicker": "4.25.0",
     "react-window": "1.8.10",
-    "react-datepicker": "4.25.0"
+    "uuid": "^9.0.1"
   },
   "peerDependencies": {
     "@equinor/echo-utils": ">= 0.4.0 < 0.5.0",
     "@equinor/eds-core-react": "0.34.0",
     "@equinor/eds-icons": "0.19.3",
+    "classnames": "2.5.1",
+    "lodash": ">= 4.17.21 < 5",
     "react": ">= 17.0.2",
     "react-dom": ">= 17.0.2",
-    "zustand": ">= 4.4.7 < 5",
-    "lodash": ">= 4.17.21 < 5",
     "react-sortablejs": "6.1.4",
     "sortablejs": ">= 1.15.1 < 2",
-    "classnames": "2.5.1"
+    "zustand": ">= 4.4.7 < 5"
   },
   "main": "./index.cjs.js",
   "type": "commonjs"

package/src/components/echoCard/Title.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface CardIcons {
     name: string;
     color: string;

package/src/components/functionalLocationListItem/FunctionalLocationListItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface FunctionalLocationListeItemProps {
     className?: string;
     functionalLocationId: string;

package/src/components/horizontalTabView/HorizontalTabView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TabListProps, TabPanelsProps, TabsProps } from '@equinor/eds-core-react';
 /** The topmost wrapper element for the tab view.*/
 export declare function TabView(props: TabsProps): import("react/jsx-runtime").JSX.Element;
@@ -6,10 +5,10 @@ export declare function TabView(props: TabsProps): import("react/jsx-runtime").J
 export declare function Tabs(props: TabListProps): import("react/jsx-runtime").JSX.Element;
 /** Returns a button that acts like a tab button in a tab list. */
 export declare const Tab: import("react").ForwardRefExoticComponent<{
-    active?: boolean | undefined;
-    value?: string | number | undefined;
-    disabled?: boolean | undefined;
-    as?: import("react").ElementType | undefined;
+    active?: boolean;
+    value?: number | string;
+    disabled?: boolean;
+    as?: import("react").ElementType;
 } & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<unknown>>;
 /** Returns the parent of the tab-sectioned content. */
 export declare function TabPanels(props: TabPanelsProps): import("react/jsx-runtime").JSX.Element;

package/src/components/horizontalTabView/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Tab, TabPanels, TabView, Tabs } from './HorizontalTabView';
 declare const EDSPanel: import("react").ForwardRefExoticComponent<import("@equinor/eds-core-react").TabPanelProps & import("react").RefAttributes<HTMLDivElement>>;
 interface HorizontalTabsProps {

package/src/components/iconLink/compactIconLink/CompactIconLink.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface CompactIconLinkProps {
     title: string;
     meta: string;

package/src/components/index.d.ts

@@ -19,6 +19,10 @@ export * from './functionalLocationListItem/FunctionalLocationListItem';
 export * from './horizontalTabView';
 export * from './iconLink/compactIconLink/CompactIconLink';
 export * from './iconLink/inlineTagIconLink/InlineTagIconLink';
+export * from './itemMarker/ItemMarker';
+export * from './itemMarker/ItemMarkerExpanded';
+export * from './itemMarker/ItemMarkerIcon';
+export * from './itemMarker/MultipleItemMarkers';
 export * from './legend';
 export * from './linkIcon/LinkIcon';
 export * from './listItem';

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

@@ -0,0 +1,10 @@
+import { CSSProperties, ReactNode } from 'react';
+import { ChipProps } from '../../elements/tagIcon/Chip';
+export interface ChipsContainerProps {
+    chips: ChipProps[];
+    className?: string;
+    children?: ReactNode;
+    isTransparent?: boolean;
+    style?: CSSProperties;
+}
+export declare const ChipsContainer: React.FC<ChipsContainerProps>;

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

@@ -0,0 +1,46 @@
+import React, { CSSProperties } from 'react';
+import { ChipProps } from '../../elements';
+import { IconSize, ItemMarkerIconType, ItemMarkerPosition, ItemMarkerSize } from './utils/itemMarkerUtils';
+export interface ItemMarkerProps {
+    icon: ItemMarkerIconType;
+    size?: ItemMarkerSize;
+    isTransparent?: boolean;
+    isActive?: boolean;
+    isChipsEnabled?: boolean;
+    chips?: ChipProps[];
+    backgroundColor?: string;
+    iconColor?: string;
+    iconSize?: IconSize;
+    hasPointer?: boolean;
+    pointerPosition?: ItemMarkerPosition;
+    style?: CSSProperties;
+    onClick?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    maxNumberOfChips?: number;
+    zIndex?: number | string;
+}
+/**
+ * Renders an item marker with optional chips.
+ *
+ * @param {ItemMarkerIconType} icon - Icon to use.
+ * @param {ItemMarkerSize} size - Size of the item marker (optional).
+ * @param {boolean} isTransparent - If true, marker is visible; if false, transparent (optional).
+ * @param {boolean} isActive - Indicates active state (optional).
+ * @param {boolean} isChipsEnabled - Shows chips if true (optional).
+ * @param {ChipProps[]} chips - Chips to display (optional).
+ * @param {string} backgroundColor - The itemMarker's background color (optional).
+ * @param {string} iconColor - Background color of the icon (optional).
+ * @param {IconSize} iconSize - Size of the icon (optional).
+ * @param {boolean} hasPointer - If true, marker includes a pointer (optional).
+ * @param {ItemMarkerPosition} pointerPosition - ItemMarker's pointer position (optional).
+ * @param {CSSProperties} style - Custom styles for itemMarker and chips (optional).
+ * @param {() => void} onClick - Click handler for the itemMarker (optional).
+ * @param {() => void} onMouseEnter - Mouse enter handler for the itemMarker (optional).
+ * @param {() => void} onMouseLeave - Mouse leave handler for the itemMarker (optional).
+ * @param {number} maxNumberOfChips - Maximum chips displayed (optional).
+ * @param {number | string} [zIndex] - z-index of the marker and chips (optional).
+ *
+ * @returns {JSX.Element} Component
+ */
+export declare const ItemMarker: React.FC<ItemMarkerProps>;

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

@@ -0,0 +1,9 @@
+export interface ItemMarkerChipProps {
+    title: string;
+    color: string;
+    id?: string;
+    textColor?: string;
+    className?: string;
+    onClick?: () => void;
+}
+export declare const ItemMarkerChip: React.FC<ItemMarkerChipProps>;

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

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+import { ChipProps } from '../../elements/tagIcon/Chip';
+export interface ItemMarkerChipsProps {
+    chips: ChipProps[];
+    maxNumberOfChips?: number;
+    className?: string;
+    style?: CSSProperties;
+    isTransparent?: boolean;
+}
+export declare const ItemMarkerChips: React.FC<ItemMarkerChipsProps>;

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

@@ -0,0 +1,14 @@
+import { IconSize, ItemMarkerIconType, ItemMarkerPosition, ItemMarkerSize } from './utils/itemMarkerUtils';
+export type ItemMarkerContentProps = {
+    icon: ItemMarkerIconType;
+    size?: ItemMarkerSize;
+    hasPointer?: boolean;
+    pointerPosition?: ItemMarkerPosition;
+    backgroundColor?: string;
+    iconColor?: string;
+    iconSize?: IconSize;
+    isActive?: boolean;
+    isTransparent?: boolean;
+    onClick?: () => void;
+};
+export declare const ItemMarkerContent: ({ icon, size, hasPointer, pointerPosition, backgroundColor, iconColor, iconSize, isActive, isTransparent, onClick }: ItemMarkerContentProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+interface ItemMarkerExpandedProps {
+    title: string;
+    description: string;
+    onClick?: () => void;
+}
+export declare const ItemMarkerExpanded: ({ title, description, onClick }: ItemMarkerExpandedProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IconSize, ItemMarkerIconType, ItemMarkerSize } from './utils/itemMarkerUtils';
+interface ItemMarkerIconProps {
+    icon: ItemMarkerIconType;
+    isActive?: boolean;
+    backgroundColor?: string;
+    iconColor?: string;
+    iconSize?: IconSize;
+    size?: ItemMarkerSize;
+}
+export declare const ItemMarkerIcon: React.FC<ItemMarkerIconProps>;
+export {};

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

@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react';
+import { ItemMarkerPosition } from './utils/itemMarkerUtils';
+export interface MultipleItemMarkersProps {
+    children: ReactNode;
+    isTransparent?: boolean;
+    pointerPosition?: ItemMarkerPosition;
+    className?: string;
+}
+/**
+ * Generic component that renders multiple item markers
+ *
+ *
+ * @param {ReactNode} children - Use for adding multiple ItemMarkers.
+ * @param {boolean} isTransparent - Boolean that determines whether the marker is transparent. When set to true, the marker is displayed; when false, the marker is made transparent (optional).
+ * @param {ItemMarkerPosition} pointerPosition - A value that determines the position of the pointer relative to the marker. This specifies where the pointer should be placed (optional).
+ * @param {string} className - Use for styling (optional).
+ *
+ * @returns {JSX.Element} The rendered component
+ */
+export declare const MultipleItemMarkers: React.FC<MultipleItemMarkersProps>;

package/src/components/itemMarker/utils/itemMarkerUtils.d.ts

@@ -0,0 +1,17 @@
+import { IconData } from '@equinor/eds-icons';
+export type ItemMarkerIconType = IconData | JSX.Element | string;
+export type IconSize = 16 | 24;
+export declare enum ItemMarkerSize {
+    Small = 28,
+    Default = 36,
+    Medium = 40,
+    Large = 48
+}
+export declare enum ItemMarkerPosition {
+    Center = "Center",
+    TopRight = "TopRight",
+    TopLeft = "TopLeft",
+    BottomRight = "BottomRight",
+    BottomLeft = "BottomLeft"
+}
+export declare const getPointerPositionClass: (position: ItemMarkerPosition | undefined) => string | undefined;

package/src/components/markedContent/MarkedContent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface MarkedContentProps {
     backgroundColor: string;
     textColor: string;

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

@@ -24,5 +24,12 @@ export interface MultilineTabsProps {
  *    children: The sectioned tab content.
  * }
  * @returns {*} {JSX.Element} Returns a custom EDS Tab bar and sectioned content.
+ * @example
+ * <MultilineTabs tabs={{title: "Footab"}, {title: "Bartab"}}>
+ *   <Tabs.Panels>
+ *       <Tabs.Panel>Foo</Tabs.Panel>
+ *       <Tabs.Panel>Bar</Tabs.Panel>
+ *   /Tabs.Panels>
+ * </MultilineTabs>
  */
 export declare const MultilineTabs: (props: MultilineTabsProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/searchBar/floatingSearchBar/FloatingSearchBar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Suggestion, SuggestionGroup } from '../common/types';
 export interface FloatingSearchBarProps {
     ariaLabel?: string;

package/src/components/secondaryMarker/SecondaryMarker.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface SecondaryMarkerProps {
     /**
      * The title

package/src/components/secondaryMarker/SecondaryMarkerExpander.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface SecondaryMarkerExpanderProps {
     /**
      * onClick for the expander

package/src/components/secondaryMarker/SecondaryMarkerWithChip.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface SecondaryMarkerWithChipProps {
     title: string;
     description: string;

package/src/components/secondaryMarker/SecondaryMarkerWrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface SecondaryMarkerWrapperProps {
     children: React.ReactNode;
     className?: string;

package/src/components/titleAndStatusLabel/titleAndStatusLabel.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface TitleAndStatusLabelProps {
     title: string;
     statusText?: string;

package/src/components/visualTextIcon/visualTextIcon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface VisualTextIconProps {
     /**
      * Text that replaces the icon

package/src/elements/index.d.ts

@@ -3,8 +3,8 @@ export { Icon } from './icon/Icon';
 export { RadioButtonGroup } from './radioButtonGroup/RadioButtonGroup';
 export * from './roundIconButton/RoundIconButton';
 export { SliderField } from './sliderField/SliderField';
-export type { ChipProps } from './tagIcon/Chip';
 export { Chip } from './tagIcon/Chip';
+export type { ChipProps } from './tagIcon/Chip';
 export { Chips } from './tagIcon/Chips';
 export { TagIcon } from './tagIcon/TagIcon';
 export { TagIconShadowWrapper } from './tagIcon/TagIconShadow';

package/src/elements/tagIcon/Chip.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
 export interface ChipProps {
     title: string;
     color: string;
+    id?: string;
+    textColor?: string;
     className?: string;
     onClick?: () => void;
 }

package/src/elements/tagIcon/Chips.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ChipProps } from './Chip';
 export interface ChipsProps {
     chips: ChipProps[];

package/src/elements/tagIcon/TagIconWithChips.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ChipsProps } from './Chips';
 export interface TagIconChipsProps extends ChipsProps {
     icon: React.JSX.Element;

package/src/hooks/useIsMobile.d.ts

@@ -1,5 +1,4 @@
 /**
- * Hook for checking if page is loaded from mobile device.
- * @returns boolean true if on mobile.
+ * @deprecated use isMobileDevice from @equinor/echo-utils instead
  */
 export declare function useIsMobile(): boolean;

package/src/icons/echoAssets/xld.d.ts

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

package/src/types/draggableItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface DraggableItem {
     id: number;
     element: React.ReactNode;

package/src/types/menuItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface MenuItem {
     labelId: string;
     label: string;