@epam/uui 5.5.0 → 5.5.2

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?: number;
+    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,75 @@
+import * as React from 'react';
+import { DataRowProps, DataSourceListProps, DropdownBodyProps, isMobile, PickerFilterConfig } 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> & PickerFilterConfig<any> & {
+    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<TItem, TId>>({ ...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 } 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.maxBodyHeight || pickerHeight;
+        const maxWidth = isMobile() ? undefined : 360;
+
+        return (
+            <>
+                <DataPickerBody
+                    { ...bodyProps }
+                    selectionMode={ props.selectionMode }
+                    rows={ renderedDataRows }
+                    maxHeight={ maxHeight }
+                    maxWidth={ maxWidth }
+                    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();
+    }
+}