@evergis/uilib-gl 1.0.136 → 1.0.138

package/dist/molecules/ColorInput/styled.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const Input: import("styled-components").StyledComponent<import("react").ComponentType<any>, import("styled-components").DefaultTheme, {}, never>;
-export declare const TextButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../IconButton").IconButtonProps, never>;
+export declare const TextButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../IconButton").IconButtonProps & import("../IconButton").IconButtonVariantStyleProps, never>;

package/dist/molecules/CustomToggles/styled.d.ts

@@ -4,4 +4,4 @@ export declare const FadingIcon: import("styled-components").StyledComponent<"sp
 export interface ICustomToggleProps extends IconButtonProps {
     isSelected?: boolean;
 }
-export declare const CustomToggle: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, IconButtonProps & ICustomToggleProps, never>;
+export declare const CustomToggle: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, IconButtonProps & import("../IconButton").IconButtonVariantStyleProps & ICustomToggleProps, never>;

package/dist/molecules/Expander/styled.d.ts

@@ -1 +1 @@
-export declare const RotatingButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../IconButton").IconButtonProps & import("../CustomToggles").ICustomToggleProps, never>;
+export declare const RotatingButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../IconButton").IconButtonProps & import("../IconButton").IconButtonVariantStyleProps & import("../CustomToggles").ICustomToggleProps, never>;

package/dist/molecules/IconButton/constants.d.ts

@@ -0,0 +1,9 @@
+import { IconTypesKeys } from "../../atoms/Icon";
+import { IconButtonShape, IconButtonSize, IconButtonVariant } from "./types";
+export declare const ICON_BUTTON_VARIANTS: IconButtonVariant[];
+export declare const ICON_BUTTON_SIZES: IconButtonSize[];
+export declare const ICON_BUTTON_SHAPES: IconButtonShape[];
+export declare const DEFAULT_ICON_BUTTON_VARIANT: IconButtonVariant;
+export declare const DEFAULT_ICON_BUTTON_SIZE: IconButtonSize;
+export declare const DEFAULT_ICON_BUTTON_SHAPE: IconButtonShape;
+export declare const ICON_BUTTON_CHEVRON_KIND: IconTypesKeys;

package/dist/molecules/IconButton/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./IconButton";
 export * from "./styled";
 export * from "./types";
+export * from "./constants";
+export { getIconButtonColors } from "./utils";

package/dist/molecules/IconButton/styled.d.ts

@@ -1,4 +1,4 @@
-import { IconButtonProps } from "./types";
-export declare const IconButtonInnerChild: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+import { IconButtonProps, IconButtonVariantStyleProps } from "./types";
+export { IconButtonChevron, IconButtonInnerChild } from "./styledParts";
 export declare const buttonMixin: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<IconButtonProps, import("styled-components").DefaultTheme>>;
-export declare const IconButtonButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, IconButtonProps, never>;
+export declare const IconButtonButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, IconButtonProps & IconButtonVariantStyleProps, never>;

package/dist/molecules/IconButton/styledParts.d.ts

@@ -0,0 +1,4 @@
+export declare const IconButtonInnerChild: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const IconButtonChevron: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../atoms/Icon").IIconProps & {
+    $open?: boolean | undefined;
+}, never>;

package/dist/molecules/IconButton/types.d.ts

@@ -1,16 +1,38 @@
-import { ButtonHTMLAttributes, ReactNode, MouseEvent } from "react";
+import { ButtonHTMLAttributes, MouseEvent, ReactNode } from "react";
 import { IconTypesKeys } from "../../atoms/Icon";
+import { IconButtonSizeKey } from "../../theme/ITheme";
+export declare type IconButtonVariant = "solid" | "soft" | "outline" | "ghost";
+export declare type IconButtonAccentColor = "primary" | "secondary" | "error" | "violet";
+export declare type IconButtonColorKey = IconButtonAccentColor | "neutral";
+export declare type IconButtonSize = IconButtonSizeKey;
+export declare type IconButtonShape = "square" | "round";
 export interface IIconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     kind?: IconTypesKeys;
     primary?: boolean;
     secondary?: boolean;
     error?: boolean;
+    violet?: boolean;
     tabIndex?: number;
     innerRef?: (node: HTMLButtonElement | null) => void;
     onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
     icon?: ReactNode;
     iconRight?: boolean;
     active?: boolean;
+    /** Заливка и обводка. Включает новый режим. */
+    variant?: IconButtonVariant;
+    /**
+     * Произвольный CSS-цвет (оттенки hover/нажатия вычисляются); перекрывает флаги цвета.
+     * Сам по себе новый режим не включает. Без него и без флагов — neutral.
+     */
+    color?: string;
+    /** Высота 24 / 32 / 40 / 48. Включает новый режим. */
+    size?: IconButtonSize;
+    /** square — скругление по размеру, round — пилюля/круг. Включает новый режим. */
+    shape?: IconButtonShape;
+    /** Скругление вручную: число — px, строка — CSS. Перекрывает shape. Включает новый режим. */
+    radius?: number | string;
+    /** Шеврон справа; при active повёрнут вверх. Включает новый режим. */
+    dropdown?: boolean;
 }
 export interface IconButtonProps {
     disabled?: boolean;
@@ -23,3 +45,33 @@ export interface IconButtonProps {
     active?: boolean;
     hasBg?: boolean;
 }
+export interface IconButtonVariantStyleProps {
+    $variant?: IconButtonVariant;
+    $color?: IconButtonColorKey;
+    $customColor?: string;
+    $size?: IconButtonSize;
+    $shape?: IconButtonShape;
+    $radius?: string;
+    $iconOnly?: boolean;
+}
+export interface IconButtonColorSet {
+    base: string;
+    dark: string;
+    deep: string;
+    contrast: string;
+    contrastPressed: string;
+    text: string;
+    textAccent: string;
+    border: string;
+    tint: string;
+    tintDeep: string;
+    ghostPressed: string;
+}
+export interface IconButtonStateStyles {
+    normal: string;
+    hover: string;
+    pressed: string;
+    disabled: string;
+}
+export declare type IconButtonModeProps = Pick<IIconButtonProps, "variant" | "size" | "shape" | "radius" | "dropdown">;
+export declare type IconButtonColorFlags = Pick<IIconButtonProps, "primary" | "secondary" | "error" | "violet">;

package/dist/molecules/IconButton/utils/getIconButtonColors.d.ts

@@ -0,0 +1,7 @@
+import { IPalette } from "../../../theme/ITheme";
+import { IconButtonColorKey, IconButtonColorSet } from "../types";
+/**
+ * Набор цветов кнопки. Произвольный CSS-цвет важнее ключа и затемняет сам себя (шаги подобраны
+ * по primary макета); нераспознанный CSS-цвет откатывается на ключ. Ключ берёт base/Dark/Deep из палитры.
+ */
+export declare const getIconButtonColors: (palette: IPalette, color: IconButtonColorKey, customColor?: string | undefined) => IconButtonColorSet;

package/dist/molecules/IconButton/utils/getVariantStateStyles.d.ts

@@ -0,0 +1,4 @@
+import { IPalette } from "../../../theme/ITheme";
+import { IconButtonColorSet, IconButtonStateStyles, IconButtonVariant } from "../types";
+/** CSS-декларации кнопки в каждом состоянии — по таблице состояний из спецификации. */
+export declare const getVariantStateStyles: (variant: IconButtonVariant, colors: IconButtonColorSet, palette: IPalette) => IconButtonStateStyles;

package/dist/molecules/IconButton/utils/iconButtonProps.d.ts

@@ -0,0 +1,7 @@
+import { IconButtonColorFlags, IconButtonColorKey, IconButtonModeProps } from "../types";
+/** Новый режим включают только собственные пропсы; color — нативный атрибут, его уже передают старые обёртки. */
+export declare const isVariantMode: ({ variant, size, shape, radius, dropdown }: IconButtonModeProps) => boolean;
+/** Цвет по флагам в порядке primary → secondary → error → violet, иначе neutral. */
+export declare const getIconButtonColorKey: ({ primary, secondary, error, violet, }: IconButtonColorFlags) => IconButtonColorKey;
+/** Число — px; пустая строка и нечисло (NaN) — «не задано», скругление берётся из shape. */
+export declare const toCssRadius: (radius?: string | number | undefined) => string | undefined;

package/dist/molecules/IconButton/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./getIconButtonColors";
+export * from "./getVariantStateStyles";
+export * from "./iconButtonProps";

package/dist/molecules/IconButton/variantStyles.d.ts

@@ -0,0 +1,7 @@
+import { DefaultTheme } from "styled-components";
+import { IconButtonProps, IconButtonVariantStyleProps } from "./types";
+declare type VariantProps = IconButtonProps & IconButtonVariantStyleProps & {
+    theme: DefaultTheme;
+};
+export declare const iconButtonVariantMixin: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<VariantProps, DefaultTheme>>;
+export {};

package/dist/organisms/Popover/Popover.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="lodash" />
 import { Component } from "react";
-import { Flip, PopoverPosition, PopoverProps, PopoverPropsDefault } from "./types";
+import { ContentObserver, Flip, PopoverPosition, PopoverProps, PopoverPropsDefault } from "./types";
 export declare class Popover extends Component<PopoverProps> {
     static defaultProps: PopoverPropsDefault;
     anchorNode: HTMLElement | null;
@@ -8,9 +8,29 @@ export declare class Popover extends Component<PopoverProps> {
     popoverAnchorNode: HTMLElement | null;
     flip: Flip | null;
     childrenClicked: boolean;
+    contentObservers: ContentObserver[];
+    heightSyncFrame: number | null;
     saveAnchor: (ref: HTMLElement | null) => null;
     savePopoverAnchor: (ref: HTMLElement | null) => void;
     saveContainer: (ref: HTMLElement | null) => void;
+    /**
+     * Содержимое меняет размер и после открытия: форма раскрывает новые поля, список догружается.
+     * Обрезку по окну пересчитываем вслед за ним, а не только на открытии и ресайзе окна — иначе
+     * выросшее содержимое уезжало бы за край экрана.
+     *
+     * Размер контейнера ловит ResizeObserver, но под обрезкой он замирает: высота ребёнка задана
+     * явно, и рост или сжатие содержимого контейнер уже не меняют. Эти случаи ловит MutationObserver —
+     * по вставке и удалению узлов, то есть ровно когда форма меняет свой состав.
+     */
+    observeContent: (node: HTMLElement | null) => void;
+    disconnectContent: () => void;
+    /**
+     * Пересчёт — в следующем кадре, а не прямо в колбэке: правка высоты внутри колбэка
+     * ResizeObserver зациклила бы его («ResizeObserver loop completed…»), а пачка мутаций одного
+     * рендера схлопывается в один пересчёт.
+     */
+    scheduleHeightSync: () => void;
+    syncContainerHeight: () => void;
     getContainerPosition: (anchorNode: HTMLElement, containerNode: HTMLElement) => PopoverPosition;
     setPositions: import("lodash").DebouncedFunc<() => void>;
     closePopover: (e: Event | MouseEvent | TouchEvent) => void;

package/dist/organisms/Popover/types.d.ts

@@ -40,3 +40,14 @@ export declare type AnchorProps = {
     withTime?: boolean;
     width?: string | number;
 };
+/** Наблюдатель за содержимым поповера — ResizeObserver либо MutationObserver. */
+export interface ContentObserver {
+    disconnect: () => void;
+}
+/**
+ * Конструктор ResizeObserver структурно: сборка (tsdx) идёт своим TypeScript 3.9, в DOM-типах
+ * которого ResizeObserver ещё нет, и прямое имя класса валит сборку.
+ */
+export declare type ResizeObserverConstructor = new (callback: () => void) => ContentObserver & {
+    observe: (target: Element) => void;
+};

package/dist/organisms/Popover/utils.d.ts

@@ -7,5 +7,13 @@ export declare const checkFit: (anchorNode: HTMLElement, containerNode: HTMLElem
     y: boolean;
 };
 export declare const syncPosition: (anchor: HTMLElement, node: HTMLElement) => void;
+/**
+ * Урезает высоту содержимого до места в окне по направлению раскрытия.
+ *
+ * Прошлая обрезка перед замером снимается: иначе мерилась бы уже урезанная высота, и содержимое,
+ * которое с тех пор выросло или сжалось, так и жило бы с устаревшей — выросшее уезжало бы за край
+ * окна, сжавшееся оставляло бы пустоту. Своей прокрутки обрезка не даёт: её включает содержимое.
+ */
+export declare const setPopupContainerHeight: (anchorNode: HTMLElement, node: HTMLElement, targetY: number) => void;
 export declare const getOriginPosition: (flip: Flip | null, origin: Origin) => Position;
 export declare const setPopupContainerPosition: (anchorNode: HTMLElement, node: HTMLElement, { anchorOriginPosition: [anchorX, anchorY], targetOriginPosition: [targetX, targetY], paddingSide }: PopoverPosition, animateAppearance: boolean, animateX: boolean, animateY: boolean) => void;

package/dist/theme/ITheme.d.ts

@@ -13,6 +13,9 @@ export interface IPalette {
     error: string;
     errorDark: string;
     errorDeep: string;
+    violet: string;
+    violetDark: string;
+    violetDeep: string;
     background: string;
     backgroundAlpha: string;
     element: string;
@@ -137,11 +140,22 @@ export interface IIcon {
     color: IIconColors;
     disabledColor: string;
 }
+export declare type IconButtonSizeKey = "small" | "medium" | "large" | "xlarge";
+export interface IIconButtonSizeTokens {
+    height: string;
+    paddingX: string;
+    gap: string;
+    iconSize: string;
+    font: string;
+    textTransform: "none" | "uppercase";
+    radius: string;
+}
 export interface IIconButton {
     color: IIconColors;
     hoverColor: IIconColors;
     activeColor: IIconColors;
     disabledColor: string;
+    sizes: Record<IconButtonSizeKey, IIconButtonSizeTokens>;
 }
 export interface IIconColors {
     primary: string;

package/dist/theme/defaultThemeConstants.d.ts

@@ -1,4 +1,4 @@
-import { IFonts, IPalette, IShadows, ITransition } from "./ITheme";
+import { IconButtonSizeKey, IFonts, IIconButtonSizeTokens, IPalette, IShadows, ITransition } from "./ITheme";
 export declare const palette: IPalette;
 export declare const shadows: IShadows;
 export declare const collapseDuration = 500;
@@ -23,3 +23,8 @@ export declare const borderRadius: {
  * Black 900
  */
 export declare const fonts: IFonts;
+/**
+ * Размеры IconButton по макету: высота, поля, просвет, иконка, шрифт, скругление square.
+ * Жирное начертание — отдельное семейство NunitoSans-bold, поэтому вес в шрифте всегда 400.
+ */
+export declare const iconButtonSizes: Record<IconButtonSizeKey, IIconButtonSizeTokens>;