@epam/uui 5.3.0 → 5.4.0

package/components/fileUpload/__tests__/__snapshots__/DropSpot.test.tsx.snap

@@ -1,130 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DropSpot should be rendered correctly 1`] = `
-<div
-  className="root"
->
-  <div
-    className="dropArea"
-    onDragEnter={[Function]}
-    onDragLeave={[Function]}
-    onDragOver={[Function]}
-    onDrop={[Function]}
-  >
-    <div
-      className="uui-flex-row root size-24 container align-items-center"
-      style={
-        Object {
-          "columnGap": undefined,
-          "rowGap": undefined,
-        }
-      }
-    >
-      <div
-        className="container uui-icon uui-enabled iconBlue"
-        style={Object {}}
-      >
-        <svg
-          className=""
-        />
-      </div>
-      <div
-        className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-24 font-size-14 v-padding-0 container"
-      >
-         
-        Drop files to attach or
-         
-      </div>
-      <div>
-        <input
-          className="fileInput"
-          multiple={true}
-          onChange={[Function]}
-          type="file"
-        />
-        <div
-          className="uui-typography uui-typography-size-14"
-        >
-          <a
-            className="container uui-anchor uui-enabled -clickable root link"
-            href={null}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            role="link"
-            tabIndex={0}
-          >
-            browse
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`DropSpot should be rendered correctly with props 1`] = `
-<div
-  className="root"
->
-  <div
-    className="dropArea"
-    onDragEnter={[Function]}
-    onDragLeave={[Function]}
-    onDragOver={[Function]}
-    onDrop={[Function]}
-  >
-    <div
-      className="uui-flex-row root size-24 container align-items-center"
-      style={
-        Object {
-          "columnGap": undefined,
-          "rowGap": undefined,
-        }
-      }
-    >
-      <div
-        className="container uui-icon uui-enabled iconBlue"
-        style={Object {}}
-      >
-        <svg
-          className=""
-        />
-      </div>
-      <div
-        className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-24 font-size-14 v-padding-0 container"
-      >
-         
-        Drop files to attach or
-         
-      </div>
-      <div>
-        <input
-          className="fileInput"
-          multiple={true}
-          onChange={[Function]}
-          type="file"
-        />
-        <div
-          className="uui-typography uui-typography-size-14"
-        >
-          <a
-            className="container uui-anchor uui-enabled -clickable root link"
-            href={null}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            role="link"
-            tabIndex={0}
-          >
-            browse
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      className="root uui-text uui-color-secondary uui-font-weight-400 uui-font-style-normal uui-typography line-height-24 font-size-14 v-padding-0 container"
-    >
-      Test info
-    </div>
-  </div>
-</div>
-`;

package/components/fileUpload/__tests__/__snapshots__/FileCard.test.tsx.snap

@@ -1,266 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FileCard should be rendered correctly 1`] = `
-<div
-  className="flexCell root uui-file_card uui-loading"
-  style={
-    Object {
-      "alignSelf": undefined,
-      "flexBasis": "100%",
-      "flexGrow": undefined,
-      "flexShrink": undefined,
-      "minWidth": 0,
-      "textAlign": undefined,
-    }
-  }
->
-  <div
-    className="uui-flex-row root size-36 spacing-6 container align-items-top"
-    style={
-      Object {
-        "columnGap": undefined,
-        "rowGap": undefined,
-      }
-    }
-  >
-    <div
-      className="container uui-icon uui-enabled xlsColor"
-      style={Object {}}
-    >
-      <svg
-        className=""
-        height={24}
-        width={24}
-      />
-    </div>
-    <div
-      className="flexCell"
-      style={
-        Object {
-          "alignSelf": undefined,
-          "flexBasis": "100%",
-          "flexGrow": undefined,
-          "flexShrink": undefined,
-          "minWidth": 0,
-          "textAlign": undefined,
-        }
-      }
-    >
-      <div
-        className="root uui-text uui-color-secondary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-0 fileName container"
-      >
-        Test
-      </div>
-      <div
-        className="root uui-text uui-color-secondary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-0 container"
-      >
-        XLS, 
-        0 Bytes of 
-        12.25 KB
-      </div>
-    </div>
-    <div
-      className="iconsBlock"
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-    >
-      <svg
-        className="root"
-        height={18}
-        width={18}
-      >
-        <circle
-          cx={9}
-          cy={9}
-          fill="transparent"
-          r={3}
-          strokeDasharray={18.84955592153876}
-          strokeDashoffset={18.84955592153876}
-          strokeWidth={6}
-        />
-        <circle
-          cx={9}
-          cy={9}
-          fill="transparent"
-          r={8}
-          strokeWidth={1}
-        />
-      </svg>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`FileCard should be rendered correctly 2`] = `
-<div
-  className="flexCell root uui-file_card uui-loading"
-  style={
-    Object {
-      "alignSelf": undefined,
-      "flexBasis": "0",
-      "flexGrow": undefined,
-      "flexShrink": undefined,
-      "minWidth": "140px",
-      "textAlign": undefined,
-    }
-  }
->
-  <div
-    className="uui-flex-row root size-36 spacing-6 container align-items-top"
-    style={
-      Object {
-        "columnGap": undefined,
-        "rowGap": undefined,
-      }
-    }
-  >
-    <div
-      className="container uui-icon uui-enabled docColor"
-      style={Object {}}
-    >
-      <svg
-        className=""
-        height={24}
-        width={24}
-      />
-    </div>
-    <div
-      className="flexCell"
-      style={
-        Object {
-          "alignSelf": undefined,
-          "flexBasis": "100%",
-          "flexGrow": undefined,
-          "flexShrink": undefined,
-          "minWidth": 0,
-          "textAlign": undefined,
-        }
-      }
-    >
-      <div
-        className="root uui-text uui-color-secondary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-0 fileName container"
-      >
-        Test
-      </div>
-      <div
-        className="root uui-text uui-color-secondary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-0 container"
-      >
-        DOC, 
-        0 Bytes of 
-        12.25 KB
-      </div>
-    </div>
-    <div
-      className="iconsBlock"
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-    >
-      <svg
-        className="root"
-        height={18}
-        width={18}
-      >
-        <circle
-          cx={9}
-          cy={9}
-          fill="transparent"
-          r={3}
-          strokeDasharray={18.84955592153876}
-          strokeDashoffset={18.84955592153876}
-          strokeWidth={6}
-        />
-        <circle
-          cx={9}
-          cy={9}
-          fill="transparent"
-          r={8}
-          strokeWidth={1}
-        />
-      </svg>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`FileCard should be rendered correctly 3`] = `
-<div
-  className="flexCell root uui-file_card"
-  style={
-    Object {
-      "alignSelf": undefined,
-      "flexBasis": "0",
-      "flexGrow": undefined,
-      "flexShrink": undefined,
-      "minWidth": "140px",
-      "textAlign": undefined,
-    }
-  }
->
-  <div
-    className="uui-flex-row root size-36 spacing-6 container align-items-top"
-    style={
-      Object {
-        "columnGap": undefined,
-        "rowGap": undefined,
-      }
-    }
-  >
-    <div
-      className="container uui-icon uui-enabled imgColor"
-      style={Object {}}
-    >
-      <svg
-        className=""
-        height={24}
-        width={24}
-      />
-    </div>
-    <div
-      className="flexCell"
-      style={
-        Object {
-          "alignSelf": undefined,
-          "flexBasis": "100%",
-          "flexGrow": undefined,
-          "flexShrink": undefined,
-          "minWidth": 0,
-          "textAlign": undefined,
-        }
-      }
-    >
-      <div
-        className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-0 fileName container"
-      >
-        Test
-      </div>
-      <div
-        className="root uui-text uui-color-secondary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-0 container"
-      >
-        GIF, 
-        12.25 KB
-      </div>
-    </div>
-    <div
-      className="iconsBlock"
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-    >
-      <button
-        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>
-`;

package/components/fileUpload/__tests__/__snapshots__/SvgCircleProgress.test.tsx.snap

@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SvgCircleProgress should be rendered correctly 1`] = `
-<svg
-  className="root"
-  height={30}
-  width={30}
->
-  <circle
-    cx={15}
-    cy={15}
-    fill="transparent"
-    r={6}
-    strokeDasharray={37.69911184307752}
-    strokeDashoffset={24.504422698000386}
-    strokeWidth={12}
-  />
-  <circle
-    cx={15}
-    cy={15}
-    fill="transparent"
-    r={14}
-    strokeWidth={1}
-  />
-</svg>
-`;

package/components/fileUpload/index.ts

@@ -1,3 +0,0 @@
-export * from './DropSpot';
-export * from './FileCard';
-export * from './SvgCircleProgress';

package/components/filters/FilterDatePickerBody.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import dayjs from 'dayjs';
-import { i18n } from '../../i18n';
-import { DatePickerCoreProps, IDropdownBodyProps } from '@epam/uui-core';
-import { BaseDatePicker, DatePickerState } from '@epam/uui-components';
-import { FlexSpacer, FlexRow, FlexCell } from '../layout';
-import { LinkButton } from '../buttons';
-import { Text } from '../typography';
-import { DatePickerBody } from '../datePickers';
-
-export interface DatePickerProps extends DatePickerCoreProps, IDropdownBodyProps {}
-
-export class FilterDatePickerBody extends BaseDatePicker<DatePickerProps> {
-    state: DatePickerState = {
-        ...super.getValue(),
-        isOpen: false,
-        inputValue: null,
-    };
-
-    renderInput = (): any => {
-        return null;
-    };
-
-    onToggleHandler = (val: boolean) => {
-        this.onToggle(val);
-        this.props.onClose();
-    };
-
-    handleCancel = () => {
-        this.handleValueChange(undefined);
-        this.setState({ inputValue: null, selectedDate: null });
-    };
-
-    renderBody() {
-        return (
-            <>
-                <FlexRow borderBottom={ true }>
-                    <DatePickerBody
-                        filter={ this.props.filter }
-                        value={ this.getValue() }
-                        setSelectedDate={ this.setSelectedDate }
-                        setDisplayedDateAndView={ this.setDisplayedDateAndView }
-                        changeIsOpen={ this.onToggleHandler }
-                        renderDay={ this.props.renderDay }
-                        isHoliday={ this.props.isHoliday }
-                        rawProps={ this.props.rawProps?.body }
-                    />
-                </FlexRow>
-                <FlexCell alignSelf="stretch">
-                    <FlexRow padding="24" vPadding="12">
-                        <Text>{this.state.selectedDate ? dayjs(this.state.selectedDate).format('MMM DD, YYYY') : ''}</Text>
-                        <FlexSpacer />
-                        <LinkButton isDisabled={ !this.state.selectedDate } caption={ i18n.filterToolbar.datePicker.clearCaption } onClick={ this.handleCancel } />
-                    </FlexRow>
-                </FlexCell>
-            </>
-        );
-    }
-
-    render() {
-        return this.renderBody();
-    }
-}

package/components/filters/FilterItemBody.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { FilterPickerBody } from './FilterPickerBody';
-import { FilterDatePickerBody } from './FilterDatePickerBody';
-import { FilterRangeDatePickerBody } from './FilterRangeDatePickerBody';
-import { IFilterItemBodyProps } from '@epam/uui-core';
-import { FilterNumericBody } from './FilterNumericBody';
-
-export function FilterItemBody(props: IFilterItemBodyProps<any>) {
-    switch (props.type) {
-        case 'singlePicker':
-            return <FilterPickerBody { ...props } selectionMode="single" valueType="id" />;
-        case 'numeric':
-            return <FilterNumericBody { ...props } />;
-        case 'multiPicker':
-            return <FilterPickerBody { ...props } selectionMode="multi" valueType="id" />;
-        case 'datePicker':
-            return <FilterDatePickerBody { ...props } format={ props.format || 'DD/MM/YYYY' } />;
-        case 'rangeDatePicker':
-            return <FilterRangeDatePickerBody { ...props } format={ props.format || 'DD/MM/YYYY' } value={ props.value || { from: null, to: null } } />;
-        case 'custom':
-            return props.render(props);
-    }
-}

package/components/filters/FilterNumericBody.module.scss

@@ -1,4 +0,0 @@
-.container {
-    margin-top: 12px;
-    padding-bottom: 12px;
-}

package/components/filters/FilterNumericBody.tsx

@@ -1,111 +0,0 @@
-import React from 'react';
-import { FlexSpacer } from '@epam/uui-components';
-import { NumericInput } from '../inputs';
-import { DropdownBodyProps, isMobile } from '@epam/uui-core';
-import { FlexCell, FlexRow } from '../layout';
-import { LinkButton } from '../buttons';
-import { i18n } from '../../i18n';
-import css from './FilterNumericBody.module.scss';
-
-interface INumericRangeValue {
-    from: number | null;
-    to: number | null;
-}
-
-interface IFilterNumericBodyProps extends DropdownBodyProps {
-    onValueChange: (value: number | INumericRangeValue) => void;
-    value: undefined | number | INumericRangeValue;
-    selectedPredicate?: string;
-}
-
-export function FilterNumericBody(props: IFilterNumericBodyProps) {
-    const isInRangePredicate = props?.selectedPredicate === 'inRange' || props?.selectedPredicate === 'notInRange';
-
-    const rangeValueHandler = (type: 'from' | 'to') => (val: number) => {
-        const value = props.value as INumericRangeValue;
-        switch (type) {
-            case 'from': {
-                props.onValueChange({
-                    from: val,
-                    to: value?.to ?? null,
-                });
-                break;
-            }
-            case 'to': {
-                props.onValueChange({
-                    from: value?.from ?? null,
-                    to: val,
-                });
-                break;
-            }
-        }
-    };
-
-    const renderFooter = () => {
-        const size = isMobile() ? '48' : '36';
-        const clearSelection = () => {
-            if (isInRangePredicate) {
-                props.onValueChange({ from: null, to: null });
-            } else {
-                props.onValueChange(null);
-            }
-        };
-
-        const isClearDisabled = typeof props.value !== 'number' && typeof props.value !== 'object';
-
-        return (
-            <FlexRow padding="12">
-                <FlexSpacer />
-                <FlexCell width="auto" alignSelf="center">
-                    <LinkButton isDisabled={ isClearDisabled } size={ size } caption={ i18n.pickerInput.clearSelectionButtonSingle } onClick={ clearSelection } />
-                </FlexCell>
-            </FlexRow>
-        );
-    };
-
-    if (isInRangePredicate) {
-        const value = props.value as INumericRangeValue;
-        return (
-            <div>
-                <FlexRow padding="12" alignItems="center" spacing="12" borderBottom={ true } cx={ css.container }>
-                    <FlexCell width="100%">
-                        <NumericInput
-                            value={ value?.from ?? null }
-                            onValueChange={ rangeValueHandler('from') }
-                            size="36"
-                            placeholder="Min"
-                            formatOptions={ { maximumFractionDigits: 2 } }
-                        />
-                    </FlexCell>
-                    <FlexCell width="100%">
-                        <NumericInput
-                            value={ value?.to ?? null }
-                            onValueChange={ rangeValueHandler('to') }
-                            size="36"
-                            placeholder="Max"
-                            formatOptions={ { maximumFractionDigits: 2 } }
-                        />
-                    </FlexCell>
-                </FlexRow>
-                {renderFooter()}
-            </div>
-        );
-    }
-
-    return (
-        <div>
-            <FlexRow padding="12" alignItems="center" borderBottom={ true } cx={ css.container }>
-                <FlexCell width={ 130 }>
-                    <NumericInput
-                        value={ typeof props.value === 'number' ? props.value : null }
-                        onValueChange={ props.onValueChange }
-                        size="36"
-                        placeholder="Enter a number"
-                        formatOptions={ { maximumFractionDigits: 2 } }
-                    />
-                </FlexCell>
-            </FlexRow>
-            {renderFooter()}
-        </div>
-    );
-}