@jetbrains/ring-ui 5.1.23 → 5.1.25

package/components/data-list/item.js

@@ -0,0 +1,114 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import chevronRightIcon from '@jetbrains/icons/chevron-right';
+import chevronDownIcon from '@jetbrains/icons/chevron-down';
+import Link from '../link/link';
+import Text from '../text/text';
+import LoaderInline from '../loader-inline/loader-inline';
+import Button from '../button/button';
+import Selection from '../table/selection';
+import Title from './title';
+import styles from './data-list.css';
+export var moreLessButtonStates;
+(function (moreLessButtonStates) {
+    moreLessButtonStates[moreLessButtonStates["UNUSED"] = 0] = "UNUSED";
+    moreLessButtonStates[moreLessButtonStates["MORE"] = 1] = "MORE";
+    moreLessButtonStates[moreLessButtonStates["MORE_LOADING"] = 2] = "MORE_LOADING";
+    moreLessButtonStates[moreLessButtonStates["LESS"] = 3] = "LESS";
+})(moreLessButtonStates || (moreLessButtonStates = {}));
+const ITEM_LEFT_OFFSET = 32;
+const LIST_LEFT_OFFSET = 24;
+export default class Item extends PureComponent {
+    static defaultProps = {
+        items: [],
+        level: 0,
+        parentShift: 0,
+        showMoreLessButton: moreLessButtonStates.UNUSED,
+        onItemMoreLess: () => { }
+    };
+    onShowMore = () => {
+        const { onItemMoreLess, item } = this.props;
+        onItemMoreLess(item, true);
+    };
+    onShowLess = () => {
+        const { onItemMoreLess, item } = this.props;
+        onItemMoreLess(item, false);
+    };
+    onFocus = () => {
+        const { onFocus, item } = this.props;
+        onFocus(item);
+    };
+    onSelect = (selected) => {
+        const { onSelect, item } = this.props;
+        onSelect(item, selected);
+    };
+    renderItem = (model, parentShift) => {
+        const { onFocus, onSelect, selection, level, itemFormatter } = this.props;
+        const item = itemFormatter(model);
+        return (<Item key={item.key || item.id} item={model} title={item.title} items={item.items} level={level + 1} parentShift={parentShift} itemFormatter={itemFormatter} collapsible={item.collapsible} collapsed={item.collapsed} onCollapse={item.onCollapse} onExpand={item.onExpand} showFocus={selection.isFocused(model)} onFocus={onFocus} selection={selection} selectable={item.selectable} selected={selection.isSelected(model)} onSelect={onSelect}/>);
+    };
+    render() {
+        const { title, items, showMoreLessButton, level, parentShift, showFocus, selectable, selected, collapsible, collapsed, onCollapse, onExpand } = this.props;
+        let moreLessButton;
+        if (showMoreLessButton === moreLessButtonStates.MORE ||
+            showMoreLessButton === moreLessButtonStates.MORE_LOADING) {
+            moreLessButton = (<Text info>
+          <Link inherit pseudo onClick={this.onShowMore}>{'Show more'}</Link>
+          {showMoreLessButton === moreLessButtonStates.MORE_LOADING &&
+                    <LoaderInline className={styles.showMoreLoader}/>}
+        </Text>);
+        }
+        else if (showMoreLessButton === moreLessButtonStates.LESS) {
+            moreLessButton = (<Text info>
+          <Link inherit pseudo onClick={this.onShowLess}>{'Show less'}</Link>
+        </Text>);
+        }
+        let collapserExpander = null;
+        if (collapsible) {
+            if (collapsed) {
+                collapserExpander = (<Button title="Expand" onClick={onExpand} icon={chevronRightIcon} className={styles.collapseButton} iconClassName={styles.collapseIcon} data-test="ring-data-list-expand"/>);
+            }
+            else {
+                collapserExpander = (<Button title="Collapse" onClick={onCollapse} icon={chevronDownIcon} className={styles.collapseButton} iconClassName={styles.collapseIcon} data-test="ring-data-list-collapse"/>);
+            }
+        }
+        const itemIsEmpty = !items?.length || (collapsible && collapsed);
+        const offset = level * LIST_LEFT_OFFSET + ITEM_LEFT_OFFSET + parentShift;
+        return (<li>
+        <Title title={title} focused={showFocus} showFocus={showFocus} selectable={selectable} selected={selected} collapserExpander={collapserExpander} onFocus={this.onFocus} onSelect={this.onSelect} offset={offset}/>
+
+        {!itemIsEmpty
+                ? (<ul className={styles.itemContent}>
+              {items.map(model => this.renderItem(model, parentShift))}
+
+              {showMoreLessButton !== moreLessButtonStates.UNUSED
+                        ? <li className={styles.showMore}>{moreLessButton}</li>
+                        : null}
+            </ul>)
+                : null}
+      </li>);
+    }
+}
+Item.propTypes = {
+    item: PropTypes.shape({
+        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+    }).isRequired,
+    title: PropTypes.node,
+    items: PropTypes.array,
+    className: PropTypes.string,
+    level: PropTypes.number,
+    parentShift: PropTypes.number,
+    itemFormatter: PropTypes.func.isRequired,
+    collapsible: PropTypes.bool,
+    collapsed: PropTypes.bool,
+    onCollapse: PropTypes.func,
+    onExpand: PropTypes.func,
+    showFocus: PropTypes.bool,
+    onFocus: PropTypes.func.isRequired,
+    selection: PropTypes.instanceOf(Selection).isRequired,
+    selectable: PropTypes.bool,
+    selected: PropTypes.bool,
+    onSelect: PropTypes.func.isRequired,
+    showMoreLessButton: PropTypes.number,
+    onItemMoreLess: PropTypes.func
+};

package/components/data-list/selection.d.ts

@@ -0,0 +1,16 @@
+import TableSelection, { CloneWithConfig, SelectionItem } from '../table/selection';
+export default class Selection<T extends SelectionItem> extends TableSelection<T> {
+    protected _buildData(data: T[]): Set<T>;
+    protected _buildSelected(data: Set<T>, selected: Set<T>): Set<T>;
+    private _getDescendants;
+    private _getAncestors;
+    private _selectDescendants;
+    private _deselectDescendants;
+    private _selectAncestors;
+    private _deselectAncestors;
+    select(value?: T | null): Selection<T>;
+    focus(value: T | null | undefined): Selection<T>;
+    resetSelection(): Selection<T>;
+    cloneWith(config: CloneWithConfig<T>): Selection<T>;
+    deselect(value?: T | null): Selection<T>;
+}

package/components/data-list/selection.js

@@ -0,0 +1,81 @@
+import TableSelection from '../table/selection';
+export default class Selection extends TableSelection {
+    _buildData(data) {
+        return new Set(this._getDescendants(data));
+    }
+    _buildSelected(data, selected) {
+        const _selected = new Set(selected);
+        [...data].forEach(item => {
+            if (_selected.has(item)) {
+                this._selectDescendants(item, _selected);
+            }
+        });
+        return _selected;
+    }
+    _getDescendants(items) {
+        let result = [];
+        items.forEach(item => {
+            result.push(item);
+            result = [...result, ...this._getDescendants(this._getChildren(item))];
+        });
+        return result;
+    }
+    _getAncestors(item) {
+        let result = [];
+        const parent = [...this._data].find(it => this._getChildren(it).includes(item));
+        if (parent) {
+            result = [parent, ...this._getAncestors(parent)];
+        }
+        return result;
+    }
+    _selectDescendants(item, selected) {
+        this._getDescendants(this._getChildren(item)).
+            forEach(it => selected.add(it));
+    }
+    _deselectDescendants(item, selected) {
+        this._getDescendants(this._getChildren(item)).
+            forEach(it => selected.delete(it));
+    }
+    _selectAncestors(item, selected) {
+        this._getAncestors(item).forEach(ancestor => {
+            const groupIsSelected = this._getChildren(ancestor).
+                filter(it => this._isItemSelectable(it)).
+                every(it => selected.has(it));
+            if (groupIsSelected) {
+                selected.add(ancestor);
+            }
+        });
+    }
+    _deselectAncestors(item, selected) {
+        this._getAncestors(item).forEach(it => selected.delete(it));
+    }
+    select(value = this._focused) {
+        if (!value || !this._isItemSelectable(value)) {
+            return this;
+        }
+        const selected = new Set(this._selected);
+        selected.add(value);
+        this._selectDescendants(value, selected);
+        this._selectAncestors(value, selected);
+        return this.cloneWith({ selected });
+    }
+    focus(value) {
+        return super.focus(value);
+    }
+    resetSelection() {
+        return super.resetSelection();
+    }
+    cloneWith(config) {
+        return super.cloneWith(config);
+    }
+    deselect(value = this._focused) {
+        if (!value || !this._isItemSelectable(value)) {
+            return this;
+        }
+        const selected = new Set(this._selected);
+        selected.delete(value);
+        this._deselectDescendants(value, selected);
+        this._deselectAncestors(value, selected);
+        return this.cloneWith({ selected });
+    }
+}

package/components/data-list/title.d.ts

@@ -0,0 +1,26 @@
+import React, { PureComponent, ReactNode } from 'react';
+import { FocusSensorAddProps } from '../global/focus-sensor-hoc';
+export interface TitleProps extends FocusSensorAddProps<HTMLDivElement> {
+    onSelect: (selected: boolean) => void;
+    selectable?: boolean | undefined;
+    selected?: boolean | undefined;
+    showFocus?: boolean | undefined;
+    offset?: number | undefined;
+    className?: string | null | undefined;
+    title?: ReactNode;
+    collapserExpander?: ReactNode;
+}
+declare class Title extends PureComponent<TitleProps> {
+    static defaultProps: {
+        selectable: boolean;
+        selected: boolean;
+        showFocus: boolean;
+    };
+    id: string;
+    onCheckboxFocus: () => void;
+    onCheckboxChange: () => void;
+    toggleSelection(): void;
+    render(): React.JSX.Element;
+}
+declare const _default: React.ComponentType<import("../global/focus-sensor-hoc").FocusSensorProps<TitleProps, HTMLDivElement, typeof Title>>;
+export default _default;

package/components/data-list/title.js

@@ -0,0 +1,65 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import focusSensorHOC from '../global/focus-sensor-hoc';
+import Checkbox from '../checkbox/checkbox';
+import getUID from '../global/get-uid';
+import { refObject } from '../global/prop-types';
+import styles from './data-list.css';
+class Title extends PureComponent {
+    static defaultProps = {
+        selectable: false,
+        selected: false,
+        showFocus: false
+    };
+    id = getUID('data-list-title');
+    onCheckboxFocus = () => {
+        this.props.onFocusRestore();
+    };
+    onCheckboxChange = () => {
+        this.toggleSelection();
+    };
+    toggleSelection() {
+        const { selectable, selected, onSelect } = this.props;
+        if (selectable) {
+            onSelect(!selected);
+        }
+    }
+    render() {
+        const { className, title, offset, showFocus, innerRef, selectable, selected, collapserExpander } = this.props;
+        const classes = classNames(className, {
+            [styles.title]: true,
+            [styles.titleFocused]: showFocus,
+            [styles.titleSelected]: selected
+        });
+        return (<div id={this.id} className={classes} style={{ paddingLeft: offset }} ref={innerRef}>
+        <div className={styles.boxes}>
+          {selectable &&
+                (<div className={styles.checkboxBox}>
+                <Checkbox aria-labelledby={this.id} className={showFocus ? 'ring-checkbox_focus' : ''} checked={selected} onFocus={this.onCheckboxFocus} onChange={this.onCheckboxChange} tabIndex={-1}/>
+              </div>)}
+
+          {collapserExpander}
+        </div>
+
+        {title}
+      </div>);
+    }
+}
+Title.propTypes = {
+    className: PropTypes.string,
+    title: PropTypes.node,
+    offset: PropTypes.number,
+    selectable: PropTypes.bool,
+    selected: PropTypes.bool,
+    onSelect: PropTypes.func.isRequired,
+    showFocus: PropTypes.bool,
+    collapserExpander: PropTypes.node,
+    innerRef: PropTypes.oneOfType([
+        refObject(PropTypes.instanceOf(HTMLDivElement)),
+        PropTypes.func
+    ]),
+    // focusSensorHOC
+    onFocusRestore: PropTypes.func.isRequired
+};
+export default focusSensorHOC(Title);

package/components/data-list-ng/data-list-ng.js

@@ -0,0 +1,7 @@
+/**
+ * @name DataList Ng
+ */
+import angularComponentFactory from '../global/angular-component-factory';
+import DataList from '../data-list/data-list';
+
+export default angularComponentFactory(DataList, 'DataList').name;

package/components/data-list-ng/data-list-ng.stories.js

@@ -0,0 +1,54 @@
+import angular from 'angular';
+
+import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+
+import Selection from '../data-list/selection';
+import data from '../data-list/data-list.mock';
+
+import RingDataList from './data-list-ng';
+
+export default {
+  title: 'Legacy Angular/DataList Ng',
+  decorators: [angularDecorator()],
+
+  parameters: {
+    notes: 'Provides an Angular wrapper for DataList.'
+  }
+};
+
+export const basic = () => {
+  angular.module(APP_NAME, [RingDataList]).controller('testCtrl', function controller() {
+    function itemFormatter(item) {
+      return {
+        ...item,
+        collapsible: false
+      };
+    }
+
+    const selection = new Selection({
+      data,
+      isItemSelectable: item => item.selectable,
+      getChildren: item => item.items || []
+    });
+
+    this.data = data;
+    this.itemFormatter = itemFormatter;
+    this.selection = selection;
+    this.onSelect = newSelection => {
+      this.selection = newSelection;
+    };
+  });
+
+  return `
+      <div ng-controller="testCtrl as ctrl">
+        <rg-data-list
+          data="ctrl.data"
+          selection="ctrl.selection"
+          on-select="ctrl.onSelect"
+          item-formatter="ctrl.itemFormatter"
+        ></rg-data-list>
+      </div>
+    `;
+};
+
+basic.storyName = 'DataList Ng';

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

@@ -0,0 +1,102 @@
+import { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import type { Locale } from 'date-fns';
+declare const units: {
+    unit: number;
+    cellSize: number;
+    calHeight: number;
+    yearHeight: number;
+};
+export default units;
+export declare const YEAR = 12;
+export declare const WEEK = 7;
+export declare const FIFTH_DAY = 4;
+export declare const weekdays: {
+    MO: number;
+    TU: number;
+    WE: number;
+    TH: number;
+    FR: number;
+    SA: number;
+    SU: number;
+};
+export declare const MIDDLE_DAY = 15;
+export declare const yearDuration: number;
+export declare const yearScrollSpeed: number;
+export declare const DOUBLE = 2;
+export declare const HALF = 0.5;
+export declare const dateType: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
+export declare function parseTime(time: string): string | null;
+export declare function shiftWeekArray<T>(arr: T[], startOfWeek: number): T[];
+export declare function getWeekStartsOn(locale: Locale | undefined): number;
+export declare function getDayNumInWeek(locale: Locale | undefined, day: number): number;
+export interface DateInputTranslations {
+    addFirstDate?: string;
+    addSecondDate?: string;
+    addTime?: string;
+    selectName?: string;
+}
+export interface DateSpecificPopupProps {
+    withTime?: false | undefined;
+    range?: false | undefined;
+    onChange: (date: Date | null | undefined) => void;
+}
+export interface DatePickerChange {
+    from?: Date | null | undefined;
+    to?: Date | null | undefined;
+    date?: Date | null | undefined;
+    time?: string | null | undefined;
+}
+export interface TimeSpecificPopupProps {
+    withTime: true;
+    range?: false | undefined;
+    onChange: (change: DatePickerChange) => void;
+}
+export interface RangeSpecificPopupProps {
+    withTime?: false | undefined;
+    range: true;
+    onChange: (change: DatePickerChange) => void;
+}
+export interface DatePopupState {
+    active: Field;
+    text: string | null;
+    hoverDate: Date | null;
+    scrollDate: number | null;
+}
+export interface DatePopupBaseProps {
+    date?: Date | number | string | null | undefined;
+    time?: string | null | undefined;
+    from?: Date | number | string | null | undefined;
+    to?: Date | number | string | null | undefined;
+    minDate?: string | null | undefined;
+    maxDate?: string | null | undefined;
+    translations?: DateInputTranslations | null | undefined;
+    fromPlaceholder?: string | null | undefined;
+    toPlaceholder?: string | null | undefined;
+    timePlaceholder?: string | null | undefined;
+    locale?: Locale | undefined;
+    parseDateInput: (text: Date | number | string | null | undefined) => Date | null;
+    displayFormat: (date: Date, locale: Locale | undefined) => string;
+    onComplete: () => void;
+    onClear?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | null | undefined;
+    renderAfterCalendar?: ((state: DatePopupState) => ReactNode) | undefined;
+}
+export interface Dates {
+    from?: Date | null | undefined;
+    to?: Date | null | undefined;
+    date?: Date | null | undefined;
+    time?: never;
+}
+export interface CalendarProps extends Omit<DatePopupBaseProps, 'date' | 'from' | 'to' | 'time'>, Dates {
+    activeDate: Date | null;
+    scrollDate: number | Date;
+    currentRange: [Date, Date] | null;
+    activeRange: [Date, Date] | null;
+    onScroll: (to: number) => void;
+    onScrollChange: (date: number) => void;
+}
+export interface MonthsProps extends CalendarProps {
+    onSelect: (date: Date) => void;
+    onHover: (date: Date) => void;
+}
+export type Field = 'date' | 'time' | 'from' | 'to';

package/components/date-picker/consts.js

@@ -0,0 +1,56 @@
+import PropTypes from 'prop-types';
+import add from 'date-fns/add';
+const unit = 8; // px;
+const units = {
+    unit,
+    /* eslint-disable @typescript-eslint/no-magic-numbers */
+    cellSize: unit * 3,
+    calHeight: unit * 36,
+    yearHeight: unit * 4
+    /* eslint-enable */
+};
+export default units;
+export const YEAR = 12;
+export const WEEK = 7;
+export const FIFTH_DAY = 4;
+export const weekdays = {
+    MO: 1,
+    TU: 2,
+    WE: 3,
+    TH: 4,
+    FR: 5,
+    SA: 6,
+    SU: 0
+};
+export const MIDDLE_DAY = 15;
+const durationToMillis = (duration) => +add(0, duration);
+export const yearDuration = durationToMillis({ years: 1 });
+export const yearScrollSpeed = yearDuration / (YEAR * units.cellSize);
+export const DOUBLE = 2;
+export const HALF = 0.5;
+export const dateType = PropTypes.oneOfType([
+    PropTypes.instanceOf(Date),
+    PropTypes.string,
+    PropTypes.number
+]);
+export function parseTime(time) {
+    let result = null;
+    if (/^([01][0-9]|2[0-3]):[0-5][0-9]$/.test(time)) {
+        result = time;
+    }
+    else if (/^([0-9]|2[0-3]):[0-5][0-9]$/.test(time)) {
+        result = `0${time}`;
+    }
+    return result;
+}
+export function shiftWeekArray(arr, startOfWeek) {
+    const shiftTimes = startOfWeek - 1;
+    return arr.slice(shiftTimes).concat(arr.slice(0, shiftTimes));
+}
+export function getWeekStartsOn(locale) {
+    return locale?.options?.weekStartsOn ?? weekdays.MO;
+}
+export function getDayNumInWeek(locale, day) {
+    const weekDays = shiftWeekArray(Object.values(weekdays), getWeekStartsOn(locale));
+    return weekDays.indexOf(day);
+}

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DatePopupBaseProps, Field } from './consts';
+export interface UpdateInputConfig {
+    active: boolean;
+    text: string | null;
+}
+export interface DateInputProps extends DatePopupBaseProps, UpdateInputConfig {
+    divider: boolean;
+    name: Field;
+    hoverDate: Date | null;
+    date: Date | null | undefined;
+    time?: string | null | undefined;
+    onInput: (value: string, name: Field) => void;
+    onActivate: () => void;
+    onConfirm: () => void;
+}
+export default class DateInput extends React.PureComponent<DateInputProps> {
+    static propTypes: {
+        active: PropTypes.Requireable<boolean>;
+        divider: PropTypes.Requireable<boolean>;
+        name: PropTypes.Requireable<string>;
+        text: PropTypes.Requireable<string>;
+        hoverDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
+        date: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
+        time: PropTypes.Requireable<string>;
+        displayFormat: PropTypes.Requireable<(...args: any[]) => any>;
+        translations: PropTypes.Requireable<object>;
+        fromPlaceholder: PropTypes.Requireable<string>;
+        toPlaceholder: PropTypes.Requireable<string>;
+        timePlaceholder: PropTypes.Requireable<string>;
+        onInput: PropTypes.Requireable<(...args: any[]) => any>;
+        onActivate: PropTypes.Requireable<(...args: any[]) => any>;
+        onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
+        onClear: PropTypes.Requireable<(...args: any[]) => any>;
+        locale: PropTypes.Requireable<object>;
+    };
+    componentDidUpdate(prevProps: DateInputProps): void;
+    static contextType: React.Context<import("../i18n/i18n-context").I18nContextProps>;
+    context: React.ContextType<typeof DateInput.contextType>;
+    input?: HTMLInputElement | null;
+    inputRef: (el: HTMLInputElement | null) => void;
+    updateInput({ text, active }: UpdateInputConfig): void;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleKeyDown: (e: React.KeyboardEvent) => false | void;
+    render(): React.JSX.Element;
+}

package/components/date-picker/date-input.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import Input from '../input/input';
+import { ControlsHeight } from '../global/controls-height';
+import { I18nContext } from '../i18n/i18n-context';
+import { dateType } from './consts';
+import styles from './date-picker.css';
+export default class DateInput extends React.PureComponent {
+    static propTypes = {
+        active: PropTypes.bool,
+        divider: PropTypes.bool,
+        name: PropTypes.string,
+        text: PropTypes.string,
+        hoverDate: dateType,
+        date: dateType,
+        time: PropTypes.string,
+        displayFormat: PropTypes.func,
+        translations: PropTypes.object,
+        fromPlaceholder: PropTypes.string,
+        toPlaceholder: PropTypes.string,
+        timePlaceholder: PropTypes.string,
+        onInput: PropTypes.func,
+        onActivate: PropTypes.func,
+        onConfirm: PropTypes.func,
+        onClear: PropTypes.func,
+        locale: PropTypes.object
+    };
+    componentDidUpdate(prevProps) {
+        const { text, active } = this.props;
+        if (text !== prevProps.text || active !== prevProps.active) {
+            this.updateInput({ text, active });
+        }
+    }
+    static contextType = I18nContext;
+    input;
+    inputRef = (el) => {
+        this.input = el;
+        this.updateInput(this.props);
+    };
+    updateInput({ text, active }) {
+        const el = this.input;
+        if (!el) {
+            return;
+        }
+        if (active) {
+            el.focus();
+            if (!text) {
+                el.select();
+            }
+        }
+        else {
+            el.blur();
+        }
+    }
+    handleChange = (e) => this.props.onInput(e.currentTarget.value, e.currentTarget.dataset.name);
+    handleKeyDown = (e) => e.key === 'Enter' && this.props.onConfirm();
+    render() {
+        const { active, divider, text, time, name, hoverDate, date, displayFormat, translations, onActivate, onClear, fromPlaceholder, toPlaceholder, timePlaceholder, locale } = this.props;
+        const { translate } = this.context;
+        let displayText = '';
+        if (active && hoverDate) {
+            displayText = displayFormat(hoverDate, locale);
+        }
+        else if (active && text != null) {
+            displayText = text;
+        }
+        else if (date) {
+            displayText = displayFormat(date, locale);
+        }
+        else if (name === 'time') {
+            displayText = time || '';
+        }
+        const placeholder = (() => {
+            switch (name) {
+                case 'from':
+                    return fromPlaceholder || (translations?.addFirstDate ?? translate('addFirstDate'));
+                case 'to':
+                    return toPlaceholder || (translations?.addSecondDate ?? translate('addSecondDate'));
+                case 'time':
+                    return timePlaceholder || (translations?.addTime ?? translate('addTime'));
+                default:
+                    return (translations?.selectName ?? translate('selectName')).
+                        replace('%name%', name).
+                        replace('{{name}}', name);
+            }
+        })();
+        const classes = classNames(styles.filter, styles[`${name}Input`], divider && styles[`${name}InputWithDivider`], 'ring-js-shortcuts');
+        return (<Input autoComplete="off" borderless height={ControlsHeight.L} data-name={name} inputRef={this.inputRef} className={classes} value={displayText} onChange={this.handleChange} onFocus={onActivate} onKeyDown={this.handleKeyDown} onClear={onClear} placeholder={placeholder}/>);
+    }
+}