@snack-uikit/fields 0.14.2 → 0.15.0

package/dist/components/FieldSelect/styles.module.css

@@ -3,66 +3,137 @@
   width:100%;
 }
 
-.scrollContainerS{
-  max-height:256px;
+.contentWrapper{
+  display:flex;
+  flex-wrap:wrap;
+  width:100%;
 }
 
-.scrollContainerM{
-  max-height:320px;
+.tagContainer{
+  height:auto !important;
 }
-
-.scrollContainerL{
-  max-height:384px;
+.tagContainer[data-size=s]{
+  border-radius:var(--radius-fields-s, 12px);
+  border-width:var(--border-width-fields-single, 2px);
+  padding-left:var(--space-fields-single-line-container-s-left, 6px);
+  gap:var(--space-fields-single-line-container-s-gap, 4px);
+  padding-right:var(--space-fields-single-line-container-s-right, 6px);
+  min-height:var(--size-fields-s, 32px);
+  padding-top:var(--space-fields-select-multiple-s-vertical-padding, 2px);
+  padding-bottom:var(--space-fields-select-multiple-s-vertical-padding, 2px);
 }
-
-.displayValue{
-  pointer-events:none;
-  position:absolute;
-  top:0;
-  left:0;
-  overflow:hidden;
-  display:flex;
-  align-items:center;
-  box-sizing:border-box;
-  height:100%;
-  background-color:inherit;
-  border:none;
-  outline:none;
+.tagContainer[data-size=s] .contentWrapper{
+  gap:var(--space-fields-single-line-container-s-gap, 4px);
+}
+.tagContainer[data-size=m]{
+  border-radius:var(--radius-fields-m, 14px);
+  border-width:var(--border-width-fields-single, 2px);
+  padding-left:var(--space-fields-single-line-container-m-left, 8px);
+  gap:var(--space-fields-single-line-container-m-gap, 4px);
+  padding-right:var(--space-fields-single-line-container-m-right, 8px);
+  padding-top:var(--space-fields-select-multiple-m-vertical-padding, 6px);
+  padding-bottom:var(--space-fields-select-multiple-m-vertical-padding, 6px);
+  min-height:var(--size-fields-m, 40px);
+}
+.tagContainer[data-size=m] .contentWrapper{
+  gap:var(--space-fields-single-line-container-m-gap, 4px);
+}
+.tagContainer[data-size=l]{
+  border-radius:var(--radius-fields-l, 16px);
+  border-width:var(--border-width-fields-single, 2px);
+  padding-left:var(--space-fields-single-line-container-l-left, 10px);
+  gap:var(--space-fields-single-line-container-l-gap, 8px);
+  padding-right:var(--space-fields-single-line-container-l-right, 10px);
+  min-height:var(--size-fields-l, 48px);
+  padding-top:var(--space-fields-select-multiple-l-vertical-padding, 6px);
+  padding-bottom:var(--space-fields-select-multiple-l-vertical-padding, 6px);
+}
+.tagContainer[data-size=l] .contentWrapper{
+  gap:var(--space-fields-single-line-container-l-gap, 8px);
 }
 
 .container{
+  position:relative;
   flex:1 1 0;
 }
+.container[data-size=s] .inputPlug{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
 .container[data-size=s] .arrowIcon{
   width:var(--size-icon-container-xs, 16px) !important;
   height:var(--size-icon-container-xs, 16px) !important;
   color:var(--sys-neutral-text-light, #868892);
 }
 .container[data-size=s][data-variant=single-line-container] .displayValue{
-  width:calc(100% - (var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)));
-  margin-right:calc(var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2));
+  width:calc(100% - (
+            var(--space-fields-single-line-container-s-right, 6px) +
+              var(--space-fields-single-line-container-s-gap, 4px) +
+              calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)
+          ));
+  margin-right:calc(
+            var(--space-fields-single-line-container-s-right, 6px) +
+              var(--space-fields-single-line-container-s-gap, 4px) +
+              calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)
+          );
   padding-left:var(--space-fields-single-line-container-s-left, 6px);
   border-radius:var(--radius-fields-s, 12px);
 }
+.container[data-size=m] .inputPlug{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+}
 .container[data-size=m] .arrowIcon{
   width:var(--size-icon-container-s, 24px) !important;
   height:var(--size-icon-container-s, 24px) !important;
   color:var(--sys-neutral-text-light, #868892);
 }
 .container[data-size=m][data-variant=single-line-container] .displayValue{
-  width:calc(100% - (var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)));
-  margin-right:calc(var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2));
+  width:calc(100% - (
+            var(--space-fields-single-line-container-m-right, 8px) +
+              var(--space-fields-single-line-container-m-gap, 4px) +
+              calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
+          ));
+  margin-right:calc(
+            var(--space-fields-single-line-container-m-right, 8px) +
+              var(--space-fields-single-line-container-m-gap, 4px) +
+              calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
+          );
   padding-left:var(--space-fields-single-line-container-m-left, 8px);
   border-radius:var(--radius-fields-m, 14px);
 }
+.container[data-size=l] .inputPlug{
+  font-family:var(--sans-body-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-l-font-weight, Regular);
+  line-height:var(--sans-body-l-line-height, 24px);
+  font-size:var(--sans-body-l-font-size, 16px);
+  letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
+}
 .container[data-size=l] .arrowIcon{
   width:var(--size-icon-container-s, 24px) !important;
   height:var(--size-icon-container-s, 24px) !important;
   color:var(--sys-neutral-text-light, #868892);
 }
 .container[data-size=l][data-variant=single-line-container] .displayValue{
-  width:calc(100% - (var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)));
-  margin-right:calc(var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2));
+  width:calc(100% - (
+            var(--space-fields-single-line-container-l-right, 10px) +
+              var(--space-fields-single-line-container-l-gap, 8px) +
+              calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
+          ));
+  margin-right:calc(
+            var(--space-fields-single-line-container-l-right, 10px) +
+              var(--space-fields-single-line-container-l-gap, 8px) +
+              calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
+          );
   padding-left:var(--space-fields-single-line-container-l-left, 10px);
   border-radius:var(--radius-fields-l, 16px);
 }
@@ -71,4 +142,35 @@
 }
 .container[data-disabled] .arrowIcon, .container[data-readonly] .arrowIcon{
   color:var(--sys-neutral-text-disabled, #b3b6bf);
+}
+
+.inputPlug{
+  content:"";
+  position:absolute;
+  top:0;
+  left:0;
+  overflow:hidden;
+  width:-moz-fit-content;
+  width:fit-content;
+  max-width:100%;
+  height:0;
+}
+
+.inputWrapper{
+  position:relative;
+  display:inline-flex;
+  flex:1;
+  min-width:4px;
+  color:transparent;
+}
+.inputWrapper[data-searchable=false]{
+  width:0;
+  min-width:0;
+  max-width:0;
+}
+
+.postfix{
+  display:inline-flex;
+  flex-shrink:0;
+  gap:var(--space-fields-postfix-gap, 4px);
 }

package/dist/components/FieldSelect/types.d.ts

@@ -1,25 +1,35 @@
 import { ReactElement } from 'react';
-import { ItemSingleProps } from '@snack-uikit/droplist';
 import { InputPrivateProps } from '@snack-uikit/input-private';
+import { AccordionItemProps, BaseItemProps, GroupItemProps, ListProps, NextListItemProps, SelectionMultipleState, SelectionSingleState } from '@snack-uikit/list';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { FieldDecoratorProps } from '../FieldDecorator';
-export type Option = Pick<ItemSingleProps, 'caption' | 'description' | 'tagLabel' | 'icon' | 'avatar' | 'disabled'> & {
-    value: string;
-    label: string;
+export type OptionProps = BaseOptionProps | AccordionOptionProps | GroupOptionProps | NestListOptionProps;
+export type OptionWithoutGroup = BaseOptionProps | AccordionOptionProps | NestListOptionProps;
+export type BaseOptionProps = Pick<BaseItemProps, 'beforeContent' | 'afterContent' | 'disabled'> & BaseItemProps['content'] & {
+    value: string | number;
 };
-export type ExtendedOption = Option & {
-    checked: boolean;
+export type AccordionOptionProps = Pick<AccordionItemProps, 'type'> & BaseOptionProps & {
+    options: OptionProps[];
 };
-type InputProps = Pick<InputPrivateProps, 'id' | 'name' | 'placeholder' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'>;
-type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'hint' | 'showHintIcon' | 'size' | 'validationState' | 'labelTooltipPlacement'>;
-type FieldSelectOwnProps = {
-    /** Массив опций выпадающего списка */
-    options: Option[];
-    /** Открыт ли выпадающий список */
-    open?: boolean;
-    /** Колбек открытия выпадающего списка */
-    onOpenChange?(value: boolean): void;
-    /** Можно ли искать опции внутри списка */
+export type GroupOptionProps = Omit<GroupItemProps, 'items' | 'id'> & {
+    options: OptionProps[];
+};
+export type NestListOptionProps = Pick<NextListItemProps, 'type'> & BaseOptionProps & {
+    options: OptionProps[];
+};
+export type InputProps = Pick<InputPrivateProps, 'id' | 'name' | 'placeholder' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'onKeyDown'>;
+export type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'hint' | 'showHintIcon' | 'size' | 'validationState' | 'labelTooltipPlacement'>;
+export type SearchState = {
+    value?: string;
+    defaultValue?: string;
+    onChange?(value: string): void;
+};
+export type FieldSelectPrivateProps = InputProps & WrapperProps & {
+    options: OptionProps[];
+    loading?: boolean;
+};
+type FiledSelectCommonProps = WithSupportProps<{
+    options: OptionProps[];
     searchable?: boolean;
     /** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */
     showCopyButton?: boolean;
@@ -28,27 +38,22 @@ type FieldSelectOwnProps = {
      * @default true
      */
     showClearButton?: boolean;
+    /**
+     * Является ли поле доступным только для чтения
+     * @default false
+     */
+    readonly?: boolean;
     /** Иконка-префикс для поля */
     prefixIcon?: ReactElement;
-    /** Текст отсутствия доступных значений */
-    noDataText?: string;
-    /** Текущая локаль */
-    locale?: Intl.Locale;
-};
-export type FieldSelectBaseProps = FieldSelectOwnProps & InputProps & WrapperProps;
-type SingleModeProps = {
-    /** Выбранное значение: <br> - одно для single mode */
-    value?: Option['value'];
-    /** Колбек смены значения */
-    onChange?(value: Option['value']): void;
-};
-type MultiModeProps = {
-    /** <br> - массив для multi mode */
-    value?: Option['value'][];
-    onChange?(value: Option['value'][]): void;
-    /** Колбек формирования текста */
-    getSelectedItemsText?(amount: number): string;
-};
-export type FieldSelectSingleProps = WithSupportProps<FieldSelectBaseProps & SingleModeProps>;
-export type FieldSelectMultiProps = WithSupportProps<FieldSelectBaseProps & MultiModeProps>;
+    footer?: ListProps['footer'];
+    search?: SearchState;
+    autocomplete?: boolean;
+}>;
+export type FieldSelectSingleProps = FieldSelectPrivateProps & Omit<SelectionSingleState, 'mode'> & WrapperProps & FiledSelectCommonProps;
+export type FieldSelectMultipleProps = FieldSelectPrivateProps & Omit<SelectionMultipleState, 'mode'> & FiledSelectCommonProps;
+export type FieldSelectProps = (FieldSelectSingleProps & {
+    selection?: 'single';
+}) | (FieldSelectMultipleProps & {
+    selection: 'multiple';
+});
 export {};

package/dist/components/FieldSelect/utils.d.ts

@@ -0,0 +1,19 @@
+import { Size } from '@snack-uikit/input-private';
+import { ItemProps } from '@snack-uikit/list';
+import { AccordionOptionProps, BaseOptionProps, FieldSelectMultipleProps, FieldSelectSingleProps, GroupOptionProps, NestListOptionProps, OptionProps, OptionWithoutGroup } from './types';
+export declare function isBaseOptionProps(option: any): option is BaseOptionProps;
+export declare function isAccordionOptionProps(option: any): option is AccordionOptionProps;
+export declare function isNextListOptionProps(option: any): option is NestListOptionProps;
+export declare function isGroupOptionProps(option: any): option is GroupOptionProps;
+export declare function transformOptionsToItems(options: OptionProps[]): ItemProps[];
+export declare function extractSelectedOptions(options: OptionProps[], value: string | number | undefined): OptionWithoutGroup | undefined;
+export declare function extractSelectedMultipleOptions(options: OptionProps[], value?: (string | number | undefined)[]): OptionWithoutGroup[] | undefined;
+export declare function isFieldSelectMultipleProps(props: any): props is FieldSelectMultipleProps;
+export declare function isFieldSelectSingleProps(props: any): props is FieldSelectSingleProps;
+export declare function getArrowIcon({ size, open }: {
+    size: Size;
+    open: boolean;
+}): {
+    ArrowIcon: ({ size, ...props }: import("@snack-uikit/icons/dist/components/interface-icons/chevronUp").ISvgIconProps) => import("react/jsx-runtime").JSX.Element;
+    arrowIconSize: 16 | 24;
+};

package/dist/components/FieldSelect/utils.js

@@ -0,0 +1,112 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
+import { ICON_SIZE, SIZE } from '@snack-uikit/input-private';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isBaseOptionProps(option) {
+    return !('options' in option);
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isAccordionOptionProps(option) {
+    return 'options' in option && option['type'] === 'collapse';
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isNextListOptionProps(option) {
+    return 'options' in option && option['type'] === 'next-list';
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isGroupOptionProps(option) {
+    return 'options' in option && option['type'] === undefined;
+}
+export function transformOptionsToItems(options) {
+    return options.map(option => {
+        if (isAccordionOptionProps(option) || isNextListOptionProps(option)) {
+            const { description, option: contentOption, caption, options, value } = option, rest = __rest(option, ["description", "option", "caption", "options", "value"]);
+            return Object.assign(Object.assign({ 'data-test-id': 'field-select__list-option-' + option.value }, rest), { id: value, content: { option: contentOption, caption, description }, items: transformOptionsToItems(options) });
+        }
+        if (isGroupOptionProps(option)) {
+            const { options } = option, rest = __rest(option, ["options"]);
+            return Object.assign(Object.assign({}, rest), { items: transformOptionsToItems(options) });
+        }
+        const _a = option, { description, option: contentOption, caption, value } = _a, rest = __rest(_a, ["description", "option", "caption", "value"]);
+        return Object.assign(Object.assign({ 'data-test-id': 'field-select__list-option-' + option.value }, rest), { id: value, content: { option: contentOption, caption, description } });
+    });
+}
+export function extractSelectedOptions(options, value) {
+    for (let i = 0; i < options.length; i++) {
+        const option = options[i];
+        if (isAccordionOptionProps(option) || isNextListOptionProps(option)) {
+            const { value: optionValue } = option;
+            if (optionValue === value) {
+                return option;
+            }
+            const selectedOptionFromNestedOptions = extractSelectedOptions(option.options, value);
+            if (selectedOptionFromNestedOptions) {
+                return selectedOptionFromNestedOptions;
+            }
+        }
+        if (isGroupOptionProps(option)) {
+            const selectedOptionFromNestedOptions = extractSelectedOptions(option.options, value);
+            if (selectedOptionFromNestedOptions) {
+                return selectedOptionFromNestedOptions;
+            }
+        }
+        if (isBaseOptionProps(option)) {
+            if (option.value === value) {
+                return option;
+            }
+        }
+    }
+    return undefined;
+}
+export function extractSelectedMultipleOptions(options, value) {
+    let selectedOptions = [];
+    for (let i = 0; i < options.length; i++) {
+        const option = options[i];
+        if (isAccordionOptionProps(option) || isNextListOptionProps(option)) {
+            const { value: optionValue } = option;
+            if (value === null || value === void 0 ? void 0 : value.includes(optionValue)) {
+                selectedOptions.push(option);
+            }
+            const selectedOptionFromNestedOptions = extractSelectedMultipleOptions(option.options, value);
+            if (selectedOptionFromNestedOptions) {
+                selectedOptions = selectedOptions.concat(selectedOptionFromNestedOptions);
+            }
+        }
+        if (isGroupOptionProps(option)) {
+            const selectedOptionFromNestedOptions = extractSelectedMultipleOptions(option.options, value);
+            if (selectedOptionFromNestedOptions) {
+                selectedOptions = selectedOptions.concat(selectedOptionFromNestedOptions);
+            }
+        }
+        if (isBaseOptionProps(option)) {
+            if (value === null || value === void 0 ? void 0 : value.includes(option.value)) {
+                selectedOptions.push(option);
+            }
+        }
+    }
+    return selectedOptions.length ? selectedOptions : undefined;
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isFieldSelectMultipleProps(props) {
+    return 'selection' in props && props['selection'] === 'multiple';
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isFieldSelectSingleProps(props) {
+    return ('selection' in props && props['selection'] === 'single') || props['selection'] === undefined;
+}
+export function getArrowIcon({ size, open }) {
+    return {
+        ArrowIcon: open ? ChevronUpSVG : ChevronDownSVG,
+        arrowIconSize: size === SIZE.S ? ICON_SIZE.Xs : ICON_SIZE.S,
+    };
+}

package/dist/helperComponents/FieldContainerPrivate/styles.module.css

@@ -10,7 +10,11 @@
   border-radius:var(--radius-fields-s, 12px);
   border-width:var(--border-width-fields-single, 2px);
 }
-.container[data-size=s], .container[data-size=s] input, .container[data-size=s] select, .container[data-size=s] textarea, .container[data-size=s] span{
+.container[data-size=s],
+.container[data-size=s] input,
+.container[data-size=s] select,
+.container[data-size=s] textarea,
+.container[data-size=s] span{
   font-family:var(--sans-body-s-font-family, SB Sans Interface);
   font-weight:var(--sans-body-s-font-weight, Regular);
   line-height:var(--sans-body-s-line-height, 16px);
@@ -39,7 +43,11 @@
   border-radius:var(--radius-fields-m, 14px);
   border-width:var(--border-width-fields-single, 2px);
 }
-.container[data-size=m], .container[data-size=m] input, .container[data-size=m] select, .container[data-size=m] textarea, .container[data-size=m] span{
+.container[data-size=m],
+.container[data-size=m] input,
+.container[data-size=m] select,
+.container[data-size=m] textarea,
+.container[data-size=m] span{
   font-family:var(--sans-body-m-font-family, SB Sans Interface);
   font-weight:var(--sans-body-m-font-weight, Regular);
   line-height:var(--sans-body-m-line-height, 20px);
@@ -68,7 +76,11 @@
   border-radius:var(--radius-fields-l, 16px);
   border-width:var(--border-width-fields-single, 2px);
 }
-.container[data-size=l], .container[data-size=l] input, .container[data-size=l] select, .container[data-size=l] textarea, .container[data-size=l] span{
+.container[data-size=l],
+.container[data-size=l] input,
+.container[data-size=l] select,
+.container[data-size=l] textarea,
+.container[data-size=l] span{
   font-family:var(--sans-body-l-font-family, SB Sans Interface);
   font-weight:var(--sans-body-l-font-weight, Regular);
   line-height:var(--sans-body-l-line-height, 24px);
@@ -157,10 +169,18 @@
   border-color:var(--sys-green-accent-default, #57b762);
   outline-color:var(--sys-green-decor-activated, #a8d1a2);
 }
-.container[data-selectable], .container[data-selectable] input, .container[data-selectable] select, .container[data-selectable] textarea, .container[data-selectable] span{
+.container[data-selectable],
+.container[data-selectable] input,
+.container[data-selectable] select,
+.container[data-selectable] textarea,
+.container[data-selectable] span{
   cursor:pointer;
 }
-.container[data-readonly], .container[data-readonly] input, .container[data-readonly] select, .container[data-readonly] textarea, .container[data-readonly] span{
+.container[data-readonly],
+.container[data-readonly] input,
+.container[data-readonly] select,
+.container[data-readonly] textarea,
+.container[data-readonly] span{
   cursor:default;
 }
 .container[data-readonly], .container[data-readonly]:hover{
@@ -175,7 +195,11 @@
   border-color:var(--sys-neutral-decor-disabled, #e8eaf1);
   outline-color:var(--sys-primary-decor-activated, #c5b2f1);
 }
-.container[data-disabled], .container[data-disabled] input, .container[data-disabled] select, .container[data-disabled] textarea, .container[data-disabled] span{
+.container[data-disabled],
+.container[data-disabled] input,
+.container[data-disabled] select,
+.container[data-disabled] textarea,
+.container[data-disabled] span{
   cursor:not-allowed;
 }
 .container[data-disabled], .container[data-disabled]:focus-within, .container[data-disabled][data-focused], .container[data-disabled]:hover{

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.14.2",
+  "version": "0.15.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -34,11 +34,13 @@
   "dependencies": {
     "@snack-uikit/button": "0.16.1",
     "@snack-uikit/calendar": "0.7.6",
-    "@snack-uikit/droplist": "0.13.6",
+    "@snack-uikit/droplist": "0.13.7",
     "@snack-uikit/icons": "0.20.1",
     "@snack-uikit/input-private": "3.1.1",
+    "@snack-uikit/list": "0.4.0",
     "@snack-uikit/scroll": "0.5.2",
     "@snack-uikit/slider": "0.1.3",
+    "@snack-uikit/tag": "0.8.0",
     "@snack-uikit/tooltip": "0.12.0",
     "@snack-uikit/truncate-string": "0.4.8",
     "@snack-uikit/utils": "3.2.0",
@@ -54,5 +56,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "6aa9d988eebb76712315def67343b8b2e4cd268c"
+  "gitHead": "ee199e2cdca1d24db821533512263dfe06365159"
 }

package/src/components/FieldDecorator/Header.tsx

@@ -41,7 +41,12 @@ export function Header({
           </label>
           {required && <span data-test-id='field-decorator__required-sign'>*</span>}
           {labelTooltip && (
-            <Tooltip tip={labelTooltip} placement={labelTooltipPlacement} data-test-id='field-decorator__label-tooltip'>
+            <Tooltip
+              tip={labelTooltip}
+              placement={labelTooltipPlacement}
+              data-test-id='field-decorator__label-tooltip'
+              triggerClassName={styles.labelTooltipTrigger}
+            >
               <QuestionSVG size={16} className={styles.icon} data-test-id='field-decorator__label-tooltip-trigger' />
             </Tooltip>
           )}