@epam/uui 5.5.2 → 5.5.4

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,11 +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';
-
-type FlexCellMods = {};
-
-/** Represents the properties of the FlexCell component. */
-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);
-    }
-
-    &.uui-surface-main {
-        --uui-flex-row-bg: var(--uui-surface-main);
-    }
-}
-

package/components/layout/FlexItems/FlexRow.tsx

@@ -1,63 +0,0 @@
-import { FlexRowProps as uuiFlexRowProps, withMods } from '@epam/uui-core';
-import { FlexRow as uuiFlexRow } from '@epam/uui-components';
-import css from './FlexRow.module.scss';
-
-export type RowMods = {
-    /*
-    * Defines row size.
-    */
-    size?: null | '24' | '30' | '36' | '42' | '48';
-    /*
-    * Defines row border bottom.
-    */
-    borderBottom?: boolean;
-    /*
-    * Defines row column gap.
-    */
-    columnGap?: number | '6' | '12' | '18' | '24' | '36';
-    /*
-    * Defines row margin.
-    */
-    margin?: '12' | '24';
-    /*
-    * Defines horizontal row padding.
-    */
-    padding?: '6' | '12' | '18' | '24';
-    /*
-    * Defines row gap.
-    */
-    rowGap?: number | '6' | '12' | '18' | '24' | '36';
-    /*
-    * Defines row spacing.
-    */
-    spacing?: '6' | '12' | '18';
-    /*
-    * Pass true to show a top shadow.
-    */
-    topShadow?: boolean;
-    /*
-    * Defines vertical row padding.
-    */
-    vPadding?: '12' | '18' | '24' | '36' | '48';
-    /*
-    * Defines row background.
-    */
-    background?: 'surface-main';
-};
-
-/** Represents the properties of the FlexRow component. */
-export interface FlexRowProps extends Omit<uuiFlexRowProps, 'columnGap' | 'rowGap'>, RowMods {}
-
-export const FlexRow = withMods<Omit<uuiFlexRowProps, 'columnGap' | 'rowGap'>, 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 && css[`uui-${props.background}`],
-    ];
-});

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

@@ -1,34 +0,0 @@
-.root {
-    --uui-panel-bg: transparent;
-    --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;
-    }
-
-    &.uui-surface-main {
-        --uui-panel-bg: var(--uui-surface-main);
-    }
-}

package/components/layout/FlexItems/Panel.tsx

@@ -1,29 +0,0 @@
-import { withMods, VPanelProps } from '@epam/uui-core';
-import { VPanel } from '@epam/uui-components';
-import css from './Panel.module.scss';
-
-interface PanelMods {
-    /*
-    * Pass true to show a shadow.
-    */
-    shadow?: boolean;
-    /*
-    * Defines component margin.
-    */
-    margin?: '24';
-    /*
-    * Defines component background.
-    */
-    background?: 'surface-main';
-}
-
-/** Represents the properties of the Panel component. */
-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 && css[`uui-${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';

package/components/layout/LabeledInput.module.scss

@@ -1,139 +0,0 @@
-@use '../../assets/styles/index' as *;
-
-.root {
-    --uui-labeled_input: var(--uui-text-primary);
-    --uui-labeled_input-disabled: var(--uui-text-disabled);
-    --uui-labeled_input-error: var(--uui-error-50);
-    --uui-labeled_input-fill: var(--uui-icon);
-    --uui-labeled_input-info-fill: var(--uui-icon);
-    --uui-labeled_input-optional-text: var(--uui-text-tertiary);
-    --uui-labeled_input-asterisk: var(--uui-error-50);
-    --uui-labeled_input-char-counter: var(--uui-text-tertiary);
-    --uui-labeled_input-footnote: var(--uui-text-tertiary);
-    --uui-labeled_input-sidenote: var(--uui-text-tertiary);
-
-    --uui-labeled_input-font: var(--uui-font);
-    --uui-labeled_input-font-weight: 600;
-    --uui-labeled_input-optional-font: var(--uui-font);
-    --uui-labeled_input-optional-font-weight: 400;
-    --uui-labeled_input-optional-font-style: italic;
-    --uui-labeled_input-invalid-msg-font: var(--uui-font);
-    --uui-labeled_input-invalid-msg-font-weight: 400;
-    --uui-labeled_input-char-counter-font: var(--uui-font);
-    --uui-labeled_input-char-counter-font-weight: 400;
-    --uui-labeled_input-footnote-font: var(--uui-font);
-    --uui-labeled_input-footnote-font-weight: 400;
-    --uui-labeled_input-sidenote-font: var(--uui-font);
-    --uui-labeled_input-sidenote-font-weight: 400;
-    //
-    width: 100%;
-
-    :global(.uui-label) {
-        @include overflow-ellipsis();
-        font-family: var(--uui-labeled_input-font);
-        font-weight: var(--uui-labeled_input-font-weight);
-        color: var(--uui-labeled_input);
-        padding: 6px 0;
-
-        :global(.uui-labeled-input-info-icon) {
-            flex-shrink: 0;
-            margin-left: 6px;
-            fill: var(--uui-labeled_input-info-fill);
-        }
-
-        :global(.uui-labeled-input-asterisk) {
-            color: var(--uui-labeled_input-asterisk);
-        }
-
-        :global(.uui-labeled-input-optional) {
-            font-family: var(--uui-labeled_input-optional-font);
-            font-weight: var(--uui-labeled_input-optional-font-weight);
-            font-style: var(--uui-labeled_input-optional-font-style);
-            font-size: 12px;
-            line-height: 18px;
-            color: var(--uui-labeled_input-optional-text);
-            margin-left: 6px;
-        }
-    }
-
-    :global(.uui-label-left) {
-        :global(.uui-label) {
-            margin-right: 5px;
-        }
-    }
-
-    :global(.uui-invalid-message) {
-        line-height: 18px;
-        font-size: 12px;
-        color: var(--uui-labeled_input-error);
-        font-family: var(--uui-labeled_input-invalid-msg-font);
-        font-weight: var(--uui-labeled_input-invalid-msg-font-weight);
-        margin-top: 3px;
-    }
-
-    :global(.uui-labeled-input-char-counter) {
-        flex-grow: 1;
-        text-align: right;
-        line-height: 18px;
-        font-size: 12px;
-        color: var(--uui-labeled_input-char-counter);
-        font-family: var(--uui-labeled_input-char-counter-font);
-        font-weight: var(--uui-labeled_input-char-counter-font-weight);
-        margin-top: 3px;
-    }
-
-    :global(.uui-labeled-input-footnote) {
-        line-height: 18px;
-        font-size: 12px;
-        color: var(--uui-labeled_input-footnote);
-        font-family: var(--uui-labeled_input-footnote-font);
-        font-weight: var(--uui-labeled_input-footnote-font-weight);
-        margin-top: 3px;
-    }
-
-    :global(.uui-labeled-input-sidenote) {
-        align-self: center;
-        text-align: right;
-        line-height: 18px;
-        font-size: 12px;
-        color: var(--uui-labeled_input-sidenote);
-        font-family: var(--uui-labeled_input-sidenote-font);
-        font-weight: var(--uui-labeled_input-sidenote-font-weight);
-    }
-
-    // Sizes
-    &.size-24 {
-        :global(.uui-label) {
-            font-size: 12px;
-            line-height: 18px;
-        }
-    }
-
-    &.size-30 {
-        :global(.uui-label) {
-            font-size: 12px;
-            line-height: 18px;
-        }
-    }
-
-    &.size-36 {
-        :global(.uui-label) {
-            font-size: 14px;
-            line-height: 18px;
-        }
-    }
-
-    &.size-42 {
-        :global(.uui-label) {
-            font-size: 14px;
-            line-height: 18px;
-        }
-    }
-
-    &.size-48 {
-        :global(.uui-label) {
-            font-size: 14px;
-            line-height: 18px;
-        }
-    }
-}

package/components/layout/LabeledInput.tsx

@@ -1,22 +0,0 @@
-import * as types from '../types';
-import { withMods } from '@epam/uui-core';
-import * as uuiComponents from '@epam/uui-components';
-import { Tooltip } from '../overlays/Tooltip';
-import { systemIcons } from '../../icons/icons';
-import css from './LabeledInput.module.scss';
-
-const DEFAULT_SIZE = '36';
-
-interface LabeledInputMods extends types.SizeMod {}
-
-/** Represents the properties of the LabeledInput component. */
-export type LabeledInputProps = uuiComponents.LabeledInputProps & LabeledInputMods;
-
-function applyLabeledInputMods(mods: LabeledInputMods) {
-    return [css.root, css['size-' + (mods.size || DEFAULT_SIZE)]];
-}
-
-export const LabeledInput = withMods<uuiComponents.LabeledInputProps, LabeledInputMods>(uuiComponents.LabeledInput, applyLabeledInputMods, (props) => ({
-    Tooltip,
-    infoIcon: systemIcons[props.size || DEFAULT_SIZE].help,
-}));

package/components/layout/RadioGroup.module.scss

@@ -1,21 +0,0 @@
-.root {
-    border: 0 none;
-    margin: 0;
-    padding: 0;
-
-    &:global(.uui-horizontal-direction) {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 12px 18px;
-    }
-
-    &:global(.uui-vertical-direction) {
-        > * {
-            margin-bottom: 12px;
-        }
-
-        :last-child {
-            margin-bottom: 0;
-        }
-    }
-}

package/components/layout/RadioGroup.tsx

@@ -1,68 +0,0 @@
-import { cx, directionMode, ICanBeReadonly, ICanFocus, IDisableable, IEditable, IHasCX, IHasDirection, IHasForwardedRef, IHasRawProps } from '@epam/uui-core';
-import { RadioInput, RadioInputProps } from '../inputs';
-import css from './RadioGroup.module.scss';
-import * as React from 'react';
-
-export interface RadioGroupItem<TValue> extends IDisableable, Omit<RadioInputProps, 'id' | 'onValueChange' | 'value'> {
-    /** RadioInput label. Can be a string, or React.ReactNode */
-    name?: React.ReactNode;
-    /** Render callback for checkbox label
-     * If omitted, 'name' prop value will be rendered
-     */
-    renderName?: () => React.ReactNode;
-    /** Item ID to put into selection */
-    id: TValue;
-}
-
-export interface RadioGroupProps<TValue>
-    extends IHasCX,
-    IEditable<TValue>,
-    IDisableable,
-    IHasDirection,
-    ICanBeReadonly,
-    IHasRawProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>>,
-    IHasForwardedRef<HTMLFieldSetElement>,
-    ICanFocus<HTMLFieldSetElement> {
-    /** Array of checkbox items to be rendered in group */
-    items: RadioGroupItem<TValue>[];
-    /** Defines group components size */
-    size?: RadioInputProps['size'];
-}
-
-export function RadioGroup<TValue>(props: RadioGroupProps<TValue>) {
-    const direction = props.direction || 'vertical';
-
-    const handleChange = (newVal: TValue) => {
-        if (newVal !== props.value) {
-            props.onValueChange(newVal);
-        }
-    };
-
-    return (
-        <fieldset
-            ref={ props.forwardedRef }
-            className={ cx(css.root, directionMode[direction], props.cx) }
-            onFocus={ props.onFocus }
-            onBlur={ props.onBlur }
-            { ...props.rawProps }
-        >
-            { props.items.map((i) => {
-                const { id, name, renderName, ...restItemProps } = i;
-                return (
-                    <RadioInput
-                        renderLabel={ i.renderName ? i.renderName : () => i.name }
-                        value={ props.value === i.id }
-                        onValueChange={ () => handleChange(i.id) }
-                        isDisabled={ props.isDisabled || i.isDisabled }
-                        isReadonly={ props.isReadonly }
-                        isInvalid={ props.isInvalid }
-                        isRequired={ props.isRequired }
-                        key={ i.id.toString() }
-                        size={ props.size || i.size }
-                        { ...restItemProps }
-                    />
-                );
-            }) }
-        </fieldset>
-    );
-}