@snack-uikit/fields 0.9.2 → 0.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +25 -0
- package/README.md +32 -32
- package/dist/components/FieldDate/FieldDate.d.ts +2 -8
- package/dist/components/FieldDate/FieldDate.js +11 -16
- package/dist/components/FieldDecorator/FieldDecorator.d.ts +0 -6
- package/dist/components/FieldDecorator/FieldDecorator.js +4 -6
- package/dist/components/FieldDecorator/Footer.d.ts +1 -1
- package/dist/components/FieldDecorator/Footer.js +7 -7
- package/dist/components/FieldDecorator/Header.d.ts +1 -1
- package/dist/components/FieldDecorator/Header.js +2 -2
- package/dist/components/FieldSecure/FieldSecure.d.ts +2 -8
- package/dist/components/FieldSecure/FieldSecure.js +5 -10
- package/dist/components/FieldSelect/FieldSelect.d.ts +5 -12
- package/dist/components/FieldSelect/FieldSelect.js +5 -13
- package/dist/components/FieldSelect/FieldSelectBase.d.ts +5 -4
- package/dist/components/FieldSelect/FieldSelectBase.js +6 -6
- package/dist/components/FieldSelect/FieldSelectMulti.d.ts +2 -2
- package/dist/components/FieldSelect/FieldSelectMulti.js +2 -3
- package/dist/components/FieldSelect/FieldSelectSingle.d.ts +2 -2
- package/dist/components/FieldSelect/FieldSelectSingle.js +2 -3
- package/dist/components/FieldSelect/constants.d.ts +4 -0
- package/dist/components/FieldSelect/constants.js +4 -0
- package/dist/components/FieldSelect/helpers/getArrowIcon.d.ts +2 -2
- package/dist/components/FieldSelect/helpers/getArrowIcon.js +5 -2
- package/dist/components/FieldSelect/helpers/getDisplayedValue.d.ts +4 -3
- package/dist/components/FieldSelect/helpers/getDisplayedValue.js +2 -2
- package/dist/components/FieldSelect/types.d.ts +0 -4
- package/dist/components/FieldSelect/types.js +1 -5
- package/dist/components/FieldText/FieldText.d.ts +2 -8
- package/dist/components/FieldText/FieldText.js +5 -10
- package/dist/components/FieldTextArea/FieldTextArea.d.ts +1 -8
- package/dist/components/FieldTextArea/FieldTextArea.js +5 -10
- package/dist/constants.d.ts +10 -10
- package/dist/constants.js +10 -12
- package/dist/helperComponents/ButtonCopyValue/ButtonCopyValue.js +1 -1
- package/dist/helperComponents/ButtonCopyValue/helpers.js +3 -3
- package/dist/helperComponents/ButtonHideValue/ButtonHideValue.js +2 -2
- package/dist/helperComponents/FieldContainerPrivate/FieldContainerPrivate.d.ts +1 -1
- package/dist/helperComponents/FieldContainerPrivate/FieldContainerPrivate.js +2 -2
- package/dist/types.d.ts +4 -0
- package/dist/types.js +1 -0
- package/package.json +10 -10
- package/src/components/FieldDate/FieldDate.tsx +16 -26
- package/src/components/FieldDecorator/FieldDecorator.tsx +5 -8
- package/src/components/FieldDecorator/Footer.tsx +7 -6
- package/src/components/FieldDecorator/Header.tsx +2 -2
- package/src/components/FieldSecure/FieldSecure.tsx +7 -18
- package/src/components/FieldSelect/FieldSelect.tsx +8 -23
- package/src/components/FieldSelect/FieldSelectBase.tsx +14 -13
- package/src/components/FieldSelect/FieldSelectMulti.tsx +3 -3
- package/src/components/FieldSelect/FieldSelectSingle.tsx +3 -3
- package/src/components/FieldSelect/constants.ts +5 -0
- package/src/components/FieldSelect/helpers/getArrowIcon.ts +5 -2
- package/src/components/FieldSelect/helpers/getDisplayedValue.ts +5 -4
- package/src/components/FieldSelect/types.ts +0 -5
- package/src/components/FieldText/FieldText.tsx +7 -18
- package/src/components/FieldTextArea/FieldTextArea.tsx +9 -20
- package/src/constants.ts +10 -10
- package/src/helperComponents/ButtonCopyValue/helpers.tsx +3 -3
- package/src/helperComponents/ButtonHideValue/ButtonHideValue.tsx +5 -5
- package/src/helperComponents/FieldContainerPrivate/FieldContainerPrivate.tsx +3 -2
- package/src/types.ts +7 -0
|
@@ -13,20 +13,20 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
13
13
|
import mergeRefs from 'merge-refs';
|
|
14
14
|
import { forwardRef, useMemo, } from 'react';
|
|
15
15
|
import { Droplist } from '@snack-uikit/droplist';
|
|
16
|
-
import { InputPrivate,
|
|
16
|
+
import { InputPrivate, SIZE, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
|
|
17
17
|
import { extractSupportProps } from '@snack-uikit/utils';
|
|
18
|
-
import {
|
|
18
|
+
import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
|
|
19
19
|
import { FieldContainerPrivate } from '../../helperComponents';
|
|
20
20
|
import { useCopyButton } from '../../hooks';
|
|
21
21
|
import { useHandlers } from '../FieldDate/hooks/useHandlers';
|
|
22
22
|
import { FieldDecorator } from '../FieldDecorator';
|
|
23
|
+
import { SELECTION_MODE } from './constants';
|
|
23
24
|
import { getArrowIcon } from './helpers';
|
|
24
25
|
import styles from './styles.module.css';
|
|
25
|
-
import { SelectionMode } from './types';
|
|
26
26
|
export const FieldSelectBase = forwardRef((_a, ref) => {
|
|
27
|
-
var { selectionMode, onClear, showClearButton, clearButtonRef, copyButtonRef, onChange, inputValue, onInputValueChange, displayedValue, valueToCopy, localRef, onInputKeyDown: onInputKeyDownProp, onButtonKeyDown: onButtonKeyDownProp, id, name, placeholder, options, disabled = false, readonly = false, searchable = true, showCopyButton = true, open, onOpenChange, onFocus, onBlur, onContainerPrivateMouseDown, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, showHintIcon, size =
|
|
27
|
+
var { selectionMode, onClear, showClearButton, clearButtonRef, copyButtonRef, onChange, inputValue, onInputValueChange, displayedValue, valueToCopy, localRef, onInputKeyDown: onInputKeyDownProp, onButtonKeyDown: onButtonKeyDownProp, id, name, placeholder, options, disabled = false, readonly = false, searchable = true, showCopyButton = true, open, onOpenChange, onFocus, onBlur, onContainerPrivateMouseDown, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, prefixIcon, locale, noDataText = (locale === null || locale === void 0 ? void 0 : locale.language) === 'ru' ? 'Нет данных' : 'No data', firstDroplistItemRefCallback, onDroplistFocusLeave } = _a, rest = __rest(_a, ["selectionMode", "onClear", "showClearButton", "clearButtonRef", "copyButtonRef", "onChange", "inputValue", "onInputValueChange", "displayedValue", "valueToCopy", "localRef", "onInputKeyDown", "onButtonKeyDown", "id", "name", "placeholder", "options", "disabled", "readonly", "searchable", "showCopyButton", "open", "onOpenChange", "onFocus", "onBlur", "onContainerPrivateMouseDown", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "showHintIcon", "size", "validationState", "prefixIcon", "locale", "noDataText", "firstDroplistItemRefCallback", "onDroplistFocusLeave"]);
|
|
28
28
|
const { ArrowIcon, arrowIconSize } = getArrowIcon({ size, open });
|
|
29
|
-
const Item = selectionMode ===
|
|
29
|
+
const Item = selectionMode === SELECTION_MODE.Single ? Droplist.ItemSingle : Droplist.ItemMultiple;
|
|
30
30
|
const clearButtonSettings = useClearButton({ clearButtonRef, showClearButton, size, onClear });
|
|
31
31
|
const copyButtonSettings = useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy });
|
|
32
32
|
const { onInputKeyDown: inputKeyDownNavigationHandler, inputTabIndex, setInitialTabIndices, buttons, } = useButtonNavigation({
|
|
@@ -47,5 +47,5 @@ export const FieldSelectBase = forwardRef((_a, ref) => {
|
|
|
47
47
|
},
|
|
48
48
|
onDroplistFocusLeave,
|
|
49
49
|
]);
|
|
50
|
-
return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: validationState }, extractSupportProps(rest), { children: _jsx(Droplist, Object.assign({ trigger:
|
|
50
|
+
return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: validationState }, extractSupportProps(rest), { children: _jsx(Droplist, Object.assign({ trigger: 'click', triggerClassName: styles.triggerClassName, triggerClickByKeys: !searchable, placement: 'bottom', onFocusLeave: onFocusLeaveHandler, firstElementRefCallback: firstDroplistItemRefCallback, "data-test-id": 'field-select__list' }, (readonly || disabled ? { open: false } : { open, onOpenChange }), { triggerElement: _jsxs(FieldContainerPrivate, { className: styles.container, size: size, validationState: validationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, focused: open, selectable: !searchable, inputRef: localRef, prefix: prefixIcon, onMouseDown: onContainerPrivateMouseDown, postfix: _jsxs(_Fragment, { children: [buttons, _jsx(ArrowIcon, { size: arrowIconSize, className: styles.arrowIcon })] }), children: [_jsx(InputPrivate, { id: id, name: name, type: 'text', placeholder: placeholder, ref: mergeRefs(ref, localRef), onFocus: onFocus, onBlur: onBlur, disabled: disabled, "data-size": size, "data-test-id": 'field-select__input', onKeyDown: onInputKeyDownHandler, onChange: searchable ? onInputValueChange : undefined, readonly: !searchable || readonly, value: inputValue, tabIndex: inputTabIndex }), displayedValue && (_jsx("span", { className: styles.displayValue, "data-test-id": 'field-select__displayed-value', children: displayedValue }))] }), children: options.length === 0 ? (_jsx(Droplist.NoData, { size: size, label: noDataText, "data-test-id": 'field-select__no-data' })) : (options.map(option => (_jsx(Item, Object.assign({ onChange: onChange(option), "data-test-id": 'field-select__list-option-' + option.value }, option, { option: option.label }), option.value)))) })) })));
|
|
51
51
|
});
|
|
@@ -21,14 +21,14 @@ export declare const FieldSelectMulti: import("react").ForwardRefExoticComponent
|
|
|
21
21
|
onBlur?: FocusEventHandler<HTMLInputElement> | undefined;
|
|
22
22
|
} & {
|
|
23
23
|
showHintIcon?: boolean | undefined;
|
|
24
|
-
validationState?: import("../../
|
|
24
|
+
validationState?: import("../../types").ValidationState | undefined;
|
|
25
25
|
hint?: string | undefined;
|
|
26
26
|
size?: import("@snack-uikit/input-private").Size | undefined;
|
|
27
27
|
label?: string | undefined;
|
|
28
28
|
className?: string | undefined;
|
|
29
29
|
labelTooltip?: string | undefined;
|
|
30
30
|
required?: boolean | undefined;
|
|
31
|
-
labelTooltipPlacement?: import("@snack-uikit/popover-private/dist/
|
|
31
|
+
labelTooltipPlacement?: import("@snack-uikit/popover-private/dist/types").Placement | undefined;
|
|
32
32
|
} & {
|
|
33
33
|
value?: string[] | undefined;
|
|
34
34
|
onChange?(value: string[]): void;
|
|
@@ -12,14 +12,13 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
13
|
import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
|
|
14
14
|
import { useUncontrolledProp } from 'uncontrollable';
|
|
15
|
-
import { DEFAULT_LOCALE } from './constants';
|
|
15
|
+
import { DEFAULT_LOCALE, SELECTION_MODE } from './constants';
|
|
16
16
|
import { FieldSelectBase } from './FieldSelectBase';
|
|
17
17
|
import { getDisplayedValue } from './helpers';
|
|
18
18
|
import { useList } from './hooks';
|
|
19
|
-
import { SelectionMode } from './types';
|
|
20
19
|
export const FieldSelectMulti = forwardRef((_a, ref) => {
|
|
21
20
|
var { value: valueProp, onChange, options, disabled = false, readonly = false, searchable = true, required = false, open, onOpenChange, locale = DEFAULT_LOCALE, getSelectedItemsText = number => ((locale === null || locale === void 0 ? void 0 : locale.language) === 'ru' ? `Выбрано: ${number}` : `Selected: ${number}`), showCopyButton: showCopyButtonProp = true, onFocus, onBlur } = _a, rest = __rest(_a, ["value", "onChange", "options", "disabled", "readonly", "searchable", "required", "open", "onOpenChange", "locale", "getSelectedItemsText", "showCopyButton", "onFocus", "onBlur"]);
|
|
22
|
-
const selectionMode =
|
|
21
|
+
const selectionMode = SELECTION_MODE.Multi;
|
|
23
22
|
const [value, setValue] = useUncontrolledProp(valueProp, [], onChange);
|
|
24
23
|
const selected = useMemo(() => options.filter(option => value === null || value === void 0 ? void 0 : value.includes(option.value)), [options, value]);
|
|
25
24
|
const displayedValue = getDisplayedValue({ selectionMode, selected, getSelectedItemsText });
|
|
@@ -21,14 +21,14 @@ export declare const FieldSelectSingle: import("react").ForwardRefExoticComponen
|
|
|
21
21
|
onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
|
|
22
22
|
} & {
|
|
23
23
|
showHintIcon?: boolean | undefined;
|
|
24
|
-
validationState?: import("../../
|
|
24
|
+
validationState?: import("../../types").ValidationState | undefined;
|
|
25
25
|
hint?: string | undefined;
|
|
26
26
|
size?: import("@snack-uikit/input-private").Size | undefined;
|
|
27
27
|
label?: string | undefined;
|
|
28
28
|
className?: string | undefined;
|
|
29
29
|
labelTooltip?: string | undefined;
|
|
30
30
|
required?: boolean | undefined;
|
|
31
|
-
labelTooltipPlacement?: import("@snack-uikit/popover-private/dist/
|
|
31
|
+
labelTooltipPlacement?: import("@snack-uikit/popover-private/dist/types").Placement | undefined;
|
|
32
32
|
} & {
|
|
33
33
|
value?: string | undefined;
|
|
34
34
|
onChange?(value: string): void;
|
|
@@ -13,14 +13,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
13
13
|
import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
|
|
14
14
|
import { useUncontrolledProp } from 'uncontrollable';
|
|
15
15
|
import { selectAll } from '@snack-uikit/input-private';
|
|
16
|
-
import { DEFAULT_LOCALE, EMPTY_OPTION } from './constants';
|
|
16
|
+
import { DEFAULT_LOCALE, EMPTY_OPTION, SELECTION_MODE } from './constants';
|
|
17
17
|
import { FieldSelectBase } from './FieldSelectBase';
|
|
18
18
|
import { getDisplayedValue } from './helpers';
|
|
19
19
|
import { useList } from './hooks';
|
|
20
|
-
import { SelectionMode } from './types';
|
|
21
20
|
export const FieldSelectSingle = forwardRef((_a, ref) => {
|
|
22
21
|
var { value: valueProp, onChange, options, disabled = false, readonly = false, searchable = true, required = false, locale = DEFAULT_LOCALE, open, onOpenChange, showCopyButton: showCopyButtonProp = true } = _a, rest = __rest(_a, ["value", "onChange", "options", "disabled", "readonly", "searchable", "required", "locale", "open", "onOpenChange", "showCopyButton"]);
|
|
23
|
-
const selectionMode =
|
|
22
|
+
const selectionMode = SELECTION_MODE.Single;
|
|
24
23
|
const [value, setValue] = useUncontrolledProp(valueProp, '', onChange);
|
|
25
24
|
const selected = useMemo(() => { var _a; return (_a = options.find(option => option.value === value)) !== null && _a !== void 0 ? _a : EMPTY_OPTION; }, [options, value]);
|
|
26
25
|
const displayedValue = getDisplayedValue({ selectionMode, selected });
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Size } from '@snack-uikit/input-private';
|
|
2
2
|
export declare function getArrowIcon({ size, open }: {
|
|
3
3
|
size: Size;
|
|
4
4
|
open: boolean;
|
|
5
5
|
}): {
|
|
6
6
|
ArrowIcon: ({ size, ...props }: import("@snack-uikit/icons/dist/components/interface-icons/chevronUp").ISvgIconProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
arrowIconSize:
|
|
7
|
+
arrowIconSize: 16 | 24;
|
|
8
8
|
};
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
|
|
2
|
-
import {
|
|
2
|
+
import { ICON_SIZE, SIZE } from '@snack-uikit/input-private';
|
|
3
3
|
export function getArrowIcon({ size, open }) {
|
|
4
|
-
return {
|
|
4
|
+
return {
|
|
5
|
+
ArrowIcon: open ? ChevronUpSVG : ChevronDownSVG,
|
|
6
|
+
arrowIconSize: size === SIZE.S ? ICON_SIZE.Xs : ICON_SIZE.S,
|
|
7
|
+
};
|
|
5
8
|
}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { SELECTION_MODE } from '../constants';
|
|
2
|
+
import { Option } from '../types';
|
|
2
3
|
export declare const getDisplayedValue: (props: {
|
|
3
|
-
selectionMode:
|
|
4
|
+
selectionMode: typeof SELECTION_MODE.Single;
|
|
4
5
|
selected: Option;
|
|
5
6
|
} | {
|
|
6
|
-
selectionMode:
|
|
7
|
+
selectionMode: typeof SELECTION_MODE.Multi;
|
|
7
8
|
selected: Option[];
|
|
8
9
|
getSelectedItemsText(amount: number): string;
|
|
9
10
|
}) => string;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { SELECTION_MODE } from '../constants';
|
|
2
2
|
export const getDisplayedValue = (props) => {
|
|
3
|
-
if (props.selectionMode ===
|
|
3
|
+
if (props.selectionMode === SELECTION_MODE.Single) {
|
|
4
4
|
return props.selected.label;
|
|
5
5
|
}
|
|
6
6
|
const { selected, getSelectedItemsText } = props;
|
|
@@ -3,10 +3,6 @@ import { ItemSingleProps } from '@snack-uikit/droplist';
|
|
|
3
3
|
import { InputPrivateProps } from '@snack-uikit/input-private';
|
|
4
4
|
import { WithSupportProps } from '@snack-uikit/utils';
|
|
5
5
|
import { FieldDecoratorProps } from '../FieldDecorator';
|
|
6
|
-
export declare enum SelectionMode {
|
|
7
|
-
Single = "single",
|
|
8
|
-
Multi = "multi"
|
|
9
|
-
}
|
|
10
6
|
export type Option = Pick<ItemSingleProps, 'caption' | 'description' | 'tagLabel' | 'icon' | 'avatar' | 'disabled'> & {
|
|
11
7
|
value: string;
|
|
12
8
|
label: string;
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
|
-
import { InputPrivateProps
|
|
3
|
-
import { Tooltip } from '@snack-uikit/tooltip';
|
|
2
|
+
import { InputPrivateProps } from '@snack-uikit/input-private';
|
|
4
3
|
import { WithSupportProps } from '@snack-uikit/utils';
|
|
5
|
-
import { ValidationState } from '../../constants';
|
|
6
4
|
import { FieldDecoratorProps } from '../FieldDecorator';
|
|
7
5
|
type InputProps = Pick<Partial<InputPrivateProps>, 'value' | 'onChange'> & Pick<InputPrivateProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'>;
|
|
8
6
|
type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'hint' | 'showHintIcon' | 'size' | 'validationState' | 'labelTooltipPlacement'>;
|
|
@@ -17,9 +15,5 @@ type FieldTextOwnProps = {
|
|
|
17
15
|
export type FieldTextProps = WithSupportProps<FieldTextOwnProps & InputProps & WrapperProps>;
|
|
18
16
|
export declare const FieldText: import("react").ForwardRefExoticComponent<{
|
|
19
17
|
'data-test-id'?: string | undefined;
|
|
20
|
-
} & import("react").AriaAttributes & FieldTextOwnProps & Pick<Partial<InputPrivateProps>, "value" | "onChange"> & Pick<InputPrivateProps, "disabled" | "readonly" | "name" | "placeholder" | "id" | "maxLength" | "onFocus" | "onBlur"> & WrapperProps & import("react").RefAttributes<HTMLInputElement
|
|
21
|
-
sizes: typeof Size;
|
|
22
|
-
validationStates: typeof ValidationState;
|
|
23
|
-
labelTooltipPlacements: typeof Tooltip.placements;
|
|
24
|
-
};
|
|
18
|
+
} & import("react").AriaAttributes & FieldTextOwnProps & Pick<Partial<InputPrivateProps>, "value" | "onChange"> & Pick<InputPrivateProps, "disabled" | "readonly" | "name" | "placeholder" | "id" | "maxLength" | "onFocus" | "onBlur"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
25
19
|
export {};
|
|
@@ -13,15 +13,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
13
13
|
import mergeRefs from 'merge-refs';
|
|
14
14
|
import { forwardRef, useMemo, useRef } from 'react';
|
|
15
15
|
import { useUncontrolledProp } from 'uncontrollable';
|
|
16
|
-
import { InputPrivate,
|
|
17
|
-
import { Tooltip } from '@snack-uikit/tooltip';
|
|
16
|
+
import { InputPrivate, SIZE, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
|
|
18
17
|
import { extractSupportProps } from '@snack-uikit/utils';
|
|
19
|
-
import {
|
|
18
|
+
import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
|
|
20
19
|
import { FieldContainerPrivate } from '../../helperComponents';
|
|
21
20
|
import { useCopyButton } from '../../hooks';
|
|
22
21
|
import { FieldDecorator } from '../FieldDecorator';
|
|
23
|
-
const
|
|
24
|
-
var { id, name, value: valueProp, placeholder, maxLength, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, allowMoreThanMaxLength = false, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, showHintIcon, size =
|
|
22
|
+
export const FieldText = forwardRef((_a, ref) => {
|
|
23
|
+
var { id, name, value: valueProp, placeholder, maxLength, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, allowMoreThanMaxLength = false, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, prefixIcon } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "allowMoreThanMaxLength", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "showHintIcon", "size", "validationState", "prefixIcon"]);
|
|
25
24
|
const [value, onChange] = useUncontrolledProp(valueProp, '', onChangeProp);
|
|
26
25
|
const localRef = useRef(null);
|
|
27
26
|
const clearButtonRef = useRef(null);
|
|
@@ -44,9 +43,5 @@ const ForwardedFieldText = forwardRef((_a, ref) => {
|
|
|
44
43
|
readonly,
|
|
45
44
|
submitKeys: ['Enter', 'Space', 'Tab'],
|
|
46
45
|
});
|
|
47
|
-
return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: validationState }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate,
|
|
46
|
+
return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: validationState }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { size: size, validationState: validationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: localRef, prefix: prefixIcon, postfix: buttons, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, tabIndex: inputTabIndex, onKeyDown: onInputKeyDown, placeholder: placeholder, disabled: disabled, readonly: readonly, type: 'text', maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, "data-test-id": 'field-text__input' }) }) })));
|
|
48
47
|
});
|
|
49
|
-
export const FieldText = ForwardedFieldText;
|
|
50
|
-
FieldText.sizes = Size;
|
|
51
|
-
FieldText.validationStates = ValidationState;
|
|
52
|
-
FieldText.labelTooltipPlacements = Tooltip.placements;
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
import { ChangeEvent } from 'react';
|
|
2
|
-
import { Size } from '@snack-uikit/input-private';
|
|
3
|
-
import { Tooltip } from '@snack-uikit/tooltip';
|
|
4
2
|
import { WithSupportProps } from '@snack-uikit/utils';
|
|
5
|
-
import { ValidationState } from '../../constants';
|
|
6
3
|
import { TextAreaProps } from '../../helperComponents';
|
|
7
4
|
import { FieldDecoratorProps } from '../FieldDecorator';
|
|
8
5
|
type InputProps = Pick<Partial<TextAreaProps>, 'value'> & Pick<TextAreaProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'>;
|
|
@@ -22,9 +19,5 @@ type FieldTextAreaOwnProps = {
|
|
|
22
19
|
export type FieldTextAreaProps = WithSupportProps<FieldTextAreaOwnProps & InputProps & WrapperProps>;
|
|
23
20
|
export declare const FieldTextArea: import("react").ForwardRefExoticComponent<{
|
|
24
21
|
'data-test-id'?: string | undefined;
|
|
25
|
-
} & import("react").AriaAttributes & FieldTextAreaOwnProps & Pick<Partial<TextAreaProps>, "value"> & Pick<TextAreaProps, "disabled" | "readonly" | "name" | "placeholder" | "id" | "maxLength" | "onFocus" | "onBlur"> & WrapperProps & import("react").RefAttributes<HTMLTextAreaElement
|
|
26
|
-
sizes: typeof Size;
|
|
27
|
-
validationStates: typeof ValidationState;
|
|
28
|
-
labelTooltipPlacements: typeof Tooltip.placements;
|
|
29
|
-
};
|
|
22
|
+
} & import("react").AriaAttributes & FieldTextAreaOwnProps & Pick<Partial<TextAreaProps>, "value"> & Pick<TextAreaProps, "disabled" | "readonly" | "name" | "placeholder" | "id" | "maxLength" | "onFocus" | "onBlur"> & WrapperProps & import("react").RefAttributes<HTMLTextAreaElement>>;
|
|
30
23
|
export {};
|
|
@@ -13,17 +13,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
13
13
|
import mergeRefs from 'merge-refs';
|
|
14
14
|
import { forwardRef, useMemo, useRef } from 'react';
|
|
15
15
|
import { useUncontrolledProp } from 'uncontrollable';
|
|
16
|
-
import {
|
|
16
|
+
import { SIZE, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
|
|
17
17
|
import { Scroll } from '@snack-uikit/scroll';
|
|
18
|
-
import { Tooltip } from '@snack-uikit/tooltip';
|
|
19
18
|
import { extractSupportProps } from '@snack-uikit/utils';
|
|
20
|
-
import {
|
|
19
|
+
import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
|
|
21
20
|
import { FieldContainerPrivate, TextArea } from '../../helperComponents';
|
|
22
21
|
import { useCopyButton } from '../../hooks';
|
|
23
22
|
import { FieldDecorator } from '../FieldDecorator';
|
|
24
23
|
import styles from './styles.module.css';
|
|
25
|
-
const
|
|
26
|
-
var { id, name, value: valueProp, placeholder, maxLength, maxRows, disabled = false, resizable = false, readonly = false, showCopyButton: showCopyButtonProp = true, allowMoreThanMaxLength = true, showHintIcon, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, size =
|
|
24
|
+
export const FieldTextArea = forwardRef((_a, ref) => {
|
|
25
|
+
var { id, name, value: valueProp, placeholder, maxLength, maxRows, disabled = false, resizable = false, readonly = false, showCopyButton: showCopyButtonProp = true, allowMoreThanMaxLength = true, showHintIcon, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, size = SIZE.S, validationState = VALIDATION_STATE.Default } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "maxRows", "disabled", "resizable", "readonly", "showCopyButton", "allowMoreThanMaxLength", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "size", "validationState"]);
|
|
27
26
|
const localRef = useRef(null);
|
|
28
27
|
const clearButtonRef = useRef(null);
|
|
29
28
|
const copyButtonRef = useRef(null);
|
|
@@ -46,9 +45,5 @@ const ForwardedFieldTextArea = forwardRef((_a, ref) => {
|
|
|
46
45
|
readonly,
|
|
47
46
|
submitKeys: ['Enter', 'Space', 'Tab'],
|
|
48
47
|
});
|
|
49
|
-
return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: validationState }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate,
|
|
48
|
+
return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: validationState }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { className: styles.container, size: size, validationState: validationState, disabled: disabled, readonly: readonly, "data-resizable": isResizable || undefined, variant: CONTAINER_VARIANT.MultiLine, style: { '--max-rows': maxRows }, inputRef: localRef, postfix: _jsx("span", { className: styles.postfix, children: buttons }), children: _jsx(Scroll, { className: styles.scrollContainer, size: 's', barHideStrategy: 'never', resize: isResizable ? 'vertical' : 'none', "data-test-id": 'field-textarea__scroll-area', children: _jsx(TextArea, { className: styles.textarea, "data-size": size, value: value, onChange: onChange, placeholder: placeholder, disabled: disabled, readonly: readonly, id: id, name: name, ref: mergeRefs(ref, localRef), onFocus: onFocus, onBlur: onBlur, onKeyDown: onInputKeyDown, tabIndex: inputTabIndex, maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, "data-test-id": 'field-textarea__input' }) }) }) })));
|
|
50
49
|
});
|
|
51
|
-
export const FieldTextArea = ForwardedFieldTextArea;
|
|
52
|
-
FieldTextArea.sizes = Size;
|
|
53
|
-
FieldTextArea.validationStates = ValidationState;
|
|
54
|
-
FieldTextArea.labelTooltipPlacements = Tooltip.placements;
|
package/dist/constants.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
export declare
|
|
2
|
-
Default
|
|
3
|
-
Error
|
|
4
|
-
Warning
|
|
5
|
-
Success
|
|
6
|
-
}
|
|
7
|
-
export declare
|
|
8
|
-
SingleLine
|
|
9
|
-
MultiLine
|
|
10
|
-
}
|
|
1
|
+
export declare const VALIDATION_STATE: {
|
|
2
|
+
readonly Default: "default";
|
|
3
|
+
readonly Error: "error";
|
|
4
|
+
readonly Warning: "warning";
|
|
5
|
+
readonly Success: "success";
|
|
6
|
+
};
|
|
7
|
+
export declare const CONTAINER_VARIANT: {
|
|
8
|
+
readonly SingleLine: "single-line-container";
|
|
9
|
+
readonly MultiLine: "multi-line-container";
|
|
10
|
+
};
|
package/dist/constants.js
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
|
-
export
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
ContainerVariant["MultiLine"] = "multi-line-container";
|
|
12
|
-
})(ContainerVariant || (ContainerVariant = {}));
|
|
1
|
+
export const VALIDATION_STATE = {
|
|
2
|
+
Default: 'default',
|
|
3
|
+
Error: 'error',
|
|
4
|
+
Warning: 'warning',
|
|
5
|
+
Success: 'success',
|
|
6
|
+
};
|
|
7
|
+
export const CONTAINER_VARIANT = {
|
|
8
|
+
SingleLine: 'single-line-container',
|
|
9
|
+
MultiLine: 'multi-line-container',
|
|
10
|
+
};
|
|
@@ -20,5 +20,5 @@ export const ButtonCopyValue = forwardRef(({ size, valueToCopy, tabIndex = -1, o
|
|
|
20
20
|
closeTooltip();
|
|
21
21
|
clearTimeout(timerId.current);
|
|
22
22
|
}, []);
|
|
23
|
-
return (_jsx("button",
|
|
23
|
+
return (_jsx("button", { className: styles.buttonCopyValue, "data-size": size, onClick: handleClick, "data-test-id": 'button-copy-value', ref: ref, onKeyDown: onKeyDown, tabIndex: tabIndex, type: 'button', children: getIcon({ size, isChecked }) }));
|
|
24
24
|
});
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { CheckSVG, CopySVG } from '@snack-uikit/icons';
|
|
3
|
-
import {
|
|
3
|
+
import { BUTTON_SIZE } from '@snack-uikit/input-private';
|
|
4
4
|
export function getIcon({ size, isChecked }) {
|
|
5
5
|
switch (size) {
|
|
6
|
-
case
|
|
6
|
+
case BUTTON_SIZE.S: {
|
|
7
7
|
return isChecked ? _jsx(CheckSVG, { size: 16 }) : _jsx(CopySVG, { size: 16 });
|
|
8
8
|
}
|
|
9
|
-
case
|
|
9
|
+
case BUTTON_SIZE.M:
|
|
10
10
|
default: {
|
|
11
11
|
return isChecked ? _jsx(CheckSVG, { size: 24 }) : _jsx(CopySVG, { size: 24 });
|
|
12
12
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import { EyeClosedSVG, EyeSVG } from '@snack-uikit/icons';
|
|
4
|
-
import {
|
|
4
|
+
import { BUTTON_SIZE } from '@snack-uikit/input-private';
|
|
5
5
|
import styles from './styles.module.css';
|
|
6
6
|
export const ButtonHideValue = forwardRef(({ size, onClick, hidden, disabled, tabIndex = -1, onKeyDown }, ref) => {
|
|
7
7
|
const handleClick = event => {
|
|
@@ -11,5 +11,5 @@ export const ButtonHideValue = forwardRef(({ size, onClick, hidden, disabled, ta
|
|
|
11
11
|
event.stopPropagation();
|
|
12
12
|
onClick(event);
|
|
13
13
|
};
|
|
14
|
-
return (_jsx("button",
|
|
14
|
+
return (_jsx("button", { className: styles.buttonHideValue, "data-size": size, "data-disabled": disabled || undefined, disabled: disabled, onClick: handleClick, "data-test-id": 'button-hide-value', ref: ref, onKeyDown: onKeyDown, type: 'button', tabIndex: disabled ? -1 : tabIndex, children: hidden ? (_jsxs(_Fragment, { children: [size === BUTTON_SIZE.S && _jsx(EyeClosedSVG, { size: 16 }), size === BUTTON_SIZE.M && _jsx(EyeClosedSVG, {})] })) : (_jsxs(_Fragment, { children: [size === BUTTON_SIZE.S && _jsx(EyeSVG, { size: 16 }), size === BUTTON_SIZE.M && _jsx(EyeSVG, {})] })) }));
|
|
15
15
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { CSSProperties, MouseEventHandler, ReactElement, ReactNode, RefObject } from 'react';
|
|
2
2
|
import { Size } from '@snack-uikit/input-private';
|
|
3
3
|
import { WithSupportProps } from '@snack-uikit/utils';
|
|
4
|
-
import { ContainerVariant, ValidationState } from '../../
|
|
4
|
+
import { ContainerVariant, ValidationState } from '../../types';
|
|
5
5
|
export type FieldContainerPrivateProps = WithSupportProps<{
|
|
6
6
|
className?: string;
|
|
7
7
|
children: ReactNode;
|
|
@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import cn from 'classnames';
|
|
14
14
|
import { extractSupportProps } from '@snack-uikit/utils';
|
|
15
|
-
import {
|
|
15
|
+
import { VALIDATION_STATE } from '../../constants';
|
|
16
16
|
import styles from './styles.module.css';
|
|
17
17
|
export function FieldContainerPrivate(_a) {
|
|
18
18
|
var { className, children, size, validationState, variant, disabled, readonly, focused, selectable, style, prefix, postfix, inputRef, onMouseDown } = _a, rest = __rest(_a, ["className", "children", "size", "validationState", "variant", "disabled", "readonly", "focused", "selectable", "style", "prefix", "postfix", "inputRef", "onMouseDown"]);
|
|
@@ -23,5 +23,5 @@ export function FieldContainerPrivate(_a) {
|
|
|
23
23
|
}
|
|
24
24
|
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
25
25
|
};
|
|
26
|
-
return (_jsxs("div", Object.assign({ className: cn(className, styles.container), style: style, "data-size": size, "data-validation": disabled || readonly ?
|
|
26
|
+
return (_jsxs("div", Object.assign({ className: cn(className, styles.container), style: style, "data-size": size, "data-validation": disabled || readonly ? VALIDATION_STATE.Default : validationState, "data-variant": variant, "data-disabled": disabled || undefined, "data-readonly": readonly || undefined, "data-focused": focused || undefined, "data-selectable": selectable || undefined, "data-test-id": 'field-container-private', onClick: handleContainerClick, onMouseDown: onMouseDown, role: 'textbox', tabIndex: -1 }, extractSupportProps(rest), { children: [prefix && (_jsx("span", { className: styles.prefix, "data-test-id": 'field-container-private__prefix-icon', children: prefix })), children, postfix && _jsx("span", { className: styles.postfix, children: postfix })] })));
|
|
27
27
|
}
|
package/dist/types.d.ts
ADDED
package/dist/types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Fields",
|
|
7
|
-
"version": "0.
|
|
7
|
+
"version": "0.10.1",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -32,14 +32,14 @@
|
|
|
32
32
|
"license": "Apache-2.0",
|
|
33
33
|
"scripts": {},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@snack-uikit/calendar": "0.
|
|
36
|
-
"@snack-uikit/droplist": "0.
|
|
37
|
-
"@snack-uikit/icons": "0.19.
|
|
38
|
-
"@snack-uikit/input-private": "
|
|
39
|
-
"@snack-uikit/scroll": "0.
|
|
40
|
-
"@snack-uikit/tooltip": "0.
|
|
41
|
-
"@snack-uikit/truncate-string": "0.
|
|
42
|
-
"@snack-uikit/utils": "3.
|
|
35
|
+
"@snack-uikit/calendar": "0.6.1",
|
|
36
|
+
"@snack-uikit/droplist": "0.12.1",
|
|
37
|
+
"@snack-uikit/icons": "0.19.1",
|
|
38
|
+
"@snack-uikit/input-private": "3.0.1",
|
|
39
|
+
"@snack-uikit/scroll": "0.5.0",
|
|
40
|
+
"@snack-uikit/tooltip": "0.10.1",
|
|
41
|
+
"@snack-uikit/truncate-string": "0.4.1",
|
|
42
|
+
"@snack-uikit/utils": "3.2.0",
|
|
43
43
|
"classnames": "2.3.2",
|
|
44
44
|
"copy-to-clipboard": "3.3.3",
|
|
45
45
|
"merge-refs": "1.0.0",
|
|
@@ -49,5 +49,5 @@
|
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@types/merge-refs": "1.0.0"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "62f43bf0cbfd611d0b746117400f67096b1790f6"
|
|
53
53
|
}
|
|
@@ -16,18 +16,18 @@ import { Calendar, CalendarProps } from '@snack-uikit/calendar';
|
|
|
16
16
|
import { Dropdown } from '@snack-uikit/droplist';
|
|
17
17
|
import { CalendarSVG } from '@snack-uikit/icons';
|
|
18
18
|
import {
|
|
19
|
-
|
|
19
|
+
ICON_SIZE,
|
|
20
20
|
InputPrivate,
|
|
21
21
|
InputPrivateProps,
|
|
22
22
|
runAfterRerender,
|
|
23
|
+
SIZE,
|
|
23
24
|
Size,
|
|
24
25
|
useButtonNavigation,
|
|
25
26
|
useClearButton,
|
|
26
27
|
} from '@snack-uikit/input-private';
|
|
27
|
-
import { Tooltip } from '@snack-uikit/tooltip';
|
|
28
28
|
import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
|
|
29
29
|
|
|
30
|
-
import {
|
|
30
|
+
import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
|
|
31
31
|
import { FieldContainerPrivate } from '../../helperComponents';
|
|
32
32
|
import { useCopyButton } from '../../hooks';
|
|
33
33
|
import { FieldDecorator, FieldDecoratorProps } from '../FieldDecorator';
|
|
@@ -68,13 +68,13 @@ type FieldDateOwnProps = {
|
|
|
68
68
|
|
|
69
69
|
export type FieldDateProps = WithSupportProps<FieldDateOwnProps & InputProps & WrapperProps>;
|
|
70
70
|
|
|
71
|
-
const CALENDAR_SIZE_MAP = {
|
|
72
|
-
[
|
|
73
|
-
[
|
|
74
|
-
[
|
|
71
|
+
const CALENDAR_SIZE_MAP: Record<Size, CalendarProps['size']> = {
|
|
72
|
+
[SIZE.S]: 's',
|
|
73
|
+
[SIZE.M]: 'm',
|
|
74
|
+
[SIZE.L]: 'm',
|
|
75
75
|
};
|
|
76
76
|
|
|
77
|
-
const
|
|
77
|
+
export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
|
|
78
78
|
(
|
|
79
79
|
{
|
|
80
80
|
id,
|
|
@@ -95,8 +95,8 @@ const ForwardedFieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
|
|
|
95
95
|
required = false,
|
|
96
96
|
hint,
|
|
97
97
|
showHintIcon,
|
|
98
|
-
size =
|
|
99
|
-
validationState =
|
|
98
|
+
size = SIZE.S,
|
|
99
|
+
validationState = VALIDATION_STATE.Default,
|
|
100
100
|
locale = DEFAULT_LOCALE,
|
|
101
101
|
...rest
|
|
102
102
|
},
|
|
@@ -108,7 +108,7 @@ const ForwardedFieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
|
|
|
108
108
|
const localRef = useRef<HTMLInputElement>(null);
|
|
109
109
|
const clearButtonRef = useRef<HTMLButtonElement>(null);
|
|
110
110
|
const copyButtonRef = useRef<HTMLButtonElement>(null);
|
|
111
|
-
const calendarIconSize = size ===
|
|
111
|
+
const calendarIconSize = size === SIZE.S ? ICON_SIZE.Xs : ICON_SIZE.S;
|
|
112
112
|
const showDropList = isOpen && !readonly && !disabled;
|
|
113
113
|
const showAdditionalButton = Boolean(valueProp && !disabled);
|
|
114
114
|
const showClearButton = showAdditionalButton && !readonly;
|
|
@@ -257,9 +257,9 @@ const ForwardedFieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
|
|
|
257
257
|
{...extractSupportProps(rest)}
|
|
258
258
|
>
|
|
259
259
|
<Dropdown
|
|
260
|
-
trigger=
|
|
260
|
+
trigger='click'
|
|
261
261
|
triggerClassName={styles.triggerClassName}
|
|
262
|
-
widthStrategy=
|
|
262
|
+
widthStrategy='gte'
|
|
263
263
|
{...(readonly || disabled
|
|
264
264
|
? { open: false }
|
|
265
265
|
: {
|
|
@@ -269,7 +269,7 @@ const ForwardedFieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
|
|
|
269
269
|
content={
|
|
270
270
|
<div className={styles.calendarWrapper} data-size={size}>
|
|
271
271
|
<Calendar
|
|
272
|
-
mode=
|
|
272
|
+
mode='date'
|
|
273
273
|
size={CALENDAR_SIZE_MAP[size]}
|
|
274
274
|
value={valueProp ? parseDate(valueProp) : undefined}
|
|
275
275
|
onChangeValue={handleSelectDate}
|
|
@@ -292,7 +292,7 @@ const ForwardedFieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
|
|
|
292
292
|
validationState={validationState}
|
|
293
293
|
disabled={disabled}
|
|
294
294
|
readonly={readonly}
|
|
295
|
-
variant={
|
|
295
|
+
variant={CONTAINER_VARIANT.SingleLine}
|
|
296
296
|
focused={showDropList}
|
|
297
297
|
inputRef={localRef}
|
|
298
298
|
postfix={
|
|
@@ -316,7 +316,7 @@ const ForwardedFieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
|
|
|
316
316
|
disabled={disabled}
|
|
317
317
|
readonly={readonly}
|
|
318
318
|
tabIndex={inputTabIndex}
|
|
319
|
-
type=
|
|
319
|
+
type='text'
|
|
320
320
|
id={id}
|
|
321
321
|
name={name}
|
|
322
322
|
data-test-id='field-date__input'
|
|
@@ -327,13 +327,3 @@ const ForwardedFieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
|
|
|
327
327
|
);
|
|
328
328
|
},
|
|
329
329
|
);
|
|
330
|
-
|
|
331
|
-
export const FieldDate = ForwardedFieldDate as typeof ForwardedFieldDate & {
|
|
332
|
-
sizes: typeof Size;
|
|
333
|
-
validationStates: typeof ValidationState;
|
|
334
|
-
labelTooltipPlacements: typeof Tooltip.placements;
|
|
335
|
-
};
|
|
336
|
-
|
|
337
|
-
FieldDate.sizes = Size;
|
|
338
|
-
FieldDate.validationStates = ValidationState;
|
|
339
|
-
FieldDate.labelTooltipPlacements = Tooltip.placements;
|