@cloud-ru/ds-fields 1.0.0

package/dist/esm/components/shared/helperComponents/FieldElementButton/FieldElementButtonList.d.ts

@@ -0,0 +1,26 @@
+import { DroplistProps } from '@cloud-ru/ds-list';
+import { FieldElementButtonProps } from './FieldElementButton.js';
+/**
+ * Конфигурация встроенного выпадающего списка (действия / выбор) на `@cloud-ru/ds-list` `Droplist`.
+ */
+export type FieldElementDroplistProps = Pick<DroplistProps, 'items' | 'pinTop' | 'pinBottom' | 'selection' | 'search' | 'scroll' | 'scrollToSelectedItem' | 'placement' | 'widthStrategy' | 'virtualized' | 'closeDroplistOnItemClick'> & {
+    /** Контролируемое состояние раскрытия */
+    open?: boolean;
+    /** Колбек смены состояния раскрытия */
+    onOpenChange?(open: boolean): void;
+};
+export type FieldElementButtonListProps = Omit<FieldElementButtonProps, 'open' | 'withDropdownList'> & {
+    /** Параметры встроенного выпадающего списка */
+    droplist: FieldElementDroplistProps;
+};
+/**
+ * Кнопка-слот поля со встроенным выпадающим списком на `@cloud-ru/ds-list` `Droplist`.
+ *
+ * Триггером выступает `FieldElementButton`, список раскрывается кликом (`trigger='click'`),
+ * шеврон следует за фактическим `open`, навигация ArrowDown/ArrowUp передаётся `Droplist`'ом
+ * в триггер.
+ */
+export declare const FieldElementButtonList: import("react").ForwardRefExoticComponent<Omit<FieldElementButtonProps, "open" | "withDropdownList"> & {
+    /** Параметры встроенного выпадающего списка */
+    droplist: FieldElementDroplistProps;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/esm/components/shared/helperComponents/FieldElementButton/FieldElementButtonList.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Droplist } from '@cloud-ru/ds-list';
+import { useValueControl } from '@cloud-ru/ds-utils';
+import { forwardRef } from 'react';
+import { FieldElementButton } from './FieldElementButton.js';
+/**
+ * Кнопка-слот поля со встроенным выпадающим списком на `@cloud-ru/ds-list` `Droplist`.
+ *
+ * Триггером выступает `FieldElementButton`, список раскрывается кликом (`trigger='click'`),
+ * шеврон следует за фактическим `open`, навигация ArrowDown/ArrowUp передаётся `Droplist`'ом
+ * в триггер.
+ */
+export const FieldElementButtonList = forwardRef(function FieldElementButtonList({ droplist, size, onKeyDown, ...buttonProps }, ref) {
+    const { open: openProp, onOpenChange, closeDroplistOnItemClick, ...droplistProps } = droplist;
+    const [open = false, setOpen] = useValueControl({
+        value: openProp,
+        defaultValue: false,
+        onChange: onOpenChange,
+    });
+    return (_jsx(Droplist, { ...droplistProps, trigger: 'click', size: size, open: open, onOpenChange: setOpen, closeDroplistOnItemClick: closeDroplistOnItemClick ?? true, children: _jsx(FieldElementButton, { ...buttonProps, ref: ref, size: size, withDropdownList: true, open: open, onKeyDown: (event) => onKeyDown?.(event) }) }));
+});

package/dist/esm/components/shared/helperComponents/FieldElementButton/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const VARIANT: {
+    readonly Before: "before";
+    readonly After: "after";
+};
+export declare const BUTTON_SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};

package/dist/esm/components/shared/helperComponents/FieldElementButton/constants.js

@@ -0,0 +1,9 @@
+export const VARIANT = {
+    Before: 'before',
+    After: 'after',
+};
+export const BUTTON_SIZE = {
+    S: 's',
+    M: 'm',
+    L: 'l',
+};

package/dist/esm/components/shared/helperComponents/FieldElementButton/index.d.ts

@@ -0,0 +1,4 @@
+export * from './FieldElementButton.js';
+export * from './FieldElementButtonList.js';
+export * from './constants.js';
+export * from './types.js';

package/dist/esm/components/shared/helperComponents/FieldElementButton/index.js

@@ -0,0 +1,4 @@
+export * from './FieldElementButton.js';
+export * from './FieldElementButtonList.js';
+export * from './constants.js';
+export * from './types.js';

package/dist/esm/components/shared/helperComponents/FieldElementButton/styles.module.css

@@ -0,0 +1,204 @@
+@charset "UTF-8";
+.chevron{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+}
+
+.elementWrapper{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+
+.backgroundStateLayer{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+  visibility:initial;
+}
+
+.focusLayer{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  display:none;
+  border-radius:inherit;
+  outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  outline-offset:calc(0px - var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
+}
+
+.buttonContainer{
+  cursor:pointer;
+  position:relative;
+  display:flex;
+  align-items:center;
+  align-self:stretch;
+  justify-content:center;
+  margin:0;
+  padding:0;
+  border:none;
+  background:none;
+}
+.buttonContainer[data-size=s]{
+  min-width:var(--sn-field-anatomy-size-s-buttonField-container-minWidth, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
+  border-radius:var(--sn-field-anatomy-size-s-buttonField-container-borderRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
+  padding-left:var(--sn-field-anatomy-size-s-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding-right:var(--sn-field-anatomy-size-s-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+}
+.buttonContainer[data-size=s][data-variant=before]{
+  border-radius:var(--sn-field-anatomy-size-s-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) 0 0 var(--sn-field-anatomy-size-s-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
+}
+.buttonContainer[data-size=s][data-variant=after]{
+  border-radius:0 var(--sn-field-anatomy-size-s-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-s-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) 0;
+}
+.buttonContainer[data-size=s] .elementWrapper{
+  gap:var(--sn-field-anatomy-size-s-buttonField-elementWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+}
+.buttonContainer[data-size=s] .elementWrapper svg{
+  max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+}
+.buttonContainer[data-size=m]{
+  min-width:var(--sn-field-anatomy-size-m-buttonField-container-minWidth, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
+  padding-left:var(--sn-field-anatomy-size-m-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  padding-right:var(--sn-field-anatomy-size-m-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  border-radius:var(--sn-field-anatomy-size-m-buttonField-container-borderRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px)));
+}
+.buttonContainer[data-size=m][data-variant=before]{
+  border-radius:var(--sn-field-anatomy-size-m-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) 0 0 var(--sn-field-anatomy-size-m-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px)));
+}
+.buttonContainer[data-size=m][data-variant=after]{
+  border-radius:0 var(--sn-field-anatomy-size-m-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-m-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) 0;
+}
+.buttonContainer[data-size=m] .elementWrapper{
+  gap:var(--sn-field-anatomy-size-m-buttonField-elementWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+}
+.buttonContainer[data-size=m] .elementWrapper svg{
+  max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+}
+.buttonContainer[data-size=l]{
+  min-width:var(--sn-field-anatomy-size-l-buttonField-container-minWidth, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
+  padding-left:var(--sn-field-anatomy-size-l-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  padding-right:var(--sn-field-anatomy-size-l-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  border-radius:var(--sn-field-anatomy-size-l-buttonField-container-borderRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px)));
+}
+.buttonContainer[data-size=l][data-variant=before]{
+  border-radius:var(--sn-field-anatomy-size-l-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) 0 0 var(--sn-field-anatomy-size-l-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px)));
+}
+.buttonContainer[data-size=l][data-variant=after]{
+  border-radius:0 var(--sn-field-anatomy-size-l-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-l-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) 0;
+}
+.buttonContainer[data-size=l] .elementWrapper{
+  gap:var(--sn-field-anatomy-size-l-buttonField-elementWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+}
+.buttonContainer[data-size=l] .elementWrapper svg{
+  max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true]){
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=borderOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=emptyNeutralOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=activatedOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=versionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=emptyVersionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyVersionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=inversionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=inversionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=emptyInversionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyInversionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=emptyDarkOnAccent], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyDarkOnAccent], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+.buttonContainer[data-disabled=true] .elementWrapper{
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+.buttonContainer[data-loading=true], .buttonContainer[data-disabled=true]{
+  cursor:not-allowed;
+}
+.buttonContainer[data-loading=true] .backgroundStateLayer, .buttonContainer[data-disabled=true] .backgroundStateLayer{
+  visibility:hidden;
+}
+.buttonContainer:not([data-disabled=true])[data-loading=true]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.buttonContainer:focus-visible{
+  outline:none;
+}
+.buttonContainer:focus-visible .focusLayer{
+  display:block;
+}

package/dist/esm/components/shared/helperComponents/FieldElementButton/types.d.ts

@@ -0,0 +1,4 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { BUTTON_SIZE, VARIANT } from './constants.js';
+export type ButtonSize = ValueOf<typeof BUTTON_SIZE>;
+export type Variant = ValueOf<typeof VARIANT>;

package/dist/esm/components/shared/helperComponents/FieldElementButton/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/shared/helperComponents/FieldShell/FieldShell.d.ts

@@ -0,0 +1,43 @@
+import { Size, ValidationState } from '@cloud-ru/ds-field-decorator';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { CSSProperties, ReactNode } from 'react';
+export type FieldShellProps = WithSupportProps<{
+    /** Контент поля (input / scroll / редактор). Рендерится в fieldContainer между header и footer. */
+    children: ReactNode;
+    /** Размер поля */
+    size?: Size;
+    /** Состояние валидации — тонирует acrylic-фон */
+    validationState?: ValidationState;
+    /** Поле выключено */
+    disabled?: boolean;
+    /** Только для чтения */
+    readonly?: boolean;
+    /**
+     * Acrylic-фон поля
+     * @default true
+     */
+    background?: boolean;
+    /** Виден ли клавиатурный фокус (управляется потребителем по `:focus-visible` контента) */
+    focusVisible?: boolean;
+    /** Hover поля (управляется потребителем) */
+    hover?: boolean;
+    /** Ряд элементов над контентом (тулбар, чипы) */
+    header?: ReactNode;
+    /** Ряд элементов под контентом (действия, счётчик) */
+    footer?: ReactNode;
+    /** CSS-класс оболочки (fieldWrapper) */
+    className?: string;
+    /** Inline-стиль оболочки (например, CSS-переменные высоты) */
+    style?: CSSProperties;
+    /** Колбек входа курсора в поле */
+    onMouseEnter?(): void;
+    /** Колбек выхода курсора из поля */
+    onMouseLeave?(): void;
+}>;
+/**
+ * Визуальная оболочка поля: слои material/border/focus + контейнер со слотами
+ * header / content / footer. Единый source-of-truth shell'а для `FieldTextArea` и
+ * потребителей с кастомным контентом (например, WYSIWYG-редактор), которым нужен
+ * тот же внешний вид, но не подходит нативный `<textarea>`.
+ */
+export declare function FieldShell({ children, size, validationState, disabled, readonly: readOnly, background, focusVisible, hover, header, footer, className, style, onMouseEnter, onMouseLeave, ...rest }: FieldShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/shared/helperComponents/FieldShell/FieldShell.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SIZE, VALIDATION_STATE } from '@cloud-ru/ds-field-decorator';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import fieldStyles from '../../styles.module.css';
+import { getAcrylicProps } from '../../utils.js';
+import styles from './styles.module.css';
+/**
+ * Визуальная оболочка поля: слои material/border/focus + контейнер со слотами
+ * header / content / footer. Единый source-of-truth shell'а для `FieldTextArea` и
+ * потребителей с кастомным контентом (например, WYSIWYG-редактор), которым нужен
+ * тот же внешний вид, но не подходит нативный `<textarea>`.
+ */
+export function FieldShell({ children, size = SIZE.M, validationState = VALIDATION_STATE.Default, disabled, readonly: readOnly, background = true, focusVisible, hover, header, footer, className, style, onMouseEnter, onMouseLeave, ...rest }) {
+    return (_jsxs("div", { ...extractSupportProps(rest), className: cn(fieldStyles.fieldWrapper, className), "data-size": size, "data-validation-state": validationState, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-withbackground": background || undefined, "data-focusvisible": focusVisible || undefined, "data-hover": !readOnly && hover ? true : undefined, style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [_jsxs("div", { className: fieldStyles.backgroundWrapper, children: [_jsx("div", { className: fieldStyles.materialLayer, ...getAcrylicProps({ validationState, disabled, readonly: readOnly, hover, focusVisible }), children: _jsx("div", { className: fieldStyles.acrylicBg, "aria-hidden": true }) }), _jsx("div", { className: fieldStyles.borderStateLayer, "data-state": 'borderOnBackground' }), _jsx("div", { className: fieldStyles.focusLayer })] }), header && _jsx("div", { className: styles.header, children: header }), _jsx("div", { className: fieldStyles.fieldContainer, children: children }), footer && _jsx("div", { className: styles.footer, children: footer })] }));
+}

package/dist/esm/components/shared/helperComponents/FieldShell/index.d.ts

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

package/dist/esm/components/shared/helperComponents/FieldShell/index.js

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

package/dist/esm/components/shared/helperComponents/FieldShell/styles.module.css

@@ -0,0 +1,11 @@
+.header{
+  display:flex;
+  align-items:center;
+  align-self:stretch;
+}
+
+.footer{
+  display:flex;
+  align-items:center;
+  align-self:stretch;
+}

package/dist/esm/components/shared/hooks/useCopyButton.d.ts

@@ -0,0 +1,20 @@
+import { ButtonProps, Size as InputPrivateSize } from '@cloud-ru/ds-input-private';
+import { MouseEvent, RefObject } from 'react';
+type UseCopyButtonProps = {
+    copyButtonRef: RefObject<HTMLButtonElement | null>;
+    showCopyButton: boolean;
+    /**
+     * Колбек копирования. Возвращает `true`, если значение скопировано (для асинхронного
+     * источника — `Promise<boolean>`). Галочка показывается только при успехе.
+     */
+    onCopy(event: MouseEvent<HTMLButtonElement>): boolean | Promise<boolean>;
+    size: InputPrivateSize;
+    disabled?: boolean;
+    /** data-test-id кнопки. Переопределяется полем, когда у него свой публичный id слота. */
+    dataTestId?: string;
+};
+/**
+ * Кнопка «Копировать» для postfix (аналогично useClearButton в input-private).
+ */
+export declare function useCopyButton({ copyButtonRef, showCopyButton, onCopy, size, disabled, dataTestId, }: UseCopyButtonProps): ButtonProps;
+export {};

package/dist/esm/components/shared/hooks/useCopyButton.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@cloud-ru/ds-button';
+import { CheckSVG, CopySVG } from '@cloud-ru/ds-icons/interface/system';
+import { BUTTON_SIZE_MAP } from '@cloud-ru/ds-input-private';
+import { useEventHandler } from '@cloud-ru/ds-utils';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { TEST_IDS } from '../../../constants.js';
+// Длительность визуальной обратной связи «скопировано» (галочка вместо иконки копирования).
+const COPIED_FEEDBACK_MS = 2000;
+/**
+ * Кнопка «Копировать» для postfix (аналогично useClearButton в input-private).
+ */
+export function useCopyButton({ copyButtonRef, showCopyButton, onCopy, size, disabled, dataTestId = TEST_IDS.fieldTextCopyButton, }) {
+    const copyEventHandler = useEventHandler(onCopy);
+    const [copied, setCopied] = useState(false);
+    const timerRef = useRef(undefined);
+    useEffect(() => () => {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+    }, []);
+    return useMemo(() => ({
+        id: 'copy',
+        active: true,
+        ref: copyButtonRef,
+        show: showCopyButton,
+        render: ({ key, tabIndex, ref, onKeyDown, ...props }) => {
+            const markCopied = () => {
+                setCopied(true);
+                if (timerRef.current) {
+                    clearTimeout(timerRef.current);
+                }
+                timerRef.current = setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);
+            };
+            const handleCopy = event => {
+                event.stopPropagation();
+                props.onClick(event);
+                // Галочку показываем только при успешном копировании (паритет с легаси ButtonCopyValue).
+                const result = copyEventHandler(event);
+                if (typeof result === 'boolean') {
+                    if (result) {
+                        markCopied();
+                    }
+                    return;
+                }
+                result.then(success => {
+                    if (success) {
+                        markCopied();
+                    }
+                });
+            };
+            return (_jsx(Button, { innerRef: ref, type: 'button', view: 'function', appearance: 'neutral', disabled: disabled, size: BUTTON_SIZE_MAP[size], icon: copied ? _jsx(CheckSVG, {}) : _jsx(CopySVG, {}), onClick: handleCopy, tabIndex: tabIndex, onKeyDown: onKeyDown, "data-test-id": dataTestId }, key));
+        },
+    }), [copied, copyButtonRef, copyEventHandler, dataTestId, disabled, showCopyButton, size]);
+}

package/dist/esm/components/shared/index.d.ts

@@ -0,0 +1,4 @@
+export * from './helperComponents/FieldElementButton/index.js';
+export * from './helperComponents/FieldShell/index.js';
+export * from './hooks/useCopyButton.js';
+export * from './utils.js';

package/dist/esm/components/shared/index.js

@@ -0,0 +1,4 @@
+export * from './helperComponents/FieldElementButton/index.js';
+export * from './helperComponents/FieldShell/index.js';
+export * from './hooks/useCopyButton.js';
+export * from './utils.js';