@epam/uui 5.3.0-rc.1 → 5.3.0

package/components/pickers/DataPickerHeader.module.scss

@@ -0,0 +1,19 @@
+.header {
+    display: none;
+    justify-content: center;
+    position: relative;
+
+    @media screen and (max-width: 720px) {
+        display: flex;
+    }
+}
+
+.close {
+    height: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    right: 24px;
+}

package/components/pickers/DataPickerHeader.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import css from './DataPickerHeader.module.scss';
+import { ReactComponent as CloseIcon } from '@epam/assets/icons/common/navigation-close-24.svg';
+import { Text } from '../typography';
+import { IconButton } from '../buttons';
+import { FlexRow } from '../layout';
+
+interface DataPickerHeaderProps {
+    title?: string;
+    close?: () => void;
+}
+
+const DataPickerHeaderImpl: React.FC<DataPickerHeaderProps> = (props) => {
+    const title = props.title && typeof props.title === 'string' ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
+
+    return (
+        <FlexRow alignItems="center" borderBottom cx={ css.header }>
+            <Text size="48" fontWeight="600">{title}</Text>
+            <IconButton icon={ CloseIcon } onClick={ () => props.close?.() } cx={ css.close } />
+        </FlexRow>
+    );
+};
+
+export const DataPickerHeader = React.memo(DataPickerHeaderImpl);

package/components/pickers/DataPickerRow.module.scss

@@ -0,0 +1,30 @@
+@use  '../../assets/styles/index' as *;
+
+.render-item {
+    display: flex;
+    flex: auto;
+}
+
+.icon-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.picker-row {
+    &:global(.uui-focus) {
+        background-color: var(--uui-surface-higher);
+    }
+
+    &:global(.-clickable) {
+        cursor: pointer;
+    }
+}
+
+.icon-default {
+    fill: var(--uui-icon);
+}
+
+.icon-primary {
+    fill: var(--uui-primary-50);
+}

package/components/pickers/DataPickerRow.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { DataRowProps, DataColumnProps } from '@epam/uui-core';
+import { DataPickerRow as UUIDataPickerRow } from '@epam/uui-components';
+import { FlexSpacer, IconContainer } from '../layout';
+import { DataTableCell } from '../tables/DataTableCell';
+import { ReactComponent as TickIcon_24 } from '@epam/assets/icons/common/notification-done-24.svg';
+import { ReactComponent as TickIcon_18 } from '@epam/assets/icons/common/notification-done-18.svg';
+import { ReactComponent as TickIcon_12 } from '@epam/assets/icons/common/notification-done-12.svg';
+import css from './DataPickerRow.module.scss';
+
+export interface DataPickerRowProps<TItem, TId> extends DataRowProps<TItem, TId> {
+    renderItem(item: TItem, rowProps: DataRowProps<TItem, TId>): React.ReactNode;
+    padding?: '12' | '24';
+    size?: 'none' | '24' | '30' | '36' | '42' | '48' | '60';
+    borderBottom?: 'none' | 'gray20';
+    alignActions?: 'top' | 'center';
+}
+
+export class DataPickerRow<TItem, TId> extends React.Component<DataPickerRowProps<TItem, TId>> {
+    private getIcon = (size: string) => {
+        switch (size) {
+            case '24':
+                return TickIcon_12;
+            case '30':
+                return TickIcon_18;
+            case '36':
+                return TickIcon_18;
+            case '42':
+                return TickIcon_24;
+            default:
+                return TickIcon_18;
+        }
+    };
+
+    column: DataColumnProps<TItem> = {
+        key: 'name',
+        grow: 1,
+        width: 0,
+        render: (item, rowProps) => (
+            <div key={ rowProps.id } className={ css.renderItem }>
+                {this.props.renderItem(item, rowProps)}
+                <FlexSpacer />
+                {(rowProps.isChildrenSelected || rowProps.isSelected) && (
+                    <div className={ css.iconWrapper }>
+                        <IconContainer 
+                            icon={ this.getIcon(this.props.size) } 
+                            cx={ rowProps.isChildrenSelected ? css.iconDefault : css.iconPrimary }
+                            rawProps={ { 'aria-label': rowProps.isChildrenSelected 
+                                ? 'Child is selected' 
+                                : 'Selected' } }
+                        />
+                    </div>
+                )}
+            </div>
+        ),
+    };
+
+    renderContent = () => {
+        return (
+            <DataTableCell
+                key="name"
+                size={ this.props.size || '36' }
+                padding={ this.props.padding || '24' }
+                isFirstColumn={ true }
+                isLastColumn={ false }
+                tabIndex={ -1 }
+                column={ this.column }
+                rowProps={ this.props }
+                alignActions={ this.props.alignActions || 'top' }
+            />
+        );
+    };
+
+    render() {
+        return <UUIDataPickerRow { ...this.props } cx={ [css.pickerRow, this.props.cx] } renderContent={ this.renderContent } />;
+    }
+}

package/components/pickers/MobileDropdownWrapper.module.scss

@@ -0,0 +1,20 @@
+@use '../../assets/styles/index'  as *;
+
+.done {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-top: 1px solid var(--uui-divider);
+
+    &:global(.uui-button-box) {
+        background-color: var(--uui-surface-main);
+        border-width: 1px !important;
+    }
+}
+
+.container {
+    @media screen and (max-width: 720px) {
+        height: 100dvh;
+        width: 100dvw;
+    }
+}

package/components/pickers/MobileDropdownWrapper.tsx

@@ -0,0 +1,38 @@
+import React, { ReactNode } from 'react';
+import css from './MobileDropdownWrapper.module.scss';
+import { IDropdownBodyProps, IHasCX, IHasRawProps, isMobile } from '@epam/uui-core';
+import { LinkButton } from '../buttons';
+import { ControlSize } from '../types';
+import { DataPickerHeader } from './DataPickerHeader';
+import { DropdownContainer } from '../overlays';
+import { i18n } from '../../i18n';
+
+interface IMobileDropdownWrapperProps extends IHasCX, IHasRawProps<React.HTMLAttributes<HTMLDivElement>>, IDropdownBodyProps {
+    children: ReactNode;
+    size?: ControlSize;
+    title?: string;
+    onKeyDown?(e: React.KeyboardEvent<HTMLElement>): void;
+    focusLock?: boolean;
+    width?: number;
+}
+
+export const MobileDropdownWrapper: React.FC<IMobileDropdownWrapperProps> = (props) => {
+    const isMobileView = isMobile();
+
+    return (
+        <DropdownContainer
+            { ...props }
+            cx={ [css.container, props.cx] }
+            rawProps={ props.rawProps }
+            onKeyDown={ props.onKeyDown }
+            focusLock={ props.focusLock }
+            width={ props.width }
+        >
+            {isMobileView && <DataPickerHeader title={ props.title } close={ props.onClose } />}
+
+            {props.children}
+
+            {isMobileView && <LinkButton caption={ i18n.pickerInput.doneButton } onClick={ () => props.onClose?.() } cx={ css.done } size="48" />}
+        </DropdownContainer>
+    );
+};

package/components/pickers/PickerInput.module.scss

@@ -0,0 +1,39 @@
+@use  '../../assets/styles/index' as *;
+
+.footer-wrapper {
+    border-top: 1px solid var(--uui-divider);
+    padding: 0 12px;
+    display: flex;
+
+    &.footer-size-24 {
+        min-height: 24px;
+    }
+
+    &.footer-size-30 {
+        min-height: 30px;
+
+        :global(.uui-caption) {
+            font-size: 14px;
+        }
+    }
+
+    &.footer-size-36 {
+        min-height: 36px;
+    }
+
+    &.footer-size-42 {
+        min-height: 42px;
+
+        :global(.uui-caption) {
+            font-size: 16px;
+        }
+    }
+
+    &.footer-size-48 {
+        min-height: 48px;
+
+        :global(.uui-caption) {
+            font-size: 16px;
+        }
+    }
+}

package/components/pickers/PickerInput.tsx

@@ -0,0 +1,180 @@
+import React from 'react';
+import { PickerBodyBaseProps, PickerInputBaseProps, PickerTogglerProps, usePickerInput } from '@epam/uui-components';
+import { Dropdown } from '../overlays/Dropdown';
+import { EditMode, IHasEditMode, SizeMod } from '../types';
+import { DataRowProps, DataSourceListProps, DataSourceState, DropdownBodyProps, IDropdownToggler, IEditableDebouncer, isMobile } from '@epam/uui-core';
+import { PickerModal } from './PickerModal';
+import { PickerToggler, PickerTogglerMods } from './PickerToggler';
+import { MobileDropdownWrapper } from './MobileDropdownWrapper';
+import { DataPickerBody } from './DataPickerBody';
+import { DataPickerRow } from './DataPickerRow';
+import { DataPickerFooter } from './DataPickerFooter';
+import { PickerItem } from './PickerItem';
+
+const pickerHeight = 300;
+const pickerWidth = 360;
+
+export type PickerInputProps = SizeMod & IHasEditMode & {};
+export type CompletePickerInputProps<TItem, TId> = PickerInputProps & PickerInputBaseProps<TItem, TId>;
+
+export function PickerInput<TItem, TId>({ highlightSearchMatches = true, ...props }: CompletePickerInputProps<TItem, TId>) {
+    const toggleModalOpening = () => {
+        const { renderFooter, rawProps, ...restProps } = props;
+        context.uuiModals
+            .show((modalProps) => (
+                <PickerModal<TItem, TId>
+                    { ...restProps }
+                    rawProps={ rawProps?.body }
+                    { ...modalProps }
+                    caption={ getPlaceholder() }
+                    initialValue={ props.value as any }
+                    renderRow={ renderRow }
+                    selectionMode={ props.selectionMode }
+                    valueType={ props.valueType }
+                />
+            ))
+            .then((newSelection) => {
+                handleSelectionValueChange(newSelection);
+            })
+            .catch(() => {});
+    };
+
+    const {
+        context,
+        popperModifiers,
+        getName,
+        getPlaceholder,
+        handleSelectionValueChange,
+        getTogglerProps,
+        getRows,
+        handleTogglerSearchChange,
+        toggleBodyOpening,
+        dataSourceState,
+        getFooterProps,
+        getPickerBodyProps,
+        getListProps,
+        shouldShowBody,
+        getSearchPosition,
+        handlePickerInputKeyboard,
+    } = usePickerInput<TItem, TId, CompletePickerInputProps<TItem, TId>>({ ...props, toggleModalOpening });
+
+    const getTogglerMods = (): PickerTogglerMods => {
+        return {
+            size: props.size as PickerTogglerMods['size'],
+            mode: props.mode ? props.mode : EditMode.FORM,
+        };
+    };
+
+    const renderTarget = (targetProps: IDropdownToggler & PickerTogglerProps<TItem, TId>) => {
+        const renderTargetFn = props.renderToggler || ((props) => <PickerToggler { ...props } />);
+
+        return (
+            <IEditableDebouncer
+                value={ targetProps.value }
+                onValueChange={ handleTogglerSearchChange }
+                debounceDelay={ props.searchDebounceDelay }
+                render={ (editableProps) => renderTargetFn({
+                    ...getTogglerMods(),
+                    ...targetProps,
+                    ...editableProps,
+                    onKeyDown: (e) => handlePickerInputKeyboard(rows, e, editableProps.value),
+                }) }
+            />
+        );
+    };
+
+    const renderFooter = () => {
+        const footerProps = getFooterProps();
+
+        return props.renderFooter ? props.renderFooter(footerProps) : <DataPickerFooter { ...footerProps } size={ props.size } />;
+    };
+
+    const getRowSize = () => {
+        if (isMobile()) {
+            return '48';
+        }
+
+        return props.editMode === 'modal' ? '36' : props.size;
+    };
+
+    const renderItem = (item: TItem, rowProps: DataRowProps<TItem, TId>, dsState: DataSourceState) => {
+        return (
+            <PickerItem
+                title={ getName(item) }
+                size={ getRowSize() }
+                dataSourceState={ dsState }
+                highlightSearchMatches={ highlightSearchMatches }
+                { ...rowProps }
+            />
+        );
+    };
+
+    const renderRow = (rowProps: DataRowProps<TItem, TId>, dsState: DataSourceState) => {
+        return props.renderRow ? (
+            props.renderRow(rowProps, dsState)
+        ) : (
+            <DataPickerRow
+                { ...rowProps }
+                key={ rowProps.rowKey }
+                borderBottom="none"
+                size={ getRowSize() }
+                padding={ props.editMode === 'modal' ? '24' : '12' }
+                renderItem={ (item, itemProps) => renderItem(item, itemProps, dsState) }
+            />
+        );
+    };
+
+    const renderBody = (bodyProps: DropdownBodyProps & DataSourceListProps & Omit<PickerBodyBaseProps, 'rows'>, rows: DataRowProps<TItem, TId>[]) => {
+        const renderedDataRows = rows.map((row) => renderRow(row, dataSourceState));
+        const bodyHeight = isMobile() ? document.documentElement.clientHeight : props.dropdownHeight || pickerHeight;
+        const minBodyWidth = props.minBodyWidth || pickerWidth;
+
+        return (
+            <MobileDropdownWrapper
+                title={ props.entityName }
+                onClose={ () => toggleBodyOpening(false) }
+                cx={ [props.bodyCx] }
+                onKeyDown={ bodyProps.onKeyDown }
+                width={ bodyProps.togglerWidth > minBodyWidth ? bodyProps.togglerWidth : minBodyWidth }
+                focusLock={ getSearchPosition() === 'body' }
+            >
+                <DataPickerBody
+                    { ...bodyProps }
+                    rows={ renderedDataRows }
+                    maxHeight={ bodyHeight }
+                    searchSize={ props.size }
+                    editMode="dropdown"
+                    selectionMode={ props.selectionMode }
+                    renderNotFound={
+                        props.renderNotFound
+                            ? () =>
+                                props.renderNotFound({
+                                    search: dataSourceState.search,
+                                    onClose: () => toggleBodyOpening(false),
+                                })
+                            : undefined
+                    }
+                />
+                { renderFooter() }
+            </MobileDropdownWrapper>
+        );
+    };
+
+    const rows = getRows();
+
+    return (
+        <Dropdown
+            renderTarget={ (dropdownProps) => {
+                const targetProps = getTogglerProps();
+                return renderTarget({ ...dropdownProps, ...targetProps });
+            } }
+            renderBody={ (bodyProps) => renderBody({ ...bodyProps, ...getPickerBodyProps(rows), ...getListProps() }, rows) }
+            value={ shouldShowBody() }
+            onValueChange={ !props.isDisabled && toggleBodyOpening }
+            placement={ props.dropdownPlacement }
+            modifiers={ popperModifiers }
+            closeBodyOnTogglerHidden={ !isMobile() }
+            portalTarget={ props.portalTarget }
+        />
+    );
+}

package/components/pickers/PickerItem.module.scss

@@ -0,0 +1,32 @@
+.root {
+    .multiline {
+        &.vertical-padding-24 {
+            padding-top: 3px;
+            padding-bottom: 3px;
+        }
+
+        &.vertical-padding-30 {
+            padding-top: 6px;
+            padding-bottom: 6px;
+        }
+
+        &.vertical-padding-36 {
+            padding-top: 6px;
+            padding-bottom: 6px;
+        }
+
+        &.vertical-padding-42 {
+            padding-top: 9px;
+            padding-bottom: 9px;
+        }
+
+        &.vertical-padding-48 {
+            padding-top: 9px;
+            padding-bottom: 9px;
+        }
+
+        .text {
+            padding: 0;
+        }
+    }
+}

package/components/pickers/PickerItem.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { DataRowProps, DataSourceState, Icon } from '@epam/uui-core';
+import { AvatarProps, IconContainer } from '@epam/uui-components';
+import { FlexCell, FlexRow } from '../layout';
+import { Text, TextPlaceholder } from '../typography';
+import { Avatar } from '../widgets';
+import { SizeMod } from '../types';
+import css from './PickerItem.module.scss';
+import { getHighlightedSearchMatches } from './highlight';
+
+const defaultSize = '36';
+
+export interface PickerItemProps<TItem, TId> extends DataRowProps<TItem, TId>, SizeMod {
+    avatarUrl?: string;
+    icon?: Icon;
+    title?: string;
+    subtitle?: string;
+    dataSourceState?: DataSourceState;
+    /**
+     * Enables highlighting of the items' text with search-matching results.
+     * @default true
+     * */
+    highlightSearchMatches?: boolean;
+}
+export class PickerItem<TItem, TId> extends React.Component<PickerItemProps<TItem, TId>> {
+    public static defaultProps = {
+        highlightSearchMatches: true,
+    };
+
+    getAvatarSize = (size: string, isMultiline: boolean): string | number => {
+        return isMultiline ? size : +size - 6;
+    };
+
+    render() {
+        const {
+            size, avatarUrl, isLoading, isDisabled, icon, highlightSearchMatches, cx,
+        } = this.props;
+        const itemSize = size && size !== 'none' ? size : defaultSize;
+        const isMultiline = !!(this.props.title && this.props.subtitle);
+
+        const { search } = this.props.dataSourceState ?? {};
+        const title = highlightSearchMatches ? getHighlightedSearchMatches(this.props.title, search) : this.props.title;
+        const subtitle = highlightSearchMatches ? getHighlightedSearchMatches(this.props.subtitle, search) : this.props.subtitle;
+
+        return (
+            <FlexCell width="auto" cx={ [css.root, 'uui-typography', cx] }>
+                <FlexRow size={ itemSize } cx={ isMultiline && [css.multiline, css[`vertical-padding-${itemSize}`]] } spacing="12">
+                    {avatarUrl && <Avatar isLoading={ isLoading } img={ avatarUrl } size={ this.getAvatarSize(itemSize, isMultiline).toString() as AvatarProps['size'] } />}
+                    {icon && <IconContainer icon={ icon } />}
+                    <FlexCell width="auto">
+                        {title && (
+                            <Text size={ itemSize } cx={ css.text } color={ isDisabled ? 'disabled' : 'primary' }>
+                                {isLoading ? <TextPlaceholder wordsCount={ 2 } /> : title}
+                            </Text>
+                        )}
+                        {subtitle && (
+                            <Text size={ itemSize } color={ isDisabled ? 'disabled' : 'secondary' } cx={ css.text }>
+                                {isLoading ? <TextPlaceholder wordsCount={ 2 } /> : subtitle}
+                            </Text>
+                        )}
+                    </FlexCell>
+                </FlexRow>
+            </FlexCell>
+        );
+    }
+}

package/components/pickers/PickerList.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { DataRowProps, IClickable, IDisableable, IHasCaption, IHasPlaceholder } from '@epam/uui-core';
+import { PickerListBaseProps, PickerModalOptions, usePickerList } from '@epam/uui-components';
+import { IHasEditMode, SizeMod, TextSize } from '../types';
+import { Text } from '../typography';
+import { PickerListItem } from './PickerListItem';
+import { PickerModal } from './PickerModal';
+import { LinkButton } from '../buttons';
+
+export type PickerListProps<TItem, TId> = SizeMod &
+IHasPlaceholder &
+PickerModalOptions<TItem, TId> & {
+    renderModalToggler?(props: IClickable & IHasCaption & IDisableable, selection: DataRowProps<TItem, TId>[]): React.ReactNode;
+    noOptionsMessage?: React.ReactNode;
+} & PickerListBaseProps<TItem, TId> & IHasEditMode;
+
+export function PickerList<TItem, TId>(props: PickerListProps<TItem, TId>) {
+    const {
+        context,
+        view,
+        getName,
+        getEntityName,
+        appendLastSelected,
+        getSelectedIdsArray,
+        buildRowsList,
+        getMaxDefaultItems,
+        dataSourceState,
+        getModalTogglerCaption,
+    } = usePickerList<TItem, TId, PickerListProps<TItem, TId>>(props);
+
+    const defaultRenderRow = (row: DataRowProps<TItem, TId>) => {
+        return <PickerListItem getName={ (item) => getName(item) } { ...row } key={ row.rowKey } />;
+    };
+    
+    const handleShowPicker = () => {
+        context.uuiModals
+            .show((modalProps) => (
+                <PickerModal<TItem, TId>
+                    { ...modalProps }
+                    { ...props }
+                    caption={ props.placeholder || `Please select ${getEntityName() ? getEntityName() : ''}` }
+                    initialValue={ props.value as any }
+                    selectionMode={ props.selectionMode }
+                    valueType={ props.valueType }
+                />
+            ))
+            .then((value: any) => {
+                appendLastSelected([...getSelectedIdsArray(value)]);
+                props.onValueChange(value);
+            })
+            .catch(() => {});
+    };
+    
+    const defaultRenderToggler = (props: IClickable) => <LinkButton caption="Show all" { ...props } />;
+
+    const viewProps = view.getListProps();
+    const selectedRows = view.getSelectedRows();
+    const rows = buildRowsList();
+    const showPicker = viewProps.totalCount == null || viewProps.totalCount > getMaxDefaultItems();
+    const renderToggler = props.renderModalToggler || defaultRenderToggler;
+    const renderRow = props.renderRow || defaultRenderRow;
+
+    return (
+        <div>
+            {!rows.length
+                && (props.noOptionsMessage || (
+                    <Text color="secondary" size={ props.size as TextSize }>
+                        No options available
+                    </Text>
+                ))}
+            {rows.map((row) => renderRow({ ...row, isDisabled: props.isDisabled }, dataSourceState))}
+            {showPicker
+                && renderToggler(
+                    {
+                        onClick: handleShowPicker,
+                        caption: getModalTogglerCaption(viewProps.totalCount, view.getSelectedRowsCount()),
+                        isDisabled: props.isDisabled,
+                    },
+                    selectedRows,
+                )}
+        </div>
+    );
+}

package/components/pickers/PickerListItem.module.scss

@@ -0,0 +1,3 @@
+.row {
+    margin: 9px 0;
+}

package/components/pickers/PickerListItem.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { DataRowProps } from '@epam/uui-core';
+import { Checkbox, RadioInput } from '../inputs';
+import { TextPlaceholder } from '../typography';
+import css from './PickerListItem.module.scss';
+
+export interface PickerListItemProps<TItem, TId> extends DataRowProps<TItem, TId> {
+    getName(item: TItem): string;
+}
+
+export function PickerListItem<TItem, TId>(props: PickerListItemProps<TItem, TId>) {
+    let label: any;
+
+    if (props.isLoading) {
+        label = <TextPlaceholder wordsCount={ 2 } />;
+    } else {
+        label = props.getName(props.value);
+    }
+
+    let component: any;
+
+    if (props.checkbox) {
+        component = (
+            <Checkbox
+                { ...props.checkbox }
+                isDisabled={ props.isLoading || props.checkbox.isDisabled || props.isDisabled }
+                label={ label }
+                value={ props.isChecked }
+                onValueChange={ () => props.onCheck(props) }
+            />
+        );
+    } else {
+        component = (
+            <RadioInput
+                label={ label }
+                value={ props.isSelected }
+                isDisabled={ props.isLoading || !props.isSelectable || props.isDisabled }
+                onValueChange={ () => props.onSelect(props) }
+            />
+        );
+    }
+
+    return (
+        <div
+            role="option"
+            aria-selected={ props.isSelectable ? props.isSelected : undefined }
+            aria-busy={ props.isLoading }
+            aria-posinset={ props.index + 1 }
+            { ...(props.checkbox?.isVisible && { 'aria-checked': props.isChecked }) }
+            className={ css.row }
+        >
+            {component}
+        </div>
+    );
+}