@epam/uui 5.3.0 → 5.4.0

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

@@ -1,206 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Modals should be rendered correctly 1`] = `
-<div
-  className="container modalBlocker"
-  style={
-    Object {
-      "zIndex": 1,
-    }
-  }
->
-  <div
-    aria-label="Click to close a modal"
-    className="uui-modal-blocker"
-    onClick={[Function]}
-  />
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={0}
-  />
-  <div
-    data-focus-lock-disabled={false}
-    onBlur={[Function]}
-    onFocus={[Function]}
-  >
-    <div
-      aria-modal={true}
-      className="uui-modal-window root modal container"
-      role="dialog"
-      style={
-        Object {
-          "height": "auto",
-          "width": "420px",
-        }
-      }
-    >
-      <div
-        className="uui-flex-row root size-36 padding-24 vPadding-12 spacing-12 root modalHeader container align-items-center"
-        style={
-          Object {
-            "columnGap": undefined,
-            "rowGap": undefined,
-          }
-        }
-      />
-      <div
-        className="uui-flex-row root size-36 padding-24 vPadding-24 spacing-12 root modalFooter container align-items-center"
-        style={
-          Object {
-            "columnGap": undefined,
-            "rowGap": undefined,
-          }
-        }
-      />
-    </div>
-  </div>
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={0}
-  />
-</div>
-`;
-
-exports[`Modals should be rendered correctly 2`] = `
-<div
-  className="container modalBlocker"
-  style={
-    Object {
-      "zIndex": 1,
-    }
-  }
->
-  <div
-    aria-label="Click to close a modal"
-    className="uui-modal-blocker"
-    onClick={[Function]}
-  />
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={0}
-  />
-  <div
-    data-focus-lock-disabled={false}
-    onBlur={[Function]}
-    onFocus={[Function]}
-  >
-    <div
-      aria-modal={true}
-      className="uui-modal-window root modal container"
-      role="dialog"
-      style={
-        Object {
-          "height": "300px",
-          "width": "300px",
-        }
-      }
-    >
-      <div
-        className="uui-flex-row root size-36 padding-6 vPadding-12 borderBottom spacing-12 root modalHeader container align-items-center"
-        style={
-          Object {
-            "columnGap": undefined,
-            "rowGap": undefined,
-          }
-        }
-      >
-        <div
-          className="root uui-text uui-color-primary uui-font-weight-600 uui-font-style-normal uui-typography line-height-24 font-size-18 v-padding-12 container"
-        >
-          Test header
-        </div>
-        <div
-          className="flexSpacer"
-        />
-        <div
-          className="flexCell"
-          style={
-            Object {
-              "alignSelf": undefined,
-              "flexBasis": "auto",
-              "flexGrow": undefined,
-              "flexShrink": 0,
-              "minWidth": 0,
-              "textAlign": undefined,
-            }
-          }
-        >
-          <button
-            aria-label="Close modal"
-            className="container uui-button-box uui-enabled -clickable uui-icon_button uui-color-neutral root"
-            onClick={[Function]}
-            tabIndex={0}
-            type="button"
-          >
-            <div
-              className="container uui-icon uui-enabled"
-              style={Object {}}
-            >
-              <svg
-                className=""
-              />
-            </div>
-          </button>
-        </div>
-      </div>
-      <div
-        className="uui-flex-row root size-36 padding-18 vPadding-24 spacing-12 root modalFooter container align-items-center"
-        style={
-          Object {
-            "columnGap": undefined,
-            "rowGap": undefined,
-          }
-        }
-      />
-    </div>
-  </div>
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={0}
-  />
-</div>
-`;

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,68 +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';
-}
-
-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 } } }>
-                    { 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/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);