@evergis/uilib-gl 1.0.139 → 1.0.140

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

@@ -17,6 +17,11 @@ export interface IIconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement
     onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
     icon?: ReactNode;
     iconRight?: boolean;
+    /**
+     * Иконка над подписью, подпись по центру с переносом по словам, шеврон — под подписью.
+     * Перекрывает iconRight. Работает в обоих режимах, сам по себе новый режим не включает.
+     */
+    iconTop?: boolean;
     active?: boolean;
     /** Заливка и обводка. Включает новый режим. */
     variant?: IconButtonVariant;
@@ -42,6 +47,7 @@ export interface IconButtonProps {
     error?: boolean;
     notFixedWidth?: boolean;
     iconRight?: boolean;
+    iconTop?: boolean;
     active?: boolean;
     hasBg?: boolean;
 }

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

@@ -0,0 +1,8 @@
+/** Минимальная высота поля с autoResize, если `minHeight` не задан. */
+export declare const DEFAULT_AUTO_RESIZE_MIN_HEIGHT = 36;
+/** Текст замера пустого поля без placeholder — даёт высоту одной строки. */
+export declare const EMPTY_MEASURE_TEXT = "x";
+/** Свойства, от которых зависит раскладка текста: замерщик повторяет их за полем. */
+export declare const SIZING_STYLE_PROPERTIES: string[];
+/** Замерщик невидим и нулевой высоты — его `scrollHeight` равен высоте текста с отступами. */
+export declare const HIDDEN_TEXTAREA_STYLE: string;

package/dist/molecules/Textarea/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./useTextareaAutoResize";
+export * from "./useTextareaResizeTriggers";

package/dist/molecules/Textarea/hooks/useTextareaAutoResize.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from "react";
+import { ITextareaProps } from "../types";
+type UseTextareaAutoResizeParams = Pick<ITextareaProps, "autoResize" | "value" | "placeholder" | "minHeight" | "maxHeight" | "innerRef">;
+/**
+ * Высота поля с autoResize — по фактической раскладке текста (см. `calculateTextareaHeight`).
+ *
+ * Пересчёт идёт до отрисовки при смене значения, placeholder и пределов, а события вне React
+ * ловит `useTextareaResizeTriggers`. Высота уходит inline-стилем: через styled-проп каждое её
+ * значение порождало бы новый класс.
+ */
+export declare const useTextareaAutoResize: ({ autoResize, value, placeholder, minHeight, maxHeight, innerRef, }: UseTextareaAutoResizeParams) => {
+    ref: (node: HTMLTextAreaElement | null) => void;
+    style: CSSProperties | undefined;
+};
+export {};

package/dist/molecules/Textarea/hooks/useTextareaResizeTriggers.d.ts

@@ -0,0 +1,6 @@
+import { MutableRefObject } from "react";
+/**
+ * Пересчёт высоты на события вне React: ввод в неконтролируемое поле, смена ширины поля (перенос
+ * строк меняется вместе с ней) и загрузка шрифтов (меняет ширину глифов и высоту строки).
+ */
+export declare const useTextareaResizeTriggers: (element: MutableRefObject<HTMLTextAreaElement | null>, enabled: boolean | undefined, updateHeight: () => void) => void;

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

@@ -4,6 +4,8 @@ export interface ITextareaProps extends ITextFieldProps {
     help?: ReactNode;
     id?: string;
     minHeight?: number;
+    /** Предел высоты в пикселях: `autoResize` дальше не растит, лишнее прокручивается. */
+    maxHeight?: number;
     autoResize?: boolean;
     innerRef?: RefType<HTMLTextAreaElement>;
 }

package/dist/molecules/Textarea/utils.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Высота, при которой текст поля помещается без прокрутки, — в единицах `box-sizing` поля.
+ *
+ * Текст раскладывает сам браузер: замерщик повторяет ширину, шрифт, отступы и рамки поля, а
+ * нулевая высота делает его `scrollHeight` равным высоте текста. Поэтому замер верен для любых
+ * глифов, переносов по словам и пустых строк.
+ */
+export declare const calculateTextareaHeight: (textarea: HTMLTextAreaElement) => number;

package/dist/uilib-gl.esm.js

@@ -14657,12 +14657,24 @@ const getRadius = props => {
 
   return props.$shape === "round" ? "9999px" : getSize(props).radius;
 };
+
+const getPaddingX = props => props.$iconOnly ? "0" : getSize(props).paddingX;
+/** Колонка: иконка, подпись по центру с переносом, шеврон. Вертикальный отступ равен gap размера. */
+
+
+const iconButtonIconTopMixin = css`
+  flex-direction: column;
+  height: auto;
+  min-height: ${props => getSize(props).height};
+  padding: ${props => getSize(props).gap} ${getPaddingX};
+  white-space: normal;
+  text-align: center;
+`;
 /**
  * Состояния: проп active держит «нажатый» вид постоянно (и на hover), data-state="hover|active"
  * включает состояние статично (для Storybook). Disabled объявлен последним — побеждает остальные.
  */
 
-
 const iconButtonStatesMixin = _ref2 => {
   let {
     theme,
@@ -14708,7 +14720,7 @@ const iconButtonVariantMixin = css`
   height: ${props => getSize(props).height};
   min-width: ${props => getSize(props).height};
   width: ${props => props.$iconOnly ? getSize(props).height : "auto"};
-  padding: 0 ${props => props.$iconOnly ? "0" : getSize(props).paddingX};
+  padding: 0 ${getPaddingX};
   border: none;
   border-radius: ${getRadius};
   outline: none;
@@ -14717,13 +14729,20 @@ const iconButtonVariantMixin = css`
   text-transform: ${props => getSize(props).textTransform};
   white-space: nowrap;
   transition: background-color ${transition.hover}, color ${transition.hover}, box-shadow ${transition.hover};
+  ${_ref3 => {
+  let {
+    iconTop
+  } = _ref3;
+  return iconTop && iconButtonIconTopMixin;
+}};
 
   ${Icon} {
-    order: ${_ref3 => {
+    order: ${_ref4 => {
   let {
-    iconRight
-  } = _ref3;
-  return iconRight ? 2 : 0;
+    iconRight,
+    iconTop
+  } = _ref4;
+  return iconRight && !iconTop ? 2 : 0;
 }};
     display: flex;
     align-items: center;
@@ -14856,7 +14875,20 @@ const buttonMixin = css`
     pointer-events: none;
   }
 `;
-const legacyIconButtonMixin = css`
+/** Колонка: иконка, под ней подпись по центру; перекрывает iconRight. */
+
+const defaultIconTopMixin = css`
+  flex-direction: column;
+  height: auto;
+  min-height: 2.25rem;
+  padding: 0.5rem 1rem;
+  text-align: center;
+
+  ${IconButtonInnerChild} {
+    margin: 0.25rem 0 0;
+  }
+`;
+const defaultIconButtonMixin = css`
   &:hover > ${Icon}, &:hover > ${IconButtonInnerChild} {
     color: ${_ref7 => {
   let {
@@ -14903,6 +14935,12 @@ const legacyIconButtonMixin = css`
   }
 
   ${buttonMixin};
+  ${_ref11 => {
+  let {
+    iconTop
+  } = _ref11;
+  return iconTop && defaultIconTopMixin;
+}};
 `;
 const IconButtonButton = /*#__PURE__*/styled.button.attrs(props => ({
   tabIndex: -1,
@@ -14910,11 +14948,11 @@ const IconButtonButton = /*#__PURE__*/styled.button.attrs(props => ({
 }))`
   flex-shrink: 0;
 
-  ${_ref11 => {
+  ${_ref12 => {
   let {
     $variant
-  } = _ref11;
-  return $variant ? iconButtonVariantMixin : legacyIconButtonMixin;
+  } = _ref12;
+  return $variant ? iconButtonVariantMixin : defaultIconButtonMixin;
 }};
 `;
 
@@ -22293,64 +22331,215 @@ const TextField = /*#__PURE__*/styled.textarea.attrs(props => ({
 }};
 `;
 
-const LabeledTextarea = /*#__PURE__*/withLabel(TextField);
+/** Минимальная высота поля с autoResize, если `minHeight` не задан. */
+const DEFAULT_AUTO_RESIZE_MIN_HEIGHT = 36;
+/** Текст замера пустого поля без placeholder — даёт высоту одной строки. */
 
-const TextareaComponent = _ref => {
+const EMPTY_MEASURE_TEXT = "x";
+/** Свойства, от которых зависит раскладка текста: замерщик повторяет их за полем. */
+
+const SIZING_STYLE_PROPERTIES = ["box-sizing", "width", "font-family", "font-size", "font-style", "font-weight", "font-variant", "font-stretch", "font-feature-settings", "letter-spacing", "word-spacing", "line-height", "text-indent", "text-transform", "text-rendering", "tab-size", "white-space", "word-break", "overflow-wrap", "padding-top", "padding-right", "padding-bottom", "padding-left", "border-top-width", "border-right-width", "border-bottom-width", "border-left-width", "border-top-style", "border-right-style", "border-bottom-style", "border-left-style"];
+/** Замерщик невидим и нулевой высоты — его `scrollHeight` равен высоте текста с отступами. */
+
+const HIDDEN_TEXTAREA_STYLE = /*#__PURE__*/["min-height:0", "max-height:none", "height:0", "visibility:hidden", "overflow:hidden", "position:absolute", "z-index:-1000", "top:0", "right:0", "pointer-events:none"].map(declaration => `${declaration} !important`).join(";");
+
+let hiddenTextarea = null;
+/** Один замерщик на все поля: живёт в `body`, вне раскладки страницы. */
+
+const getHiddenTextarea = () => {
+  if (!hiddenTextarea || !hiddenTextarea.parentNode) {
+    hiddenTextarea = document.createElement("textarea");
+    hiddenTextarea.setAttribute("tabindex", "-1");
+    hiddenTextarea.setAttribute("aria-hidden", "true");
+    document.body.appendChild(hiddenTextarea);
+  }
+
+  return hiddenTextarea;
+};
+/** Пустое поле меряется по placeholder, чтобы длинная подсказка не обрезалась. */
+
+
+const getMeasureText = _ref => {
   let {
     value,
-    minHeight = 36,
+    placeholder
+  } = _ref;
+  return value || placeholder || EMPTY_MEASURE_TEXT;
+};
+/**
+ * Высота, при которой текст поля помещается без прокрутки, — в единицах `box-sizing` поля.
+ *
+ * Текст раскладывает сам браузер: замерщик повторяет ширину, шрифт, отступы и рамки поля, а
+ * нулевая высота делает его `scrollHeight` равным высоте текста. Поэтому замер верен для любых
+ * глифов, переносов по словам и пустых строк.
+ */
+
+
+const calculateTextareaHeight = textarea => {
+  const computedStyle = window.getComputedStyle(textarea);
+  const measurer = getHiddenTextarea();
+  const sizingStyle = SIZING_STYLE_PROPERTIES.map(property => `${property}:${computedStyle.getPropertyValue(property)}`).join(";");
+  measurer.style.cssText = `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`;
+  measurer.value = getMeasureText(textarea);
+  const {
+    scrollHeight
+  } = measurer; // scrollHeight включает внутренние отступы, но не рамку.
+
+  if (computedStyle.boxSizing === "border-box") {
+    return scrollHeight + getNumberFromPixels(computedStyle.borderTopWidth) + getNumberFromPixels(computedStyle.borderBottomWidth);
+  }
+
+  return scrollHeight - getNumberFromPixels(computedStyle.paddingTop) - getNumberFromPixels(computedStyle.paddingBottom);
+};
+
+/**
+ * Пересчёт высоты на события вне React: ввод в неконтролируемое поле, смена ширины поля (перенос
+ * строк меняется вместе с ней) и загрузка шрифтов (меняет ширину глифов и высоту строки).
+ */
+
+const useTextareaResizeTriggers = (element, enabled, updateHeight) => {
+  const latestUpdateHeight = useRef(updateHeight);
+  latestUpdateHeight.current = updateHeight;
+  useEffect(() => {
+    const textarea = element.current;
+    if (!enabled || !textarea) return;
+    let frameId = 0;
+    let isActive = true;
+    let width = textarea.offsetWidth; // Через кадр: смена высоты внутри колбэка ResizeObserver зациклила бы его.
+
+    const scheduleUpdate = () => {
+      window.cancelAnimationFrame(frameId);
+      frameId = window.requestAnimationFrame(() => latestUpdateHeight.current());
+    }; // Своя смена высоты тоже будит наблюдателя — пересчёт нужен только при новой ширине.
+
+
+    const onResize = () => {
+      if (textarea.offsetWidth === width) return;
+      width = textarea.offsetWidth;
+      scheduleUpdate();
+    };
+
+    const {
+      ResizeObserver: ResizeObserverClass
+    } = window;
+    const resizeObserver = ResizeObserverClass ? new ResizeObserverClass(onResize) : null;
+    const {
+      fonts
+    } = document;
+    resizeObserver == null ? void 0 : resizeObserver.observe(textarea);
+    textarea.addEventListener("input", scheduleUpdate);
+    fonts == null ? void 0 : fonts.ready.then(() => isActive && scheduleUpdate());
+    return () => {
+      isActive = false;
+      window.cancelAnimationFrame(frameId);
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      textarea.removeEventListener("input", scheduleUpdate);
+    };
+  }, [element, enabled]);
+};
+
+/**
+ * Высота поля с autoResize — по фактической раскладке текста (см. `calculateTextareaHeight`).
+ *
+ * Пересчёт идёт до отрисовки при смене значения, placeholder и пределов, а события вне React
+ * ловит `useTextareaResizeTriggers`. Высота уходит inline-стилем: через styled-проп каждое её
+ * значение порождало бы новый класс.
+ */
+
+const useTextareaAutoResize = _ref => {
+  let {
     autoResize,
-    ...textareaProps
+    value,
+    placeholder,
+    minHeight = DEFAULT_AUTO_RESIZE_MIN_HEIGHT,
+    maxHeight,
+    innerRef
   } = _ref;
-  const [height, setHeight] = useState(0);
-  const [containerSize, setContainerSize] = useState(0);
-  const [lettersSize, setLettersSize] = useState(0);
   const element = useRef(null);
-  const prevValue = useRef(value);
-  const updateTextareaHeight = useCallback(() => {
-    const valueLines = (value === void 0 || value === null ? "" : `${value}`).split("\n");
-    let countOfLines = valueLines.length;
+  const [size, setSize] = useState(null);
+  const updateHeight = useCallback(() => {
+    const textarea = element.current; // Скрытое поле (display: none) не имеет ширины — замер был бы ложным, его догонит ResizeObserver.
+
+    if (!autoResize || !textarea || !textarea.offsetWidth) return;
+    const contentHeight = calculateTextareaHeight(textarea);
+    const limitedHeight = maxHeight ? Math.min(contentHeight, maxHeight) : contentHeight;
+    const height = Math.max(minHeight, limitedHeight);
+    const overflows = contentHeight > height;
+    setSize(prevSize => (prevSize == null ? void 0 : prevSize.height) === height && prevSize.overflows === overflows ? prevSize : {
+      height,
+      overflows
+    });
+  }, [autoResize, minHeight, maxHeight]); // Значение и placeholder замер читает из DOM — в зависимостях они только будят пересчёт.
 
-    for (const line of valueLines) {
-      countOfLines += Math.round(line.length * lettersSize * 0.85 / containerSize);
-    }
+  useLayoutEffect(() => {
+    updateHeight();
+  }, [updateHeight, value, placeholder]);
+  useTextareaResizeTriggers(element, autoResize, updateHeight);
+  const ref = useCallback(node => {
+    element.current = node;
+
+    if (typeof innerRef === "function") {
+      innerRef(node);
+    } else if (innerRef) {
+      innerRef.current = node;
+    }
+  }, [innerRef]);
+  const style = useMemo(() => size ? {
+    height: size.height,
+    overflowY: size.overflows ? "auto" : "hidden"
+  } : undefined, [size]);
+  return {
+    ref,
+    style
+  };
+};
 
-    const height = countOfLines === 1 ? lettersSize * 2 : lettersSize * countOfLines;
-    setHeight(!minHeight || height < minHeight ? minHeight : height);
-  }, [containerSize, lettersSize, minHeight, value]);
-  useEffect(() => {
-    if (autoResize && element.current) {
-      const {
-        fontSize,
-        width
-      } = getComputedStyle(element.current);
-      setContainerSize(getNumberFromPixels(width));
-      setLettersSize(getNumberFromPixels(fontSize));
-      updateTextareaHeight();
-    }
-  }, [autoResize, updateTextareaHeight]);
-  useEffect(() => {
-    if (autoResize && element.current) {
-      updateTextareaHeight();
-    }
-  }, [autoResize, updateTextareaHeight, value]);
-  useEffect(() => {
-    prevValue.current = value;
-  }, [value]);
+const LabeledTextarea = /*#__PURE__*/withLabel(TextField);
+
+const TextareaComponent = _ref => {
+  let {
+    value,
+    minHeight,
+    maxHeight,
+    autoResize,
+    style,
+    innerRef,
+    ...textareaProps
+  } = _ref;
+  const {
+    ref,
+    style: autoResizeStyle
+  } = useTextareaAutoResize({
+    autoResize,
+    value,
+    placeholder: textareaProps.placeholder,
+    minHeight,
+    maxHeight,
+    innerRef
+  });
 
   if (autoResize) {
     return React.createElement(LabeledTextarea, {
-      height: `${height}px`,
       value: value,
       ...textareaProps,
+      style: { ...style,
+        ...autoResizeStyle
+      },
       resize: "none",
-      innerRef: ref => element.current = ref
+      innerRef: ref
     });
-  }
+  } // Без autoResize высоту держит сам textarea: пределы ограничивают её и ручной resize.
+
 
   return React.createElement(LabeledTextarea, {
     value: value,
-    ...textareaProps
+    ...textareaProps,
+    innerRef: innerRef,
+    style: {
+      minHeight,
+      maxHeight,
+      ...style
+    }
   });
 };