@epam/uui 5.3.0 → 5.4.1

package/components/filters/PresetPanel/PresetActionsDropdown.tsx

@@ -1,138 +0,0 @@
-import React, { useCallback } from 'react';
-import css from './PresetActionsDropdown.module.scss';
-import {
-    IPresetsApi, IDropdownToggler, ITablePreset, useUuiContext, DataTableState,
-} from '@epam/uui-core';
-import { Dropdown, DropdownMenuButton, SuccessNotification } from '../../overlays';
-import { IconButton } from '../../buttons';
-import { Text } from '../../typography';
-import { ReactComponent as menuIcon } from '@epam/assets/icons/common/navigation-more_vert-18.svg';
-import { FlexRow, Panel } from '../../layout';
-import { ReactComponent as SaveInCurrentIcon } from '@epam/assets/icons/common/action-update-18.svg';
-import { ReactComponent as SaveAsNewIcon } from '@epam/assets/icons/common/save-outline-18.svg';
-import { ReactComponent as DiscardChangesIcon } from '@epam/assets/icons/common/content-edit_undo-18.svg';
-import { ReactComponent as CopyIcon } from '@epam/assets/icons/common/action-copy_content-18.svg';
-import { ReactComponent as RenameIcon } from '@epam/assets/icons/common/content-edit-18.svg';
-import { ReactComponent as CopyLinkIcon } from '@epam/assets/icons/common/content-link-18.svg';
-import { ReactComponent as DeleteIcon } from '@epam/assets/icons/common/action-deleteforever-18.svg';
-
-interface ITubButtonDropdownProps extends Omit<IPresetsApi, 'presets'> {
-    preset: ITablePreset;
-    addPreset: () => void;
-    tableState: DataTableState;
-    renamePreset: () => void;
-}
-
-export function PresetActionsDropdown(props: ITubButtonDropdownProps) {
-    const { uuiNotifications } = useUuiContext();
-
-    const copyUrlToClipboard = useCallback(async () => {
-        await navigator.clipboard.writeText(props.getPresetLink(props.preset));
-        successNotificationHandler('Link copied!');
-    }, []);
-
-    const saveInCurrent = useCallback(
-        async (preset: ITablePreset) => {
-            const newPreset: ITablePreset = {
-                ...preset,
-                filter: props.tableState.filter,
-                sorting: props.tableState.sorting,
-                columnsConfig: props.tableState.columnsConfig,
-                filtersConfig: props.tableState.filtersConfig,
-                viewState: props.tableState.viewState,
-            };
-            await props.updatePreset(newPreset);
-            successNotificationHandler('Changes saved!');
-        },
-        [
-            props.tableState.filter, props.tableState.columnsConfig, props.tableState.filtersConfig,
-        ],
-    );
-
-    const successNotificationHandler = useCallback((text: string) => {
-        uuiNotifications
-            .show(
-                (props) => (
-                    <SuccessNotification { ...props }>
-                        <Text size="36" fontSize="14">
-                            {text}
-                        </Text>
-                    </SuccessNotification>
-                ),
-                { duration: 3 },
-            )
-            .catch(() => null);
-    }, []);
-
-    const saveInCurrentHandler = useCallback(() => {
-        saveInCurrent(props.preset);
-    }, [props.preset]);
-
-    const discardAllChangesHandler = useCallback(() => {
-        props.choosePreset(props.preset);
-    }, [props.preset]);
-
-    const duplicateHandler = useCallback(() => {
-        props.duplicatePreset(props.preset);
-    }, [props.preset]);
-
-    const deleteHandler = useCallback(async () => {
-        await props.deletePreset(props.preset);
-    }, [
-        props.activePresetId, props.deletePreset, props.preset,
-    ]);
-
-    const renderBody = () => {
-        const isReadonlyPreset = props.preset.isReadonly;
-        return (
-            <Panel background="surface" shadow={ true } cx={ css.presetDropdownPanel }>
-                {props.activePresetId === props.preset.id && props.hasPresetChanged(props.preset) && (
-                    <>
-                        {!isReadonlyPreset && (
-                            <FlexRow key={ `${props.preset.id}-save-in-current` }>
-                                <DropdownMenuButton icon={ SaveInCurrentIcon } caption="Save in current" onClick={ saveInCurrentHandler } />
-                            </FlexRow>
-                        )}
-                        <FlexRow key={ `${props.preset.id}-save-as-new` }>
-                            <DropdownMenuButton icon={ SaveAsNewIcon } caption="Save as new" onClick={ props.addPreset } />
-                        </FlexRow>
-                        <FlexRow key={ `${props.preset.id}-discard` } borderBottom={ true }>
-                            <DropdownMenuButton icon={ DiscardChangesIcon } caption="Discard all changes" onClick={ discardAllChangesHandler } />
-                        </FlexRow>
-                    </>
-                )}
-                {props.preset.id === props.activePresetId && !isReadonlyPreset && (
-                    <FlexRow key={ `${props.preset.id}-rename` }>
-                        <DropdownMenuButton icon={ RenameIcon } caption="Rename" onClick={ props.renamePreset } />
-                    </FlexRow>
-                )}
-                <FlexRow key={ `${props.preset.id}-duplicate` }>
-                    <DropdownMenuButton icon={ CopyIcon } caption="Duplicate" onClick={ duplicateHandler } />
-                </FlexRow>
-                <FlexRow borderBottom={ true } key={ `${props.preset.id}-copyLink` }>
-                    <DropdownMenuButton icon={ CopyLinkIcon } caption="Copy Link" onClick={ copyUrlToClipboard } />
-                </FlexRow>
-                {!isReadonlyPreset && (
-                    <FlexRow key={ `${props.preset.id}-delete` } cx={ css.deleteRow }>
-                        <DropdownMenuButton icon={ DeleteIcon } caption="Delete" cx={ css.deleteButton } onClick={ deleteHandler } />
-                    </FlexRow>
-                )}
-            </Panel>
-        );
-    };
-
-    const renderTarget = useCallback((dropdownProps: IDropdownToggler) => {
-        return (
-            <IconButton
-                cx={ dropdownProps.isOpen && css.targetOpen }
-                color={ props.preset.id === props.activePresetId ? 'info' : 'neutral' }
-                { ...dropdownProps }
-                icon={ menuIcon }
-            />
-        );
-    }, []);
-
-    return (
-        <Dropdown renderBody={ renderBody } renderTarget={ renderTarget } placement="bottom-end" modifiers={ [{ name: 'offset', options: { offset: [0, 22] } }] } />
-    );
-}

package/components/filters/PresetPanel/PresetInput.module.scss

@@ -1,55 +0,0 @@
-.preset-input-cell {
-    margin-top: auto;
-    margin-bottom: auto;
-
-    .preset-input {
-        padding-left: 3px;
-        padding-right: 3px;
-        width: 213px;
-
-        :global(.uui-icon-accept),
-        :global(.uui-icon-cancel) {
-            width: 30px;
-            height: 30px;
-            align-self: center;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-        }
-
-        :global(.uui-icon-accept) {
-            &:global(.-clickable) {
-                background-color: var(--uui-accent-50);
-                border-radius: var(--uui-border-radius);
-                fill: var(--uui-accent-contrast);
-
-                &:hover {
-                    fill: var(--uui-accent-contrast);
-                    background-color: var(--uui-accent-60);
-                }
-
-                &:active {
-                    fill: var(--uui-accent-contrast);
-                    background-color: var(--uui-accent-70);
-                }
-            }
-        }
-
-        :global(.uui-icon-cancel) {
-            background-color: var(--uui-surface-main);
-            border: 1px solid var(--uui-secondary-50);
-            border-radius: var(--uui-border-radius);
-            margin-left: 1px;
-            box-sizing: border-box;
-
-            &:hover {
-                background-color: var(--uui-secondary-10);
-            }
-
-            &:active {
-                background-color: var(--uui-secondary-20);
-            }
-        }
-    }
-}

package/components/filters/PresetPanel/PresetInput.tsx

@@ -1,50 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import css from './PresetInput.module.scss';
-import { TextInput } from '../../inputs';
-import { FlexCell } from '../../layout';
-import { ITablePreset } from '@epam/uui-core';
-import { UUI_PRESETS_PANEL_INPUT } from './constants';
-
-interface IPresetInputProps {
-    onCancel: () => void;
-    onSuccess?: (name: string) => Promise<any>;
-    preset?: ITablePreset;
-}
-
-export function PresetInput(props: IPresetInputProps) {
-    const [presetCaption, setPresetCaption] = useState(props.preset?.name || '');
-
-    const cancelActionHandler = useCallback(() => {
-        setPresetCaption('');
-        props.onCancel();
-    }, [props.onCancel]);
-
-    const acceptActionHandler = useCallback(async () => {
-        if (presetCaption) {
-            await props.onSuccess(presetCaption);
-        }
-        props.onCancel();
-    }, [presetCaption]);
-
-    const newPresetOnBlurHandler = useCallback(() => {
-        if (presetCaption.length) {
-            return;
-        }
-        props.onCancel();
-    }, [presetCaption.length, props.onCancel]);
-
-    return (
-        <FlexCell cx={ [css.presetInputCell, UUI_PRESETS_PANEL_INPUT] } minWidth={ 180 }>
-            <TextInput
-                cx={ css.presetInput }
-                onValueChange={ setPresetCaption }
-                value={ presetCaption }
-                onCancel={ cancelActionHandler }
-                onAccept={ acceptActionHandler }
-                onBlur={ newPresetOnBlurHandler }
-                autoFocus
-                maxLength={ 50 }
-            />
-        </FlexCell>
-    );
-}

package/components/filters/PresetPanel/PresetsPanel.module.scss

@@ -1,34 +0,0 @@
-.divider {
-    margin-right: 3px;
-    border-left: 1px solid var(--uui-divider);
-    height: 24px;
-}
-
-.dropdownDeleteIcon {
-    :global(.uui-icon) {
-        visibility: hidden;
-    }
-
-    &:hover {
-        :global(.uui-icon) {
-            visibility: visible;
-        }
-    }
-}
-
-.presetsWrapper {
-    min-height: 60px;
-
-    :not(:first-child) {
-        &.addPresetContainer {
-            padding-left: 6px;
-        }
-    }
-}
-
-.dropContainer {
-    &:global(.uui-dropdown-body) {
-        overflow: auto;
-        max-height: 400px;
-    }
-}

package/components/filters/PresetPanel/PresetsPanel.tsx

@@ -1,112 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import sortBy from 'lodash.sortby';
-import { i18n } from '../../../i18n';
-import {
-    DataTableState, IHasRawProps, IPresetsApi, ITablePreset, cx,
-} from '@epam/uui-core';
-import { AdaptiveItemProps, AdaptivePanel, ScrollBars } from '@epam/uui-components';
-import css from './PresetsPanel.module.scss';
-import { Button } from '../../buttons';
-import { FlexCell, FlexRow } from '../../layout';
-import { Dropdown, DropdownContainer, DropdownMenuButton } from '../../overlays';
-import { Preset } from './Preset';
-import { PresetInput } from './PresetInput';
-import { ReactComponent as DeleteIcon } from '@epam/assets/icons/common/action-deleteforever-18.svg';
-import { ReactComponent as addIcon } from '@epam/assets/icons/common/content-plus_bold-18.svg';
-import { UUI_PRESETS_PANEL_ADD_BUTTON, UUI_PRESETS_PANEL_MORE_BUTTON } from './constants';
-
-export interface PresetsPanelProps extends IPresetsApi, IHasRawProps<React.HTMLAttributes<HTMLDivElement>> {
-    tableState: DataTableState;
-}
-
-type PresetAdaptiveItem = AdaptiveItemProps<{ preset?: ITablePreset }>;
-
-export function PresetsPanel(props: PresetsPanelProps) {
-    const [isAddingPreset, setIsAddingPreset] = useState(false);
-
-    const setAddingPreset = useCallback(() => {
-        setIsAddingPreset(true);
-    }, []);
-
-    const cancelAddingPreset = useCallback(() => {
-        setIsAddingPreset(false);
-    }, []);
-
-    const { presets, ...presetApi } = props;
-
-    const renderPreset = (preset: ITablePreset) => {
-        return <Preset key={ preset.id } preset={ preset } addPreset={ setAddingPreset } { ...presetApi } />;
-    };
-
-    const renderAddPresetButton = useCallback(() => {
-        return (
-            <div key="addingPresetBlock" className={ css.addPresetContainer }>
-                {!isAddingPreset ? (
-                    <Button cx={ UUI_PRESETS_PANEL_ADD_BUTTON } size="36" onClick={ setAddingPreset } caption={ i18n.presetPanel.addCaption } icon={ addIcon } iconPosition="left" fill="ghost" color="primary" />
-                ) : (
-                    <PresetInput onCancel={ cancelAddingPreset } onSuccess={ props.createNewPreset } />
-                )}
-            </div>
-        );
-    }, [isAddingPreset]);
-
-    const onPresetDropdownSelect = (preset: PresetAdaptiveItem) => {
-        props.choosePreset(preset.preset);
-    };
-
-    const renderMoreButtonDropdown = (item: PresetAdaptiveItem, hiddenItems: PresetAdaptiveItem[]) => {
-        return (
-            <Dropdown
-                key="more"
-                renderTarget={ (props) => (
-                    <FlexRow>
-                        <div className={ css.divider } />
-                        <Button cx={ UUI_PRESETS_PANEL_MORE_BUTTON } fill="ghost" color="secondary" caption={ `${hiddenItems?.length || ''} more` } { ...props } />
-                    </FlexRow>
-                ) }
-                renderBody={ (propsBody) => (
-                    <DropdownContainer cx={ cx(css.dropContainer) } width={ 230 } { ...propsBody }>
-                        <ScrollBars>
-                            {hiddenItems.map((hiddenItem) => (
-                                <DropdownMenuButton
-                                    key={ hiddenItem.preset.id }
-                                    onClick={ () => onPresetDropdownSelect(hiddenItem) }
-                                    caption={ hiddenItem.preset.name }
-                                    icon={ !hiddenItem.preset.isReadonly && DeleteIcon }
-                                    iconPosition="right"
-                                    cx={ css.dropdownDeleteIcon }
-                                    onIconClick={ !hiddenItem.preset.isReadonly && (() => props.deletePreset(hiddenItem.preset)) }
-                                />
-                            ))}
-                        </ScrollBars>
-                    </DropdownContainer>
-                ) }
-            />
-        );
-    };
-
-    const getPresetPriority = (preset: ITablePreset, index: number) => {
-        return preset.id === props.activePresetId ? 100499 : 1000 - index;
-    };
-
-    const getPanelItems = (): PresetAdaptiveItem[] => {
-        return [
-            ...sortBy(props.presets, (i) => i.order).map((preset, index) => ({
-                id: preset.id.toString(),
-                render: () => renderPreset(preset),
-                priority: getPresetPriority(preset, index),
-                preset: preset,
-            })), {
-                id: 'collapsedContainer', render: renderMoreButtonDropdown, priority: 100501, collapsedContainer: true,
-            }, { id: 'addPreset', render: renderAddPresetButton, priority: 100501 },
-        ];
-    };
-
-    return (
-        <FlexCell grow={ 1 } minWidth={ 310 } rawProps={ props.rawProps }>
-            <FlexRow size={ null } spacing="12" cx={ css.presetsWrapper }>
-                <AdaptivePanel items={ getPanelItems() } />
-            </FlexRow>
-        </FlexCell>
-    );
-}

package/components/filters/PresetPanel/__tests__/Preset.test.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
-import { Preset } from '../Preset';
-
-const mockPreset = {
-    id: 1,
-    name: 'Test Preset',
-};
-
-const mockPresetsApi = {
-    activePresetId: 1,
-    choosePreset: jest.fn(),
-    createNewPreset: jest.fn(),
-    hasPresetChanged: jest.fn(),
-    duplicatePreset: jest.fn(),
-    deletePreset: jest.fn(),
-    updatePreset: jest.fn(),
-    getPresetLink: jest.fn(),
-};
-
-const mockTableState = {};
-
-describe('Preset', () => {
-    it('renders correctly when not in rename mode and not active', async () => {
-        const tree = await renderSnapshotWithContextAsync(<Preset preset={ mockPreset } addPreset={ jest.fn() } tableState={ mockTableState } { ...mockPresetsApi } />);
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('renders correctly when not in rename mode and active', async () => {
-        const tree = await renderSnapshotWithContextAsync(
-            <Preset
-                preset={ mockPreset }
-                addPreset={ jest.fn() }
-                tableState={ mockTableState }
-                activePresetId={ mockPreset.id }
-                hasPresetChanged={ jest.fn() }
-                choosePreset={ jest.fn() }
-                updatePreset={ jest.fn() }
-                { ...mockPresetsApi }
-            />,
-        );
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/filters/PresetPanel/__tests__/PresetActionsDropdown.test.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { PresetActionsDropdown } from '../PresetActionsDropdown';
-import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
-
-const mockPresetActionsDropdownApi = {
-    activePresetId: 1,
-    choosePreset: jest.fn(),
-    createNewPreset: jest.fn(),
-    hasPresetChanged: jest.fn(),
-    duplicatePreset: jest.fn(),
-    deletePreset: jest.fn(),
-    updatePreset: jest.fn(),
-    getPresetLink: jest.fn(),
-    preset: {
-        id: 1,
-        name: 'Test Preset',
-    },
-    addPreset: jest.fn(),
-    tableState: {},
-    renamePreset: jest.fn(),
-};
-
-describe('PresetActionsDropdown', () => {
-    it('should render correctly', async () => {
-        const component = await renderSnapshotWithContextAsync(<PresetActionsDropdown { ...mockPresetActionsDropdownApi } />);
-        expect(component).toMatchSnapshot();
-    });
-});

package/components/filters/PresetPanel/__tests__/PresetInput.test.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
-import { PresetInput } from '../PresetInput';
-
-describe('PresetInput', () => {
-    it('should render correctly', async () => {
-        const component = await renderSnapshotWithContextAsync(<PresetInput onCancel={ jest.fn() } />);
-        expect(component).toMatchSnapshot();
-    });
-});

package/components/filters/PresetPanel/__tests__/__snapshots__/Preset.test.tsx.snap

@@ -1,101 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Preset renders correctly when not in rename mode and active 1`] = `
-<div
-  className="flexCell"
-  style={
-    Object {
-      "alignSelf": "center",
-      "flexBasis": "auto",
-      "flexGrow": undefined,
-      "flexShrink": undefined,
-      "minWidth": 0,
-      "textAlign": undefined,
-    }
-  }
->
-  <button
-    className="container uui-button-box uui-enabled uui-active root uui-tab-button size-60 uui-no-left-icon uui-has-right-icon preset activePreset uui-presets-panel-preset"
-    onClick={[Function]}
-    role="tab"
-    tabIndex={-1}
-    type="button"
-  >
-    <div
-      className="uui-caption"
-    >
-      Test Preset
-    </div>
-    <div
-      className="container uui-icon uui-enabled"
-      style={Object {}}
-    >
-      <button
-        className="container uui-button-box uui-enabled -clickable uui-icon_button uui-color-info root"
-        onClick={[Function]}
-        tabIndex={0}
-        type="button"
-      >
-        <div
-          className="container uui-icon uui-enabled"
-          style={Object {}}
-        >
-          <svg
-            className=""
-          />
-        </div>
-      </button>
-    </div>
-  </button>
-</div>
-`;
-
-exports[`Preset renders correctly when not in rename mode and not active 1`] = `
-<div
-  className="flexCell"
-  style={
-    Object {
-      "alignSelf": "center",
-      "flexBasis": "auto",
-      "flexGrow": undefined,
-      "flexShrink": undefined,
-      "minWidth": 0,
-      "textAlign": undefined,
-    }
-  }
->
-  <button
-    className="container uui-button-box uui-enabled uui-active root uui-tab-button size-60 uui-no-left-icon uui-has-right-icon preset activePreset uui-presets-panel-preset"
-    onClick={[Function]}
-    role="tab"
-    tabIndex={-1}
-    type="button"
-  >
-    <div
-      className="uui-caption"
-    >
-      Test Preset
-    </div>
-    <div
-      className="container uui-icon uui-enabled"
-      style={Object {}}
-    >
-      <button
-        className="container uui-button-box uui-enabled -clickable uui-icon_button uui-color-info root"
-        onClick={[Function]}
-        tabIndex={0}
-        type="button"
-      >
-        <div
-          className="container uui-icon uui-enabled"
-          style={Object {}}
-        >
-          <svg
-            className=""
-          />
-        </div>
-      </button>
-    </div>
-  </button>
-</div>
-`;

package/components/filters/PresetPanel/__tests__/__snapshots__/PresetActionsDropdown.test.tsx.snap

@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PresetActionsDropdown should render correctly 1`] = `
-<button
-  className="container uui-button-box uui-enabled -clickable uui-icon_button uui-color-info root"
-  onClick={[Function]}
-  tabIndex={0}
-  type="button"
->
-  <div
-    className="container uui-icon uui-enabled"
-    style={Object {}}
-  >
-    <svg
-      className=""
-    />
-  </div>
-</button>
-`;

package/components/filters/PresetPanel/__tests__/__snapshots__/PresetInput.test.tsx.snap

@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PresetInput should render correctly 1`] = `
-<div
-  className="flexCell presetInputCell uui-presets-panel-input"
-  style={
-    Object {
-      "alignSelf": undefined,
-      "flexBasis": "0",
-      "flexGrow": undefined,
-      "flexShrink": undefined,
-      "minWidth": "180px",
-      "textAlign": undefined,
-    }
-  }
->
-  <div
-    className="container uui-input-box -clickable root size-36 mode-form presetInput"
-    onBlur={[Function]}
-    onFocus={[Function]}
-    tabIndex={-1}
-  >
-    <input
-      autoFocus={true}
-      className="uui-input"
-      maxLength={50}
-      onChange={[Function]}
-      onKeyDown={[Function]}
-      tabIndex={0}
-      type="text"
-      value=""
-    />
-  </div>
-</div>
-`;