@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.
Files changed (62) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/README.md +32 -32
  3. package/dist/components/FieldDate/FieldDate.d.ts +2 -8
  4. package/dist/components/FieldDate/FieldDate.js +11 -16
  5. package/dist/components/FieldDecorator/FieldDecorator.d.ts +0 -6
  6. package/dist/components/FieldDecorator/FieldDecorator.js +4 -6
  7. package/dist/components/FieldDecorator/Footer.d.ts +1 -1
  8. package/dist/components/FieldDecorator/Footer.js +7 -7
  9. package/dist/components/FieldDecorator/Header.d.ts +1 -1
  10. package/dist/components/FieldDecorator/Header.js +2 -2
  11. package/dist/components/FieldSecure/FieldSecure.d.ts +2 -8
  12. package/dist/components/FieldSecure/FieldSecure.js +5 -10
  13. package/dist/components/FieldSelect/FieldSelect.d.ts +5 -12
  14. package/dist/components/FieldSelect/FieldSelect.js +5 -13
  15. package/dist/components/FieldSelect/FieldSelectBase.d.ts +5 -4
  16. package/dist/components/FieldSelect/FieldSelectBase.js +6 -6
  17. package/dist/components/FieldSelect/FieldSelectMulti.d.ts +2 -2
  18. package/dist/components/FieldSelect/FieldSelectMulti.js +2 -3
  19. package/dist/components/FieldSelect/FieldSelectSingle.d.ts +2 -2
  20. package/dist/components/FieldSelect/FieldSelectSingle.js +2 -3
  21. package/dist/components/FieldSelect/constants.d.ts +4 -0
  22. package/dist/components/FieldSelect/constants.js +4 -0
  23. package/dist/components/FieldSelect/helpers/getArrowIcon.d.ts +2 -2
  24. package/dist/components/FieldSelect/helpers/getArrowIcon.js +5 -2
  25. package/dist/components/FieldSelect/helpers/getDisplayedValue.d.ts +4 -3
  26. package/dist/components/FieldSelect/helpers/getDisplayedValue.js +2 -2
  27. package/dist/components/FieldSelect/types.d.ts +0 -4
  28. package/dist/components/FieldSelect/types.js +1 -5
  29. package/dist/components/FieldText/FieldText.d.ts +2 -8
  30. package/dist/components/FieldText/FieldText.js +5 -10
  31. package/dist/components/FieldTextArea/FieldTextArea.d.ts +1 -8
  32. package/dist/components/FieldTextArea/FieldTextArea.js +5 -10
  33. package/dist/constants.d.ts +10 -10
  34. package/dist/constants.js +10 -12
  35. package/dist/helperComponents/ButtonCopyValue/ButtonCopyValue.js +1 -1
  36. package/dist/helperComponents/ButtonCopyValue/helpers.js +3 -3
  37. package/dist/helperComponents/ButtonHideValue/ButtonHideValue.js +2 -2
  38. package/dist/helperComponents/FieldContainerPrivate/FieldContainerPrivate.d.ts +1 -1
  39. package/dist/helperComponents/FieldContainerPrivate/FieldContainerPrivate.js +2 -2
  40. package/dist/types.d.ts +4 -0
  41. package/dist/types.js +1 -0
  42. package/package.json +10 -10
  43. package/src/components/FieldDate/FieldDate.tsx +16 -26
  44. package/src/components/FieldDecorator/FieldDecorator.tsx +5 -8
  45. package/src/components/FieldDecorator/Footer.tsx +7 -6
  46. package/src/components/FieldDecorator/Header.tsx +2 -2
  47. package/src/components/FieldSecure/FieldSecure.tsx +7 -18
  48. package/src/components/FieldSelect/FieldSelect.tsx +8 -23
  49. package/src/components/FieldSelect/FieldSelectBase.tsx +14 -13
  50. package/src/components/FieldSelect/FieldSelectMulti.tsx +3 -3
  51. package/src/components/FieldSelect/FieldSelectSingle.tsx +3 -3
  52. package/src/components/FieldSelect/constants.ts +5 -0
  53. package/src/components/FieldSelect/helpers/getArrowIcon.ts +5 -2
  54. package/src/components/FieldSelect/helpers/getDisplayedValue.ts +5 -4
  55. package/src/components/FieldSelect/types.ts +0 -5
  56. package/src/components/FieldText/FieldText.tsx +7 -18
  57. package/src/components/FieldTextArea/FieldTextArea.tsx +9 -20
  58. package/src/constants.ts +10 -10
  59. package/src/helperComponents/ButtonCopyValue/helpers.tsx +3 -3
  60. package/src/helperComponents/ButtonHideValue/ButtonHideValue.tsx +5 -5
  61. package/src/helperComponents/FieldContainerPrivate/FieldContainerPrivate.tsx +3 -2
  62. 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, Size, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
16
+ import { InputPrivate, SIZE, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
17
17
  import { extractSupportProps } from '@snack-uikit/utils';
18
- import { ContainerVariant, ValidationState } from '../../constants';
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 = Size.S, validationState = ValidationState.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"]);
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 === SelectionMode.Single ? Droplist.ItemSingle : Droplist.ItemMultiple;
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: Droplist.triggers.Click, triggerClassName: styles.triggerClassName, triggerClickByKeys: !searchable, placement: Droplist.placements.Bottom, onFocusLeave: onFocusLeaveHandler, firstElementRefCallback: firstDroplistItemRefCallback, "data-test-id": 'field-select__list' }, (readonly || disabled ? { open: false } : { open, onOpenChange }), { triggerElement: _jsxs(FieldContainerPrivate, Object.assign({ className: styles.container, size: size, validationState: validationState, disabled: disabled, readonly: readonly, variant: ContainerVariant.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: InputPrivate.types.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", Object.assign({ 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)))) })) })));
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("../../constants").ValidationState | undefined;
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/constants").Placement | undefined;
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 = SelectionMode.Multi;
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("../../constants").ValidationState | undefined;
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/constants").Placement | undefined;
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 = SelectionMode.Single;
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,3 +1,7 @@
1
1
  import { Option } from './types';
2
2
  export declare const EMPTY_OPTION: Option;
3
3
  export declare const DEFAULT_LOCALE: Intl.Locale;
4
+ export declare const SELECTION_MODE: {
5
+ readonly Single: "single";
6
+ readonly Multi: "multi";
7
+ };
@@ -1,2 +1,6 @@
1
1
  export const EMPTY_OPTION = { value: '', label: '' };
2
2
  export const DEFAULT_LOCALE = new Intl.Locale('ru-RU');
3
+ export const SELECTION_MODE = {
4
+ Single: 'single',
5
+ Multi: 'multi',
6
+ };
@@ -1,8 +1,8 @@
1
- import { IconSize, Size } from '@snack-uikit/input-private';
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: IconSize;
7
+ arrowIconSize: 16 | 24;
8
8
  };
@@ -1,5 +1,8 @@
1
1
  import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
2
- import { IconSize, Size } from '@snack-uikit/input-private';
2
+ import { ICON_SIZE, SIZE } from '@snack-uikit/input-private';
3
3
  export function getArrowIcon({ size, open }) {
4
- return { ArrowIcon: open ? ChevronUpSVG : ChevronDownSVG, arrowIconSize: size === Size.S ? IconSize.Xs : IconSize.S };
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 { Option, SelectionMode } from '../types';
1
+ import { SELECTION_MODE } from '../constants';
2
+ import { Option } from '../types';
2
3
  export declare const getDisplayedValue: (props: {
3
- selectionMode: SelectionMode.Single;
4
+ selectionMode: typeof SELECTION_MODE.Single;
4
5
  selected: Option;
5
6
  } | {
6
- selectionMode: SelectionMode.Multi;
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 { SelectionMode } from '../types';
1
+ import { SELECTION_MODE } from '../constants';
2
2
  export const getDisplayedValue = (props) => {
3
- if (props.selectionMode === SelectionMode.Single) {
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,5 +1 @@
1
- export var SelectionMode;
2
- (function (SelectionMode) {
3
- SelectionMode["Single"] = "single";
4
- SelectionMode["Multi"] = "multi";
5
- })(SelectionMode || (SelectionMode = {}));
1
+ export {};
@@ -1,8 +1,6 @@
1
1
  import { ReactElement } from 'react';
2
- import { InputPrivateProps, Size } from '@snack-uikit/input-private';
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, Size, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
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 { ContainerVariant, ValidationState } from '../../constants';
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 ForwardedFieldText = forwardRef((_a, ref) => {
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 = Size.S, validationState = ValidationState.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"]);
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, Object.assign({ size: size, validationState: validationState, disabled: disabled, readonly: readonly, variant: ContainerVariant.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: InputPrivate.types.Text, maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, "data-test-id": 'field-text__input' }) })) })));
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 { Size, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
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 { ContainerVariant, ValidationState } from '../../constants';
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 ForwardedFieldTextArea = forwardRef((_a, ref) => {
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 = Size.S, validationState = ValidationState.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"]);
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, Object.assign({ className: styles.container, size: size, validationState: validationState, disabled: disabled, readonly: readonly, "data-resizable": isResizable || undefined, variant: ContainerVariant.MultiLine, style: { '--max-rows': maxRows }, inputRef: localRef, postfix: _jsx("span", Object.assign({ className: styles.postfix }, { children: buttons })) }, { children: _jsx(Scroll, Object.assign({ className: styles.scrollContainer, size: Scroll.sizes.S, barHideStrategy: Scroll.barHideStrategies.Never, resize: isResizable ? Scroll.resizes.Vertical : Scroll.resizes.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' }) })) })) })));
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;
@@ -1,10 +1,10 @@
1
- export declare enum ValidationState {
2
- Default = "default",
3
- Error = "error",
4
- Warning = "warning",
5
- Success = "success"
6
- }
7
- export declare enum ContainerVariant {
8
- SingleLine = "single-line-container",
9
- MultiLine = "multi-line-container"
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 var ValidationState;
2
- (function (ValidationState) {
3
- ValidationState["Default"] = "default";
4
- ValidationState["Error"] = "error";
5
- ValidationState["Warning"] = "warning";
6
- ValidationState["Success"] = "success";
7
- })(ValidationState || (ValidationState = {}));
8
- export var ContainerVariant;
9
- (function (ContainerVariant) {
10
- ContainerVariant["SingleLine"] = "single-line-container";
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", Object.assign({ 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 }) })));
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 { ButtonSize } from '@snack-uikit/input-private';
3
+ import { BUTTON_SIZE } from '@snack-uikit/input-private';
4
4
  export function getIcon({ size, isChecked }) {
5
5
  switch (size) {
6
- case ButtonSize.S: {
6
+ case BUTTON_SIZE.S: {
7
7
  return isChecked ? _jsx(CheckSVG, { size: 16 }) : _jsx(CopySVG, { size: 16 });
8
8
  }
9
- case ButtonSize.M:
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 { ButtonSize } from '@snack-uikit/input-private';
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", Object.assign({ 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 === ButtonSize.S && _jsx(EyeClosedSVG, { size: 16 }), size === ButtonSize.M && _jsx(EyeClosedSVG, {})] })) : (_jsxs(_Fragment, { children: [size === ButtonSize.S && _jsx(EyeSVG, { size: 16 }), size === ButtonSize.M && _jsx(EyeSVG, {})] })) })));
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 '../../constants';
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 { ValidationState } from '../../constants';
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 ? ValidationState.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", Object.assign({ className: styles.prefix, "data-test-id": 'field-container-private__prefix-icon' }, { children: prefix }))), children, postfix && _jsx("span", Object.assign({ className: styles.postfix }, { children: postfix }))] })));
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
  }
@@ -0,0 +1,4 @@
1
+ import { ValueOf } from '@snack-uikit/utils';
2
+ import { CONTAINER_VARIANT, VALIDATION_STATE } from './constants';
3
+ export type ValidationState = ValueOf<typeof VALIDATION_STATE>;
4
+ export type ContainerVariant = ValueOf<typeof CONTAINER_VARIANT>;
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.9.2",
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.5.1",
36
- "@snack-uikit/droplist": "0.11.2",
37
- "@snack-uikit/icons": "0.19.0",
38
- "@snack-uikit/input-private": "2.0.1",
39
- "@snack-uikit/scroll": "0.4.1",
40
- "@snack-uikit/tooltip": "0.9.1",
41
- "@snack-uikit/truncate-string": "0.3.1",
42
- "@snack-uikit/utils": "3.1.0",
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": "e124e31699926810648702f97db72413d7ebd2b2"
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
- IconSize,
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 { ContainerVariant, ValidationState } from '../../constants';
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
- [Size.S]: Calendar.sizes.S,
73
- [Size.M]: Calendar.sizes.M,
74
- [Size.L]: Calendar.sizes.M,
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 ForwardedFieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
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 = Size.S,
99
- validationState = ValidationState.Default,
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 === Size.S ? IconSize.Xs : IconSize.S;
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={Dropdown.triggers.Click}
260
+ trigger='click'
261
261
  triggerClassName={styles.triggerClassName}
262
- widthStrategy={Dropdown.widthStrategies.Gte}
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={Calendar.modes.Date}
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={ContainerVariant.SingleLine}
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={InputPrivate.types.Text}
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;