@epam/uui 5.5.2 → 5.5.4

package/components/inputs/__tests__/__snapshots__/__snapshots__/TimePickerBody.test.tsx.snap

@@ -1,327 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TimePickerBody should be rendered with maximum props 1`] = `
-<div
-  className="uui-timepicker-container root"
->
-  <div
-    className="uui-timepicker-item"
-  >
-    <div
-      className="container uui-icon uui-enabled -clickable uui-timepicker-icon-up"
-      onClick={[Function]}
-      style={Object {}}
-    >
-      <svg
-        className=""
-      />
-    </div>
-    <div
-      className="container uui-input-box -clickable uui-timepicker-input"
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      tabIndex={-1}
-    >
-      <input
-        className="uui-input uui-value-in-placeholder"
-        inputMode="numeric"
-        max={12}
-        min={1}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        placeholder="12"
-        tabIndex={0}
-        type="number"
-        value=""
-      />
-      <div
-        className="uui-numeric-input-button-group"
-      >
-        <div
-          className="container uui-icon uui-enabled -clickable uui-numeric-input-up-button"
-          onClick={[Function]}
-          role="button"
-          style={Object {}}
-        />
-        <div
-          className="container uui-icon uui-enabled -clickable uui-numeric-input-down-button"
-          onClick={[Function]}
-          role="button"
-          style={Object {}}
-        />
-      </div>
-    </div>
-    <div
-      className="container uui-icon uui-enabled -clickable uui-timepicker-icon-down"
-      onClick={[Function]}
-      style={Object {}}
-    >
-      <svg
-        className=""
-      />
-    </div>
-  </div>
-  <div
-    className="uui-timepicker-item"
-  >
-    <div
-      className="container uui-icon uui-enabled -clickable uui-timepicker-icon-up"
-      onClick={[Function]}
-      style={Object {}}
-    >
-      <svg
-        className=""
-      />
-    </div>
-    <div
-      className="container uui-input-box -clickable uui-timepicker-input"
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      tabIndex={-1}
-    >
-      <input
-        className="uui-input uui-value-in-placeholder"
-        inputMode="numeric"
-        max={59}
-        min={0}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        placeholder="30"
-        tabIndex={0}
-        type="number"
-        value=""
-      />
-      <div
-        className="uui-numeric-input-button-group"
-      >
-        <div
-          className="container uui-icon uui-enabled -clickable uui-numeric-input-up-button"
-          onClick={[Function]}
-          role="button"
-          style={Object {}}
-        />
-        <div
-          className="container uui-icon uui-enabled -clickable uui-numeric-input-down-button"
-          onClick={[Function]}
-          role="button"
-          style={Object {}}
-        />
-      </div>
-    </div>
-    <div
-      className="container uui-icon uui-enabled -clickable uui-timepicker-icon-down"
-      onClick={[Function]}
-      style={Object {}}
-    >
-      <svg
-        className=""
-      />
-    </div>
-  </div>
-  <div
-    className="uui-timepicker-item"
-  >
-    <div
-      className="container uui-icon uui-enabled -clickable uui-timepicker-icon-up"
-      onClick={[Function]}
-      style={Object {}}
-    >
-      <svg
-        className=""
-      />
-    </div>
-    <div
-      className="container uui-input-box uui-readonly uui-timepicker-input"
-      onFocus={[Function]}
-      tabIndex={-1}
-    >
-      <input
-        aria-readonly={true}
-        className="uui-input"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        readOnly={true}
-        tabIndex={-1}
-        type="text"
-        value="PM"
-      />
-    </div>
-    <div
-      className="container uui-icon uui-enabled -clickable uui-timepicker-icon-down"
-      onClick={[Function]}
-      style={Object {}}
-    >
-      <svg
-        className=""
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`TimePickerBody should be rendered with minimum props 1`] = `
-<div
-  className="uui-timepicker-container root"
->
-  <div
-    className="uui-timepicker-item"
-  >
-    <div
-      className="container uui-icon uui-enabled -clickable uui-timepicker-icon-up"
-      onClick={[Function]}
-      style={Object {}}
-    >
-      <svg
-        className=""
-      />
-    </div>
-    <div
-      className="container uui-input-box -clickable uui-timepicker-input"
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      tabIndex={-1}
-    >
-      <input
-        className="uui-input uui-value-in-placeholder"
-        inputMode="numeric"
-        max={12}
-        min={0}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        placeholder="12"
-        tabIndex={0}
-        type="number"
-        value=""
-      />
-      <div
-        className="uui-numeric-input-button-group"
-      >
-        <div
-          className="container uui-icon uui-enabled -clickable uui-numeric-input-up-button"
-          onClick={[Function]}
-          role="button"
-          style={Object {}}
-        />
-        <div
-          className="container uui-icon uui-enabled -clickable uui-numeric-input-down-button"
-          onClick={[Function]}
-          role="button"
-          style={Object {}}
-        />
-      </div>
-    </div>
-    <div
-      className="container uui-icon uui-enabled -clickable uui-timepicker-icon-down"
-      onClick={[Function]}
-      style={Object {}}
-    >
-      <svg
-        className=""
-      />
-    </div>
-  </div>
-  <div
-    className="uui-timepicker-item"
-  >
-    <div
-      className="container uui-icon uui-enabled -clickable uui-timepicker-icon-up"
-      onClick={[Function]}
-      style={Object {}}
-    >
-      <svg
-        className=""
-      />
-    </div>
-    <div
-      className="container uui-input-box -clickable uui-timepicker-input"
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      tabIndex={-1}
-    >
-      <input
-        className="uui-input uui-value-in-placeholder"
-        inputMode="numeric"
-        max={59}
-        min={0}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        placeholder="30"
-        tabIndex={0}
-        type="number"
-        value=""
-      />
-      <div
-        className="uui-numeric-input-button-group"
-      >
-        <div
-          className="container uui-icon uui-enabled -clickable uui-numeric-input-up-button"
-          onClick={[Function]}
-          role="button"
-          style={Object {}}
-        />
-        <div
-          className="container uui-icon uui-enabled -clickable uui-numeric-input-down-button"
-          onClick={[Function]}
-          role="button"
-          style={Object {}}
-        />
-      </div>
-    </div>
-    <div
-      className="container uui-icon uui-enabled -clickable uui-timepicker-icon-down"
-      onClick={[Function]}
-      style={Object {}}
-    >
-      <svg
-        className=""
-      />
-    </div>
-  </div>
-  <div
-    className="uui-timepicker-item"
-  >
-    <div
-      className="container uui-icon uui-enabled -clickable uui-timepicker-icon-up"
-      onClick={[Function]}
-      style={Object {}}
-    >
-      <svg
-        className=""
-      />
-    </div>
-    <div
-      className="container uui-input-box uui-readonly uui-timepicker-input"
-      onFocus={[Function]}
-      tabIndex={-1}
-    >
-      <input
-        aria-readonly={true}
-        className="uui-input"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        readOnly={true}
-        tabIndex={-1}
-        type="text"
-        value="PM"
-      />
-    </div>
-    <div
-      className="container uui-icon uui-enabled -clickable uui-timepicker-icon-down"
-      onClick={[Function]}
-      style={Object {}}
-    >
-      <svg
-        className=""
-      />
-    </div>
-  </div>
-</div>
-`;

package/components/inputs/index.ts

@@ -1,10 +0,0 @@
-export * from './Checkbox';
-export * from './RadioInput';
-export * from './Switch';
-export * from './TextInput';
-export * from './MultiSwitch';
-export * from './NumericInput';
-export * from './TextArea';
-export * from './TimePicker';
-export * from './InputAddon';
-export * from './Slider';

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,35 +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';
-
-interface AccordionMods {
-    /**
-     * Defines component displaying mode.
-     * @default 'block'
-     */
-    mode?: 'block' | 'inline';
-    /*
-    * Defines component horizontal padding.
-    */
-    padding?: '0' | '6' | '12' | '18';
-}
-
-/** Represents the properties of the Accordion component. */
-export type AccordionProps = AccordionMods & uuiComponents.AccordionProps;
-
-const getMode = (mode: AccordionMods['mode']) => {
-    return mode || 'block';
-};
-
-function applyAccordionMods(mods: AccordionProps) {
-    return [
-        css.root,
-        css['mode-' + getMode(mods.mode)],
-        mods.padding && css['padding-' + mods.padding],
-    ];
-}
-
-export const Accordion = withMods<uuiComponents.AccordionProps, AccordionMods>(uuiComponents.Accordion, applyAccordionMods, (mods) => ({
-    dropdownIcon: mods.dropdownIcon !== null && systemIcons[getMode(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 2000ms ease-out;
-        }
-
-        :global(.uui-blocker-exit) {
-            background-color: var(--uui-blocker-bg-with-opacity);
-            pointer-events: none;
-            transition: opacity 1000ms ease-out, background-color 200ms 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 { withMods } from '@epam/uui-core';
-import { Blocker as uuiBlocker, BlockerProps } from '@epam/uui-components';
-import { Spinner } from '../widgets';
-import css from './Blocker.module.scss';
-
-export const Blocker = withMods<BlockerProps>(
-    uuiBlocker,
-    () => [css.root],
-    (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => <Spinner />) }),
-);

package/components/layout/CheckboxGroup.module.scss

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

package/components/layout/CheckboxGroup.tsx

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

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);
-    }
-}