@epam/uui 5.3.0 → 5.4.0

package/components/pickers/DataPickerHeader.module.scss

@@ -1,19 +0,0 @@
-.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

@@ -1,24 +0,0 @@
-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

@@ -1,30 +0,0 @@
-@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

@@ -1,77 +0,0 @@
-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

@@ -1,20 +0,0 @@
-@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

@@ -1,38 +0,0 @@
-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

@@ -1,39 +0,0 @@
-@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

@@ -1,180 +0,0 @@
-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

@@ -1,32 +0,0 @@
-.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

@@ -1,66 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

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

package/components/pickers/PickerListItem.tsx

@@ -1,55 +0,0 @@
-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>
-    );
-}