@skedulo/sked-ui 21.0.0-beta.1 → 21.0.1

package/dist/components/popout/PopOut.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { IPopOutBase } from './PopOutBase';
-export interface IPopOutProps {
+declare type IPopOutBaseSubset = Omit<IPopOutBase, 'visible' | 'trigger'>;
+export interface IPopOutProps extends IPopOutBaseSubset {
     /**
      * The element you are rendering the content from
      */
@@ -9,19 +10,12 @@ export interface IPopOutProps {
      * The content to pop out
      */
     children: (closePopOut: () => void) => JSX.Element | React.ReactNode;
-    className?: string;
-    displayInline?: boolean;
     /**
-     * The position where the content will try to fit
-     */
-    placement?: IPopOutBase['placement'];
-    /**
-     * Defaults to false
+     * Close on clicking in the content area.  Defaults to false
      */
     closeOnFirstClick?: boolean;
     /**
-     * Defaults to false
-     * If you've set closeOnFirstClick to true, you don't need this
+     * Close content on clicking outside the content area. Defaults to false
      */
     closeOnOuterClick?: boolean;
     /**
@@ -30,13 +24,9 @@ export interface IPopOutProps {
      */
     closeOnScroll?: boolean;
     /**
-     * Delay the render of the info window after the trigger event has been fired
+     * Delay the render of the pop out after the trigger event has been fired
      */
     delayShow?: number;
-    /**
-     * Override the default PopOut container which is a Portal
-     */
-    popOutContainer?: IPopOutBase['popOutContainer'];
     /**
      * Open the popout container on mount, ignoring any trigger.
      */
@@ -45,20 +35,27 @@ export interface IPopOutProps {
      * When the popout hides, fire this callback.
      */
     onClose?: () => void;
+    /**
+     * Event to fire on mouse leave of reference content
+     */
     onMouseLeave?: React.MouseEventHandler<HTMLSpanElement>;
+    /**
+     * Event to fire on mouse over of reference content
+     */
     onMouseOver?: React.MouseEventHandler<HTMLSpanElement>;
+    /**
+     * Prevent the display of the info window regardless of the trigger event
+     */
     preventShow?: boolean;
-    showArrow?: boolean;
-    triggerClassName?: string;
 }
 export interface IPopOutState {
     isOpen: boolean;
 }
 /**
- * The PopOut component displays/hides it's children when either the supplied trigger is clicked or if the openOnMount prop is supplied.
- * It should now be used in preference of InfoWindow where possible.
+ * The PopOut component displays/hides its children when either the supplied trigger is clicked or if the openOnMount prop is supplied.
  * Default placement is bottom-start
  *
  * @requires PopOutBase
  */
 export declare const PopOut: (props: IPopOutProps) => JSX.Element;
+export {};

package/dist/components/popout/PopOutBase.d.ts

@@ -1,20 +1,34 @@
 import * as React from 'react';
 import * as PopperJS from '@popperjs/core';
+import { StrictModifier } from 'react-popper';
 export interface IPopOutBase {
     /**
      * The element you are rendering the content from
      */
     className?: string;
+    /**
+     * Whether to add inline-block to the reference element
+     */
     displayInline?: boolean;
     trigger: JSX.Element;
     triggerClassName?: string;
     visible?: boolean;
+    /**
+     * Placement options supported by PopperJS
+     */
     placement?: PopperJS.Options['placement'];
+    /**
+     * Modifiers supported by PopperJS if overriding defaults
+     */
     modifiers?: PopperJS.Options['modifiers'];
+    /**
+     * Optional PopOut container to override Portal component if needed
+     */
     popOutContainer?: (PopperWrappedContent: JSX.Element) => JSX.Element;
     children?: React.ReactNode;
     showArrow?: boolean;
 }
+export declare const DEFAULT_MODIFIERS: StrictModifier[];
 /**
  * PopOutBase uses react-popper/popperjs under the hood and is a wrapper that sets up the Popperjs Manager, Reference and Popper.
  * It will place any content next to the trigger based on whether it fits and what placement you specify.

package/dist/components/popout/usePopOut.d.ts

@@ -4,5 +4,6 @@ export declare const usePopOut: ({ delayShow, preventShow, onClose, openOnMount
     visible: boolean;
     openPopOut: () => void;
     closePopOut: () => void;
+    togglePopOut: () => void;
 };
 export {};

package/dist/components/popups/info-window/InfoWindow.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { IPopOutProps } from '../../popout/PopOut';
-import { ICursorOptions, Position } from './info-window-utils';
-export declare const InfoWindowContext: React.Context<InfoWindowState>;
+import { ICursorOptions } from './info-window-utils';
 export interface IRequiredProps {
     /**
      * Content to be shown inside the info window
@@ -10,33 +9,24 @@ export interface IRequiredProps {
     /**
      * Preferred direction around the trigger to open the info window
      */
-    position: Position;
+    position: IPopOutProps['placement'];
 }
 export declare type IPopOutPropsSubset = IRequiredProps & Omit<IPopOutProps, 'children' | 'trigger' | 'showArrow'>;
-declare type IEvent = 'click' | 'mount' | 'hover';
-export declare type IInfoWindowPopOutProps = IPopOutPropsSubset & {
+export declare type IInfoWindowEvent = 'click' | 'mount';
+export declare type IInfoWindowProps = IPopOutPropsSubset & {
     children: React.ReactNode;
     /**
-     * IEvent type used to trigger the info window
+     * Event type used to trigger the info window, 'hover' is now deprecated
      */
-    event?: IEvent;
+    event?: IInfoWindowEvent;
     /**
-     * Cursor options control what happens to the info window while moving the mouse within the trigger
+     * Deprecated: Cursor options control what happens to the info window while moving the mouse within the trigger
      */
     cursorOption?: ICursorOptions;
     /**
-     * Delay the render of the info window after the trigger event has been fired
+     * ClassName to be given to the wrapper around the info window content
      */
-    delayShow?: number;
-    /**
-     * Prevent the display of the info window regardless of the trigger event
-     */
-    preventShow?: boolean;
     containerClassName?: string;
-    /**
-     * ClassName to be given to the wrapper around the trigger component
-     */
-    className?: string;
     /**
      * Data attributes to be applied to the wrapper around the trigger component
      */
@@ -51,17 +41,5 @@ export declare type IInfoWindowPopOutProps = IPopOutPropsSubset & {
      * Styles to apply to the wrapper around the trigger component
      */
     style?: React.CSSProperties;
-    triggerClassName?: string;
 };
-/**
- *  The infowindow module allows us to create an element next to an element. By setting props, we can determine the direction of its placement and how it gets triggered. The infowindow module has some smarts that will
-    detect if it's about to get rendered off the screen. If it is, it will adjust the placement of the infowindow until it can be rendered. If it cannot be rendered in any direction, the code will pick the direction
-    where the least amount of overflow is occuring. The order it tries to find a new placement in is top, right, down, left.
-    The above example uses a button as the trigger for the info window, but any html element can be used as long as its passed as a child of the <InfoWindow /> component
- */
-export declare const InfoWindow: (props: IInfoWindowPopOutProps) => JSX.Element;
-interface InfoWindowState {
-    closeInfoWindow: () => void;
-}
-export declare const useInfoWindow: () => InfoWindowState;
-export {};
+export declare const InfoWindow: (props: IInfoWindowProps) => JSX.Element;

package/dist/components/popups/info-window/LegacyInfoWindow.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IAnchorScores, ICursorOptions, ICursorPoints, Position } from './info-window-utils';
-export declare type IEvent = 'click' | 'hover' | 'mount';
-export interface IInfoWindowStyles<T> {
+declare type ILegacyInfoWindowEvent = 'click' | 'hover' | 'mount';
+interface IInfoWindowStyles<T> {
     triangleStyles: {
         top: T;
         left: T;
@@ -11,7 +11,7 @@ export interface IInfoWindowStyles<T> {
         left: T;
     };
 }
-export interface IRequiredProps {
+export interface ILegacyInfoWindowRequiredProps {
     /**
      * Content to be shown inside the info window
      */
@@ -21,22 +21,22 @@ export interface IRequiredProps {
      */
     position: Position;
 }
-export declare type IInfoWindowProps = IRequiredProps & {
+export declare type ILegacyInfoWindowProps = ILegacyInfoWindowRequiredProps & {
     children?: React.ReactNode;
     /**
-     * IEvent type used to trigger the info window
+     * ILegacyInfoWindowEvent type used to trigger the info window
      */
-    event?: IEvent;
+    event?: ILegacyInfoWindowEvent;
     /**
      * Cursor options control what happens to the info window while moving the mouse within the trigger
      */
     cursorOption?: ICursorOptions;
     /**
-     * Delay the render of the info window after the trigger event has been fired
+     * Delay render of the info window after the trigger event has been fired
      */
     delayShow?: number;
     /**
-     * Prevent the display of the info window regardless of the trigger event
+     * Prevent the display of the pop out regardless of the trigger event
      */
     preventShow?: boolean;
     /**
@@ -86,12 +86,12 @@ interface IState {
     show: boolean;
 }
 /**
- *  The infowindow module allows us to create an element next to an element. By setting props, we can determine the direction of its placement and how it gets triggered. The infowindow module has some smarts that will
+ *  The LegacyInfoWindow module allows us to create an element next to an element. By setting props, we can determine the direction of its placement and how it gets triggered. The infowindow module has some smarts that will
  detect if it's about to get rendered off the screen. If it is, it will adjust the placement of the infowindow until it can be rendered. If it cannot be rendered in any direction, the code will pick the direction
  where the least amount of overflow is occuring. The order it tries to find a new placement in is top, right, down, left.
  The above example uses a button as the trigger for the info window, but any html element can be used as long as its passed as a child of the <InfoWindow /> component
  */
-export declare class LegacyInfoWindow extends React.PureComponent<IInfoWindowProps, IState> {
+export declare class LegacyInfoWindow extends React.PureComponent<ILegacyInfoWindowProps, IState> {
     private _showDelayId;
     private _triggerRef;
     private _renderContainer;
@@ -99,9 +99,9 @@ export declare class LegacyInfoWindow extends React.PureComponent<IInfoWindowPro
     private _triangleRef;
     private _cursorPosition;
     private _triggerRect;
-    constructor(props: IInfoWindowProps);
+    constructor(props: ILegacyInfoWindowProps);
     componentDidMount(): void;
-    componentDidUpdate(oldProps: IInfoWindowProps): void;
+    componentDidUpdate(oldProps: ILegacyInfoWindowProps): void;
     componentWillUnmount(): void;
     computeStylesFromDisplayPosition: (anchor: IAnchorScores, triangleRect: ClientRect) => IInfoWindowStyles<number>;
     setTriggerRef: (div: HTMLDivElement) => void;
@@ -151,4 +151,9 @@ export declare class LegacyInfoWindow extends React.PureComponent<IInfoWindowPro
     renderContent(runStyleRender?: boolean): void;
     render(): JSX.Element;
 }
+export declare const InfoWindowContext: React.Context<InfoWindowState>;
+interface InfoWindowState {
+    closeInfoWindow: () => void;
+}
+export declare const useLegacyInfoWindow: () => InfoWindowState;
 export {};

package/dist/components/popups/info-window/useInfoWindowModifiers.d.ts

@@ -0,0 +1,2 @@
+import { StrictModifier } from 'react-popper';
+export declare const useInfoWindowModifiers: (updatePositionWhenChanged: any) => (StrictModifier<import("react-popper").StrictModifierNames> | Partial<import("@popperjs/core").Modifier<"handleOverflowPositions", {}>>)[];

package/dist/components/popups/tooltip/Tooltip.d.ts

@@ -1,16 +1,16 @@
 /// <reference types="react" />
-import { IInfoWindowProps } from '../info-window/LegacyInfoWindow';
+import { ILegacyInfoWindowProps } from '../info-window/LegacyInfoWindow';
 import { Position } from '../info-window/info-window-utils';
 import './tooltip.scss';
 export declare type ITooltipPosition = Position;
 declare type IColorScheme = 'dark' | 'light';
 declare type IAlignStyle = 'center' | 'left' | 'right';
-export interface ITooltipProps extends IInfoWindowProps {
+export interface ITooltipProps extends ILegacyInfoWindowProps {
     /**
      * Colour scheme for the tooltip content.  Available options are 'dark' and 'light'
      */
-    delayShow?: IInfoWindowProps['delayShow'];
-    event?: IInfoWindowProps['event'];
+    delayShow?: ILegacyInfoWindowProps['delayShow'];
+    event?: ILegacyInfoWindowProps['event'];
     colorScheme?: IColorScheme;
     textAlignment?: IAlignStyle;
 }

package/dist/index.d.ts

@@ -51,7 +51,7 @@ export * from './components/popout/PopOutBase';
 export * from './components/popout/PopOut';
 export * from './components/popups/info-window/InfoWindow';
 export * from './components/popups/overflow-tooltip/OverflowTooltip';
-export { LegacyInfoWindow } from './components/popups/info-window/LegacyInfoWindow';
+export * from './components/popups/info-window/LegacyInfoWindow';
 export * from './components/popups/tooltip/Tooltip';
 export * from './components/pill/Pill';
 export * from './components/table/Table';