@epam/uui 5.3.0 → 5.4.0

package/components/pickers/PickerModal.module.scss

@@ -1,27 +0,0 @@
-@use  '../../assets/styles/index' as *;
-
-.sub-header-wrapper {
-    padding: 0 24px;
-}
-
-.switch {
-    margin-bottom: 12px;
-}
-
-.no-found-modal-container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    justify-content: center;
-    align-items: center;
-
-    .no-found-modal-container-icon {
-        align-items: center;
-        margin-bottom: 12px;
-    }
-
-    .no-found-modal-container-text {
-        margin: 0;
-        padding: 0;
-    }
-}

package/components/pickers/PickerModal.tsx

@@ -1,145 +0,0 @@
-import React from 'react';
-import { IconContainer, PickerModalArrayProps, PickerModalOptions, PickerModalScalarProps, handleDataSourceKeyboard, usePickerModal } from '@epam/uui-components';
-import { DataRowProps, IHasCaption, PickerBaseOptions } from '@epam/uui-core';
-import { DataPickerRow } from './DataPickerRow';
-import { Text, TextPlaceholder } from '../typography';
-import { i18n } from '../../i18n';
-import { FlexRow, FlexCell, FlexSpacer } from '../layout';
-import {
-    ModalBlocker, ModalWindow, ModalHeader, ModalFooter,
-} from '../overlays';
-import { LinkButton, Button } from '../buttons';
-import { ReactComponent as SearchIcon } from '../../icons/search-with-background.svg';
-
-import css from './PickerModal.module.scss';
-import { SearchInput, Switch } from '../inputs';
-import { DataPickerBody } from './DataPickerBody';
-
-export type PickerModalProps<TItem, TId> = PickerBaseOptions<TItem, TId> &
-IHasCaption &
-(PickerModalScalarProps<TId, TItem> | PickerModalArrayProps<TId, TItem>) &
-PickerModalOptions<TItem, TId>;
-
-export function PickerModal<TItem, TId>(props: PickerModalProps<TItem, TId>) {
-    const {
-        view,
-        selection,
-        dataSourceStateLens,
-        showSelectedLens,
-        dataSourceState,
-        getDataSourceState,
-        getName,
-        clearSelection,
-        getRows,
-        getListProps,
-        getFooterProps,
-        isSingleSelect,
-        handleDataSourceValueChange,
-    } = usePickerModal<TItem, TId>(props);
-
-    const renderRow = (rowProps: DataRowProps<TItem, TId>) => {
-        return props.renderRow ? (
-            props.renderRow(rowProps, dataSourceState)
-        ) : (
-            <DataPickerRow
-                { ...rowProps }
-                key={ rowProps.rowKey }
-                borderBottom="none"
-                padding="24"
-                size="36"
-                renderItem={ (i: TItem & { name?: string }) => <Text size="36">{rowProps.isLoading ? <TextPlaceholder wordsCount={ 2 } /> : getName(i)}</Text> }
-            />
-        );
-    };
-
-    const renderFooter = () => {
-        const hasSelection = view.getSelectedRowsCount() > 0;
-        const rowsCount = view.getListProps().rowsCount;
-        const isEmptyRowsAndHasNoSelection = (rowsCount === 0 && !hasSelection);
-
-        return (
-            <>
-                {view.selectAll && (
-                    <LinkButton
-                        caption={ hasSelection ? i18n.pickerModal.clearAllButton : i18n.pickerModal.selectAllButton }
-                        onClick={ hasSelection ? () => clearSelection() : () => view.selectAll.onValueChange(true) }
-                        isDisabled={ isEmptyRowsAndHasNoSelection }
-                    />
-                )}
-                <FlexSpacer />
-                <Button fill="outline" color="secondary" caption={ i18n.pickerModal.cancelButton } onClick={ () => props.abort() } />
-                <Button color="accent" caption={ i18n.pickerModal.selectButton } onClick={ () => props.success(selection as any) } />
-            </>
-        );
-    };
-
-    const renderNotFound = () => {
-        return props.renderNotFound ? (
-            props.renderNotFound({ search: dataSourceState.search, onClose: () => props.success(null) })
-        ) : (
-            <div className={ css.noFoundModalContainer }>
-                <IconContainer cx={ css.noFoundModalContainerIcon } icon={ SearchIcon } />
-                <Text cx={ css.noFoundModalContainerText } fontWeight="600" fontSize="16" lineHeight="24" color="primary" size="36">
-                    {i18n.dataPickerBody.noRecordsMessage}
-                </Text>
-                <Text cx={ css.noFoundModalContainerText } fontSize="12" lineHeight="18" color="primary" size="36">
-                    {i18n.dataPickerBody.noRecordsSubTitle}
-                </Text>
-            </div>
-        );
-    };
-
-    const dataRows = getRows();
-    const rows = dataRows.map((row) => renderRow(row));
-
-    return (
-        <ModalBlocker { ...props }>
-            <ModalWindow width={ 600 } height={ 700 }>
-                <ModalHeader title={ props.caption || i18n.pickerModal.headerTitle } onClose={ () => props.abort() } />
-                <FlexCell cx={ css.subHeaderWrapper }>
-                    <FlexRow vPadding="24">
-                        <SearchInput
-                            { ...dataSourceStateLens.prop('search').toProps() }
-                            onKeyDown={ (e) =>
-                                handleDataSourceKeyboard(
-                                    {
-                                        value: getDataSourceState(),
-                                        onValueChange: handleDataSourceValueChange,
-                                        listView: view,
-                                        rows: dataRows,
-                                        searchPosition: 'body',
-                                    },
-                                    e,
-                                ) }
-                            autoFocus={ true }
-                            placeholder={ i18n.pickerModal.searchPlaceholder }
-                        />
-                    </FlexRow>
-                    {!isSingleSelect() && (
-                        <Switch
-                            cx={ css.switch }
-                            size="18"
-                            { ...showSelectedLens.toProps() }
-                            isDisabled={ view.getSelectedRowsCount() < 1 }
-                            label="Show only selected"
-                        />
-                    )}
-                    {props.renderFilter && <FlexCell grow={ 2 }>{props.renderFilter(dataSourceStateLens.prop('filter').toProps())}</FlexCell>}
-                </FlexCell>
-                <DataPickerBody
-                    { ...getListProps() }
-                    value={ getDataSourceState() }
-                    onValueChange={ handleDataSourceValueChange }
-                    search={ dataSourceStateLens.prop('search').toProps() }
-                    showSearch={ false }
-                    rows={ rows }
-                    renderNotFound={ renderNotFound }
-                    editMode="modal"
-                />
-                <ModalFooter padding="24" vPadding="24">
-                    {props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()}
-                </ModalFooter>
-            </ModalWindow>
-        </ModalBlocker>
-    );
-}

package/components/pickers/PickerToggler.module.scss

@@ -1,249 +0,0 @@
-@use  '../../assets/styles/index' as *;
-
-$shadow: 0 1px 3px 0 rgba(29, 30, 38, 0.15);
-
-@mixin picker-toggler-vertical-layout($size, $borderWidth) {
-    &:global(.uui-input-box) {
-        min-height: $size;
-        border-width: $borderWidth;
-    }
-
-    :global(.uui-input) {
-        @include text-size($size);
-
-        @if ($size == 24px) {
-            padding-top: 0;
-            padding-bottom: 0;
-        } @else if ($size == 30px) {
-            padding-top: 3px;
-            padding-bottom: 3px;
-        } @else if ($size == 36px or $size == 42px) {
-            padding-top: 6px;
-            padding-bottom: 6px;
-        } @else if ($size == 48px) {
-            padding-top: 9px;
-            padding-bottom: 9px;
-        }
-    }
-
-    :not(:global(.uui-button-box)) > :global(.uui-icon) {
-        height: $size - 6px;
-        margin-bottom: 2px;
-    }
-}
-
-.root {
-    --uui-picker_toggler-bg: var(--uui-control-bg);
-    --uui-picker_toggler-border: var(--uui-control-border);
-    --uui-picker_toggler-border-hover: var(--uui-control-border-hover);
-    --uui-picker_toggler-border-active: var(--uui-control-border-focus);
-    --uui-picker_toggler-border-error: var(--uui-error-50);
-    --uui-picker_toggler-placeholder: var(--uui-control-placeholder);
-    --uui-picker_toggler-placeholder-disabled: var(--uui-control-placeholder-disabled);
-    --uui-picker_toggler-placeholder-readonly: var(--uui-control-placeholder-disabled);
-    --uui-picker_toggler-text: var(--uui-control-text);
-    --uui-picker_toggler-text-disabled: var(--uui-control-text-disabled);
-    --uui-picker_toggler-icon: var(--uui-control-icon);
-    --uui-picker_toggler-icon-disabled: var(--uui-control-icon-disabled);
-    --uui-picker_toggler-icon-clickable: var(--uui-icon);
-    --uui-picker_toggler-icon-clickable-hover: var(--uui-icon-hover);
-
-    --uui-picker_toggler-border-radius: var(--uui-border-radius);
-
-    --uui-picker_toggler-font: var(--uui-font);
-    --uui-picker_toggler-font-weight: 400;
-    //
-    padding-top: 2px;
-    padding-left: 5px;
-    padding-right: 5px;
-    width: 100%;
-    box-sizing: border-box;
-    border-style: solid;
-
-    &.mode-form {
-        background-color: var(--uui-picker_toggler-bg);
-        border-color: var(--uui-picker_toggler-border);
-        fill: var(--uui-picker_toggler-icon);
-        border-radius: var(--uui-picker_toggler-border-radius);
-
-        :global(.uui-icon):global(.-clickable), :global(.uui-icon-dropdown) {
-            &:global(.uui-enabled) {
-                fill: var(--uui-picker_toggler-icon-clickable);
-
-                &:hover {
-                    fill: var(--uui-picker_toggler-icon-clickable-hover);
-                }
-            }
-
-            &:global(.uui-disabled) {
-                fill: var(--uui-picker_toggler-icon-disabled);
-            }
-        }
-
-        &:hover {
-            border-color: var(--uui-picker_toggler-border-hover);
-        }
-
-        &:global(.uui-focus) {
-            border-color: var(--uui-picker_toggler-border-active);
-            outline: none;
-        }
-    }
-
-    &.mode-cell {
-        background-color: transparent;
-        border-color: transparent;
-        fill: var(--uui-picker_toggler-icon);
-
-        :global(.uui-icon):global(.-clickable), :global(.uui-icon-dropdown) {
-            cursor: pointer;
-
-            &:global(.uui-enabled) {
-                fill: transparent;
-            }
-
-            &:global(.uui-disabled) {
-                fill: transparent;
-            }
-        }
-
-        &:hover {
-            :global(.uui-icon):global(.-clickable), :global(.uui-icon-dropdown) {
-                &:global(.uui-enabled) {
-                    fill: var(--uui-picker_toggler-icon-clickable);
-
-                    &:hover {
-                        fill: var(--uui-picker_toggler-icon-clickable-hover);
-                    }
-                }
-
-                &:global(.uui-disabled) {
-                    fill: transparent;
-                }
-            }
-        }
-
-        &:global(.uui-focus) {
-            outline: none;
-        }
-    }
-
-    &.mode-inline {
-        background-color: initial;
-        border-color: transparent;
-        border-radius: var(--uui-picker_toggler-border-radius);
-        fill: var(--uui-picker_toggler-icon-clickable);
-
-        &:hover {
-            border-color: var(--uui-picker_toggler-border-hover);
-        }
-
-        &:global(.uui-focus) {
-            border-color: var(--uui-picker_toggler-border-active);
-            outline: none;
-        }
-    }
-
-    &:global(.uui-invalid) {
-        &.mode-form {
-            border-color: var(--uui-picker_toggler-border-error);
-        }
-    }
-
-    &:global(.uui-readonly) {
-        @include readonly-input();
-
-        :global(.uui-icon-dropdown), :global(.uui-icon-cancel) {
-            visibility: hidden;
-        }
-    }
-
-    &:global(.uui-disabled) {
-        @include disabled-input();
-        fill: var(--uui-picker_toggler-icon-disabled);
-
-        :global(.uui-input) {
-            cursor: default;
-        }
-
-        :global(.uui-icon-dropdown), :global(.uui-icon-cancel) {
-            visibility: hidden;
-        }
-    }
-
-    :global(.uui-input) {
-        padding-left: 6px;
-        padding-right: 6px;
-        margin-bottom: 2px;
-        font-family: var(--uui-picker_toggler-font);
-        font-weight: var(--uui-picker_toggler-font-weight, normal);
-        color: var(--uui-picker_toggler-text);
-
-        &::placeholder {
-            color: var(--uui-picker_toggler-placeholder);
-        }
-
-        &::-moz-placeholder {
-            opacity: 1;
-        }
-    }
-
-    :global(.uui-caption) {
-        @include overflow-ellipsis();
-        font-family: var(--uui-picker_toggler-font);
-        font-weight: var(--uui-picker_toggler-font-weight, normal);
-        align-self: center;
-        white-space: nowrap;
-    }
-
-    :global(.uui-button-box) {
-        margin-right: 3px;
-        margin-bottom: 2px;
-
-        &:last-of-type {
-            margin-right: 0;
-        }
-    }
-
-    :global(.uui-placeholder) {
-        color: var(--uui-picker_toggler-text);
-    }
-
-    :global(.uui-placeholder)::placeholder {
-        color: var(--uui-picker_toggler-text);
-    }
-
-    :global(.uui-placeholder)::-moz-placeholder {
-        opacity: 1;
-    }
-
-    :global(.uui-icon-cancel) {
-        margin-left: 6px;
-    }
-
-    // Sizes
-    &.size-24 {
-        @include picker-toggler-vertical-layout(24px, 1px);
-        min-width: 24px;
-    }
-
-    &.size-30 {
-        @include picker-toggler-vertical-layout(30px, 1px);
-        min-width: 30px;
-    }
-
-    &.size-36 {
-        @include picker-toggler-vertical-layout(36px, 1px);
-        min-width: 36px;
-    }
-
-    &.size-42 {
-        @include picker-toggler-vertical-layout(42px, 1px);
-        min-width: 42px;
-    }
-
-    &.size-48 {
-        @include picker-toggler-vertical-layout(48px, 1px);
-        min-width: 48px;
-    }
-}

package/components/pickers/PickerToggler.tsx

@@ -1,84 +0,0 @@
-import * as React from 'react';
-import { DataRowProps } from '@epam/uui-core';
-import { PickerToggler as UuiPickerToggler, PickerTogglerProps } from '@epam/uui-components';
-import { TextPlaceholder } from '../typography';
-import { systemIcons } from '../../icons/icons';
-import { Tag } from '../widgets';
-import * as types from '../types';
-import { getMaxItems } from './helpers';
-import css from './PickerToggler.module.scss';
-
-const defaultSize = '36';
-const defaultMode = types.EditMode.FORM;
-
-export interface PickerTogglerMods extends types.IHasEditMode {
-    size?: '24' | '30' | '36' | '42' | '48';
-}
-
-function applyPickerTogglerMods(mods: PickerTogglerMods) {
-    return [
-        css.root,
-        css['size-' + (mods.size || defaultSize)],
-        css['mode-' + (mods.mode || defaultMode)],
-    ];
-}
-
-function PickerTogglerComponent<TItem extends string, TId>(props: PickerTogglerProps<TItem, TId> & PickerTogglerMods, ref: React.ForwardedRef<HTMLElement>) {
-    const getPickerTogglerButtonSize = (propSize: types.ControlSize) => {
-        switch (propSize) {
-            case '48':
-                return '42';
-            case '42':
-                return '36';
-            case '36':
-                return '30';
-            case '30':
-                return '24';
-            case '24':
-                return '18';
-        }
-    };
-
-    const getCaption = (row: DataRowProps<TItem, TId>) => {
-        const maxItems = getMaxItems(props.maxItems);
-
-        if (row.isLoading) {
-            return <TextPlaceholder />;
-        } else if (!props.getName || props.selectedRowsCount > maxItems) {
-            return row.value;
-        } else {
-            return props.getName(row.value);
-        }
-    };
-
-    const renderItem = (row: DataRowProps<TItem, TId>) => (
-        <Tag
-            key={ row.rowKey }
-            caption={ getCaption(row) }
-            tabIndex={ -1 }
-            size={ props.size ? getPickerTogglerButtonSize(props.size) : '30' }
-            onClear={ (e) => {
-                row.onCheck?.(row);
-                e.stopPropagation();
-            } }
-            isDisabled={ props.isDisabled || props.isReadonly || row?.checkbox?.isDisabled }
-        />
-    );
-
-    return (
-        <UuiPickerToggler
-            { ...props }
-            ref={ ref }
-            cx={ [applyPickerTogglerMods(props), props.cx] }
-            renderItem={ !!props.renderItem ? props.renderItem : renderItem }
-            getName={ (item) => (props.getName ? props.getName(item) : item) }
-            cancelIcon={ systemIcons[props.size || defaultSize].clear }
-            dropdownIcon={ systemIcons[props.size || defaultSize].foldingArrow }
-        />
-    );
-}
-
-export const PickerToggler = React.forwardRef(PickerTogglerComponent) as <TItem, TId>(
-    props: PickerTogglerProps<TItem, TId> & PickerTogglerMods,
-    ref: React.ForwardedRef<HTMLElement>
-) => JSX.Element;

package/components/pickers/__tests__/DataPickerBody.test.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
-import { ArrayDataSource } from '@epam/uui-core';
-import { DataPickerBody, DataPickerBodyProps } from '../DataPickerBody';
-import { DataPickerRow } from '../DataPickerRow';
-
-const languageLevels = [
-    { id: 2, level: 'A1' }, { id: 3, level: 'A1+' }, { id: 4, level: 'A2' }, { id: 5, level: 'A2+' }, { id: 6, level: 'B1' }, { id: 7, level: 'B1+' }, { id: 8, level: 'B2' }, { id: 9, level: 'B2+' }, { id: 10, level: 'C1' }, { id: 11, level: 'C1+' }, { id: 12, level: 'C2' },
-];
-
-const mockDataSource = new ArrayDataSource({
-    items: languageLevels,
-});
-
-describe('DataPickerBody', () => {
-    const rows = mockDataSource.getView({}, () => {}).getVisibleRows();
-    const requiredProps: DataPickerBodyProps = {
-        value: null,
-        onValueChange: jest.fn(),
-        rows: rows.map(
-            (props) => <DataPickerRow key={ props.id } renderItem={ (item: string) => <div>{item}</div> } id={ props.id } rowKey={ props.rowKey } index={ props.id } />,
-        ),
-        search: {
-            value: null,
-            onValueChange: jest.fn(),
-        },
-    };
-
-    it('should be rendered with minimum props', async () => {
-        const tree = await renderSnapshotWithContextAsync(<DataPickerBody { ...requiredProps } />);
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered without rows', async () => {
-        const tree = await renderSnapshotWithContextAsync(<DataPickerBody { ...requiredProps } rows={ [] } renderNotFound={ () => <div>Not found</div> } />);
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered with maximum props', async () => {
-        const tree = await renderSnapshotWithContextAsync(
-            <DataPickerBody
-                { ...requiredProps }
-                editMode="modal"
-                showSearch="auto"
-                maxHeight={ 800 }
-                searchSize="48"
-                rows={ rows.map((props) => (
-                    <DataPickerRow key={ props.id } renderItem={ (item: string) => <div>{item}</div> } id={ props.id } rowKey={ props.rowKey } index={ props.id } />
-                )) }
-                onKeyDown={ jest.fn }
-                rowsCount={ 7 }
-                totalCount={ 11 }
-                scheduleUpdate={ jest.fn }
-            />,
-        );
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/pickers/__tests__/DataPickerRow.test.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { renderer } from '@epam/uui-test-utils';
-import { DataPickerRow } from '../DataPickerRow';
-
-describe('DataPickerRow', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<DataPickerRow id="test" index={ 1 } renderItem={ (item: React.ReactNode) => <div>{item}</div> } rowKey="test" />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly', () => {
-        const tree = renderer
-            .create(
-                <DataPickerRow
-                    id="test"
-                    index={ 1 }
-                    renderItem={ (item: React.ReactNode) => <div>{item}</div> }
-                    rowKey="test"
-                    borderBottom="gray20"
-                    padding="24"
-                    size="48"
-                    isChecked
-                    isChildrenChecked
-                    isFocused
-                    isFoldable
-                    isFolded
-                    isSelectable
-                    isSelected
-                    onSelect={ jest.fn }
-                    onFold={ jest.fn }
-                    onCheck={ jest.fn }
-                    onClick={ jest.fn }
-                    onFocus={ jest.fn }
-                />,
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});