@epam/uui 5.3.0 → 5.4.0

package/components/layout/Accordion.module.scss

@@ -1,180 +0,0 @@
-@use  '../../assets/styles/effects' as *;
-
-@mixin padding($size) {
-    padding-left: $size + px;
-    padding-right: $size + px;
-}
-
-.root {
-    --uui-accordion-bg: var(--uui-surface-main);
-    --uui-accordion-border: var(--uui-divider);
-    --uui-accordion-text: var(--uui-text-primary);
-    --uui-accordion-text-disabled: var(--uui-text-disabled);
-    --uui-accordion-icon: var(--uui-icon);
-    --uui-accordion-icon-disabled: var(--uui-control-icon-disabled);
-    --uui-accordion-shadow: var(--uui-shadow-level-1);
-    --uui-accordion-shadow-hovered: var(--uui-shadow-level-2);
-
-    --uui-accordion-border-radius: var(--uui-border-radius);
-
-    --uui-accordion-toggler-font: var(--uui-font);
-    --uui-accordion-toggler-font-weight: 600;
-    --uui-accordion-body-font: var(--uui-font);
-    --uui-accordion-body-font-weight: 400;
-    //
-    :global(.uui-accordion-toggler) {
-        font-family: var(--uui-accordion-toggler-font);
-        font-weight: var(--uui-accordion-toggler-font-weight);
-        color: var(--uui-accordion-text);
-        cursor: pointer;
-
-        &:focus-visible {
-            @include focus-visible-effect(-2px, 0);
-        }
-    }
-
-    :global(.uui-accordion-body) {
-        font-family: var(--uui-accordion-body-font);
-        font-weight: var(--uui-accordion-body-font-weight);
-        color: var(--uui-accordion-text);
-    }
-
-    &:global(.uui-accordion-container) {
-        &.mode-block {
-            box-shadow: var(--uui-accordion-shadow);
-        }
-    }
-
-    &.mode-block {
-        border-radius: var(--uui-accordion-border-radius);
-
-        :global(.uui-accordion-toggler) {
-            background: var(--uui-accordion-bg);
-            fill: var(--uui-accordion-icon);
-            line-height: 24px;
-            font-size: 18px;
-            padding: 0 18px;
-            border-radius: var(--uui-accordion-border-radius);
-
-            :global(.uui-accordion-toggle-container) {
-                min-height: 48px;
-                padding-top: 5px;
-                padding-bottom: 5px;
-            }
-
-            :global(.uui-accordion-title) {
-                color: var(--uui-accordion-text);
-            }
-
-            &:hover, &:focus {
-                box-shadow: var(--uui-accordion-shadow-hovered);
-            }
-        }
-
-        :global(.uui-accordion-body) {
-            padding: 18px;
-            line-height: 24px;
-            letter-spacing: 0;
-            background: var(--uui-accordion-bg);
-            border-top: 1px solid var(--uui-accordion-border);
-            border-radius: 0 0 var(--uui-accordion-border-radius) var(--uui-accordion-border-radius);
-        }
-
-        &:global(.uui-opened) {
-            :global(.uui-accordion-toggler) {
-                border-radius: var(--uui-accordion-border-radius) var(--uui-accordion-border-radius) 0 0;
-
-                &:hover, &:focus {
-                    border-color: var(--uui-accordion-shadow-hovered);
-                }
-            }
-        }
-
-        &:global(.uui-disabled) {
-            :global(.uui-accordion-toggler) {
-                cursor: default;
-                fill: var(--uui-accordion-icon-disabled);
-
-                &:global(.uui-opened) {
-                    border-radius: var(--uui-accordion-border-radius) var(--uui-accordion-border-radius) 0 0;
-                }
-
-                :global(.uui-accordion-title) {
-                    color: var(--uui-accordion-text-disabled);
-                }
-
-                &:hover, &:focus {
-                    box-shadow: none;
-                }
-            }
-        }
-    }
-
-    &.mode-inline {
-        :global(.uui-accordion-toggler) {
-            border-bottom: 1px solid var(--uui-accordion-border);
-            fill: var(--uui-accordion-icon);
-            line-height: 18px;
-            font-size: 14px;
-            padding: 8px 12px 8px;
-
-            :global(.uui-accordion-toggle-container) {
-                min-height: 24px;
-            }
-
-            :global(.uui-accordion-title) {
-                color: var(--uui-accordion-text);
-            }
-        }
-
-        :global(.uui-accordion-body) {
-            padding: 1px 12px 12px;
-            border-bottom: 1px solid var(--uui-accordion-border);
-        }
-
-        &:global(.uui-opened) {
-            :global(.uui-accordion-toggler) {
-                border-bottom: 0 none;
-            }
-        }
-
-        &:global(.uui-disabled) {
-            :global(.uui-accordion-toggler) {
-                cursor: default;
-                fill: var(--uui-accordion-icon-disabled);
-
-                &:global(.uui-opened) {
-                    border-bottom: 0 none;
-                }
-
-                :global(.uui-accordion-title) {
-                    color: var(--uui-accordion-text-disabled);
-                }
-            }
-        }
-    }
-
-    &.padding-0 {
-        :global(.uui-accordion-toggler), :global(.uui-accordion-body) {
-            @include padding(0);
-        }
-    }
-
-    &.padding-6 {
-        :global(.uui-accordion-toggler), :global(.uui-accordion-body) {
-            @include padding(6);
-        }
-    }
-
-    &.padding-12 {
-        :global(.uui-accordion-toggler), :global(.uui-accordion-body) {
-            @include padding(12);
-        }
-    }
-
-    &.padding-18 {
-        :global(.uui-accordion-toggler), :global(.uui-accordion-body) {
-            @include padding(18);
-        }
-    }
-}

package/components/layout/Accordion.tsx

@@ -1,23 +0,0 @@
-import { withMods } from '@epam/uui-core';
-import * as uuiComponents from '@epam/uui-components';
-import { systemIcons } from '../../icons/icons';
-import css from './Accordion.module.scss';
-
-export interface AccordionMods {
-    mode?: 'block' | 'inline';
-    padding?: '0' | '6' | '12' | '18';
-}
-
-export type AccordionProps = AccordionMods & uuiComponents.AccordionProps;
-
-function applyAccordionMods(mods: AccordionProps) {
-    return [
-        css.root,
-        css['mode-' + (mods.mode || 'block')],
-        mods.padding && css['padding-' + mods.padding],
-    ];
-}
-
-export const Accordion = withMods<uuiComponents.AccordionProps, AccordionMods>(uuiComponents.Accordion, applyAccordionMods, (mods) => ({
-    dropdownIcon: mods.dropdownIcon !== null && systemIcons[mods.mode === 'block' ? '60' : '30'].foldingArrow,
-}));

package/components/layout/Blocker.module.scss

@@ -1,30 +0,0 @@
-.root {
-    --uui-blocker-bg: #FFFFFF;
-    --uui-blocker-bg-with-opacity: #FFFFFFB3;
-
-    &:global(.uui-blocker-container) {
-        :global(.uui-blocker) {
-            background-color: var(--uui-blocker-bg-with-opacity);
-
-        }
-
-        :global(.uui-blocker-enter) {
-            background-color: var(--uui-blocker-bg);
-        }
-
-        :global(.uui-blocker-enter-active) {
-            background-color: var(--uui-blocker-bg-with-opacity);
-            transition: opacity 1000ms ease-out, background-color 1000ms ease-out;
-        }
-
-        :global(.uui-blocker-exit) {
-            background-color: var(--uui-blocker-bg-with-opacity);
-            pointer-events: none;
-            transition: opacity 1000ms ease-out, background-color 1000ms ease-out;
-        }
-
-        :global(.uui-blocker-exit-active) {
-            background-color: var(--uui-blocker-bg);
-        }
-    }
-}

package/components/layout/Blocker.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import css from './Blocker.module.scss';
-import { withMods } from '@epam/uui-core';
-import { Blocker as uuiBlocker, BlockerProps } from '@epam/uui-components';
-import { Spinner } from '../widgets/Spinner';
-
-export const Blocker = withMods<BlockerProps>(
-    uuiBlocker,
-    () => [css.root],
-    (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => <Spinner />) }),
-);

package/components/layout/CheckboxGroup.module.scss

@@ -1,15 +0,0 @@
-.root {
-    &:global(.uui-horizontal-direction) {
-        gap: 10px 18px;
-    }
-
-    &:global(.uui-vertical-direction) {
-        > * {
-            margin-bottom: 10px;
-        }
-
-        :last-child {
-            margin-bottom: 0;
-        }
-    }
-}

package/components/layout/CheckboxGroup.tsx

@@ -1,10 +0,0 @@
-import { withMods } from '@epam/uui-core';
-import { CheckboxGroup as uuiCheckboxGroup, CheckboxGroupProps } from '@epam/uui-components';
-import { Checkbox } from '../inputs/Checkbox';
-import css from './CheckboxGroup.module.scss';
-
-export const CheckboxGroup = withMods<CheckboxGroupProps<any>>(
-    uuiCheckboxGroup,
-    () => [css.root],
-    () => ({ CheckboxInput: Checkbox }),
-);

package/components/layout/ControlGroup.module.scss

@@ -1,15 +0,0 @@
-.root {
-    > :nth-child(n) {
-        border-radius: 0;
-    }
-
-    > :first-child {
-        border-top-left-radius: var(--uui-border-radius);
-        border-bottom-left-radius: var(--uui-border-radius);
-    }
-
-    > :last-child {
-        border-top-right-radius: var(--uui-border-radius);
-        border-bottom-right-radius: var(--uui-border-radius);
-    }
-}

package/components/layout/ControlGroup.tsx

@@ -1,5 +0,0 @@
-import css from './ControlGroup.module.scss';
-import { withMods } from '@epam/uui-core';
-import { ControlGroup as uuiControlGroup, ControlGroupProps } from '@epam/uui-components';
-
-export const ControlGroup = withMods<ControlGroupProps>(uuiControlGroup, () => [css.root]);

package/components/layout/FlexItems/FlexCell.module.scss

@@ -1,5 +0,0 @@
-@use  '../../../assets/styles/index' as *;
-
-.flexCell {
-    @include overflow-ellipsis();
-}

package/components/layout/FlexItems/FlexCell.tsx

@@ -1,9 +0,0 @@
-import css from './FlexRow.module.scss';
-import * as uuiCore from '@epam/uui-core';
-import { FlexCell as uuiFlexCell } from '@epam/uui-components';
-import { withMods } from '@epam/uui-core';
-
-export type FlexCellMods = {};
-export type FlexCellProps = uuiCore.FlexCellProps & FlexCellMods;
-
-export const FlexCell = withMods<uuiCore.FlexCellProps, FlexCellMods>(uuiFlexCell, () => [css.flexCell]);

package/components/layout/FlexItems/FlexRow.module.scss

@@ -1,122 +0,0 @@
-@use 'sass:math';
-@use '../../../assets/styles/index.scss' as *;
-
-@mixin panel-top-shadow() { box-shadow: inset 0 10px 5px -10px rgba(51, 51, 51, 0.2); }
-
-@mixin items-spacing($size) {
-    >*:not(:last-child) {
-        margin-right: math.div($size, 2);
-    }
-
-    >*:not(:first-child) {
-        margin-left: math.div($size, 2);
-    }
-}
-
-.root {
-    --uui-flex-row-bg: transparent;
-    --uui-flex-row-border-bottom: 1px solid var(--uui-divider);
-    //
-    // If we have an "border-box" value here, an size-24 row with a bottom border, will have 23px min-height.
-    box-sizing: content-box;
-    background-color: var(--uui-flex-row-bg);
-
-    &.border-bottom {
-        border-bottom: var(--uui-flex-row-border-bottom);
-    }
-
-    &.top-shadow {
-        @include panel-top-shadow();
-    }
-
-    &.size-24 {
-        min-height: 24px;
-    }
-
-    &.size-30 {
-        min-height: 30px;
-    }
-
-    &.size-36 {
-        min-height: 36px;
-    }
-
-    &.size-42 {
-        min-height: 42px;
-    }
-
-    &.size-48 {
-        min-height: 48px;
-    }
-
-    &.padding-6 {
-        padding-left: 6px;
-        padding-right: 6px;
-    }
-
-    &.padding-12 {
-        padding-left: 12px;
-        padding-right: 12px;
-    }
-
-    &.padding-18 {
-        padding-left: 18px;
-        padding-right: 18px;
-    }
-
-    &.padding-24 {
-        padding-left: 24px;
-        padding-right: 24px;
-    }
-
-    &.margin-24 {
-        margin: 24px;
-    }
-
-    &.margin-12 {
-        margin: 12px;
-    }
-
-
-    &.vPadding-12 {
-        padding-top: 6px;
-        padding-bottom: 6px;
-    }
-
-    &.vPadding-18 {
-        padding-top: 9px;
-        padding-bottom: 9px;
-    }
-
-    &.vPadding-24 {
-        padding-top: 12px;
-        padding-bottom: 12px;
-    }
-
-    &.vPadding-36 {
-        padding-top: 18px;
-        padding-bottom: 18px;
-    }
-
-    &.vPadding-48 {
-        padding-top: 24px;
-        padding-bottom: 24px;
-    }
-
-    &.spacing-6 {
-        @include items-spacing(6px);
-    }
-
-    &.spacing-12 {
-        @include items-spacing(12px);
-    }
-
-    &.spacing-18 {
-        @include items-spacing(18px);
-    }
-
-    &:global(.uui-flex-row.uui-color-surface) {
-        --uui-flex-row-bg: var(--uui-surface-main);
-    }
-}
-

package/components/layout/FlexItems/FlexRow.tsx

@@ -1,32 +0,0 @@
-import { FlexRowProps as uuiFlexRowProps, withMods } from '@epam/uui-core';
-import { FlexRow as uuiFlexRow } from '@epam/uui-components';
-import { RowSizeMod } from '../../types';
-import css from './FlexRow.module.scss';
-
-export interface RowMods extends RowSizeMod {
-    borderBottom?: boolean;
-    columnGap?: number | '6' | '12' | '18' | '24' | '36';
-    margin?: '12' | '24';
-    padding?: '6' | '12' | '18' | '24';
-    rowGap?: number | '6' | '12' | '18' | '24' | '36';
-    spacing?: '6' | '12' | '18';
-    topShadow?: boolean;
-    vPadding?: '12' | '18' | '24' | '36' | '48';
-    background?: 'surface';
-}
-
-export interface FlexRowProps extends Omit<uuiFlexRowProps, 'columnGap' | 'rowGap'> {}
-
-export const FlexRow = withMods<FlexRowProps, RowMods>(uuiFlexRow, (props) => {
-    return [
-        css.root,
-        props.size !== null && css['size-' + (props.size || '36')],
-        props.padding && css['padding-' + props.padding],
-        props.vPadding && css['vPadding-' + props.vPadding],
-        props.margin && css['margin-' + props.margin],
-        props.topShadow && css.topShadow,
-        props.borderBottom && css.borderBottom,
-        props.spacing && css['spacing-' + props.spacing],
-        props.background && `uui-color-${props.background}`,
-    ];
-});

package/components/layout/FlexItems/Panel.module.scss

@@ -1,34 +0,0 @@
-.root {
-    --uui-panel-bg: var(--uui-surface-main);
-    --uui-panel-shadow: var(--uui-shadow-level-1);
-
-    --uui-panel-border-radius: var(--uui-border-radius);
-    //
-    overflow: hidden;
-    border-radius: var(--uui-panel-border-radius);
-    background-color: var(--uui-panel-bg);
-
-    &.margin-24 {
-        margin: 24px;
-    }
-
-    &.padding-12 {
-        padding: 12px;
-    }
-
-    &.padding-24 {
-        padding: 24px;
-    }
-
-    &.shadow {
-        box-shadow: var(--uui-panel-shadow);
-    }
-
-    &:global(.-clickable):hover {
-        cursor: pointer;
-    }
-
-    &:global(.uui-panel.uui-color-surface) {
-        --uui-panel-bg: var(--uui-surface-main);
-    }
-}

package/components/layout/FlexItems/Panel.tsx

@@ -1,19 +0,0 @@
-import { withMods, VPanelProps } from '@epam/uui-core';
-import { VPanel } from '@epam/uui-components';
-import css from './Panel.module.scss';
-
-export interface PanelMods {
-    shadow?: boolean;
-    margin?: '24';
-    background?: 'surface';
-}
-
-export type PanelProps = VPanelProps & PanelMods;
-
-export const Panel = withMods<VPanelProps, PanelMods>(VPanel, (props) => [
-    'uui-panel',
-    css.root,
-    props.shadow && css.shadow,
-    props.margin && css['margin-' + props.margin],
-    props.background && `uui-color-${props.background}`,
-]);

package/components/layout/FlexItems/__tests__/FlexCell.test.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { FlexCell } from '../FlexCell';
-import { renderer } from '@epam/uui-test-utils';
-
-describe('FlexCell', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<FlexCell />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly with props', () => {
-        const tree = renderer.create(<FlexCell onClick={ () => {} } width="100%" minWidth={ 120 } alignSelf="center" grow={ 1 } shrink={ 1 } textAlign="left" />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/layout/FlexItems/__tests__/FlexRow.test.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { FlexRow } from '../FlexRow';
-import { renderer } from '@epam/uui-test-utils';
-
-describe('FlexRow', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<FlexRow />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly with props', () => {
-        const tree = renderer
-            .create(<FlexRow onClick={ () => {} } margin="12" size="24" spacing="12" padding="12" borderBottom alignItems="top" topShadow vPadding="12" />)
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/layout/FlexItems/__tests__/FlexSpacer.test.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { FlexSpacer } from '../';
-import { renderer } from '@epam/uui-test-utils';
-
-describe('FlexSpacer', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<FlexSpacer />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/layout/FlexItems/__tests__/Panel.test.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Panel } from '../Panel';
-import { renderer } from '@epam/uui-test-utils';
-
-describe('Panel', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<Panel />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly with props', () => {
-        const tree = renderer.create(<Panel onClick={ () => {} } margin="24" shadow />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/layout/FlexItems/__tests__/__snapshots__/FlexCell.test.tsx.snap

@@ -1,34 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FlexCell should be rendered correctly 1`] = `
-<div
-  className="flexCell"
-  style={
-    Object {
-      "alignSelf": undefined,
-      "flexBasis": "0",
-      "flexGrow": undefined,
-      "flexShrink": undefined,
-      "minWidth": 0,
-      "textAlign": undefined,
-    }
-  }
-/>
-`;
-
-exports[`FlexCell should be rendered correctly with props 1`] = `
-<div
-  className="flexCell"
-  onClick={[Function]}
-  style={
-    Object {
-      "alignSelf": "center",
-      "flexBasis": "100%",
-      "flexGrow": 1,
-      "flexShrink": 1,
-      "minWidth": "120px",
-      "textAlign": "left",
-    }
-  }
-/>
-`;

package/components/layout/FlexItems/__tests__/__snapshots__/FlexRow.test.tsx.snap

@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FlexRow should be rendered correctly 1`] = `
-<div
-  className="uui-flex-row root size-36 container align-items-center"
-  style={
-    Object {
-      "columnGap": undefined,
-      "rowGap": undefined,
-    }
-  }
-/>
-`;
-
-exports[`FlexRow should be rendered correctly with props 1`] = `
-<div
-  className="uui-flex-row root size-24 padding-12 vPadding-12 margin-12 topShadow borderBottom spacing-12 container -clickable align-items-top"
-  onClick={[Function]}
-  style={
-    Object {
-      "columnGap": undefined,
-      "rowGap": undefined,
-    }
-  }
-/>
-`;

package/components/layout/FlexItems/__tests__/__snapshots__/FlexSpacer.test.tsx.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FlexSpacer should be rendered correctly 1`] = `
-<div
-  className="flexSpacer"
-/>
-`;

package/components/layout/FlexItems/__tests__/__snapshots__/Panel.test.tsx.snap

@@ -1,14 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Panel should be rendered correctly 1`] = `
-<div
-  className="uui-panel root container"
-/>
-`;
-
-exports[`Panel should be rendered correctly with props 1`] = `
-<div
-  className="uui-panel root shadow margin-24 container -clickable"
-  onClick={[Function]}
-/>
-`;

package/components/layout/FlexItems/index.ts

@@ -1,4 +0,0 @@
-export * from './FlexCell';
-export * from './FlexRow';
-export * from './Panel';
-export { FlexSpacer } from '@epam/uui-components';