@epam/uui 5.5.2 → 5.5.3

package/components/overlays/__tests__/__snapshots__/NotificationCard.test.tsx.snap

@@ -1,284 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ClearNotification should be rendered correctly 1`] = `
-<div
-  className="notificationWrapper clearButton"
->
-  <button
-    className="container uui-button-box uui-enabled -clickable uui-link_button root uui-size-36 uui-no-left-icon uui-no-right-icon uui-color-primary"
-    onClick={[Function]}
-    tabIndex={0}
-    type="button"
-  >
-    <div
-      className="uui-caption"
-    >
-      CLOSE ALL NOTIFICATIONS
-    </div>
-  </button>
-</div>
-`;
-
-exports[`ErrorNotification should be rendered correctly 1`] = `
-<div
-  className="uui-notification_card uui-color-error root"
-  role="alert"
->
-  <div
-    className="mainPath"
-  >
-    <div
-      className="iconWrapper"
-    >
-      <div
-        className="container uui-icon uui-enabled actionIcon"
-        style={Object {}}
-      >
-        <svg
-          className=""
-        />
-      </div>
-    </div>
-    <div
-      className="content"
-    />
-    <div
-      className="closeWrapper"
-    >
-      <button
-        className="container uui-button-box uui-enabled -clickable uui-icon_button uui-color-neutral root closeIcon"
-        onClick={[Function]}
-        tabIndex={0}
-        type="button"
-      >
-        <div
-          className="container uui-icon uui-enabled"
-          style={Object {}}
-        >
-          <svg
-            className=""
-          />
-        </div>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`HintNotification should be rendered correctly 1`] = `
-<div
-  className="uui-notification_card uui-color-info root"
-  role="alert"
->
-  <div
-    className="mainPath"
-  >
-    <div
-      className="iconWrapper"
-    >
-      <div
-        className="container uui-icon uui-enabled actionIcon"
-        style={Object {}}
-      >
-        <svg
-          className=""
-        />
-      </div>
-    </div>
-    <div
-      className="content"
-    />
-    <div
-      className="closeWrapper"
-    >
-      <button
-        className="container uui-button-box uui-enabled -clickable uui-icon_button uui-color-neutral root closeIcon"
-        onClick={[Function]}
-        tabIndex={0}
-        type="button"
-      >
-        <div
-          className="container uui-icon uui-enabled"
-          style={Object {}}
-        >
-          <svg
-            className=""
-          />
-        </div>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`NotificationCard should be rendered correctly 1`] = `
-<div
-  className="uui-notification_card uui-color-error root"
-  role="alert"
->
-  <div
-    className="mainPath"
-  >
-    <div
-      className="content"
-    />
-    <div
-      className="closeWrapper"
-    >
-      <button
-        className="container uui-button-box uui-enabled -clickable uui-icon_button uui-color-neutral root closeIcon"
-        onClick={[Function]}
-        tabIndex={0}
-        type="button"
-      >
-        <div
-          className="container uui-icon uui-enabled"
-          style={Object {}}
-        >
-          <svg
-            className=""
-          />
-        </div>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`NotificationCard should render with maximum props 1`] = `
-<div
-  className="uui-notification_card uui-color-error root"
-  role="alert"
->
-  <div
-    className="mainPath"
-  >
-    <div
-      className="iconWrapper"
-    >
-      <div
-        className="container uui-icon uui-enabled actionIcon"
-        style={Object {}}
-      >
-        <svg
-          className=""
-        />
-      </div>
-    </div>
-    <div
-      className="content"
-    />
-    <div
-      className="closeWrapper"
-    >
-      <button
-        className="container uui-button-box uui-enabled -clickable uui-icon_button uui-color-neutral root closeIcon"
-        onClick={[Function]}
-        tabIndex={0}
-        type="button"
-      >
-        <div
-          className="container uui-icon uui-enabled"
-          style={Object {}}
-        >
-          <svg
-            className=""
-          />
-        </div>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`SuccessNotification should be rendered correctly 1`] = `
-<div
-  className="uui-notification_card uui-color-success root"
-  role="alert"
->
-  <div
-    className="mainPath"
-  >
-    <div
-      className="iconWrapper"
-    >
-      <div
-        className="container uui-icon uui-enabled actionIcon"
-        style={Object {}}
-      >
-        <svg
-          className=""
-        />
-      </div>
-    </div>
-    <div
-      className="content"
-    />
-    <div
-      className="closeWrapper"
-    >
-      <button
-        className="container uui-button-box uui-enabled -clickable uui-icon_button uui-color-neutral root closeIcon"
-        onClick={[Function]}
-        tabIndex={0}
-        type="button"
-      >
-        <div
-          className="container uui-icon uui-enabled"
-          style={Object {}}
-        >
-          <svg
-            className=""
-          />
-        </div>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`WarningNotification should be rendered correctly 1`] = `
-<div
-  className="uui-notification_card uui-color-warning root"
-  role="alert"
->
-  <div
-    className="mainPath"
-  >
-    <div
-      className="iconWrapper"
-    >
-      <div
-        className="container uui-icon uui-enabled actionIcon"
-        style={Object {}}
-      >
-        <svg
-          className=""
-        />
-      </div>
-    </div>
-    <div
-      className="content"
-    />
-    <div
-      className="closeWrapper"
-    >
-      <button
-        className="container uui-button-box uui-enabled -clickable uui-icon_button uui-color-neutral root closeIcon"
-        onClick={[Function]}
-        tabIndex={0}
-        type="button"
-      >
-        <div
-          className="container uui-icon uui-enabled"
-          style={Object {}}
-        >
-          <svg
-            className=""
-          />
-        </div>
-      </button>
-    </div>
-  </div>
-</div>
-`;

package/components/overlays/__tests__/__snapshots__/Tooltip.test.tsx.snap

@@ -1,5 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Tooltip should be rendered correctly 1`] = `"Test"`;
-
-exports[`Tooltip should be rendered correctly 2`] = `"Test"`;

package/components/overlays/index.ts

@@ -1,8 +0,0 @@
-export * from './Alert';
-export * from './Dropdown';
-export * from './DropdownContainer';
-export * from './DropdownMenu';
-export * from './Modals';
-export * from './NotificationCard';
-export * from './Tooltip';
-export * from './ConfirmationModal';

package/components/pickers/DataPickerBody.module.scss

@@ -1,54 +0,0 @@
-@use  '../../assets/styles/index' as *;
-
-.body {
-    --uui-dt-cell-border-width: 0;
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
-    align-self: stretch;
-    width: 100%;
-
-    :global(.-scrolled-bottom) {
-        border-bottom: 1px solid var(--uui-divider);
-    }
-
-    &.modal {
-        :global(.-scrolled-top) {
-            border-top: 1px solid var(--uui-divider);
-        }
-
-        :global(.-scrolled-bottom) {
-            border-bottom: 1px solid var(--uui-divider);
-        }
-    }
-}
-
-.search-wrapper ~ .body {
-    &:not(.modal) {
-        :global(.-scrolled-top) {
-            border-top: 1px solid var(--uui-divider);
-        }
-    }
-}
-
-.modal {
-    border: 0;
-}
-
-.checkbox {
-    padding: 6px 0;
-}
-
-.search-wrapper {
-    padding: 9px 12px;
-}
-
-.no-found-size-24 {
-    padding-top: 20px;
-    padding-bottom: 20px;
-}
-
-.no-found-size-30, .no-found-size-36, .no-found-size-42 {
-    padding-top: 23px;
-    padding-bottom: 23px;
-}

package/components/pickers/DataPickerBody.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import {
-    Lens, DataSourceState, isMobile, cx,
-} from '@epam/uui-core';
-import { FlexCell, PickerBodyBase, PickerBodyBaseProps } from '@epam/uui-components';
-import { SearchInput } from '../inputs';
-import { FlexRow, VirtualList } from '../layout';
-import { Text } from '../typography';
-import { i18n } from '../../i18n';
-import { ControlSize } from '../types';
-import css from './DataPickerBody.module.scss';
-
-export interface DataPickerBodyProps extends PickerBodyBaseProps {
-    maxHeight?: number;
-    editMode?: 'dropdown' | 'modal';
-    searchSize?: ControlSize;
-    selectionMode?: 'single' | 'multi';
-    maxWidth?: number;
-}
-
-export class DataPickerBody extends PickerBodyBase<DataPickerBodyProps> {
-    lens = Lens.onEditableComponent<DataSourceState>(this);
-    searchLens = this.lens.prop('search');
-    renderNotFound() {
-        if (this.props.renderNotFound) {
-            return this.props.renderNotFound();
-        }
-
-        return (
-            <FlexCell cx={ css[`no-found-size-${this.props.searchSize || 36}`] } grow={ 1 } textAlign="center">
-                <Text size={ this.props.searchSize || '36' }>{i18n.dataPickerBody.noRecordsMessage}</Text>
-            </FlexCell>
-        );
-    }
-
-    render() {
-        const searchSize = isMobile() ? '48' : this.props.searchSize || '36';
-
-        return (
-            <>
-                {this.showSearch() && (
-                    <div key="search" className={ css.searchWrapper }>
-                        <FlexCell grow={ 1 }>
-                            <SearchInput
-                                ref={ this.searchRef }
-                                placeholder={ i18n.dataPickerBody.searchPlaceholder }
-                                { ...this.searchLens.toProps() }
-                                onKeyDown={ this.searchKeyDown }
-                                size={ searchSize }
-                                debounceDelay={ this.props.searchDebounceDelay }
-                            />
-                        </FlexCell>
-                    </div>
-                )}
-                <FlexRow key="body" cx={ cx(css.body, css[this.props.editMode], css[this.props.selectionMode]) } rawProps={ { style: { maxHeight: this.props.maxHeight, maxWidth: this.props.maxWidth } } }>
-                    { this.props.rowsCount > 0 ? (
-                        <VirtualList 
-                            { ...this.lens.toProps() }
-                            rows={ this.props.rows }
-                            rawProps={ this.props.rawProps }
-                            rowsCount={ this.props.rowsCount }
-                            isLoading={ this.props.isReloading }
-                        />
-                    ) : (this.renderNotFound())}
-                </FlexRow>
-            </>
-        );
-    }
-}

package/components/pickers/DataPickerCell.module.scss

@@ -1,93 +0,0 @@
-.cell {
-    position: relative;
-    box-sizing: border-box;
-    background-clip: padding-box;
-    display: flex;
-    align-items: flex-start;
-
-    &.align-widgets-top {
-        &.size-24, &.size-30 {
-            :global(.uui-checkbox), :global(.uui-folding-arrow) {
-                margin-top: 6px;
-            }
-        }
-
-        &.size-36 {
-            :global(.uui-checkbox), :global(.uui-folding-arrow) {
-                margin-top: 9px;
-            }
-        }
-
-        &.size-42 {
-            :global(.uui-checkbox), :global(.uui-folding-arrow) {
-                margin-top: 12px;
-            }
-        }
-
-        &.size-48 {
-            :global(.uui-checkbox), :global(.uui-folding-arrow) {
-                margin-top: 15px;
-            }
-        }
-
-        &.size-60 {
-            :global(.uui-checkbox), :global(.uui-folding-arrow) {
-                margin-top: 21px;
-            }
-        }
-    }
-
-    &.align-widgets-center :global(.uui-checkbox-container) {
-        align-self: center;
-    }
-
-    &.padding-12 { padding: 0 12px; }
-    &.padding-24 { padding: 0 24px; }
-
-    &.padding-left-12 { padding-left: 12px; }
-    &.padding-left-24 { padding-left: 24px; }
-
-    &:first-child {
-        border-left-color: transparent;
-    }
-
-    &:last-child {
-        border-right-color: transparent;
-    }
-}
-
-.icon-container {
-    fill: var(--uui-icon);
-}
-
-.loading-cell {
-    div[aria-busy='true'] > span {
-        margin: 0 3px 0 0;
-    }
-}
-
-.content-wrapper {
-    display: flex;
-    min-width: 0;
-    flex: 1;
-}
-
-
-.render-item {
-    display: flex;
-    flex: auto;
-}
-
-.icon-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.icon-default {
-    fill: var(--uui-icon);
-}
-
-.icon-primary {
-    fill: var(--uui-primary-50);
-}

package/components/pickers/DataPickerCell.tsx

@@ -1,95 +0,0 @@
-import * as React from 'react';
-import { DataPickerCellProps } from '@epam/uui-core';
-import { FlexSpacer, IconContainer } from '@epam/uui-components';
-import { PickerCellMods } from './types';
-import { TextPlaceholder, Text } from '../typography';
-import { DataRowAddons } from '../widgets';
-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 './DataPickerCell.module.scss';
-
-import { FlexCell } from '../layout';
-
-const 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;
-    }
-};
-
-export function DataPickerCell<TItem, TId>(props: DataPickerCellProps<TItem, TId> & PickerCellMods) {
-    const ref = React.useRef<HTMLDivElement>();
-
-    let content: React.ReactNode;
-
-    if (props.rowProps.isLoading) {
-        content = (
-            // remove `css.loadingCell` after` removing `margin: 0 3px 3px 0` from `TextPlaceholder` `loadingWord` class styles.
-            <Text key="t" size={ props.size !== '60' ? props.size : '48' } cx={ css.loadingCell }>
-                <TextPlaceholder />
-            </Text>
-        );
-    } else if (props.rowProps.isUnknown) {
-        content = (
-            <Text key="t" size={ props.size !== '60' ? props.size : '48' }>
-                Unknown
-            </Text>
-        );
-    } else {
-        content = (
-            <div key={ `${props.rowProps.id}` } className={ css.renderItem }>
-                {props.renderItem(props.rowProps.value, props.rowProps)}
-                <FlexSpacer />
-                {(props.rowProps.isChildrenSelected || props.rowProps.isSelected) && (
-                    <div className={ css.iconWrapper }>
-                        <IconContainer 
-                            icon={ getIcon(props.size) } 
-                            cx={ props.rowProps.isChildrenSelected ? css.iconDefault : css.iconPrimary }
-                            rawProps={ { 'aria-label': props.rowProps.isChildrenSelected 
-                                ? 'Child is selected' 
-                                : 'Selected' } }
-                        />
-                    </div>
-                )}
-            </div>
-        );
-    }
-
-    const getWrappedContent = () => (
-        <div className={ css.contentWrapper }>
-            {content}
-        </div>
-    );
-
-    return (
-        <FlexCell
-            ref={ ref }
-            grow={ 1 }
-            width={ 0 }
-            minWidth={ 0 }
-            rawProps={ { role: 'cell' } }
-            cx={ [
-                css.cell,
-                props.cx,
-                'data-picker-cell',
-                css['size-' + (props.size || '36')],
-                css[`padding-${props.padding || '12'}`],
-                css[`padding-left-${props.padding || '24'}`],
-                css[`align-widgets-${props.alignActions || 'top'}`],
-            ] }
-        >
-            <DataRowAddons { ...props } />
-            {getWrappedContent()}
-        </FlexCell>
-    );
-}

package/components/pickers/DataPickerFooter.tsx

@@ -1,85 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import { isMobile, PickerFooterProps } from '@epam/uui-core';
-import { i18n } from '../../i18n';
-import { Switch } from '../inputs';
-import { FlexCell, FlexRow, FlexSpacer } from '../layout';
-import { LinkButton } from '../buttons';
-import { SizeMod } from '../types';
-
-type DataPickerFooterProps<TItem, TId> = PickerFooterProps<TItem, TId> &
-SizeMod & {
-    selectionMode: 'single' | 'multi';
-};
-
-const switchSizes = {
-    24: '12',
-    36: '18',
-    42: '24',
-    48: '24',
-} as const;
-
-function DataPickerFooterImpl<TItem, TId>(props: PropsWithChildren<DataPickerFooterProps<TItem, TId>>) {
-    const {
-        clearSelection,
-        view,
-        showSelected,
-        selectionMode,
-    } = props;
-    const size = isMobile() ? '48' : props.size || '36';
-    const switchSize = switchSizes[size as unknown as (keyof typeof switchSizes)];
-    const hasSelection = view.getSelectedRowsCount() > 0;
-    const rowsCount = view.getListProps().rowsCount;
-    const isEmptyRowsAndHasNoSelection = (rowsCount === 0 && !hasSelection);
-
-    const isSinglePicker = selectionMode === 'single';
-
-    const clearAllText = i18n.pickerInput.clearSelectionButton;
-    const clearSingleText = i18n.pickerInput.clearSelectionButtonSingle;
-    const selectAllText = i18n.pickerInput.selectAllButton;
-
-    // show always for multi picker and for single only in case if search not disabled.
-    const shouldShowFooter = isSinglePicker ? !props.disableClear : true;
-
-    return shouldShowFooter && (
-        <FlexRow padding="12">
-            {!isSinglePicker && (
-                <Switch
-                    size={ switchSize }
-                    value={ showSelected.value }
-                    isDisabled={ !hasSelection }
-                    onValueChange={ showSelected.onValueChange }
-                    label={ i18n.pickerInput.showOnlySelectedLabel }
-                />
-            )}
-
-            <FlexSpacer />
-
-            <FlexCell width="auto" alignSelf="center">
-                {view.selectAll && (
-                    <LinkButton
-                        size={ size }
-                        caption={ hasSelection ? clearAllText : selectAllText }
-                        onClick={ hasSelection ? clearSelection : () => view.selectAll.onValueChange(true) }
-                        rawProps={ {
-                            'aria-label': hasSelection ? clearAllText : selectAllText,
-                        } }
-                        isDisabled={ isEmptyRowsAndHasNoSelection }
-                    />
-                )}
-                {!view.selectAll && (
-                    <LinkButton
-                        isDisabled={ !hasSelection }
-                        size={ size }
-                        caption={ isSinglePicker ? clearSingleText : clearAllText }
-                        onClick={ clearSelection }
-                        rawProps={ {
-                            'aria-label': isSinglePicker ? clearSingleText : clearAllText,
-                        } }
-                    />
-                )}
-            </FlexCell>
-        </FlexRow>
-    );
-}
-
-export const DataPickerFooter = React.memo(DataPickerFooterImpl);