@equinor/echo-components 0.5.19-rc1 → 0.5.24

package/dist/components/index.d.ts

@@ -1,22 +1,22 @@
-export * from './buttonWithPopover/ButtonWithPopover';
-export * from './contextMenu/ContextMenu';
-export * from './contextMenuPopover/DataInfoButton';
-export * from './datePicker/ReactDatePicker';
-export * from './dialogGenerator/DialogGenerator';
-export * from './dropdown/Dropdown';
-export * from './echoBottomBar/EchoBottomBar';
-export * from './echoCard/index';
-export * from './echoHeader/EchoHeader';
-export * from './echoTooltip';
-export * from './floatingActionButton/FloatingActionButton';
-export * from './floatingSearchBar/FloatingSearchBar';
-export * from './inlineTagIconLink/InlineTagIconLink';
-export * from './listItem';
-export * from './listRow/ListRow';
-export * from './rightPanel';
-export * from './sidebarButton/SidebarButton';
-export * from './sidesheet';
-export * from './splitView';
-export * from './tagContextMenu/TagContextMenu';
-export * from './timePicker/TimePicker';
-export * from './workOrderListItem/WorkOrdertListItem';
+export * from './buttonWithPopover/ButtonWithPopover';
+export * from './contextMenu/ContextMenu';
+export * from './contextMenuPopover/DataInfoButton';
+export * from './datePicker/ReactDatePicker';
+export * from './dialogGenerator/DialogGenerator';
+export * from './dropdown/Dropdown';
+export * from './echoBottomBar/EchoBottomBar';
+export * from './echoCard/index';
+export * from './echoHeader/EchoHeader';
+export * from './echoTooltip';
+export * from './floatingActionButton/FloatingActionButton';
+export * from './floatingSearchBar/FloatingSearchBar';
+export * from './inlineTagIconLink/InlineTagIconLink';
+export * from './listItem';
+export * from './listRow/ListRow';
+export * from './rightPanel';
+export * from './sidebarButton/SidebarButton';
+export * from './sidesheet';
+export * from './splitView';
+export * from './tagContextMenu/TagContextMenu';
+export * from './timePicker/TimePicker';
+export * from './workOrderListItem/WorkOrdertListItem';

package/dist/components/inlineTagIconLink/InlineTagIconLink.d.ts

@@ -1,12 +1,12 @@
-import React from 'react';
-export interface InlineTagIconLinkProps {
-    onClickHandler?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    tagNo: string;
-    description: string;
-    tagCategoryDescription?: string;
-    icon?: string | React.ReactNode;
-    legendColor: string;
-    disableHover?: boolean;
-}
-export declare const InlineTagIconLink: React.FC<InlineTagIconLinkProps>;
-export default InlineTagIconLink;
+import React from 'react';
+export interface InlineTagIconLinkProps {
+    onClickHandler?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    tagNo: string;
+    description: string;
+    tagCategoryDescription?: string;
+    icon?: string | React.ReactNode;
+    legendColor: string;
+    disableHover?: boolean;
+}
+export declare const InlineTagIconLink: React.FC<InlineTagIconLinkProps>;
+export default InlineTagIconLink;

package/dist/components/listItem/ListItem.d.ts

@@ -1,50 +1,50 @@
-import React, { CSSProperties } from 'react';
-interface VisualComponent {
-    icon?: never;
-    visual?: React.ReactNode;
-}
-interface IconOptions {
-    icon?: {
-        name: string;
-        color?: string;
-        backgroundColor?: string;
-    };
-    visual?: never;
-}
-/**
- * Make property "icon" and "visual" mutually exclusive
- */
-type WithVisualOrIconOptions = VisualComponent | IconOptions;
-interface ListItemBaseProps {
-    /**
-     * Add List Action Area
-     */
-    listAction?: React.ReactNode;
-    /**
-     * Main content Area
-     */
-    primary: string | React.ReactNode;
-    secondary?: string | React.ReactNode;
-    tertiary?: string | React.ReactNode;
-    /**
-     * Caption Area
-     */
-    caption?: string | React.ReactNode;
-    /**
-     * Add Item Action Area
-     */
-    itemAction?: React.ReactNode;
-    /**
-     * Change container element. Default is "li"
-     */
-    as?: React.ElementType;
-    onCardClick?: () => void;
-    /**
-     * Style Modification
-     */
-    className?: string;
-    style?: CSSProperties;
-}
-export type ListItemProps = ListItemBaseProps & WithVisualOrIconOptions;
-declare function ListItem(props: ListItemProps): JSX.Element;
-export { ListItem };
+import React, { CSSProperties } from 'react';
+interface VisualComponent {
+    icon?: never;
+    visual?: React.ReactNode;
+}
+interface IconOptions {
+    icon?: {
+        name: string;
+        color?: string;
+        backgroundColor?: string;
+    };
+    visual?: never;
+}
+/**
+ * Make property "icon" and "visual" mutually exclusive
+ */
+type WithVisualOrIconOptions = VisualComponent | IconOptions;
+interface ListItemBaseProps {
+    /**
+     * Add List Action Area
+     */
+    listAction?: React.ReactNode;
+    /**
+     * Main content Area
+     */
+    primary: string | React.ReactNode;
+    secondary?: string | React.ReactNode;
+    tertiary?: string | React.ReactNode;
+    /**
+     * Caption Area
+     */
+    caption?: string | React.ReactNode;
+    /**
+     * Add Item Action Area
+     */
+    itemAction?: React.ReactNode;
+    /**
+     * Change container element. Default is "li"
+     */
+    as?: React.ElementType;
+    onCardClick?: () => void;
+    /**
+     * Style Modification
+     */
+    className?: string;
+    style?: CSSProperties;
+}
+export type ListItemProps = ListItemBaseProps & WithVisualOrIconOptions;
+declare function ListItem(props: ListItemProps): JSX.Element;
+export { ListItem };

package/dist/components/listItem/index.d.ts

@@ -1 +1 @@
-export * from './ListItem';
+export * from './ListItem';

package/dist/components/listRow/ListRow.d.ts

@@ -1,29 +1,29 @@
-import React, { CSSProperties } from 'react';
-import { ExpandableRowProps, IconListItem } from '@types';
-export interface ListRowProps {
-    isDraggable: boolean;
-    item: IconListItem;
-    expandable?: ExpandableRowProps;
-    rowIndex: number;
-    style?: CSSProperties;
-}
-/**
- * Component that renders one row in a list. The row can be marked as draggable and expandable
- *
- * @param {ListRowProps} {
- *     isDraggable: flag to indicate that the row can be rearranged in a list
- *     item: {      The item to be rendered in the row
- *          title: the title of the item in the row
- *          subtitle: the subtitle of the item in the row
- *          icons: the icons that will be displayed on the same row, and their respective actions
- *     }
- *     expandable: { object with properties to handle if the row is expandable. If undefined the row cannot be expanded
- *          iconItems: the items that will be displayed if row is expanded, and their respective actions
- *          expanded: flag to indicate if the row is expanded or not
- *          setExpanded: method that updates the expanded flag
- *     }
- *     style: style element to override wrapper style
- * }
- * @return {*}  {JSX.Element} a row element to be used in a list
- */
-export declare const ListRow: React.FC<ListRowProps>;
+import React, { CSSProperties } from 'react';
+import { ExpandableRowProps, IconListItem } from '@types';
+export interface ListRowProps {
+    isDraggable: boolean;
+    item: IconListItem;
+    expandable?: ExpandableRowProps;
+    rowIndex: number;
+    style?: CSSProperties;
+}
+/**
+ * Component that renders one row in a list. The row can be marked as draggable and expandable
+ *
+ * @param {ListRowProps} {
+ *     isDraggable: flag to indicate that the row can be rearranged in a list
+ *     item: {      The item to be rendered in the row
+ *          title: the title of the item in the row
+ *          subtitle: the subtitle of the item in the row
+ *          icons: the icons that will be displayed on the same row, and their respective actions
+ *     }
+ *     expandable: { object with properties to handle if the row is expandable. If undefined the row cannot be expanded
+ *          iconItems: the items that will be displayed if row is expanded, and their respective actions
+ *          expanded: flag to indicate if the row is expanded or not
+ *          setExpanded: method that updates the expanded flag
+ *     }
+ *     style: style element to override wrapper style
+ * }
+ * @return {*}  {JSX.Element} a row element to be used in a list
+ */
+export declare const ListRow: React.FC<ListRowProps>;

package/dist/components/rightPanel/PanelStore.d.ts

@@ -1,9 +1,9 @@
-import { PanelSize } from '@types';
-import * as zustand from 'zustand';
-export interface PanelState {
-    activePanel: string | undefined;
-    panelSize: PanelSize;
-    updateActivePanel: (newActivePanel: string | undefined) => void;
-    updatePanelSize: (newPanelSize: PanelSize) => void;
-}
-export declare const usePanelStore: zustand.UseBoundStore<zustand.StoreApi<PanelState>>;
+import { PanelSize } from '@types';
+import * as zustand from 'zustand';
+export interface PanelState {
+    activePanel: string | undefined;
+    panelSize: PanelSize;
+    updateActivePanel: (newActivePanel: string | undefined) => void;
+    updatePanelSize: (newPanelSize: PanelSize) => void;
+}
+export declare const usePanelStore: zustand.UseBoundStore<zustand.StoreApi<PanelState>>;

package/dist/components/rightPanel/index.d.ts

@@ -1,5 +1,6 @@
-export * from './menuButton/MenuButton';
-export * from './panel/Panel';
-export * from './panelContent/PanelContent';
-export * from './PanelStore';
-export * from './panelWrapper/PanelWrapper';
+export * from './menuButton/MenuButton';
+export * from './panel/Panel';
+export * from './panelContent/PanelContent';
+export * from './panelContent/PanelContentWrapper';
+export * from './PanelStore';
+export * from './panelWrapper/PanelWrapper';

package/dist/components/rightPanel/menuButton/MenuButton.d.ts

@@ -1,24 +1,24 @@
-import React from 'react';
-interface MenuButtonProps {
-    text: string;
-    active: boolean;
-    onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
-    children: React.ReactNode;
-    id?: string;
-}
-/**
- * The menu bottom items
- * On desktop it will have an active border on the left,
- * and on mobile the active border will be on the bottom
- * Contains an icon and a descriptive text
- * @param {*} {
- *     text, the text below the icon, also displayed on hover
- *     active, boolean describing the buttons active state
- *     children, the icon to be displayed
- *     onClick, the on click event
- *     id: the id of the button in case its needed
- * }
- * @return {*}  {JSX.Element}
- */
-declare const MenuButton: React.ForwardRefExoticComponent<MenuButtonProps & React.RefAttributes<HTMLButtonElement | null>>;
-export default MenuButton;
+import React from 'react';
+interface MenuButtonProps {
+    text: string;
+    active: boolean;
+    onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    children: React.ReactNode;
+    id?: string;
+}
+/**
+ * The menu bottom items
+ * On desktop it will have an active border on the left,
+ * and on mobile the active border will be on the bottom
+ * Contains an icon and a descriptive text
+ * @param {*} {
+ *     text, the text below the icon, also displayed on hover
+ *     active, boolean describing the buttons active state
+ *     children, the icon to be displayed
+ *     onClick, the on click event
+ *     id: the id of the button in case its needed
+ * }
+ * @return {*}  {JSX.Element}
+ */
+export declare const MenuButton: React.ForwardRefExoticComponent<MenuButtonProps & React.RefAttributes<HTMLButtonElement | null>>;
+export default MenuButton;

package/dist/components/rightPanel/panel/Panel.d.ts

@@ -1,18 +1,25 @@
-import React from 'react';
-import { MenuItem } from '../../../types/menuItem';
-interface PanelProps {
-    menuItems: MenuItem[];
-    header: string | React.ReactNode;
-}
-/**
- * The actual right side panel. This component wraps the panel with a panel state
- *
- * @param {PanelProps} {
- * menuItems, the items to be displayed in the menu and its belonging panels
- * header, the header that will be displayed on mobile.
- * If its a string then it will only display a header text. But it can also be a component with self defined html
- * }
- * @return {*}  {JSX.Element}
- */
-export declare const Panel: React.FC<PanelProps>;
-export default Panel;
+import React from 'react';
+import { MenuItem } from '../../../types/menuItem';
+interface PanelProps {
+    menuItems: MenuItem[];
+    header: string | React.ReactNode;
+}
+/**
+ * The actual right side panel. This component wraps the panel with a panel state
+ *
+ * @param {PanelProps} {
+ * menuItems: the items to be displayed in the menu and its belonging panels
+ *      labelId: the id of the menuItems
+ *      label: the buttons label visible ot the user. Truncated if too long
+ *      icon: the icon displayed for the button
+ *      skipPanelContent: if true you have to provide your own menuButton and panel content
+ *      isBottomItem: places the menuButton for this item at the bottom of the menu (desktop), has no effect on mobile.
+ *      panelSize: decides the size of the panel. Narrow is 320 and wide is 480. Wide is default
+ *      component: The panel component to display when panel is actibe
+ * header, the header that will be displayed on mobile.
+ * If its a string then it will only display a header text. But it can also be a component with self defined html
+ * }
+ * @return {*}  {JSX.Element}
+ */
+export declare const Panel: React.FC<PanelProps>;
+export default Panel;

package/dist/components/rightPanel/panelContent/PanelContent.d.ts

@@ -1,23 +1,23 @@
-import React from 'react';
-interface PanelContentProps {
-    header: string;
-    children: React.ReactNode;
-    backToMainPanel?: () => void;
-    footer?: React.ReactNode;
-}
-/**
- * The component that wraps the panel drawer content
- * This components displays a header with close and possible back button
- * It also displays the content wrapped with some css
- *
- * @param {PanelContentProps} {
- *     header, the header text to display
- *     children, the panels content
- *     backToMainPanel: optional parameter that controls whether the panel should have a back button or not
- *      to be used in cases where there are panels within panels,
- *     footer: optional param, if used a footer will be shown in the panel content
- * }
- * @return {*}  {JSX.Element}
- */
-export declare const PanelContent: React.FC<PanelContentProps>;
-export default PanelContent;
+import React from 'react';
+interface PanelContentProps {
+    header: string;
+    children: React.ReactNode;
+    backToMainPanel?: () => void;
+    footer?: React.ReactNode;
+}
+/**
+ * The component that wraps the panel drawer content
+ * This components displays a header with close and possible back button
+ * It also displays the content wrapped with some css
+ *
+ * @param {PanelContentProps} {
+ *     header, the header text to display
+ *     children, the panels content
+ *     backToMainPanel: optional parameter that controls whether the panel should have a back button or not
+ *      to be used in cases where there are panels within panels,
+ *     footer: optional param, if used a footer will be shown in the panel content
+ * }
+ * @return {*}  {JSX.Element}
+ */
+export declare const PanelContent: React.FC<PanelContentProps>;
+export default PanelContent;

package/dist/components/rightPanel/panelContent/PanelContentWrapper.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface PanelContentWrapperProps {
+    children: React.ReactNode;
+}
+/**
+ * Component that can be used to wrap content within a panel
+ * This will give the whole content a scrollbar
+ * Has padding of 16px
+ *
+ * @param {PanelContentWrapperProps} {
+ *     children, the panels content
+ * }
+ * @return {*}  {JSX.Element}
+ */
+export declare const PanelContentWrapper: React.FC<PanelContentWrapperProps>;
+export default PanelContentWrapper;

package/dist/components/rightPanel/panelWrapper/PanelWrapper.d.ts

@@ -1,21 +1,21 @@
-import React from 'react';
-import { MenuItem } from '../../../types/menuItem';
-interface PanelWrapperProps {
-    menuItems: MenuItem[];
-    header: string | React.ReactNode;
-}
-/**
- * Component that display's the buttons in a panel. It will automatically try to calculate how many buttons to display
- * and how many buttons to hide behind the more menu.
- * It controls which panel to display when a button is clicked
- * On desktop this component will render on the right side, and on the top in mobile view
- *
- * @param {*} {
- * menuItems, the items to be displayed in the menu and its belonging panels
- * header, the header that will be displayed on mobile.
- * If its a string then it will only display a header text. But it can also be a component with self defined html
- * }
- * @return {*}  {JSX.Element}
- */
-export declare const PanelWrapper: React.FC<PanelWrapperProps>;
-export default PanelWrapper;
+import React from 'react';
+import { MenuItem } from '../../../types/menuItem';
+interface PanelWrapperProps {
+    menuItems: MenuItem[];
+    header: string | React.ReactNode;
+}
+/**
+ * Component that display's the buttons in a panel. It will automatically try to calculate how many buttons to display
+ * and how many buttons to hide behind the more menu.
+ * It controls which panel to display when a button is clicked
+ * On desktop this component will render on the right side, and on the top in mobile view
+ *
+ * @param {*} {
+ * menuItems, the items to be displayed in the menu and its belonging panels
+ * header, the header that will be displayed on mobile.
+ * If its a string then it will only display a header text. But it can also be a component with self defined html
+ * }
+ * @return {*}  {JSX.Element}
+ */
+export declare const PanelWrapper: React.FC<PanelWrapperProps>;
+export default PanelWrapper;

package/dist/components/sidebarButton/SidebarButton.d.ts

@@ -1,61 +1,61 @@
-import React from 'react';
-export type ButtonPosition = 'right' | 'bottom' | 'left' | 'tab';
-export interface SidebarButtonProps {
-    /**
-     * The text below the icon.
-     */
-    text: string;
-    /**
-     * Boolean describing the button's active state.
-     */
-    active: boolean;
-    /**
-     * The onClick event.
-     */
-    onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Will display a count on the button, and must be bigger than 0.
-     */
-    count?: number;
-    /**
-     * Decides the active border. Could be set to 'right'/'bottom'/'left', depending if the button is placed in the right bar/left bar/bottom bar, or could be set to 'tab' if it's a tab button.
-     */
-    buttonPosition: ButtonPosition;
-    /**
-     * A reference value, in case it's needed.
-     */
-    refValue?: React.RefObject<HTMLButtonElement>;
-    /**
-     * The id of the button, in case it's needed.
-     */
-    id?: string;
-    /**
-     * The icon to be displayed.
-     */
-    children: React.ReactNode;
-}
-/**
- * The reusable button component that is used in the sidebars/bottom bar.
- *
- * On desktop it will have an active border on the left/right/top,
- * depending if the ButtonPosition is set to: "right"/"left"/"bottom".
- * The active border will be on the right if it's a tab button and ButtonPosition is set to: "tab".
- *
- * On mobile with the right sidebar, the active border will be on the bottom.
- * In landscape mode with the bottom bar, the active border will be on the right.
- *
- * The button contains an icon and a descriptive text.
- * @param {*} {
- *     text: the text below the icon.
- *     active: boolean describing the button's active state.
- *     onClick: the onClick event.
- *     count: will display a count on the button.
- *     buttonPosition: decides the active border, depending if the button is placed in the right bar/left bar/bottom bar.
- *     refValue: a reference value, in case it's needed.
- *     id: the id of the button, in case it's needed.
- *     children: the icon to be displayed.
- * }
- * @return {*}  {JSX.Element}
- */
-export declare const SidebarButton: React.FC<SidebarButtonProps>;
-export default SidebarButton;
+import React from 'react';
+export type ButtonPosition = 'right' | 'bottom' | 'left' | 'tab';
+export interface SidebarButtonProps {
+    /**
+     * The text below the icon.
+     */
+    text: string;
+    /**
+     * Boolean describing the button's active state.
+     */
+    active: boolean;
+    /**
+     * The onClick event.
+     */
+    onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Will display a count on the button, and must be bigger than 0.
+     */
+    count?: number;
+    /**
+     * Decides the active border. Could be set to 'right'/'bottom'/'left', depending if the button is placed in the right bar/left bar/bottom bar, or could be set to 'tab' if it's a tab button.
+     */
+    buttonPosition: ButtonPosition;
+    /**
+     * A reference value, in case it's needed.
+     */
+    refValue?: React.RefObject<HTMLButtonElement>;
+    /**
+     * The id of the button, in case it's needed.
+     */
+    id?: string;
+    /**
+     * The icon to be displayed.
+     */
+    children: React.ReactNode;
+}
+/**
+ * The reusable button component that is used in the sidebars/bottom bar.
+ *
+ * On desktop it will have an active border on the left/right/top,
+ * depending if the ButtonPosition is set to: "right"/"left"/"bottom".
+ * The active border will be on the right if it's a tab button and ButtonPosition is set to: "tab".
+ *
+ * On mobile with the right sidebar, the active border will be on the bottom.
+ * In landscape mode with the bottom bar, the active border will be on the right.
+ *
+ * The button contains an icon and a descriptive text.
+ * @param {*} {
+ *     text: the text below the icon.
+ *     active: boolean describing the button's active state.
+ *     onClick: the onClick event.
+ *     count: will display a count on the button.
+ *     buttonPosition: decides the active border, depending if the button is placed in the right bar/left bar/bottom bar.
+ *     refValue: a reference value, in case it's needed.
+ *     id: the id of the button, in case it's needed.
+ *     children: the icon to be displayed.
+ * }
+ * @return {*}  {JSX.Element}
+ */
+export declare const SidebarButton: React.FC<SidebarButtonProps>;
+export default SidebarButton;

package/dist/components/sidesheet/enums.d.ts

@@ -1,5 +1,5 @@
-export declare enum SideSheetOrientation {
-    Vertical = "vertical",
-    Horizontal = "horizontal",
-    Fullscreen = "fullscreen"
-}
+export declare enum SideSheetOrientation {
+    Vertical = "vertical",
+    Horizontal = "horizontal",
+    Fullscreen = "fullscreen"
+}

package/dist/components/sidesheet/index.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
-import { SideSheetOrientation } from './enums';
-import { SheetProps } from './sheet';
-import { SheetTopAreaProps } from './sheetTopArea';
-interface SideSheetProps extends SheetProps, SheetTopAreaProps {
-    open: boolean;
-    children: React.ReactNode;
-}
-declare function SideSheet({ open, side, orientation, floating, children, className, style, ...topBarProps }: SideSheetProps): JSX.Element | null;
-export type { SideSheetProps };
-export { SideSheet, SideSheetOrientation };
+import React from 'react';
+import { SideSheetOrientation } from './enums';
+import { SheetProps } from './sheet';
+import { SheetTopAreaProps } from './sheetTopArea';
+interface SideSheetProps extends SheetProps, SheetTopAreaProps {
+    open: boolean;
+    children: React.ReactNode;
+}
+declare function SideSheet({ open, side, orientation, floating, children, className, style, ...topBarProps }: SideSheetProps): JSX.Element | null;
+export type { SideSheetProps };
+export { SideSheet, SideSheetOrientation };