@jetbrains/ring-ui 4.1.4 → 5.0.0-beta.1

package/components/date-picker/months.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { MonthsProps } from './consts';
+declare function Months(props: MonthsProps): JSX.Element;
+declare namespace Months {
+    var propTypes: {
+        onScroll: PropTypes.Requireable<(...args: any[]) => any>;
+        scrollDate: PropTypes.Requireable<string | number | Date>;
+    };
+}
+export default Months;

package/components/date-picker/months.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import addMonths from 'date-fns/addMonths';
+import getDay from 'date-fns/getDay';
+import getDaysInMonth from 'date-fns/getDaysInMonth';
+import set from 'date-fns/set';
+import startOfHour from 'date-fns/startOfHour';
+import startOfMonth from 'date-fns/startOfMonth';
+import subMonths from 'date-fns/subMonths';
+import endOfMonth from 'date-fns/endOfMonth';
+import scheduleRAF from '../global/schedule-raf';
+import linearFunction from '../global/linear-function';
+import Month from './month';
+import MonthNames from './month-names';
+import styles from './date-picker.css';
+import units, { dateType, DOUBLE, HALF, WEEK, weekdays } from './consts';
+const { unit, cellSize, calHeight } = units;
+const FridayToSunday = WEEK + weekdays.SU - weekdays.FR;
+const FIVELINES = 31;
+const TALLMONTH = 6;
+const SHORTMONTH = 5;
+const PADDING = 2;
+const MONTHSBACK = 2;
+function monthHeight(date) {
+    const monthStart = startOfMonth(date);
+    const daysSinceLastFriday = (getDay(monthStart) + FridayToSunday) % WEEK;
+    const monthLines = daysSinceLastFriday + getDaysInMonth(monthStart) > FIVELINES ? TALLMONTH : SHORTMONTH;
+    return monthLines * cellSize + unit * PADDING;
+}
+// in milliseconds per pixel
+function scrollSpeed(date) {
+    const monthStart = startOfMonth(date);
+    const monthEnd = endOfMonth(date);
+    return (Number(monthEnd) - Number(monthStart)) / monthHeight(monthStart);
+}
+const scrollSchedule = scheduleRAF();
+let dy = 0;
+export default function Months(props) {
+    const { scrollDate } = props;
+    // prevent switching from april to march because of daylight saving time
+    const monthStart = startOfHour(set(scrollDate, { date: 1, hours: 1 }));
+    let month = subMonths(monthStart, MONTHSBACK);
+    const months = [month];
+    for (let i = 0; i < MONTHSBACK * DOUBLE; i++) {
+        month = addMonths(month, 1);
+        months.push(month);
+    }
+    const currentSpeed = scrollSpeed(scrollDate);
+    const pxToDate = linearFunction(0, Number(scrollDate), currentSpeed);
+    const offset = pxToDate.x(Number(monthStart)); // is a negative number
+    const bottomOffset = monthHeight(scrollDate) + offset;
+    return (<div className={styles.months} onWheel={function handleWheel(e) {
+            e.preventDefault();
+            dy += e.deltaY;
+            scrollSchedule(() => {
+                let date;
+                // adjust scroll speed to prevent glitches
+                if (dy < offset) {
+                    date = pxToDate.y(offset) + (dy - offset) * scrollSpeed(months[1]);
+                }
+                else if (dy > bottomOffset) {
+                    date =
+                        pxToDate.y(bottomOffset) +
+                            (dy - bottomOffset) *
+                                scrollSpeed(months[MONTHSBACK + 1]);
+                }
+                else {
+                    date = pxToDate.y(dy);
+                }
+                props.onScroll(date);
+                dy = 0;
+            });
+        }}>
+      <div style={{
+            top: Math.
+                floor(calHeight * HALF - monthHeight(months[0]) - monthHeight(months[1]) + offset)
+        }} className={styles.days}>
+        {months.map(date => (<Month {...props} month={date} key={+date}/>))}
+      </div>
+      <MonthNames {...props}/>
+    </div>);
+}
+Months.propTypes = {
+    onScroll: PropTypes.func,
+    scrollDate: dateType
+};

package/components/date-picker/weekdays.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { Locale } from 'date-fns';
+import PropTypes from 'prop-types';
+interface WeekdaysProps {
+    locale: Locale | undefined;
+}
+declare function Weekdays(props: WeekdaysProps): JSX.Element;
+declare namespace Weekdays {
+    var propTypes: {
+        locale: PropTypes.Requireable<string>;
+    };
+}
+export default Weekdays;

package/components/date-picker/weekdays.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import classNames from 'classnames';
+import getDay from 'date-fns/getDay';
+import format from 'date-fns/format';
+import setDay from 'date-fns/setDay';
+import startOfDay from 'date-fns/startOfDay';
+import PropTypes from 'prop-types';
+import { weekdays } from './consts';
+import styles from './date-picker.css';
+export default function Weekdays(props) {
+    const days = Object.values(weekdays).
+        map(value => startOfDay(setDay(new Date(), value)));
+    const { locale } = props;
+    return (<div className={styles.weekdays}>
+      {days.map(day => (<span className={classNames(styles.weekday, {
+                [styles.weekend]: [weekdays.SA, weekdays.SU].includes(getDay(day))
+            })} key={+day}>
+          {format(day, 'EEEEEE', { locale })}
+        </span>))}
+    </div>);
+}
+Weekdays.propTypes = {
+    locale: PropTypes.string
+};

package/components/date-picker/years.d.ts

@@ -0,0 +1,21 @@
+import { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { CalendarProps } from './consts';
+interface YearsState {
+    scrollDate: Date | null;
+}
+export default class Years extends PureComponent<CalendarProps> {
+    static propTypes: {
+        scrollDate: PropTypes.Requireable<string | number | Date>;
+        onScroll: PropTypes.Requireable<(...args: any[]) => any>;
+        onScrollChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    state: {
+        scrollDate: null;
+    };
+    componentDidUpdate(prevProps: CalendarProps, prevState: YearsState): void;
+    stoppedScrolling?: boolean;
+    setYear(date: number): void;
+    render(): JSX.Element;
+}
+export {};

package/components/date-picker/years.jsx

@@ -0,0 +1,75 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import addYears from 'date-fns/addYears';
+import getYear from 'date-fns/getYear';
+import format from 'date-fns/format';
+import isSameYear from 'date-fns/isSameYear';
+import isThisYear from 'date-fns/isThisYear';
+import setYear from 'date-fns/setYear';
+import startOfYear from 'date-fns/startOfYear';
+import subYears from 'date-fns/subYears';
+import linearFunction from '../global/linear-function';
+import styles from './date-picker.css';
+import units, { dateType, DOUBLE, HALF, yearDuration } from './consts';
+const { yearHeight, calHeight } = units;
+let scrollTO;
+const YEARSBACK = 5;
+const scrollDelay = 100;
+export default class Years extends PureComponent {
+    static propTypes = {
+        scrollDate: dateType,
+        onScroll: PropTypes.func,
+        onScrollChange: PropTypes.func
+    };
+    state = { scrollDate: null };
+    componentDidUpdate(prevProps, prevState) {
+        this.stoppedScrolling = prevState.scrollDate != null && !this.state.scrollDate;
+    }
+    stoppedScrolling;
+    setYear(date) {
+        if (scrollTO) {
+            window.clearTimeout(scrollTO);
+            scrollTO = null;
+        }
+        this.setState({ scrollDate: null });
+        this.props.onScroll(Number(setYear(this.props.scrollDate, getYear(date))));
+    }
+    render() {
+        const { onScrollChange, scrollDate } = this.props;
+        const date = this.state.scrollDate || scrollDate;
+        const yearStart = startOfYear(date);
+        let year = subYears(yearStart, YEARSBACK);
+        const years = [year];
+        for (let i = 0; i < YEARSBACK * DOUBLE; i++) {
+            year = addYears(year, 1);
+            years.push(year);
+        }
+        const pxToDate = linearFunction(0, Number(years[0]), yearDuration / yearHeight);
+        const handleWheel = (e) => {
+            e.preventDefault();
+            const newScrollDate = linearFunction(0, Number(date), yearDuration / yearHeight).
+                y(e.deltaY);
+            this.setState({
+                scrollDate: newScrollDate
+            });
+            if (scrollTO) {
+                window.clearTimeout(scrollTO);
+            }
+            scrollTO = window.setTimeout(() => this.setYear(newScrollDate), scrollDelay);
+        };
+        return (<div className={styles.years} onWheel={handleWheel} style={{
+                transition: this.stoppedScrolling ? 'top .2s ease-out 0s' : 'none',
+                top: Math.floor(calHeight * HALF - pxToDate.x(Number(date)))
+            }}>
+        {years.map(item => (<button type="button" key={+item} className={classNames(styles.year, {
+                    [styles.currentYear]: isSameYear(item, date),
+                    [styles.today]: isThisYear(item)
+                })} onClick={function handleClick() {
+                    onScrollChange(Number(setYear(scrollDate, getYear(item))));
+                }}>
+            {format(item, 'yyyy')}
+          </button>))}
+      </div>);
+    }
+}

package/components/dialog/dialog.d.ts

@@ -0,0 +1,73 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import TabTrap, { TabTrapProps } from '../tab-trap/tab-trap';
+export interface DialogProps extends Partial<TabTrapProps> {
+    show: boolean;
+    label: string;
+    onOverlayClick: (event: React.MouseEvent<HTMLElement>) => void;
+    onEscPress: (event: KeyboardEvent) => void;
+    onCloseClick: (event: React.MouseEvent<HTMLElement>) => void;
+    onCloseAttempt: (event: React.MouseEvent<HTMLElement> | KeyboardEvent) => void;
+    showCloseButton: boolean;
+    closeButtonInside: boolean;
+    trapFocus: boolean;
+    contentClassName?: string | null | undefined;
+    portalTarget?: Element | null | undefined;
+    'data-test'?: string | null | undefined;
+}
+/**
+ * @name Dialog
+ */
+declare function noop(): void;
+export default class Dialog extends PureComponent<DialogProps> {
+    static propTypes: {
+        label: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        contentClassName: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        show: PropTypes.Validator<boolean>;
+        showCloseButton: PropTypes.Requireable<boolean>;
+        closeButtonInside: PropTypes.Requireable<boolean>;
+        onOverlayClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onEscPress: PropTypes.Requireable<(...args: any[]) => any>;
+        onCloseClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onCloseAttempt: PropTypes.Requireable<(...args: any[]) => any>;
+        trapFocus: PropTypes.Requireable<boolean>;
+        portalTarget: PropTypes.Requireable<HTMLElement>;
+        autoFocusFirst: PropTypes.Requireable<boolean>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        label: string;
+        onOverlayClick: typeof noop;
+        onEscPress: typeof noop;
+        onCloseClick: typeof noop;
+        onCloseAttempt: typeof noop;
+        showCloseButton: boolean;
+        closeButtonInside: boolean;
+        trapFocus: boolean;
+        autoFocusFirst: boolean;
+    };
+    state: {
+        shortcutsScope: string;
+    };
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: DialogProps): void;
+    componentWillUnmount(): void;
+    scrollPreventer: {
+        prevent: () => void;
+        reset: () => void;
+    };
+    uid: string;
+    toggleScrollPreventer(): void;
+    handleClick: (event: React.MouseEvent<HTMLElement>) => void;
+    onCloseClick: (event: React.MouseEvent<HTMLElement>) => void;
+    getShortcutsMap: () => {
+        esc: (event: KeyboardEvent) => void;
+    };
+    dialog?: HTMLElement | null;
+    dialogRef: (tabTrap: TabTrap | null) => void;
+    render(): false | React.ReactPortal;
+}
+export declare type DialogAttrs = JSX.LibraryManagedAttributes<typeof Dialog, DialogProps>;
+export {};

package/components/dialog/dialog.jsx

@@ -0,0 +1,125 @@
+import React, { PureComponent } from 'react';
+import { createPortal } from 'react-dom';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import closeIcon from '@jetbrains/icons/close';
+import { AdaptiveIsland } from '../island/island';
+import getUID from '../global/get-uid';
+import dataTests from '../global/data-tests';
+import Shortcuts from '../shortcuts/shortcuts';
+import TabTrap from '../tab-trap/tab-trap';
+import Button from '../button/button';
+import { PopupTarget } from '../popup/popup.target';
+import { preventerFactory as scrollPreventerFactory } from './dialog__body-scroll-preventer';
+import styles from './dialog.css';
+/**
+ * @name Dialog
+ */
+function noop() { }
+export default class Dialog extends PureComponent {
+    static propTypes = {
+        label: PropTypes.string,
+        className: PropTypes.string,
+        contentClassName: PropTypes.string,
+        children: PropTypes.oneOfType([
+            PropTypes.arrayOf(PropTypes.node),
+            PropTypes.node
+        ]),
+        show: PropTypes.bool.isRequired,
+        showCloseButton: PropTypes.bool,
+        closeButtonInside: PropTypes.bool,
+        onOverlayClick: PropTypes.func,
+        onEscPress: PropTypes.func,
+        onCloseClick: PropTypes.func,
+        // onCloseAttempt is a common callback for ESC pressing and overlay clicking.
+        // Use it if you don't need different behaviors for this cases.
+        onCloseAttempt: PropTypes.func,
+        // focusTrap may break popups inside dialog, so use it carefully
+        trapFocus: PropTypes.bool,
+        portalTarget: PropTypes.instanceOf(HTMLElement),
+        autoFocusFirst: PropTypes.bool,
+        'data-test': PropTypes.string
+    };
+    static defaultProps = {
+        label: 'Dialog',
+        onOverlayClick: noop,
+        onEscPress: noop,
+        onCloseClick: noop,
+        onCloseAttempt: noop,
+        showCloseButton: false,
+        closeButtonInside: false,
+        trapFocus: false,
+        autoFocusFirst: true
+    };
+    state = {
+        shortcutsScope: getUID('ring-dialog-')
+    };
+    componentDidMount() {
+        this.toggleScrollPreventer();
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.show !== this.props.show) {
+            this.toggleScrollPreventer();
+        }
+    }
+    componentWillUnmount() {
+        this.scrollPreventer.reset();
+    }
+    scrollPreventer = scrollPreventerFactory(getUID('preventer-'));
+    uid = getUID('dialog-');
+    toggleScrollPreventer() {
+        if (this.props.show) {
+            this.scrollPreventer.prevent();
+        }
+        else {
+            this.scrollPreventer.reset();
+        }
+    }
+    handleClick = (event) => {
+        this.props.onOverlayClick(event);
+        this.props.onCloseAttempt(event);
+    };
+    onCloseClick = (event) => {
+        this.props.onCloseClick(event);
+        this.props.onCloseAttempt(event);
+    };
+    getShortcutsMap = () => {
+        const onEscape = (event) => {
+            if (this.props.show) {
+                this.props.onEscPress(event);
+                this.props.onCloseAttempt(event);
+            }
+        };
+        return {
+            esc: onEscape
+        };
+    };
+    dialog;
+    dialogRef = (tabTrap) => {
+        this.dialog = tabTrap && tabTrap.node;
+    };
+    render() {
+        const { show, showCloseButton, onOverlayClick, onCloseAttempt, onEscPress, onCloseClick, children, className, contentClassName, trapFocus, 'data-test': dataTest, closeButtonInside, portalTarget, label, ...restProps } = this.props;
+        const classes = classNames(styles.container, className);
+        const shortcutsMap = this.getShortcutsMap();
+        return show && createPortal(<PopupTarget id={this.uid} className={styles.popupTarget}>
+        {target => (<TabTrap trapDisabled={!trapFocus} data-test={dataTests('ring-dialog-container', dataTest)} ref={this.dialogRef} className={classes} role="presentation" {...restProps}>
+              <Shortcuts map={shortcutsMap} scope={this.state.shortcutsScope}/>
+              {(onOverlayClick !== noop || onCloseAttempt !== noop) && (<div 
+                // click handler is duplicated in close button
+                role="presentation" className={styles.clickableOverlay} onClick={this.handleClick}/>)}
+              <div className={styles.innerContainer}>
+                <AdaptiveIsland className={classNames(styles.content, contentClassName)} data-test="ring-dialog" role="dialog" aria-label={label}>
+                  {children}
+                  {showCloseButton &&
+                    (<Button icon={closeIcon} data-test="ring-dialog-close-button" className={classNames(styles.closeButton, {
+                            [styles.closeButtonOutside]: !closeButtonInside,
+                            [styles.closeButtonInside]: closeButtonInside
+                        })} iconClassName={styles.closeIcon} onClick={this.onCloseClick} aria-label="close dialog"/>)}
+                </AdaptiveIsland>
+              </div>
+              {target}
+            </TabTrap>)}
+      </PopupTarget>, portalTarget instanceof HTMLElement ? portalTarget : document.body);
+    }
+}

package/components/dialog/dialog__body-scroll-preventer.d.ts

@@ -0,0 +1,9 @@
+export declare const preventerFactory: (key: string | number) => {
+    prevent: () => void;
+    reset: () => void;
+};
+declare const _default: {
+    prevent: () => void;
+    reset: () => void;
+};
+export default _default;

package/components/dialog/dialog__body-scroll-preventer.js

@@ -1,59 +1,43 @@
 import scrollbarWidth from 'scrollbar-width';
-
 import styles from './dialog.css';
-
 const isPrevented = new Set();
 let previousDocumentWidth = null;
-
-const prevent = key => {
-  if (isPrevented.has(key)) {
-    return;
-  }
-
-  isPrevented.add(key);
-
-  if (isPrevented.size > 1) {
-    return;
-  }
-
-  const documentHasScroll = document.documentElement.scrollHeight > window.innerHeight ||
-    getComputedStyle(document.documentElement).overflowY === 'scroll';
-  document.documentElement.classList.add(styles.documentWithoutScroll);
-
-  const scrollWidth = scrollbarWidth();
-
-  if (documentHasScroll && scrollWidth > 0) {
-    previousDocumentWidth = document.documentElement.style.width;
-    document.documentElement.style.width = `calc(100% - ${scrollWidth}px)`;
-  }
+const prevent = (key) => {
+    if (isPrevented.has(key)) {
+        return;
+    }
+    isPrevented.add(key);
+    if (isPrevented.size > 1) {
+        return;
+    }
+    const documentHasScroll = document.documentElement.scrollHeight > window.innerHeight ||
+        getComputedStyle(document.documentElement).overflowY === 'scroll';
+    document.documentElement.classList.add(styles.documentWithoutScroll);
+    const scrollWidth = scrollbarWidth();
+    if (documentHasScroll && scrollWidth != null && scrollWidth > 0) {
+        previousDocumentWidth = document.documentElement.style.width;
+        document.documentElement.style.width = `calc(100% - ${scrollWidth}px)`;
+    }
 };
-
-const reset = key => {
-  if (isPrevented.size === 0) {
-    return;
-  }
-
-  isPrevented.delete(key);
-
-  if (isPrevented.size > 0) {
-    return;
-  }
-
-  document.documentElement.classList.remove(styles.documentWithoutScroll);
-
-  if (previousDocumentWidth !== null) {
-    document.documentElement.style.width = previousDocumentWidth;
-    previousDocumentWidth = null;
-  }
+const reset = (key) => {
+    if (isPrevented.size === 0) {
+        return;
+    }
+    isPrevented.delete(key);
+    if (isPrevented.size > 0) {
+        return;
+    }
+    document.documentElement.classList.remove(styles.documentWithoutScroll);
+    if (previousDocumentWidth !== null) {
+        document.documentElement.style.width = previousDocumentWidth;
+        previousDocumentWidth = null;
+    }
 };
-
-export const preventerFactory = key => {
-  const preventerKey = key || Math.random();
-
-  return {
-    prevent: () => prevent(preventerKey),
-    reset: () => reset(preventerKey)
-  };
+export const preventerFactory = (key) => {
+    const preventerKey = key || Math.random();
+    return {
+        prevent: () => prevent(preventerKey),
+        reset: () => reset(preventerKey)
+    };
 };
-
 export default preventerFactory('default-preventer');

package/components/dialog-ng/dialog-ng.examples.js

@@ -2,12 +2,12 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
-import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';
-import InputNG from '@jetbrains/ring-ui/components/input-ng/input-ng';
-import SidebarNG from '@jetbrains/ring-ui/components/sidebar-ng/sidebar-ng';
+import ButtonNG from '../button-ng/button-ng';
+import SelectNG from '../select-ng/select-ng';
+import InputNG from '../input-ng/input-ng';
+import SidebarNG from '../sidebar-ng/sidebar-ng';
 
-import DialogNG from '@jetbrains/ring-ui/components/dialog-ng/dialog-ng';
+import DialogNG from './dialog-ng';
 
 export default {
   title: 'Legacy Angular/Dialog Ng',

package/components/docked-panel-ng/docked-panel-ng.examples.js

@@ -2,10 +2,10 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import PanelNG from '@jetbrains/ring-ui/components/panel-ng/panel-ng';
-import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
+import PanelNG from '../panel-ng/panel-ng';
+import ButtonNG from '../button-ng/button-ng';
 
-import DockedPanelNG from '@jetbrains/ring-ui/components/docked-panel-ng/docked-panel-ng';
+import DockedPanelNG from './docked-panel-ng';
 
 export default {
   title: 'Legacy Angular/Docked Panel Ng',