@epam/uui 5.5.1 → 5.5.2

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

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

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

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

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

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

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

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

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