@snack-uikit/fields 0.28.0 → 0.29.0

package/dist/components/FieldText/FieldText.js

@@ -11,16 +11,17 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import mergeRefs from 'merge-refs';
-import { forwardRef, useMemo, useRef } from 'react';
+import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
 import { InputPrivate, SIZE, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
+import { VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
-import { useCopyButton, useValueControl } from '../../hooks';
+import { useCopyButton, usePostfix, usePostfixButton, usePrefix, usePrefixButton, useValueControl } from '../../hooks';
 import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
+import { getContainerVariant } from './helpers';
 export const FieldText = forwardRef((_a, ref) => {
-    var { id, name, value: valueProp, placeholder, maxLength, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, allowMoreThanMaxLength = false, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, prefixIcon, error, autoComplete } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "prefixIcon", "error", "autoComplete"]);
+    var { id, name, value: valueProp, placeholder, maxLength, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, allowMoreThanMaxLength = false, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, error, autoComplete, prefixIcon, prefix, postfix, button: buttonProp } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "autoComplete", "prefixIcon", "prefix", "postfix", "button"]);
     const [value = '', onChange] = useValueControl({
         value: valueProp,
         defaultValue: '',
@@ -33,6 +34,13 @@ export const FieldText = forwardRef((_a, ref) => {
     const showClearButton = showClearButtonProp && showAdditionalButton && !readonly;
     const showCopyButton = showCopyButtonProp && showAdditionalButton && readonly;
     const fieldValidationState = getValidationState({ validationState, error });
+    const button = useMemo(() => buttonProp
+        ? Object.assign(Object.assign({}, buttonProp), { selection: Object.assign(Object.assign({}, buttonProp.selection), { onChange: value => {
+                    var _a, _b;
+                    (_b = (_a = buttonProp.selection) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+                    setTimeout(() => { var _a; return (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+                } }) }) : undefined, [buttonProp]);
+    const containerVariant = getContainerVariant({ button });
     const onClear = () => {
         var _a;
         onChange('');
@@ -41,12 +49,42 @@ export const FieldText = forwardRef((_a, ref) => {
         }
     };
     const clearButtonSettings = useClearButton({ clearButtonRef, showClearButton, size, onClear });
-    const copyButtonSettings = useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy: value });
-    const { buttons, inputTabIndex, onInputKeyDown } = useButtonNavigation({
+    const copyButtonSettings = useCopyButton({
+        copyButtonRef,
+        showCopyButton,
+        size,
+        valueToCopy: value,
+        prefix: typeof prefix === 'string' ? prefix : undefined,
+        postfix: typeof postfix === 'string' ? postfix : undefined,
+    });
+    const [isButtonFocused, setIsButtonFocused] = useState(false);
+    const onButtonFocus = useCallback(() => setIsButtonFocused(true), []);
+    const onButtonBlur = useCallback(() => setIsButtonFocused(false), []);
+    const prefixSettings = usePrefix({ prefix, disabled });
+    const prefixButtonSettings = usePrefixButton({
+        button,
+        prefixIcon,
+        size,
+        disabled,
+        readonly,
+        onFocus: onButtonFocus,
+        onBlur: onButtonBlur,
+    });
+    const postfixSettings = usePostfix({ postfix, disabled });
+    const postfixButtonSettings = usePostfixButton({
+        button,
+        size,
+        disabled,
+        readonly,
+        onFocus: onButtonFocus,
+        onBlur: onButtonBlur,
+    });
+    const { postfixButtons, prefixButtons, inputTabIndex, onInputKeyDown } = useButtonNavigation({
         inputRef: localRef,
-        buttons: useMemo(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
+        postfixButtons: useMemo(() => [clearButtonSettings, copyButtonSettings, postfixSettings, postfixButtonSettings], [clearButtonSettings, copyButtonSettings, postfixSettings, postfixButtonSettings]),
+        prefixButtons: useMemo(() => [prefixButtonSettings, prefixSettings], [prefixButtonSettings, prefixSettings]),
         readonly,
         submitKeys: ['Enter', 'Space', 'Tab'],
     });
-    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: fieldValidationState, error: error }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, 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, autoComplete: autoComplete, "data-test-id": 'field-text__input' }) }) })));
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: fieldValidationState, error: error }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: containerVariant, inputRef: localRef, prefix: prefixButtons, postfix: postfixButtons, disableFocus: isButtonFocused, 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, autoComplete: autoComplete, "data-test-id": 'field-text__input' }) }) })));
 });

package/dist/components/FieldText/helpers.d.ts

@@ -0,0 +1,4 @@
+import { Button, ContainerVariant } from '../../types';
+export declare function getContainerVariant({ button }: {
+    button?: Button;
+}): ContainerVariant;

package/dist/components/FieldText/helpers.js

@@ -0,0 +1,9 @@
+export function getContainerVariant({ button }) {
+    if ((button === null || button === void 0 ? void 0 : button.variant) === 'before') {
+        return 'single-line-container-button-before';
+    }
+    if ((button === null || button === void 0 ? void 0 : button.variant) === 'after') {
+        return 'single-line-container-button-after';
+    }
+    return 'single-line-container';
+}

package/dist/components/FieldTextArea/FieldTextArea.d.ts

@@ -26,5 +26,5 @@ type FieldTextAreaOwnProps = {
 export type FieldTextAreaProps = WithSupportProps<FieldTextAreaOwnProps & InputProps & WrapperProps>;
 export declare const FieldTextArea: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string;
-} & import("react").AriaAttributes & FieldTextAreaOwnProps & Pick<Partial<TextAreaProps>, "value"> & Pick<TextAreaProps, "disabled" | "readonly" | "id" | "name" | "onFocus" | "onBlur" | "placeholder" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+} & import("react").AriaAttributes & FieldTextAreaOwnProps & Pick<Partial<TextAreaProps>, "value"> & Pick<TextAreaProps, "onFocus" | "onBlur" | "id" | "disabled" | "readonly" | "name" | "placeholder" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export {};

package/dist/components/FieldTextArea/FieldTextArea.js

@@ -44,11 +44,11 @@ export const FieldTextArea = forwardRef((_a, ref) => {
     };
     const clearButtonSettings = useClearButton({ clearButtonRef, showClearButton, size, onClear });
     const copyButtonSettings = useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy: value });
-    const { buttons, inputTabIndex, onInputKeyDown } = useButtonNavigation({
+    const { postfixButtons, inputTabIndex, onInputKeyDown } = useButtonNavigation({
         inputRef: localRef,
-        buttons: useMemo(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
+        postfixButtons: useMemo(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
         readonly,
         submitKeys: ['Enter', 'Space', 'Tab'],
     });
-    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: fieldValidationState }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { className: styles.container, size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, "data-resizable": isResizable || undefined, variant: CONTAINER_VARIANT.MultiLine, style: { '--max-rows': maxRows, '--min-rows': minRows }, 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, minRows: minRows, 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' }) }) }) })));
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: fieldValidationState }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { className: styles.container, size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, "data-resizable": isResizable || undefined, variant: CONTAINER_VARIANT.MultiLine, style: { '--max-rows': maxRows, '--min-rows': minRows }, inputRef: localRef, postfix: _jsx("span", { className: styles.postfix, children: postfixButtons }), 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, minRows: minRows, 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' }) }) }) })));
 });

package/dist/constants.d.ts

@@ -6,5 +6,11 @@ export declare const VALIDATION_STATE: {
 };
 export declare const CONTAINER_VARIANT: {
     readonly SingleLine: "single-line-container";
+    readonly SingleLineButtonBefore: "single-line-container-button-before";
+    readonly SingleLineButtonAfter: "single-line-container-button-after";
     readonly MultiLine: "multi-line-container";
 };
+export declare const BUTTON_VARIANT: {
+    readonly Before: "before";
+    readonly After: "after";
+};

package/dist/constants.js

@@ -6,5 +6,11 @@ export const VALIDATION_STATE = {
 };
 export const CONTAINER_VARIANT = {
     SingleLine: 'single-line-container',
+    SingleLineButtonBefore: 'single-line-container-button-before',
+    SingleLineButtonAfter: 'single-line-container-button-after',
     MultiLine: 'multi-line-container',
 };
+export const BUTTON_VARIANT = {
+    Before: 'before',
+    After: 'after',
+};

package/dist/helperComponents/ButtonField/ButtonField.d.ts

@@ -0,0 +1,18 @@
+import { FocusEventHandler, KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';
+import { Size } from '@snack-uikit/input-private';
+import { ButtonVariant } from '../../types';
+export type ButtonFieldProps = {
+    size: Size;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+    onFocus?: FocusEventHandler<HTMLButtonElement>;
+    onBlur?: FocusEventHandler<HTMLButtonElement>;
+    tabIndex?: number;
+    disabled?: boolean;
+    hasArrow?: boolean;
+    arrowOpen?: boolean;
+    content?: ReactNode;
+    variant: ButtonVariant;
+    className?: string;
+};
+export declare const ButtonField: import("react").ForwardRefExoticComponent<ButtonFieldProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/helperComponents/ButtonField/ButtonField.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { forwardRef } from 'react';
+import { Divider } from '@snack-uikit/divider';
+import { getArrowIcon } from '../../components/FieldSelect/utils';
+import styles from './styles.module.css';
+export const ButtonField = forwardRef(({ size, tabIndex = 0, onClick, onKeyDown, onFocus, onBlur, disabled, content, hasArrow = false, arrowOpen = false, variant, className, }, ref) => {
+    const { ArrowIcon, arrowIconSize } = getArrowIcon({ size, open: arrowOpen });
+    return (_jsxs("button", { className: cn(className, styles.buttonField), "data-size": size, "data-variant": variant, "data-arrow-open": arrowOpen || undefined, "data-disabled": disabled || undefined, onClick: disabled ? undefined : onClick, onKeyDown: disabled ? undefined : onKeyDown, onFocus: disabled ? undefined : onFocus, onBlur: disabled ? undefined : onBlur, "data-test-id": 'button-field', ref: ref, tabIndex: tabIndex, type: 'button', disabled: disabled, children: [variant === 'after' && _jsx(Divider, { orientation: 'vertical', className: styles.divider }), _jsx("div", { className: styles.content, children: content }), hasArrow && _jsx(ArrowIcon, { size: arrowIconSize }), variant === 'before' && _jsx(Divider, { orientation: 'vertical', className: styles.divider })] }));
+});

package/dist/helperComponents/ButtonField/index.d.ts

@@ -0,0 +1 @@
+export * from './ButtonField';

package/dist/helperComponents/ButtonField/index.js

@@ -0,0 +1 @@
+export * from './ButtonField';

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

@@ -0,0 +1,96 @@
+.buttonField{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  margin:0;
+  padding:0;
+  color:var(--sys-neutral-text-support, #6d707f);
+  background-color:transparent;
+  border:none;
+}
+.buttonField[data-variant=before][data-size=s]{
+  border-top-right-radius:var(--dimension-theme-general-0px, 0px);
+  border-bottom-right-radius:var(--dimension-theme-general-0px, 0px);
+  border-top-left-radius:var(--radius-fields-button-field-s, 10px);
+  border-bottom-left-radius:var(--radius-fields-button-field-s, 10px);
+  padding-left:var(--space-fields-single-line-container-s-left, 6px);
+  padding-right:var(--dimension-theme-general-0px, 0px);
+  gap:var(--space-fields-single-line-container-s-gap, 4px);
+  min-height:var(--size-fields-button-field-s, 28px);
+}
+.buttonField[data-variant=before][data-size=m]{
+  border-top-right-radius:var(--dimension-theme-general-0px, 0px);
+  border-bottom-right-radius:var(--dimension-theme-general-0px, 0px);
+  border-top-left-radius:var(--radius-fields-button-field-m, 12px);
+  border-bottom-left-radius:var(--radius-fields-button-field-m, 12px);
+  padding-left:var(--space-fields-single-line-container-m-left, 8px);
+  padding-right:var(--dimension-theme-general-0px, 0px);
+  gap:var(--space-fields-single-line-container-m-gap, 4px);
+  min-height:var(--size-fields-button-field-m, 36px);
+}
+.buttonField[data-variant=before][data-size=l]{
+  border-top-right-radius:var(--dimension-theme-general-0px, 0px);
+  border-bottom-right-radius:var(--dimension-theme-general-0px, 0px);
+  border-top-left-radius:var(--radius-fields-button-field-l, 14px);
+  border-bottom-left-radius:var(--radius-fields-button-field-l, 14px);
+  padding-left:var(--space-fields-single-line-container-l-left, 10px);
+  padding-right:var(--dimension-theme-general-0px, 0px);
+  gap:var(--space-fields-single-line-container-l-gap, 8px);
+  min-height:var(--size-fields-button-field-l, 44px);
+}
+.buttonField[data-variant=after][data-size=s]{
+  border-top-right-radius:var(--radius-fields-button-field-s, 10px);
+  border-bottom-right-radius:var(--radius-fields-button-field-s, 10px);
+  border-top-left-radius:var(--dimension-theme-general-0px, 0px);
+  border-bottom-left-radius:var(--dimension-theme-general-0px, 0px);
+  padding-left:var(--dimension-theme-general-0px, 0px);
+  padding-right:var(--space-fields-single-line-container-s-right, 6px);
+  gap:var(--space-fields-single-line-container-s-gap, 4px);
+  min-height:var(--size-fields-button-field-s, 28px);
+}
+.buttonField[data-variant=after][data-size=m]{
+  border-top-right-radius:var(--radius-fields-button-field-m, 12px);
+  border-bottom-right-radius:var(--radius-fields-button-field-m, 12px);
+  border-top-left-radius:var(--dimension-theme-general-0px, 0px);
+  border-bottom-left-radius:var(--dimension-theme-general-0px, 0px);
+  padding-left:var(--dimension-theme-general-0px, 0px);
+  padding-right:var(--space-fields-single-line-container-m-right, 8px);
+  gap:var(--space-fields-single-line-container-m-gap, 4px);
+  min-height:var(--size-fields-button-field-m, 36px);
+}
+.buttonField[data-variant=after][data-size=l]{
+  border-top-right-radius:var(--radius-fields-button-field-l, 14px);
+  border-bottom-right-radius:var(--radius-fields-button-field-l, 14px);
+  border-top-left-radius:var(--dimension-theme-general-0px, 0px);
+  border-bottom-left-radius:var(--dimension-theme-general-0px, 0px);
+  padding-left:var(--dimension-theme-general-0px, 0px);
+  padding-right:var(--space-fields-single-line-container-l-right, 10px);
+  gap:var(--space-fields-single-line-container-l-gap, 8px);
+  min-height:var(--size-fields-button-field-l, 44px);
+}
+.buttonField:hover{
+  cursor:pointer;
+  background:color-mix(in srgb, var(--sys-neutral-accent-default, #787b8a), var(--sys-neutral-background1-level, #fdfdfd) calc((1 - var(--opacity-a008, 0.08)) * 100%));
+}
+.buttonField:focus-visible, .buttonField[data-arrow-open]{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  background:color-mix(in srgb, var(--sys-neutral-accent-default, #787b8a), var(--sys-neutral-background1-level, #fdfdfd) calc((1 - var(--opacity-a008, 0.08)) * 100%));
+  outline-color:var(--sys-primary-accent-default, #794ed3);
+}
+.buttonField[data-disabled]{
+  cursor:not-allowed;
+  opacity:var(--opacity-a056, 0.56);
+  background-color:transparent;
+}
+
+.divider{
+  align-self:stretch;
+  height:auto;
+}
+
+.content{
+  display:inline-flex;
+}

package/dist/helperComponents/ButtonFieldList/ButtonFieldList.d.ts

@@ -0,0 +1,4 @@
+import { ButtonFieldProps } from '../ButtonField';
+export declare const ButtonFieldList: import("react").ForwardRefExoticComponent<Omit<ButtonFieldProps, "hasArrow" | "arrowOpen"> & Pick<import("@snack-uikit/list").DroplistProps, "open" | "onOpenChange" | "items"> & {
+    selection?: Omit<import("@snack-uikit/list").SelectionSingleState, "mode">;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/helperComponents/ButtonFieldList/ButtonFieldList.js

@@ -0,0 +1,27 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { Droplist } from '@snack-uikit/list';
+import { ButtonField } from '../ButtonField';
+import { getPlacement } from './helpers';
+import styles from './styles.module.css';
+export const ButtonFieldList = forwardRef((_a, ref) => {
+    var { items, selection, open, onOpenChange } = _a, rest = __rest(_a, ["items", "selection", "open", "onOpenChange"]);
+    const [isOpen, setIsOpen] = useUncontrolledProp(open, false, onOpenChange);
+    const placement = getPlacement(rest);
+    return (_jsx(Droplist, { "data-test-id": 'button-field-list', items: items, selection: Object.assign({ mode: 'single' }, selection), open: isOpen, onOpenChange: setIsOpen, closeDroplistOnItemClick: true, 
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        triggerElemRef: ref, size: rest.size, placement: placement, children: _jsx(ButtonField, Object.assign({}, rest, { hasArrow: true, arrowOpen: isOpen, className: styles.triggerClassName })) }));
+});

package/dist/helperComponents/ButtonFieldList/helpers.d.ts

@@ -0,0 +1,5 @@
+import { DroplistProps } from '@snack-uikit/list';
+import { ButtonVariant } from '../../types';
+export declare function getPlacement({ variant }: {
+    variant?: ButtonVariant;
+}): DroplistProps['placement'];

package/dist/helperComponents/ButtonFieldList/helpers.js

@@ -0,0 +1,8 @@
+export function getPlacement({ variant }) {
+    if (variant === 'before') {
+        return 'bottom-start';
+    }
+    if (variant === 'after') {
+        return 'bottom-end';
+    }
+}

package/dist/helperComponents/ButtonFieldList/index.d.ts

@@ -0,0 +1 @@
+export * from './ButtonFieldList';

package/dist/helperComponents/ButtonFieldList/index.js

@@ -0,0 +1 @@
+export * from './ButtonFieldList';

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

@@ -0,0 +1,3 @@
+.triggerClassName{
+  --offset:var(--space-drop-list-drop-offset, 4px);
+}

package/dist/helperComponents/FieldContainerPrivate/FieldContainerPrivate.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactElement, ReactNode, RefObject } from 'react';
+import { CSSProperties, ReactNode, RefObject } from 'react';
 import { Size } from '@snack-uikit/input-private';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { ContainerVariant, ValidationState } from '../../types';
@@ -11,10 +11,11 @@ export type FieldContainerPrivateProps = WithSupportProps<{
     disabled: boolean;
     readonly: boolean;
     focused?: boolean;
+    disableFocus?: boolean;
     selectable?: boolean;
     style?: CSSProperties;
-    prefix?: ReactElement;
-    postfix?: ReactElement;
+    prefix?: ReactNode;
+    postfix?: ReactNode;
     inputRef: RefObject<HTMLElement>;
 }>;
-export declare function FieldContainerPrivate({ className, children, size, validationState, variant, disabled, readonly, focused, selectable, style, prefix, postfix, inputRef, ...rest }: FieldContainerPrivateProps): import("react/jsx-runtime").JSX.Element;
+export declare function FieldContainerPrivate({ className, children, size, validationState, variant, disabled, readonly, focused, disableFocus, selectable, style, prefix, postfix, inputRef, ...rest }: FieldContainerPrivateProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/FieldContainerPrivate/FieldContainerPrivate.js

@@ -15,7 +15,7 @@ import { extractSupportProps } from '@snack-uikit/utils';
 import { VALIDATION_STATE } from '../../constants';
 import styles from './styles.module.css';
 export function FieldContainerPrivate(_a) {
-    var { className, children, size, validationState, variant, disabled, readonly, focused, selectable, style, prefix, postfix, inputRef } = _a, rest = __rest(_a, ["className", "children", "size", "validationState", "variant", "disabled", "readonly", "focused", "selectable", "style", "prefix", "postfix", "inputRef"]);
+    var { className, children, size, validationState, variant, disabled, readonly, focused, disableFocus, selectable, style, prefix, postfix, inputRef } = _a, rest = __rest(_a, ["className", "children", "size", "validationState", "variant", "disabled", "readonly", "focused", "disableFocus", "selectable", "style", "prefix", "postfix", "inputRef"]);
     const handleContainerClick = () => {
         var _a;
         if (disabled) {
@@ -23,5 +23,5 @@ export function FieldContainerPrivate(_a) {
         }
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    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, 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 })] })));
+    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-disable-focus": disableFocus || undefined, "data-selectable": selectable || undefined, "data-test-id": 'field-container-private', onClick: handleContainerClick, 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 })] })));
 }

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

@@ -14,7 +14,7 @@
   background-color:var(--sys-neutral-background2-level, #ffffff);
   border-color:var(--sys-primary-decor-hovered, #decdfb);
 }
-.container[data-validation=default]:not([data-readonly]):focus-within:not([data-disabled]), .container[data-validation=default]:not([data-readonly])[data-focused]:not([data-disabled]){
+.container[data-validation=default]:not([data-readonly]):not([data-disable-focus]):focus-within:not([data-disabled]), .container[data-validation=default]:not([data-readonly]):not([data-disable-focus])[data-focused]:not([data-disabled]){
   outline-width:var(--border-state-focus-m-border-width, 3px);
   outline-style:var(--border-state-focus-m-border-style, solid);
   outline-color:var(--border-state-focus-m-border-color, );
@@ -30,7 +30,7 @@
   background-color:var(--sys-neutral-background2-level, #ffffff);
   border-color:var(--sys-red-decor-hovered, #fac1b3);
 }
-.container[data-validation=error]:not([data-readonly]):focus-within:not([data-disabled]), .container[data-validation=error]:not([data-readonly])[data-focused]:not([data-disabled]){
+.container[data-validation=error]:not([data-readonly]):not([data-disable-focus]):focus-within:not([data-disabled]), .container[data-validation=error]:not([data-readonly]):not([data-disable-focus])[data-focused]:not([data-disabled]){
   outline-width:var(--border-state-focus-m-border-width, 3px);
   outline-style:var(--border-state-focus-m-border-style, solid);
   outline-color:var(--border-state-focus-m-border-color, );
@@ -46,7 +46,7 @@
   background-color:var(--sys-neutral-background2-level, #ffffff);
   border-color:var(--sys-yellow-decor-hovered, #ead49a);
 }
-.container[data-validation=warning]:not([data-readonly]):focus-within:not([data-disabled]), .container[data-validation=warning]:not([data-readonly])[data-focused]:not([data-disabled]){
+.container[data-validation=warning]:not([data-readonly]):not([data-disable-focus]):focus-within:not([data-disabled]), .container[data-validation=warning]:not([data-readonly]):not([data-disable-focus])[data-focused]:not([data-disabled]){
   outline-width:var(--border-state-focus-m-border-width, 3px);
   outline-style:var(--border-state-focus-m-border-style, solid);
   outline-color:var(--border-state-focus-m-border-color, );
@@ -62,7 +62,7 @@
   background-color:var(--sys-neutral-background2-level, #ffffff);
   border-color:var(--sys-green-decor-hovered, #c0e1ba);
 }
-.container[data-validation=success]:not([data-readonly]):focus-within:not([data-disabled]), .container[data-validation=success]:not([data-readonly])[data-focused]:not([data-disabled]){
+.container[data-validation=success]:not([data-readonly]):not([data-disable-focus]):focus-within:not([data-disabled]), .container[data-validation=success]:not([data-readonly]):not([data-disable-focus])[data-focused]:not([data-disabled]){
   outline-width:var(--border-state-focus-m-border-width, 3px);
   outline-style:var(--border-state-focus-m-border-style, solid);
   outline-color:var(--border-state-focus-m-border-color, );
@@ -94,6 +94,22 @@
   padding-right:var(--space-fields-single-line-container-s-right, 6px);
   height:var(--size-fields-s, 32px);
 }
+.container[data-size=s][data-variant=single-line-container-button-before]{
+  border-radius:var(--radius-fields-s, 12px);
+  border-width:var(--border-width-fields-single, 2px);
+  padding-left:var(--space-fields-single-line-container-s-button, 0px);
+  gap:var(--space-fields-single-line-container-s-gap, 4px);
+  padding-right:var(--space-fields-single-line-container-s-right, 6px);
+  height:var(--size-fields-s, 32px);
+}
+.container[data-size=s][data-variant=single-line-container-button-after]{
+  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-button, 0px);
+  height:var(--size-fields-s, 32px);
+}
 .container[data-size=s][data-variant=multi-line-container]{
   border-radius:var(--radius-fields-s, 12px);
   border-width:var(--border-width-fields-single, 2px);
@@ -126,6 +142,22 @@
   padding-right:var(--space-fields-single-line-container-m-right, 8px);
   height:var(--size-fields-m, 40px);
 }
+.container[data-size=m][data-variant=single-line-container-button-before]{
+  border-radius:var(--radius-fields-m, 14px);
+  border-width:var(--border-width-fields-single, 2px);
+  padding-left:var(--space-fields-single-line-container-m-button, 0px);
+  gap:var(--space-fields-single-line-container-m-gap, 4px);
+  padding-right:var(--space-fields-single-line-container-m-right, 8px);
+  height:var(--size-fields-m, 40px);
+}
+.container[data-size=m][data-variant=single-line-container-button-after]{
+  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-button, 0px);
+  height:var(--size-fields-m, 40px);
+}
 .container[data-size=m][data-variant=multi-line-container]{
   border-radius:var(--radius-fields-m, 14px);
   border-width:var(--border-width-fields-single, 2px);
@@ -158,6 +190,22 @@
   padding-right:var(--space-fields-single-line-container-l-right, 10px);
   height:var(--size-fields-l, 48px);
 }
+.container[data-size=l][data-variant=single-line-container-button-before]{
+  border-radius:var(--radius-fields-l, 16px);
+  border-width:var(--border-width-fields-single, 2px);
+  padding-left:var(--space-fields-single-line-container-l-button, 0px);
+  gap:var(--space-fields-single-line-container-l-gap, 8px);
+  padding-right:var(--space-fields-single-line-container-l-right, 10px);
+  height:var(--size-fields-l, 48px);
+}
+.container[data-size=l][data-variant=single-line-container-button-after]{
+  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-button, 0px);
+  height:var(--size-fields-l, 48px);
+}
 .container[data-size=l][data-variant=multi-line-container]{
   border-radius:var(--radius-fields-l, 16px);
   border-width:var(--border-width-fields-single, 2px);
@@ -184,7 +232,7 @@
   background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
   border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
 }
-.container[data-readonly]:focus-within, .container[data-readonly][data-focused]{
+.container[data-readonly]:not([data-disable-focus]):focus-within, .container[data-readonly]:not([data-disable-focus])[data-focused]{
   outline-width:var(--border-state-focus-m-border-width, 3px);
   outline-style:var(--border-state-focus-m-border-style, solid);
   outline-color:var(--border-state-focus-m-border-color, );
@@ -209,6 +257,8 @@
 .prefix{
   display:inline-flex;
   flex-shrink:0;
+  gap:var(--space-fields-postfix-gap, 4px);
+  align-items:center;
   color:var(--sys-neutral-text-disabled, #aaaebd);
 }
 
@@ -216,4 +266,5 @@
   display:inline-flex;
   flex-shrink:0;
   gap:var(--space-fields-postfix-gap, 4px);
+  align-items:center;
 }

package/dist/helperComponents/index.d.ts

@@ -1,4 +1,6 @@
 export * from './ButtonCopyValue';
+export * from './ButtonField';
+export * from './ButtonFieldList';
 export * from './ButtonHideValue';
 export * from './FieldContainerPrivate';
 export * from './TextArea';

package/dist/helperComponents/index.js

@@ -1,4 +1,6 @@
 export * from './ButtonCopyValue';
+export * from './ButtonField';
+export * from './ButtonFieldList';
 export * from './ButtonHideValue';
 export * from './FieldContainerPrivate';
 export * from './TextArea';

package/dist/hooks/index.d.ts

@@ -1,3 +1,7 @@
 export * from './useCopyButton';
 export * from './useHideButton';
+export * from './usePostfix';
+export * from './usePostfixButton';
+export * from './usePrefix';
+export * from './usePrefixButton';
 export * from './useValueControl';

package/dist/hooks/index.js

@@ -1,3 +1,7 @@
 export * from './useCopyButton';
 export * from './useHideButton';
+export * from './usePostfix';
+export * from './usePostfixButton';
+export * from './usePrefix';
+export * from './usePrefixButton';
 export * from './useValueControl';

package/dist/hooks/styles.module.css

@@ -0,0 +1,13 @@
+.prefix{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.prefix[data-disabled]{
+  opacity:var(--opacity-a056, 0.56);
+}
+
+.postfix{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.postfix[data-disabled]{
+  opacity:var(--opacity-a056, 0.56);
+}

package/dist/hooks/useCopyButton.d.ts

@@ -8,6 +8,8 @@ type UseCopyButtonProps = {
     size: Size;
     onValueRequest?(): AsyncValueRequest;
     disabled?: boolean;
+    prefix?: string;
+    postfix?: string;
 };
-export declare function useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy, onValueRequest, disabled, }: UseCopyButtonProps): ButtonProps;
+export declare function useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy, onValueRequest, disabled, prefix, postfix, }: UseCopyButtonProps): ButtonProps;
 export {};

package/dist/hooks/useCopyButton.js

@@ -2,11 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { BUTTON_SIZE_MAP } from '@snack-uikit/input-private';
 import { ButtonCopyValue } from '../helperComponents';
-export function useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy, onValueRequest, disabled, }) {
+export function useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy, onValueRequest, disabled, prefix, postfix, }) {
     return useMemo(() => ({
         id: 'copy',
+        active: true,
         ref: copyButtonRef,
         show: showCopyButton,
-        render: props => (_jsx(ButtonCopyValue, Object.assign({}, props, { size: BUTTON_SIZE_MAP[size], valueToCopy: valueToCopy, onValueRequest: onValueRequest, disabled: disabled }))),
-    }), [copyButtonRef, disabled, onValueRequest, showCopyButton, size, valueToCopy]);
+        render: props => (_jsx(ButtonCopyValue, Object.assign({}, props, { size: BUTTON_SIZE_MAP[size], valueToCopy: prefix + valueToCopy + postfix, onValueRequest: onValueRequest, disabled: disabled }))),
+    }), [copyButtonRef, disabled, onValueRequest, showCopyButton, size, valueToCopy, prefix, postfix]);
 }

package/dist/hooks/useHideButton.js

@@ -7,6 +7,7 @@ export function useHideButton({ hideButtonRef, showHideButton, size, toggleHidde
     const toggleHiddenEventHandler = useEventHandler(toggleHidden);
     return useMemo(() => ({
         id: 'hide',
+        active: true,
         ref: hideButtonRef,
         show: showHideButton,
         render: props => {

package/dist/hooks/usePostfix.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { InactiveItem } from '@snack-uikit/input-private';
+export declare function usePostfix({ postfix, disabled }: {
+    postfix?: ReactNode;
+    disabled?: boolean;
+}): InactiveItem;