@epam/uui 5.3.0-rc.0 → 5.3.0

package/components/filters/FilterPanelItemToggler.module.scss

@@ -0,0 +1,140 @@
+@use '../../assets/styles/index' as *;
+
+.root {
+    --uui-filters_toggler-bg: var(--uui-surface-main);
+    --uui-filters_toggler-bg-hover: var(--uui-surface-sunken);
+    --uui-filters_toggler-border: var(--uui-control-border);
+    --uui-filters_toggler-border-hover: var(--uui-control-border-hover);
+    --uui-filters_toggler-icon: var(--uui-icon);
+    --uui-filters_toggler-label: var(--uui-text-tertiary);
+    --uui-filters_toggler-shadow: none;
+    --uui-filters_toggler-text: var(--uui-text-brand);
+
+    --uui-filters_toggler-border-radius: var(--uui-border-radius);
+
+    --uui-filters_toggler-font: var(--uui-font);
+    --uui-filters_toggler-font-weight: 400;
+
+    &:global(.uui-input-box) {
+        box-sizing: border-box;
+        min-width: 40px;
+        position: relative;
+        display: flex;
+        outline: none;
+        border: 1px solid var(--uui-filters_toggler-border);
+        border-radius: var(--uui-filters_toggler-border-radius);
+        background-color: var(--uui-filters_toggler-bg);
+        box-shadow: var(--uui-filters_toggler-shadow);
+        padding-left: 6px;
+        padding-right: 6px;
+
+        &:global(.-clickable):hover {
+            cursor: pointer;
+        }
+
+        &:hover, &:focus {
+            border-color: var(--uui-filters_toggler-border-hover);
+            background-color: var(--uui-filters_toggler-bg-hover);
+        }
+
+        &:global(.uui-opened) {
+            border-color: var(--uui-filters_toggler-border-hover);
+            background-color: var(--uui-filters_toggler-bg-hover);
+        }
+
+        :global(.uui-icon-dropdown) {
+            fill: var(--uui-filters_toggler-icon);
+        }
+
+        .title-wrapper {
+            font-family: var(--uui-filters_toggler-font);
+            font-weight: var(--uui-filters_toggler-font-weight, normal);
+            flex: 1 1 auto;
+            min-width: 0;
+            outline: none;
+            background: none;
+            cursor: pointer;
+            white-space: nowrap;
+            padding-left: 6px;
+            padding-right: 6px;
+
+            .title {
+                display: flex;
+                text-overflow: initial;
+                overflow: visible;
+                padding-top: 0;
+                padding-bottom: 0;
+                color: var(--uui-filters_toggler-label);
+            }
+
+            .text-wrapper {
+                display: flex;
+                overflow: hidden;
+                align-items: baseline;
+                width: 100%;
+                padding-left: 3px;
+            }
+
+            .selection {
+                padding-top: 0;
+                padding-bottom: 0;
+                color: var(--uui-filters_toggler-text);
+
+                div {
+                    display: inline-block;
+                    margin-right: 3px;
+
+                    :nth-last-child {
+                        margin-right: 0;
+                    }
+                }
+
+                & + span {
+                    color: var(--uui-filters_toggler-text);
+                }
+            }
+
+            .postfix {
+                padding-top: 0;
+                padding-bottom: 0;
+                padding-left: 6px;
+                overflow: visible;
+                color: var(--uui-filters_toggler-text);
+            }
+
+            .selected {
+                color: var(--uui-filters_toggler-text);
+            }
+        }
+
+        @mixin filterTogglerSize($size) {
+            &:global(.size-#{$size}) {
+                @include control-vertical-layout(#{$size}px, 1px);
+                padding-left: 5px;
+                padding-right: 5px;
+
+                @if $size == 24 {
+                    padding-left: 2px;
+                    padding-right: 2px;
+
+                    .title-wrapper {
+                        padding-left: 3px;
+                        padding-right: 3px;
+                    }
+                } @else if $size == 42 {
+                    padding-left: 11px;
+                    padding-right: 11px;
+                } @else if $size == 48 {
+                    padding-left: 11px;
+                    padding-right: 11px;
+                }
+            }
+        }
+
+        @include filterTogglerSize(24);
+        @include filterTogglerSize(30);
+        @include filterTogglerSize(36);
+        @include filterTogglerSize(42);
+        @include filterTogglerSize(48);
+    }
+}

package/components/filters/FilterPanelItemToggler.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { IDropdownToggler, IHasCX, uuiElement, uuiMarkers, uuiMod } from '@epam/uui-core';
+import { systemIcons } from '../../icons/icons';
+import { IconContainer, FlexRow } from '@epam/uui-components';
+import { Text } from '../typography';
+import { UUI_FILTERS_PANEL_ITEM_TOGGLER } from './constants';
+import css from './FilterPanelItemToggler.module.scss';
+
+const defaultSize = '36';
+
+export interface FilterToolbarItemTogglerProps extends IDropdownToggler {
+    selection?: React.ReactNode[];
+    postfix?: string | null | JSX.Element;
+    title?: string;
+    maxWidth?: string;
+    size?: '24' | '30' | '36' | '42' | '48';
+    cx?: IHasCX;
+    predicateName: string | null;
+}
+
+export const FilterPanelItemToggler = React.forwardRef<HTMLDivElement, FilterToolbarItemTogglerProps>((props, ref) => {
+    const togglerPickerOpened = (e: React.MouseEvent<HTMLDivElement>) => {
+        if (props.isDisabled) return;
+        e.preventDefault();
+        props.onClick?.();
+    };
+
+    const onKeyDownHandler = (e: React.KeyboardEvent<HTMLElement>) => {
+        if (props.isDisabled) return;
+
+        if (e.key === 'Enter' && !props.isOpen) {
+            e.preventDefault();
+            props.toggleDropdownOpening(true);
+        }
+
+        if (e.key === 'Escape' && props.isOpen) {
+            e.preventDefault();
+            props.toggleDropdownOpening(false);
+        }
+    };
+
+    const getTitle = props.predicateName ? `${props.title} ${props.predicateName}` : `${props.title}${props.selection ? ':' : ''}`;
+
+    const getSelectionText = () => props.selection.map((i, index) => (
+        <React.Fragment key={ `${i}${index}` }>
+            <Text color="brand" size={ props.size } cx={ css.selection }>{ i }</Text>
+            { (props.postfix || index !== props.selection.length - 1) && <span>,&nbsp;</span> }
+        </React.Fragment>
+    ));
+
+    return (
+        <FlexRow
+            { ...props }
+            rawProps={ {
+                style: { maxWidth: `${props.maxWidth ? props.maxWidth + 'px' : 'auto'}` },
+                role: 'button',
+                tabIndex: props.isDisabled ? -1 : 0,
+                onKeyDown: onKeyDownHandler,
+            } }
+            cx={ cx(
+                UUI_FILTERS_PANEL_ITEM_TOGGLER,
+                css.root,
+                uuiElement.inputBox,
+                uuiMarkers.clickable,
+                props.isOpen && uuiMod.opened,
+                `size-${props.size || defaultSize}`,
+                props.cx,
+            ) }
+            onClick={ togglerPickerOpened }
+            ref={ ref }
+        >
+            <FlexRow cx={ css.titleWrapper }>
+                <Text size={ props.size } cx={ css.title }>{getTitle}</Text>
+                {
+                    props.selection && (
+                        <div className={ css.textWrapper }>
+                            { getSelectionText() }
+                            {props.postfix && (
+                                <Text color="brand" size={ props.size } cx={ css.postfix }>
+                                    {props.postfix}
+                                </Text>
+                            )}
+                        </div>
+                    )
+                }
+            </FlexRow>
+            {!props.isDisabled && <IconContainer icon={ systemIcons[props.size || defaultSize].foldingArrow } flipY={ props.isOpen } cx="uui-icon-dropdown" />}
+        </FlexRow>
+    );
+});

package/components/filters/FilterPickerBody.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { DataRowProps, DataSourceListProps, DropdownBodyProps, isMobile } from '@epam/uui-core';
+import { PickerBodyBaseProps, PickerInputBaseProps, usePickerInput } from '@epam/uui-components';
+import { DataPickerRow, PickerItem, DataPickerBody, DataPickerFooter, PickerInputProps } from '../pickers';
+
+const pickerHeight = 300;
+
+type FilterPickerBodyProps<TItem, TId> = DropdownBodyProps & PickerInputBaseProps<TItem, TId> & {
+    showSearch?: boolean;
+};
+
+export function FilterPickerBody<TItem, TId>(props: FilterPickerBodyProps<TItem, TId>) {
+    const shouldShowBody = () => props.isOpen;
+
+    const {
+        getName,
+        isSingleSelect,
+        getRows,
+        dataSourceState,
+        getFooterProps,
+        getPickerBodyProps,
+        getListProps,
+        handleDataSourceValueChange,
+    } = usePickerInput<TItem, TId, PickerInputProps>({ ...props, shouldShowBody });
+
+    const renderItem = (item: TItem, rowProps: DataRowProps<TItem, TId>) => {
+        return <PickerItem title={ getName(item) } size="36" { ...rowProps } />;
+    };
+    
+    const onSelect = (row: DataRowProps<TItem, TId>) => {
+        props.onClose();
+        handleDataSourceValueChange({ ...dataSourceState, search: '', selectedId: row.id });
+    };
+    
+    const renderRow = (rowProps: DataRowProps<TItem, TId>) => {
+        if (rowProps.isSelectable && isSingleSelect() && props.editMode !== 'modal') {
+            rowProps.onSelect = onSelect;
+        }
+
+        return props.renderRow ? (
+            props.renderRow(rowProps, dataSourceState)
+        ) : (
+            <DataPickerRow { ...rowProps } key={ rowProps.rowKey } borderBottom="none" size="36" padding="12" renderItem={ renderItem } />
+        );
+    };
+    
+    const renderFooter = () => {
+        return <DataPickerFooter { ...getFooterProps() } size="36" />;
+    };
+    
+    const renderBody = (bodyProps: DataSourceListProps & Omit<PickerBodyBaseProps, 'rows'>, rows: DataRowProps<TItem, TId>[]) => {
+        const renderedDataRows = rows.map((props) => renderRow(props));
+        const maxHeight = isMobile() ? document.documentElement.clientHeight : props.dropdownHeight || pickerHeight;
+
+        return (
+            <>
+                <DataPickerBody
+                    { ...bodyProps }
+                    selectionMode={ props.selectionMode }
+                    rows={ renderedDataRows }
+                    maxHeight={ maxHeight }
+                    searchSize="36"
+                    editMode="dropdown"
+                />
+                {renderFooter()}
+            </>
+        );
+    };
+    
+    const rows = getRows();
+
+    return renderBody({ ...getPickerBodyProps(rows), ...getListProps(), showSearch: props.showSearch ?? true }, rows);
+}

package/components/filters/FilterRangeDatePickerBody.module.scss

@@ -0,0 +1,92 @@
+@use  '../../assets/styles/index' as *;
+
+.date-input {
+    min-width: 0;
+    padding: 0 5px;
+
+    &:global(.uui-focus) {
+        border: 1px solid var(--uui-control-border-focus);
+    }
+
+    &.size-24 {
+        @include control-box-layout(22px, 0);
+    }
+
+    &.size-30 {
+        @include control-box-layout(28px, 0);
+    }
+
+    &.size-36 {
+        @include control-box-layout(34px, 0);
+    }
+
+    &.size-42 {
+        @include control-box-layout(40px, 0);
+    }
+
+    &.size-48 {
+        @include control-box-layout(46px, 0);
+    }
+}
+
+.date-input-group {
+    display: flex;
+    min-width: 0;
+    background-color: var(--uui-control-bg);
+    border: 1px solid var(--uui-control-border);
+
+    .separator {
+        display: flex;
+        flex-shrink: 0;
+        background: var(--uui-control-border);
+        width: 1px;
+    }
+
+    &:hover {
+        border-color: var(--uui-control-border-hover);
+
+        .separator {
+            background: var(--uui-control-border-hover);
+        }
+
+        &:global(.uui-disabled), &:global(.uui-readonly) {
+            border-color: var(--uui-control-border);
+
+            .separator {
+                background: var(--uui-control-border);
+            }
+        }
+    }
+
+    &:global(.uui-focus) {
+        border-color: var(--uui-control-border);
+
+        .separator {
+            background: var(--uui-control-border-focus);
+        }
+
+        .date-input {
+            &:hover {
+                outline: 1px solid var(--uui-control-border-hover);
+            }
+
+            &:global(.uui-focus) {
+                outline: 1px solid var(--uui-control-border-focus);
+            }
+        }
+    }
+
+    &:global(.uui-readonly) {
+        @include readonly-input();
+
+        .date-input {
+            &:global(.uui-focus) {
+                box-shadow: none;
+            }
+        }
+    }
+
+    &:global(.uui-invalid) {
+        border-color: var(--uui-error-50);
+    }
+}

package/components/filters/FilterRangeDatePickerBody.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import cx from 'classnames';
+import {
+    BaseRangeDatePickerProps, IDropdownBodyProps, RangeDatePickerInputType, uuiMod,
+} from '@epam/uui-core';
+import { BaseRangeDatePicker } from '@epam/uui-components';
+import { FlexRow, FlexSpacer, FlexCell } from '../layout';
+import { LinkButton } from '../buttons';
+import { TextInput } from '../inputs';
+import { RangeDatePickerBody } from '../datePickers';
+import { i18n } from '../../i18n';
+import { systemIcons } from '../../icons/icons';
+import css from './FilterRangeDatePickerBody.module.scss';
+
+export interface RangeDatePickerProps extends BaseRangeDatePickerProps, IDropdownBodyProps {}
+
+export class FilterRangeDatePickerBody extends BaseRangeDatePicker<RangeDatePickerProps> {
+    state = {
+        ...super.getInitialState(),
+        inFocus: 'from' as RangeDatePickerInputType,
+    };
+
+    changeIsOpen = (open: boolean) => {
+        this.toggleOpening(open);
+        this.props.onClose();
+    };
+
+    renderBody() {
+        return (
+            <>
+                <FlexRow borderBottom={ true }>
+                    <RangeDatePickerBody
+                        value={ this.getValue() }
+                        onValueChange={ this.onRangeChange }
+                        filter={ this.props.filter }
+                        focusPart={ this.state.inFocus }
+                        changeIsOpen={ this.changeIsOpen }
+                        presets={ this.props.presets }
+                    />
+                </FlexRow>
+                <FlexCell alignSelf="stretch">
+                    <FlexRow padding="24" vPadding="12">
+                        <div className={ cx(css.dateInputGroup, this.state.inFocus && uuiMod.focus) }>
+                            <TextInput
+                                icon={ systemIcons['30'].calendar }
+                                cx={ cx(css.dateInput, css['size-30'], this.state.inFocus === 'from' && uuiMod.focus) }
+                                size="30"
+                                placeholder={ i18n.rangeDatePicker.pickerPlaceholderFrom }
+                                value={ this.state.inputValue.from }
+                                onValueChange={ this.getChangeHandler('from') }
+                                onFocus={ (event) => this.handleFocus(event, 'from') }
+                                onBlur={ (event) => this.handleBlur(event, 'from') }
+                            />
+                            <div className={ css.separator } />
+                            <TextInput
+                                cx={ cx(css.dateInput, css['size-30'], this.state.inFocus === 'to' && uuiMod.focus) }
+                                placeholder={ i18n.rangeDatePicker.pickerPlaceholderTo }
+                                size="30"
+                                value={ this.state.inputValue.to }
+                                onCancel={ this.state.inputValue.from && this.state.inputValue.to && this.handleCancel }
+                                onValueChange={ this.getChangeHandler('to') }
+                                onFocus={ (event) => this.handleFocus(event, 'to') }
+                                onBlur={ (event) => this.handleBlur(event, 'to') }
+                            />
+                        </div>
+                        <FlexSpacer />
+                        <LinkButton
+                            isDisabled={ !this.state.inputValue.from && !this.state.inputValue.to }
+                            caption={ i18n.pickerModal.clearAllButton }
+                            onClick={ this.handleCancel }
+                        />
+                    </FlexRow>
+                </FlexCell>
+            </>
+        );
+    }
+
+    renderInput = (): any => {
+        return null;
+    };
+
+    render() {
+        return this.renderBody();
+    }
+}

package/components/filters/FiltersPanel.tsx

@@ -0,0 +1,218 @@
+import React, {
+    useCallback, useEffect, useMemo, useState,
+} from 'react';
+import sortBy from 'lodash.sortby';
+import { i18n } from '../../i18n';
+import { Button } from '../buttons';
+import { PickerInput, PickerItem, DataPickerRow } from '../pickers';
+import {
+    DataRowOptions, TableFiltersConfig, FiltersConfig, DataQueryFilter, getOrderBetween, DataTableState, useArrayDataSource,
+} from '@epam/uui-core';
+import { PickerTogglerProps, FlexCell } from '@epam/uui-components';
+import { FiltersPanelItem } from './FiltersPanelItem';
+import { ReactComponent as addIcon } from '@epam/assets/icons/common/action-add-18.svg';
+import { UUI_FILTERS_PANEL_ADD_BUTTON, UUI_FILTERS_PANEL_ADD_BUTTON_BODY } from './constants';
+
+export interface FiltersPanelProps<TFilter> {
+    filters: TableFiltersConfig<TFilter>[];
+    tableState: DataTableState;
+    setTableState: (newState: DataTableState) => void;
+    size?: '24' | '30' | '36' | '42' | '48';
+}
+
+const normalizeFilterWithPredicates = <TFilter,>(filter: TFilter) => {
+    if (!filter) {
+        return {};
+    }
+    const result: DataQueryFilter<TFilter> = filter;
+    const keys = Object.keys(filter) as (keyof TFilter)[];
+    for (let n = 0; n < keys.length; n++) {
+        const key = keys[n];
+        const filterValue: any = filter[key];
+        if (filterValue && typeof filterValue === 'object') {
+            if ('from' in filterValue && 'to' in filterValue) {
+                continue;
+            }
+            if ('in' in filterValue && (!Array.isArray(filterValue.in) || !filterValue.in.length)) {
+                delete filter[key];
+            }
+            if ('nin' in filterValue && (!Array.isArray(filterValue.nin) || !filterValue.nin.length)) {
+                delete filter[key];
+            }
+            if ('inRange' in filterValue) {
+                if (!filterValue.inRange || (!filterValue.inRange.from && !filterValue.inRange.to)) {
+                    delete filter[key];
+                }
+            }
+            if ('notInRange' in filterValue) {
+                if (!filterValue.notInRange || (!filterValue.notInRange.from && !filterValue.notInRange.to)) {
+                    delete filter[key];
+                }
+            }
+            Object.keys(filterValue).forEach((predicate) => {
+                if (filterValue[predicate] === null || filterValue[predicate] === undefined) {
+                    delete filter[key];
+                }
+            });
+        }
+    }
+    return result;
+};
+
+function FiltersToolbarImpl<TFilter extends object>(props: FiltersPanelProps<TFilter>) {
+    const { filters, tableState, setTableState } = props;
+    const [newFilterId, setNewFilterId] = useState(null);
+
+    const dataSource = useArrayDataSource(
+        {
+            items: filters,
+            getId: (item) => item.field,
+        },
+        [],
+    );
+
+    const onFiltersChange = (updatedFilters: TableFiltersConfig<TFilter>[]) => {
+        const newConfig: FiltersConfig = {};
+        const newFilter: any = {};
+
+        const sortedOrders = tableState.filtersConfig && sortBy(tableState.filtersConfig, (f) => f?.order);
+        let lastItemOrder: string | null = sortedOrders?.length ? sortedOrders[sortedOrders.length - 1]?.order : null;
+
+        updatedFilters.forEach((filter) => {
+            let order = tableState?.filtersConfig?.[filter?.field]?.order;
+            if (!order) {
+                order = getOrderBetween(lastItemOrder, null);
+                lastItemOrder = order;
+            }
+
+            newConfig[filter.field] = { isVisible: true, order: order };
+
+            // Remove unselected filters from filter object
+            if (tableState.filter) {
+                newFilter[filter.field] = tableState.filter[filter.field];
+            }
+        });
+
+        setTableState({
+            ...tableState,
+            filtersConfig: newConfig,
+            filter: newFilter,
+        });
+    };
+
+    const handleFilterChange = (newFilter: TFilter) => {
+        const filter = normalizeFilterWithPredicates({ ...tableState.filter, ...newFilter });
+        setTableState({
+            ...tableState,
+            filter: filter,
+        });
+    };
+
+    const removeFilter = (field: any) => {
+        const filterConfig = { ...tableState.filtersConfig };
+        delete filterConfig[field];
+        const filter = { ...tableState.filter };
+        delete filter[field];
+
+        const newTableState: DataTableState = {
+            ...tableState,
+            filtersConfig: filterConfig,
+            filter: filter,
+        };
+        setTableState({ ...newTableState });
+    };
+
+    const selectedFilters = useMemo(() => {
+        const filtersConfig = tableState.filtersConfig || {};
+        return filters.filter((filter) => {
+            return filter.isAlwaysVisible || (filtersConfig[filter?.field] ? filtersConfig[filter?.field].isVisible : false);
+        });
+    }, [tableState.filtersConfig, filters]);
+
+    const sortedActiveFilters = useMemo(() => {
+        return sortBy(selectedFilters, (f) => tableState.filtersConfig?.[f.field]?.order);
+    }, [filters, tableState.filtersConfig]);
+
+    const renderAddFilterToggler = useCallback((togglerProps: PickerTogglerProps) => {
+        return (
+            <Button
+                size={ props.size ?? '36' }
+                onClick={ togglerProps.onClick }
+                ref={ togglerProps.ref }
+                caption={ i18n.filterToolbar.addCaption }
+                icon={ addIcon }
+                iconPosition="left"
+                fill="ghost"
+                color="primary"
+                cx={ UUI_FILTERS_PANEL_ADD_BUTTON }
+            />
+        );
+    }, []);
+
+    const getRowOptions = useCallback(
+        (item: TableFiltersConfig<TFilter>): DataRowOptions<TableFiltersConfig<TFilter>, keyof TFilter> => ({
+            isDisabled: item.isAlwaysVisible,
+            checkbox: {
+                isVisible: true,
+                isDisabled: item.isAlwaysVisible,
+            },
+        }),
+        [],
+    );
+
+    const isAllFiltersAlwaysVisible = props.filters.every((i) => i.isAlwaysVisible);
+
+    useEffect(() => {
+        // Reset new filter id, after first render with autofocus
+        setNewFilterId(null);
+    }, [newFilterId]);
+
+    return (
+        <>
+            {sortedActiveFilters.map((f) => (
+                <FlexCell width="auto" key={ f.field as string }>
+                    <FiltersPanelItem
+                        { ...f }
+                        value={ tableState.filter?.[f.field] }
+                        onValueChange={ handleFilterChange }
+                        key={ f.field as string }
+                        autoFocus={ newFilterId === f.field }
+                        removeFilter={ removeFilter }
+                        size={ props.size }
+                    />
+                </FlexCell>
+            ))}
+            {!isAllFiltersAlwaysVisible && (
+                <PickerInput
+                    dataSource={ dataSource }
+                    value={ selectedFilters }
+                    onValueChange={ onFiltersChange }
+                    selectionMode="multi"
+                    valueType="entity"
+                    key={ newFilterId }
+                    renderRow={ (props) => (
+                        <DataPickerRow
+                            { ...props }
+                            padding="12"
+                            key={ props.key }
+                            onCheck={ (row) => {
+                                props.onCheck && props.onCheck(row);
+                                !row.isChecked && setNewFilterId(row.value.field);
+                            } }
+                            renderItem={ (item, rowProps) => <PickerItem { ...rowProps } title={ item.title } /> }
+                        />
+                    ) }
+                    getName={ (i) => i.title }
+                    renderToggler={ renderAddFilterToggler }
+                    emptyValue={ [] }
+                    getRowOptions={ getRowOptions }
+                    fixedBodyPosition={ true }
+                    size={ props.size }
+                    bodyCx={ UUI_FILTERS_PANEL_ADD_BUTTON_BODY }
+                />
+            )}
+        </>
+    );
+}
+
+export const FiltersPanel = React.memo(FiltersToolbarImpl) as typeof FiltersToolbarImpl;