@equinor/echo-components 0.5.8-rc2 → 0.5.11

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

@@ -1,8 +1,8 @@
-import { PanelContextState } from './PanelContextWrapper';
-/**
- * Hook that exposes panel context, if not used within a PanelContext this hook will throw an error
- *
- * @export
- * @return {*}  {PanelContextState} Returns the existing panel context or throws error if not used within a PanelContext
- */
-export declare function usePanelContext(): PanelContextState;
+import { PanelContextState } from './PanelContextWrapper';
+/**
+ * Hook that exposes panel context, if not used within a PanelContext this hook will throw an error
+ *
+ * @export
+ * @return {*}  {PanelContextState} Returns the existing panel context or throws error if not used within a PanelContext
+ */
+export declare function usePanelContext(): PanelContextState;

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

@@ -1,41 +1,61 @@
-import React from 'react';
-export declare type ButtonType = 'rightBarButton' | 'bottomBarButton' | 'leftBarButton' | 'tabButton';
-export interface SidebarButtonProps {
-    text: string;
-    active: boolean;
-    onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * count must be bigger than 0.
-     */
-    count?: number;
-    buttonType: ButtonType;
-    refValue?: React.RefObject<HTMLButtonElement>;
-    id?: string;
-    children: React.ReactNode;
-}
-/**
- * The reusable button component that is used in sidebars/bottom bar or as a tab button.
- *
- * On desktop it will have an active border on the left/right/top
- * depending if ButtonType is set to: "rightBarButton"/"leftBarButton"/"bottomBarButton".
- * The tabButton have the active border on the left.
- *
- * 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: used for the tabButton.
- *     buttonType: decides which button type it is.
- *     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 declare 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 };

package/dist/components/sidesheet/sheet/Sheet.d.ts

@@ -1,19 +1,19 @@
-import React, { CSSProperties } from 'react';
-import { SideSheetOrientation } from '../enums';
-interface Style {
-    style?: CSSProperties;
-    className?: string;
-}
-interface SheetProps extends Style {
-    children: React.ReactNode;
-    side?: 'left' | 'right';
-    orientation?: SideSheetOrientation;
-    /**
-     * Default true. Use this to make Sheet push content to the side.
-     * Only affects "vertical" orientation.
-     */
-    floating?: boolean;
-}
-declare function Sheet({ side, orientation, floating, children, className, style }: SheetProps): JSX.Element;
-export type { SheetProps };
-export { Sheet };
+import React, { CSSProperties } from 'react';
+import { SideSheetOrientation } from '../enums';
+interface Style {
+    style?: CSSProperties;
+    className?: string;
+}
+interface SheetProps extends Style {
+    children: React.ReactNode;
+    side?: 'left' | 'right';
+    orientation?: SideSheetOrientation;
+    /**
+     * Default true. Use this to make Sheet push content to the side.
+     * Only affects "vertical" orientation.
+     */
+    floating?: boolean;
+}
+declare function Sheet({ side, orientation, floating, children, className, style }: SheetProps): JSX.Element;
+export type { SheetProps };
+export { Sheet };

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

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

package/dist/components/sidesheet/sheet/utils.d.ts

@@ -1,2 +1,2 @@
-import { SideSheetOrientation } from '../enums';
-export declare function getSheetContainerClass(side?: 'left' | 'right', orientation?: SideSheetOrientation, floating?: boolean): string;
+import { SideSheetOrientation } from '../enums';
+export declare function getSheetContainerClass(side?: 'left' | 'right', orientation?: SideSheetOrientation, floating?: boolean): string;

package/dist/components/sidesheet/sheetTopArea/SheetTopArea.d.ts

@@ -1,16 +1,16 @@
-import React from 'react';
-import { SideSheetOrientation } from '../enums';
-interface SheetTopAreaProps extends Partial<SheetOrientationActionsProps> {
-    closeSheet: () => void;
-    previous?: React.ReactNode;
-}
-declare function SheetTopArea({ orientation, onOrientationChange, closeSheet, previous }: SheetTopAreaProps): JSX.Element;
-interface SheetOrientationActionsProps {
-    orientation: SideSheetOrientation;
-    /**
-     * Providing this function allows the developer to control sheet orientation.
-     */
-    onOrientationChange: (orientationTarget: SideSheetOrientation) => void;
-}
-export type { SheetTopAreaProps };
-export { SheetTopArea };
+import React from 'react';
+import { SideSheetOrientation } from '../enums';
+interface SheetTopAreaProps extends Partial<SheetOrientationActionsProps> {
+    closeSheet: () => void;
+    previous?: React.ReactNode;
+}
+declare function SheetTopArea({ orientation, onOrientationChange, closeSheet, previous }: SheetTopAreaProps): JSX.Element;
+interface SheetOrientationActionsProps {
+    orientation: SideSheetOrientation;
+    /**
+     * Providing this function allows the developer to control sheet orientation.
+     */
+    onOrientationChange: (orientationTarget: SideSheetOrientation) => void;
+}
+export type { SheetTopAreaProps };
+export { SheetTopArea };

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

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

package/dist/components/splitView/SplitView.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface SplitViewProps {
+    children: [React.ReactChild, React.ReactChild];
+}
+declare function SplitView({ children }: SplitViewProps): JSX.Element;
+interface RightProps {
+    children: React.ReactChild;
+}
+declare function Right({ children }: RightProps): JSX.Element;
+export { SplitView, Right };

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

@@ -0,0 +1,8 @@
+import { Left } from './left/SplitViewLeft';
+import { Right, SplitView as BaseSplitView } from './SplitView';
+declare type SplitViewCompoundProps = typeof BaseSplitView & {
+    Left: typeof Left;
+    Right: typeof Right;
+};
+declare const SplitView: SplitViewCompoundProps;
+export { SplitView };

package/dist/components/splitView/left/SplitViewLeft.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface LeftProps {
+    children: React.ReactChild;
+    isMinimizable?: boolean;
+}
+declare function Left({ isMinimizable, children }: LeftProps): JSX.Element;
+export { Left };

package/dist/components/tagContextMenu/TagContextMenu.d.ts

@@ -1,30 +1,30 @@
-import React from 'react';
-interface TagContextMenuProps {
-    expanded: boolean;
-    setExpanded: (expanded: boolean) => void;
-    tagNo: string;
-    description: string;
-    openTagInformation: () => void;
-    selected: boolean;
-    selectedClassName?: string;
-    children: React.ReactNode;
-}
-/**
- * Component that renders a tag context menu that can be expanded and closed upon click
- * The condensed variant will only display the the relevant tag icon
- * The expanded variant will display relevant tag icon, tag number and tag description
- *
- * @param {TagContextMenuProps} {
- *     expanded: flag that state if the context menu should be expanded or not
- *     setExpanded: method to update the expanded flag
- *     tagNo: the tag no to display
- *     description: the tag description
- *     openTagInformation: method called when expanded context menu is called
- *     selected: Flag to handle if there are multiple context menu's on a page, and a selected style should be applied
- *     selectedClassName: styling used to handle multiple tag visible on the page at the same time, class will be added to tagIcon when context menu is not expanded
- *     children: Meant to be used to pass TagIcon component to this component
- * }
- * @return {*}  {JSX.Element} a tag context menu for the provided properties
- */
-export declare const TagContextMenu: React.FC<TagContextMenuProps>;
-export default TagContextMenu;
+import React from 'react';
+interface TagContextMenuProps {
+    expanded: boolean;
+    setExpanded: (expanded: boolean) => void;
+    tagNo: string;
+    description: string;
+    openTagInformation: () => void;
+    selected: boolean;
+    selectedClassName?: string;
+    children: React.ReactNode;
+}
+/**
+ * Component that renders a tag context menu that can be expanded and closed upon click
+ * The condensed variant will only display the the relevant tag icon
+ * The expanded variant will display relevant tag icon, tag number and tag description
+ *
+ * @param {TagContextMenuProps} {
+ *     expanded: flag that state if the context menu should be expanded or not
+ *     setExpanded: method to update the expanded flag
+ *     tagNo: the tag no to display
+ *     description: the tag description
+ *     openTagInformation: method called when expanded context menu is called
+ *     selected: Flag to handle if there are multiple context menu's on a page, and a selected style should be applied
+ *     selectedClassName: styling used to handle multiple tag visible on the page at the same time, class will be added to tagIcon when context menu is not expanded
+ *     children: Meant to be used to pass TagIcon component to this component
+ * }
+ * @return {*}  {JSX.Element} a tag context menu for the provided properties
+ */
+export declare const TagContextMenu: React.FC<TagContextMenuProps>;
+export default TagContextMenu;

package/dist/components/timePicker/TimePicker.d.ts

@@ -1,12 +1,12 @@
-import React from 'react';
-export interface TimePickerProps {
-    id: string;
-    value?: string;
-    label: string;
-    onValueChanged?: (time: string) => void;
-    className?: string;
-    readOnly?: boolean;
-    timeRange?: string[];
-}
-export declare const TimePicker: React.FC<TimePickerProps>;
-export default TimePicker;
+import React from 'react';
+export interface TimePickerProps {
+    id: string;
+    value?: string;
+    label: string;
+    onValueChanged?: (time: string) => void;
+    className?: string;
+    readOnly?: boolean;
+    timeRange?: string[];
+}
+export declare const TimePicker: React.FC<TimePickerProps>;
+export default TimePicker;

package/dist/elements/draggableItemsWrapper/DraggableItemsWrapper.d.ts

@@ -1,18 +1,18 @@
-import React, { CSSProperties } from 'react';
-import { DraggableItem } from '../../types/draggableItem';
-export interface DraggableItemsWrapperProps {
-    style?: CSSProperties;
-    onChange: (newDragItems: DraggableItem[], oldIndex: number | undefined, newIndex: number | undefined) => void;
-    children: React.ReactNode[];
-}
-/**
- * Component that renders a wrapper for items that are draggable
- *
- * @param {DraggableItemsWrapperProps} {
- *     style: style element to override wrapper style
- *     onChange: method that will be called when elements have be reordered inside the wrapper
- *     children: list of elements that can be reordered
- * }
- * @return {*}  {JSX.Element}
- */
-export declare const DraggableItemsWrapper: React.FC<DraggableItemsWrapperProps>;
+import React, { CSSProperties } from 'react';
+import { DraggableItem } from '../../types/draggableItem';
+export interface DraggableItemsWrapperProps {
+    style?: CSSProperties;
+    onChange: (newDragItems: DraggableItem[], oldIndex: number | undefined, newIndex: number | undefined) => void;
+    children: React.ReactNode[];
+}
+/**
+ * Component that renders a wrapper for items that are draggable
+ *
+ * @param {DraggableItemsWrapperProps} {
+ *     style: style element to override wrapper style
+ *     onChange: method that will be called when elements have be reordered inside the wrapper
+ *     children: list of elements that can be reordered
+ * }
+ * @return {*}  {JSX.Element}
+ */
+export declare const DraggableItemsWrapper: React.FC<DraggableItemsWrapperProps>;

package/dist/elements/icon/Icon.d.ts

@@ -1,20 +1,20 @@
-import React from 'react';
-export interface IconProps {
-    name: string;
-    color: string;
-    title?: string;
-    className?: string;
-    size?: 16 | 24 | 32 | 40 | 48;
-}
-/**
- * Component that work's as a eds icon wrapper, it imports all eds possible icons
- *
- * @param {IconProps} {
- *  name: The name of the icon to be displayed
- *  title: The html title to use
- *  color:The color to icon should have
- *  size: The wanted size of the icon. Possible values are 16, 24, 32, 40 and 48
- * }
- * @return {*} {JSX.Element} A icon for the provided information
- */
-export declare const Icon: React.FC<IconProps>;
+import React from 'react';
+export interface IconProps {
+    name: string;
+    color: string;
+    title?: string;
+    className?: string;
+    size?: 16 | 24 | 32 | 40 | 48;
+}
+/**
+ * Component that work's as a eds icon wrapper, it imports all eds possible icons
+ *
+ * @param {IconProps} {
+ *  name: The name of the icon to be displayed
+ *  title: The html title to use
+ *  color:The color to icon should have
+ *  size: The wanted size of the icon. Possible values are 16, 24, 32, 40 and 48
+ * }
+ * @return {*} {JSX.Element} A icon for the provided information
+ */
+export declare const Icon: React.FC<IconProps>;

package/dist/elements/index.d.ts

@@ -1,8 +1,8 @@
-export * from './draggableItemsWrapper/DraggableItemsWrapper';
-export { Icon } from './icon/Icon';
-export { RadioButtonGroup } from './radioButtonGroup/RadioButtonGroup';
-export * from './roundIconButton/RoundIconButton';
-export { SliderField } from './sliderField/SliderField';
-export { TagIcon } from './tagIcon/TagIcon';
-export { TagIconShadowWrapper } from './tagIcon/TagIconShadow';
-export * from './textIconButton/TextIconButton';
+export * from './draggableItemsWrapper/DraggableItemsWrapper';
+export { Icon } from './icon/Icon';
+export { RadioButtonGroup } from './radioButtonGroup/RadioButtonGroup';
+export * from './roundIconButton/RoundIconButton';
+export { SliderField } from './sliderField/SliderField';
+export { TagIcon } from './tagIcon/TagIcon';
+export { TagIconShadowWrapper } from './tagIcon/TagIconShadow';
+export * from './textIconButton/TextIconButton';

package/dist/elements/radioButtonGroup/RadioButtonGroup.d.ts

@@ -1,20 +1,20 @@
-import React, { CSSProperties } from 'react';
-import { RadioButtonItem } from '../../types/radioButtonItem';
-export interface RadioButtonGroupProps {
-    title: string;
-    options: RadioButtonItem[];
-    style?: CSSProperties;
-    onSelected: (index: number) => void;
-}
-/**
- * Component that renders a Radio Button Group with a set of options to choose from
- *
- * @param {RadioButtonGroupProps} {
- *     title: The title of the radio button group,
- *     options: List of items to be displayed as options,
- *     style: Style element to override wrapper style,
- *     onSelected: Method to be called when the selected value is changed
- * }
- * @return {*}  {JSX.Element}
- */
-export declare const RadioButtonGroup: React.FC<RadioButtonGroupProps>;
+import React, { CSSProperties } from 'react';
+import { RadioButtonItem } from '../../types/radioButtonItem';
+export interface RadioButtonGroupProps {
+    title: string;
+    options: RadioButtonItem[];
+    style?: CSSProperties;
+    onSelected: (index: number) => void;
+}
+/**
+ * Component that renders a Radio Button Group with a set of options to choose from
+ *
+ * @param {RadioButtonGroupProps} {
+ *     title: The title of the radio button group,
+ *     options: List of items to be displayed as options,
+ *     style: Style element to override wrapper style,
+ *     onSelected: Method to be called when the selected value is changed
+ * }
+ * @return {*}  {JSX.Element}
+ */
+export declare const RadioButtonGroup: React.FC<RadioButtonGroupProps>;

package/dist/elements/roundIconButton/RoundIconButton.d.ts

@@ -1,13 +1,13 @@
-import React, { EventHandler, ReactElement, SyntheticEvent } from 'react';
-export declare enum RoundIconButtonVariants {
-    OpenCloseButton = "openCloseButton",
-    ToggleButton = "toggleButton"
-}
-export interface RoundIconButtonProps {
-    label: string;
-    active?: boolean;
-    variant?: RoundIconButtonVariants;
-    children?: ReactElement;
-    onClick?: EventHandler<SyntheticEvent>;
-}
-export declare const RoundIconButton: React.FC<RoundIconButtonProps>;
+import React, { EventHandler, ReactElement, SyntheticEvent } from 'react';
+export declare enum RoundIconButtonVariants {
+    OpenCloseButton = "openCloseButton",
+    ToggleButton = "toggleButton"
+}
+export interface RoundIconButtonProps {
+    label: string;
+    active?: boolean;
+    variant?: RoundIconButtonVariants;
+    children?: ReactElement;
+    onClick?: EventHandler<SyntheticEvent>;
+}
+export declare const RoundIconButton: React.FC<RoundIconButtonProps>;

package/dist/elements/sliderField/SliderField.d.ts

@@ -1,25 +1,25 @@
-import React, { CSSProperties } from 'react';
-export interface SliderFieldProps {
-    value: number;
-    min: number;
-    max: number;
-    labels?: string[];
-    title: string;
-    onChange: (value: number) => void;
-    style?: CSSProperties;
-}
-/**
- * Component that renders a slider with numeric or custom values
- *
- * @param {SliderFieldProps} {
- *     value: Current value of the slider,
- *     min: Minimum value of the slider,
- *     max: Maximum value of the slider,
- *     labels: List of labels to use if the slider should not display numeric values,
- *     title: Text shown as title of the slider,
- *     onChange: Method that will be called if the slider value is changed,
- *     style: style element to override wrapper style
- * }
- * @return {*}  {JSX.Element}
- */
-export declare const SliderField: React.FC<SliderFieldProps>;
+import React, { CSSProperties } from 'react';
+export interface SliderFieldProps {
+    value: number;
+    min: number;
+    max: number;
+    labels?: string[];
+    title: string;
+    onChange: (value: number) => void;
+    style?: CSSProperties;
+}
+/**
+ * Component that renders a slider with numeric or custom values
+ *
+ * @param {SliderFieldProps} {
+ *     value: Current value of the slider,
+ *     min: Minimum value of the slider,
+ *     max: Maximum value of the slider,
+ *     labels: List of labels to use if the slider should not display numeric values,
+ *     title: Text shown as title of the slider,
+ *     onChange: Method that will be called if the slider value is changed,
+ *     style: style element to override wrapper style
+ * }
+ * @return {*}  {JSX.Element}
+ */
+export declare const SliderField: React.FC<SliderFieldProps>;