@epam/uui 5.5.0 → 5.5.2

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+.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);
+    }
+}