@skedulo/sked-ui 0.0.0-preview-react-18 → 0.0.1-react-18-preview

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skedulo/sked-ui",
-  "version": "0.0.0-preview-react-18",
+  "version": "v0.0.1-react-18-preview",
   "license": "UNLICENSED",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -22,7 +22,7 @@
     "release": "npx semantic-release",
     "lint": "eslint './src/**/*.{ts,tsx}'",
     "check:types": "tsc --noEmit --pretty",
-    "lint:fix": "./node_modules/.bin/prettier --check --require-pragma false --write",
+    "lint:fix": "./node_modules/.bin/prettier --check --require-pragma false --write 'src/**/*.{ts,tsx}'",
     "prepare": "husky install"
   },
   "files": [
@@ -91,6 +91,7 @@
     "@storybook/addons": "^6.5.12",
     "@storybook/react": "^6.5.12",
     "@storybook/theming": "^6.5.12",
+    "@testing-library/dom": "8.20.1",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "13.4.0",
     "@types/classnames": "^2.3.1",
@@ -147,12 +148,12 @@
   "peerDependencies": {
     "@types/classnames": ">=2.2.6",
     "@types/lodash": ">=4.14.178",
-    "@types/react": ">=16.4.11",
-    "@types/react-dom": ">=16.0.7",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.1",
     "classnames": ">=2.2.6",
     "lodash": ">=4",
-    "react": ">=16.2.0",
-    "react-dom": ">=16.2.0"
+    "react": ">=18.3.0",
+    "react-dom": ">=18.3.0"
   },
   "dependencies": {
     "@popperjs/core": "^2.5.4",
@@ -169,7 +170,7 @@
     "react-textarea-autosize": "8.3.2"
   },
   "resolutions": {
-    "@types/react": "17.0.6"
+    "@types/react": "18.3.0"
   },
   "lint-staged": {
     "*.{ts,tsx}": [

package/yarn.lock

@@ -3484,7 +3484,7 @@
     regenerator-runtime "^0.13.7"
     resolve-from "^5.0.0"
 
-"@testing-library/dom@^8.5.0":
+"@testing-library/dom@8.20.1", "@testing-library/dom@^8.5.0":
   version "8.20.1"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.20.1.tgz#2e52a32e46fc88369eef7eef634ac2a192decd9f"
   integrity sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==
@@ -3839,13 +3839,12 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@17.0.6":
-  version "17.0.6"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.6.tgz#0ec564566302c562bf497d73219797a5e0297013"
-  integrity sha512-u/TtPoF/hrvb63LdukET6ncaplYsvCvmkceasx8oG84/ZCsoLxz9Z/raPBP4lTAiWW1Jb889Y9svHmv8R26dWw==
+"@types/react@*", "@types/react@18.3.0":
+  version "18.3.0"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.0.tgz#2e6ac50dea2f68f774b20f1bd536ef82365cd64a"
+  integrity sha512-DiUcKjzE6soLyln8NNZmyhcQjVv+WsUIFSqetMN0p8927OztKT4VTfFTqsbAi5oAGIcgOmOajlfBqyptDDjZRw==
   dependencies:
     "@types/prop-types" "*"
-    "@types/scheduler" "*"
     csstype "^3.0.2"
 
 "@types/react@18.3.7":
@@ -3873,11 +3872,6 @@
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
   integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
 
-"@types/scheduler@*":
-  version "0.16.2"
-  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
-  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
-
 "@types/source-list-map@*":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"

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

@@ -1,2 +0,0 @@
-import * as React from 'react';
-export declare const useClickAway: (ref: React.RefObject<HTMLElement | null>, onClickAway: (event: Event) => void, events?: string[]) => void;

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

@@ -1 +0,0 @@
-export {};

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

@@ -1,160 +0,0 @@
-import * as React from 'react';
-import { IAnchorScores, ICursorOptions, ICursorPoints, Position as PositionType } from './info-window-utils';
-interface InfoWindowState {
-    closeInfoWindow: () => void;
-}
-export declare const InfoWindowContext: React.Context<InfoWindowState>;
-export declare type Position = PositionType;
-export declare type IEvent = 'click' | 'hover' | 'mount';
-export interface IInfoWindowStyles<T> {
-    triangleStyles: {
-        top: T;
-        left: T;
-    };
-    contentStyles: {
-        top: T;
-        left: T;
-    };
-}
-export interface IRequiredProps {
-    /**
-     * Content to be shown inside the info window
-     */
-    content: JSX.Element | JSX.Element[] | React.ReactNode | string;
-    /**
-     * Preferred direction around the trigger to open the info window
-     */
-    position: Position;
-}
-export declare type IInfoWindowProps = IRequiredProps & {
-    children?: React.ReactNode;
-    /**
-     * IEvent type used to trigger the info window
-     */
-    event?: IEvent;
-    /**
-     * 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
-     */
-    delayShow?: number;
-    /**
-     * Prevent the display of the info window regardless of the trigger event
-     */
-    preventShow?: boolean;
-    /**
-     * ClassName to be given to the wrapper around the info window content
-     */
-    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
-     */
-    dataAttributes?: {
-        [key: string]: string;
-    };
-    /**
-     * Apply 'display: inline-block' style to the wrapper around the trigger component
-     */
-    displayInline?: boolean;
-    /**
-     * Render a close button within the wrapper around the info window content
-     */
-    withCloseButton?: boolean;
-    /**
-     * Offset the trigger points used to calculate the render positions by this number of pixels
-     */
-    positionOffset?: number;
-    /**
-     * Will be called when the mouse over event is fired on the trigger component
-     */
-    onMouseOver?: (e: React.MouseEvent<HTMLDivElement>) => void;
-    /**
-     * Will be called when the mouse leave event is fired on the trigger component
-     */
-    onMouseLeave?: (e: React.MouseEvent<HTMLDivElement>) => void;
-    /**
-     * Will be called when the info window is closed (regardless of the trigger event)
-     */
-    onClose?: () => void;
-    /**
-     * Styles to apply to the wrapper around the trigger component
-     */
-    style?: React.CSSProperties;
-};
-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
- 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 InfoWindow extends React.PureComponent<IInfoWindowProps, IState> {
-    private _showDelayId;
-    private _triggerRef;
-    private _renderContainer;
-    private _contentRef;
-    private _triangleRef;
-    private _cursorPosition;
-    private _triggerRect;
-    constructor(props: IInfoWindowProps);
-    componentDidMount(): void;
-    componentDidUpdate(oldProps: IInfoWindowProps): void;
-    componentWillUnmount(): void;
-    computeStylesFromDisplayPosition: (anchor: IAnchorScores, triangleRect: ClientRect) => IInfoWindowStyles<number>;
-    setTriggerRef: (div: HTMLDivElement) => void;
-    setContentRef: (div: HTMLDivElement) => void;
-    setTriangleRef: (span: HTMLSpanElement) => void;
-    showHideToggle: () => void;
-    setShow: (show: boolean) => void;
-    handleBodyClick: (e: MouseEvent) => void;
-    handleScroll: () => void;
-    onTriggerClick: (e: React.MouseEvent<HTMLDivElement>) => void;
-    onMouseOver: (e: React.MouseEvent<HTMLDivElement>) => void;
-    onMouseLeave: (e: React.MouseEvent<any>) => void;
-    onMouseMove: (e: MouseEvent) => void;
-    getDisplayPosition: (triggerPoint: ICursorPoints, triggerRect: ClientRect, triangleRect: ClientRect, contentRect: ClientRect) => IAnchorScores;
-    closeInfoWindow(): void;
-    notTargetArea(e: MouseEvent): boolean;
-    registerMousePosition(e: MouseEvent | React.MouseEvent<any> | null): void;
-    detachEventListeners(): void;
-    attachEventListeners(): void;
-    computeStyles(): {
-        contentStyles: React.CSSProperties;
-        triangleStyles: React.CSSProperties;
-        position: PositionType;
-    } | {
-        position: PositionType;
-        triangleStyles: {
-            top: string;
-            left: string;
-        } | {
-            top: string;
-            left: string;
-        };
-        contentStyles: {
-            top: string;
-            left: string;
-        } | {
-            top: string;
-            left: string;
-        };
-    };
-    removeRenderingContainer(): void;
-    createRenderContainer(): HTMLDivElement;
-    /**
-     * The first render wont be positioned properly since we don't have the width/height to calculate the position.
-     * `runStyleRender` runs a second render when we have the contentContainer rendered to calculate the position.
-     */
-    renderContent(runStyleRender?: boolean): void;
-    render(): JSX.Element;
-}
-export declare const useInfoWindow: () => InfoWindowState;
-export {};

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

@@ -1,84 +0,0 @@
-import * as React from 'react';
-import { ICursorOptions, Position as PositionType } from './info-window-utils';
-declare type Position = PositionType;
-declare type IEvent = 'click' | 'hover' | 'mount';
-export interface IPopOutRequiredProps {
-    /**
-     * Content to be shown inside the info window
-     */
-    content: JSX.Element | JSX.Element[] | React.ReactNode | string;
-    /**
-     * Preferred direction around the trigger to open the info window
-     */
-    position: Position;
-}
-export declare type IInfoWindowPopOutProps = IPopOutRequiredProps & {
-    children?: React.ReactNode;
-    /**
-     * IEvent type used to trigger the info window
-     */
-    event?: IEvent;
-    /**
-     * 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
-     */
-    delayShow?: number;
-    /**
-     * Prevent the display of the info window regardless of the trigger event
-     */
-    preventShow?: boolean;
-    /**
-     * ClassName to be given to the wrapper around the info window content
-     */
-    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
-     */
-    dataAttributes?: {
-        [key: string]: string;
-    };
-    /**
-     * Apply 'display: inline-block' style to the wrapper around the trigger component
-     */
-    displayInline?: boolean;
-    /**
-     * Render a close button within the wrapper around the info window content
-     */
-    withCloseButton?: boolean;
-    /**
-     * Offset the trigger points used to calculate the render positions by this number of pixels
-     */
-    positionOffset?: number;
-    /**
-     * Will be called when the mouse over event is fired on the trigger component
-     */
-    onMouseOver?: (e: React.MouseEvent<HTMLDivElement>) => void;
-    /**
-     * Will be called when the mouse leave event is fired on the trigger component
-     */
-    onMouseLeave?: (e: React.MouseEvent<HTMLDivElement>) => void;
-    /**
-     * Will be called when the info window is closed (regardless of the trigger event)
-     */
-    onClose?: () => void;
-    /**
-     * Styles to apply to the wrapper around the trigger component
-     */
-    style?: React.CSSProperties;
-};
-/**
- *  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 UnmemoizedInfoWindowPopOut: (props: IInfoWindowPopOutProps) => JSX.Element;
-export declare const InfoWindowPopOut: React.MemoExoticComponent<(props: IInfoWindowPopOutProps) => JSX.Element>;
-export {};

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

@@ -1,6 +0,0 @@
-import React from 'react';
-interface ModalProps {
-    children?: React.ReactNode;
-}
-export declare const PortalWrapper: ({ children }: ModalProps) => React.ReactPortal;
-export {};

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

@@ -1,25 +0,0 @@
-import { RefObject } from 'react';
-/**
- * Triggers callback when user clicks outside target area.
- * https://github.com/streamich/react-use/blob/master/src/useClickAway.ts
- *
- * Usage:
- *
- * const Demo = () => {
- *   const ref = useRef<HTMLDivElement>(null)
- *
- *   useClickAway(ref, () => {
- *     console.log('OUTSIDE CLICKED')
- *   })
- *
- *   return <div ref={ref}>Content</div>
- * }
- *
- * Reference:
- *
- * useClickAway(ref, onMouseEvent)
- * useClickAway(ref, onMouseEvent, ['click'])
- * useClickAway(ref, onMouseEvent, ['mousedown', 'touchstart'])
- *
- */
-export declare const useClickAway: <E extends Event = Event>(ref: RefObject<HTMLElement | null>, onClickAway: (event: E) => void, events?: string[]) => void;

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

@@ -1,154 +0,0 @@
-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> {
-    triangleStyles: {
-        top: T;
-        left: T;
-    };
-    contentStyles: {
-        top: T;
-        left: T;
-    };
-}
-export interface IRequiredProps {
-    /**
-     * Content to be shown inside the info window
-     */
-    content: JSX.Element | JSX.Element[] | React.ReactNode | string;
-    /**
-     * Preferred direction around the trigger to open the info window
-     */
-    position: Position;
-}
-export declare type IInfoWindowProps = IRequiredProps & {
-    children?: React.ReactNode;
-    /**
-     * IEvent type used to trigger the info window
-     */
-    event?: IEvent;
-    /**
-     * 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
-     */
-    delayShow?: number;
-    /**
-     * Prevent the display of the info window regardless of the trigger event
-     */
-    preventShow?: boolean;
-    /**
-     * ClassName to be given to the wrapper around the info window content
-     */
-    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
-     */
-    dataAttributes?: {
-        [key: string]: string;
-    };
-    /**
-     * Apply 'display: inline-block' style to the wrapper around the trigger component
-     */
-    displayInline?: boolean;
-    /**
-     * Render a close button within the wrapper around the info window content
-     */
-    withCloseButton?: boolean;
-    /**
-     * Offset the trigger points used to calculate the render positions by this number of pixels
-     */
-    positionOffset?: number;
-    /**
-     * Will be called when the mouse over event is fired on the trigger component
-     */
-    onMouseOver?: (e: React.MouseEvent<HTMLDivElement>) => void;
-    /**
-     * Will be called when the mouse leave event is fired on the trigger component
-     */
-    onMouseLeave?: (e: React.MouseEvent<HTMLDivElement>) => void;
-    /**
-     * Will be called when the info window is closed (regardless of the trigger event)
-     */
-    onClose?: () => void;
-    /**
-     * Styles to apply to the wrapper around the trigger component
-     */
-    style?: React.CSSProperties;
-};
-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
- 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> {
-    private _showDelayId;
-    private _triggerRef;
-    private _renderContainer;
-    private _contentRef;
-    private _triangleRef;
-    private _cursorPosition;
-    private _triggerRect;
-    constructor(props: IInfoWindowProps);
-    componentDidMount(): void;
-    componentDidUpdate(oldProps: IInfoWindowProps): void;
-    componentWillUnmount(): void;
-    computeStylesFromDisplayPosition: (anchor: IAnchorScores, triangleRect: ClientRect) => IInfoWindowStyles<number>;
-    setTriggerRef: (div: HTMLDivElement) => void;
-    setContentRef: (div: HTMLDivElement) => void;
-    setTriangleRef: (span: HTMLSpanElement) => void;
-    showHideToggle: () => void;
-    setShow: (show: boolean) => void;
-    handleBodyClick: (e: MouseEvent) => void;
-    handleScroll: () => void;
-    onTriggerClick: (e: React.MouseEvent<HTMLDivElement>) => void;
-    onMouseOver: (e: React.MouseEvent<HTMLDivElement>) => void;
-    onMouseLeave: (e: React.MouseEvent<any>) => void;
-    onMouseMove: (e: MouseEvent) => void;
-    getDisplayPosition: (triggerPoint: ICursorPoints, triggerRect: ClientRect, triangleRect: ClientRect, contentRect: ClientRect) => IAnchorScores;
-    closeInfoWindow(): void;
-    notTargetArea(e: MouseEvent): boolean;
-    registerMousePosition(e: MouseEvent | React.MouseEvent<any> | null): void;
-    detachEventListeners(): void;
-    attachEventListeners(): void;
-    computeStyles(): {
-        contentStyles: React.CSSProperties;
-        triangleStyles: React.CSSProperties;
-        position: Position;
-    } | {
-        position: Position;
-        triangleStyles: {
-            top: string;
-            left: string;
-        } | {
-            top: string;
-            left: string;
-        };
-        contentStyles: {
-            top: string;
-            left: string;
-        } | {
-            top: string;
-            left: string;
-        };
-    };
-    removeRenderingContainer(): void;
-    createRenderContainer(): HTMLDivElement;
-    /**
-     * The first render wont be positioned properly since we don't have the width/height to calculate the position.
-     * `runStyleRender` runs a second render when we have the contentContainer rendered to calculate the position.
-     */
-    renderContent(runStyleRender?: boolean): void;
-    render(): JSX.Element;
-}
-export {};

package/dist/components/popups/tooltip/info-window-utils.d.ts

@@ -1,43 +0,0 @@
-export interface ICursorPoints {
-    x: number;
-    y: number;
-}
-export interface ICursorOptions {
-    rule: 'follow' | 'follow-x' | 'follow-y';
-    keepOnMouseMove?: boolean;
-}
-export declare type Position = 'top' | 'right' | 'bottom' | 'left';
-export declare const getPositionEvalOrder: (position: Position) => Position[];
-interface IAnchorPoint {
-    position: Position;
-    point: ICursorPoints;
-}
-export interface IAnchorScores extends IAnchorPoint {
-    display: ClientRect;
-    displayScore: number;
-    distanceScore: number;
-    weightedScore: number;
-}
-export declare const getAnchorPoints: (triggerPoint: ICursorPoints, triggerRect: ClientRect, triangleRect: ClientRect, windowRect: ClientRect, cursorOptions: ICursorOptions) => IAnchorPoint[];
-export declare const getPositionScores: (triggerPoint: ICursorPoints, triggerRect: ClientRect, contentRect: ClientRect, triangleRect: ClientRect, windowRect: ClientRect, cursorOptions: ICursorOptions, anchorOffset?: number) => IAnchorScores[];
-export declare const getBestFit: (desiredOrder: Position[], positionScores: IAnchorScores[]) => IAnchorScores;
-export declare const adjustContentDisplayCoordinates: (anchor: IAnchorScores, windowRect: ClientRect) => {
-    display: {
-        left: number;
-        right: number;
-        height: number;
-        width: number;
-        x: number;
-        y: number;
-        bottom: number;
-        top: number;
-        toJSON(): any;
-    };
-    displayScore: number;
-    distanceScore: number;
-    weightedScore: number;
-    position: Position;
-    point: ICursorPoints;
-};
-export declare const notTargetAreas: (elements: (Element | HTMLElement)[], e: MouseEvent) => boolean;
-export {};

package/dist/components/popups/tooltip/info-window-utils.spec.d.ts

@@ -1 +0,0 @@
-export {};