@i-novus/n2o-components 7.29.14 → 7.29.16

package/README.md

@@ -0,0 +1,34 @@
+# @i-novus/n2o-components
+
+UI‑библиотека React-компонентов для **N2O framework**.
+
+- Пакет: `@i-novus/n2o-components`
+- Назначение: базовые UI-компоненты (inputs, кнопки, лэйауты, навигация, типографика, display-компоненты), стили и утилиты, используемые в экосистеме N2O.
+- Стек: **React + TypeScript**, стили на **SCSS** (внутри пакета есть `src/styles`).
+
+---
+### Notes
+- **lib** — собранный артефакт (build result; сюда попадает JS/d.ts/scss styles).
+- **Исходники** находятся в `src/`. Новые компоненты рекомендуется добавлять в соответствующие папки (`inputs/`, `navigation/`, …).
+- **Стили** хранятся в `src/styles`. Компонентные стили/миксины/переменные должны переиспользоваться оттуда.
+
+---
+## Основная структура src
+
+#### Компоненты
+- inputs — инпуты и контролы ввода: поля, селекты, чекбоксы, маски, редакторы и т.п.
+  Обычно здесь же находятся адаптеры/обёртки над сторонними input-библиотеками и общие для inputs интерфейсы.
+- button — кнопки и близкие сущности (варианты кнопок, группы, иконки/лоадеры на кнопках и т.д.).
+- display — компоненты отображения данных (не ввод): бейджи, теги, статусы, лейблы, превью/значения, различные “view”-компоненты.
+- layouts — компоненты размептки: контейнеры, панели, сетки/колонки, обёртки для выравнивания, «каркасы» для страниц/виджетов.
+- navigation — навигация: меню, хлебные крошки, вкладки, сайдбар/хедер-навигация и т.п.
+- Typography — типографика: заголовки, текстовые стили, компоненты для единообразного вывода текста.
+
+#### Стили
+- styles — SCSS-стили: базовые переменные/миксины, темы, общие стили компонентов.
+
+#### Вспомогательные ресурсы
+- helpers — вспомогательные функции/обёртки “прикладного” уровня: форматирование, маппинги, небольшие хелперы для компонентов.
+- utils — более “низкоуровневые” утилиты общего назначения (работа с типами, объектами, датами, проверками и т.п.), не привязанные к конкретным компонентам.
+- types.ts — общие TypeScript-типы/интерфейсы, которые переиспользуются по всему пакету.
+- tests — тесты.

package/lib/display/Collapse/Collapse.d.ts

@@ -1,24 +1,8 @@
-import { ReactNode } from 'react';
-/**
- * Компонент Collapse
- * @param {string | array} activeKey - активный ключ панели (При совпадении с ключами Panel происходит открытие последней)
- * @param {boolean} collapsible - флаг выключения возможности сворачивания
- * @returns {*}
- * @constructor
- */
-export interface Props {
-    className?: string;
-    children: ReactNode;
-    collapsible?: boolean;
-    defaultActiveKey?: string | null;
-    destroyInactivePanel?: boolean;
-    accordion?: boolean;
-    dataKey?: string;
-    isVisible?: boolean;
-    onChange?(): void;
-}
+import React from 'react';
+import { type CollapseProps, type CollapseContextType } from './types';
+export declare const CollapseContext: React.Context<CollapseContextType>;
 export declare const Collapse: {
-    ({ className, children, collapsible, destroyInactivePanel, accordion, dataKey, isVisible, onChange, ...rest }: Props): JSX.Element;
+    ({ className, children, collapsible, destroyInactivePanel, accordion, isVisible, onChange, defaultActiveKey, activeKey, expandIcon, style, ...rest }: CollapseProps): JSX.Element | null;
     displayName: string;
 };
 export default Collapse;

package/lib/display/Collapse/Collapse.js

@@ -1,19 +1,34 @@
 import { __rest } from "tslib";
-import React from 'react';
-// @ts-ignore import from js file
-import CollapseBody from 'rc-collapse';
+import React, { useMemo, createContext } from 'react';
 import classNames from 'classnames';
-import { Icon } from '../Icon';
-const renderIcon = ({ isActive }, collapsible) => {
-    if (!collapsible) {
+import { useCollapse } from './useCollapse';
+import { renderExpandIcon } from './renderExpandIcon';
+export const CollapseContext = createContext({
+    activeKeys: [],
+    togglePanel: () => { },
+});
+export const Collapse = (_a) => {
+    var { className, children, collapsible = true, destroyInactivePanel = false, accordion = false, isVisible = true, onChange, defaultActiveKey, activeKey, expandIcon, style } = _a, rest = __rest(_a, ["className", "children", "collapsible", "destroyInactivePanel", "accordion", "isVisible", "onChange", "defaultActiveKey", "activeKey", "expandIcon", "style"]);
+    const { activeKeys, togglePanel } = useCollapse({
+        activeKey,
+        defaultActiveKey,
+        accordion,
+        collapsible,
+        onChange,
+    });
+    const value = useMemo(() => ({
+        activeKeys,
+        togglePanel,
+        collapsible,
+        destroyInactivePanel,
+        accordion,
+        expandIcon: expandIcon || renderExpandIcon,
+    }), [activeKeys, togglePanel, collapsible, destroyInactivePanel, accordion, expandIcon]);
+    if (!isVisible) {
         return null;
     }
-    return (React.createElement("div", { className: "n2o-collapse-icon-wrapper" },
-        React.createElement(Icon, { className: classNames('n2o-collapse-icon', { isActive }), name: "fa fa-angle-right" })));
-};
-export const Collapse = (_a) => {
-    var { className = '', children, collapsible = true, destroyInactivePanel = false, accordion = false, dataKey = 'items', isVisible = true, onChange = () => { } } = _a, rest = __rest(_a, ["className", "children", "collapsible", "destroyInactivePanel", "accordion", "dataKey", "isVisible", "onChange"]);
-    return (React.createElement(CollapseBody, Object.assign({ className: classNames('n2o-collapse', className), expandIcon: (props) => renderIcon(props, collapsible), destroyInactivePanel: destroyInactivePanel, accordion: accordion, dataKey: dataKey, isVisible: isVisible, onChange: onChange }, rest), children));
+    return (React.createElement(CollapseContext.Provider, { value: value },
+        React.createElement("div", Object.assign({ className: classNames('collapse-wrapper', className), style: style }, rest), children)));
 };
 Collapse.displayName = '@n2o-components/display/Collapse';
 export default Collapse;

package/lib/display/Collapse/Collapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"Collapse.js","sourceRoot":"","sources":["../../../src/display/Collapse/Collapse.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,iCAAiC;AACjC,OAAO,YAAY,MAAM,aAAa,CAAA;AACtC,OAAO,UAAU,MAAM,YAAY,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAyB,EAAE,WAAoB,EAAE,EAAE;IAC7E,IAAI,CAAC,WAAW,EAAE;QAAE,OAAO,IAAI,CAAA;KAAE;IAEjC,OAAO,CACH,6BAAK,SAAS,EAAC,2BAA2B;QACtC,oBAAC,IAAI,IACD,SAAS,EAAE,UAAU,CAAC,mBAAmB,EAAE,EAAE,QAAQ,EAAE,CAAC,EACxD,IAAI,EAAC,mBAAmB,GAC1B,CACA,CACT,CAAA;AACL,CAAC,CAAA;AAsBD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAUjB,EAAE,EAAE;QAVa,EACrB,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,WAAW,GAAG,IAAI,EAClB,oBAAoB,GAAG,KAAK,EAC5B,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,OAAO,EACjB,SAAS,GAAG,IAAI,EAChB,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,OAEf,EADD,IAAI,cATc,iHAUxB,CADU;IAEP,OAAO,CACH,oBAAC,YAAY,kBACT,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,SAAS,CAAC,EAChD,UAAU,EAAE,CAAC,KAA4B,EAAE,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,WAAW,CAAC,EAC5E,oBAAoB,EAAE,oBAAoB,EAC1C,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,IACd,IAAI,GAEP,QAAQ,CACE,CAClB,CAAA;AACL,CAAC,CAAA;AAED,QAAQ,CAAC,WAAW,GAAG,kCAAkC,CAAA;AAEzD,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"Collapse.js","sourceRoot":"","sources":["../../../src/display/Collapse/Collapse.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,UAAU,MAAM,YAAY,CAAA;AAGnC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAErD,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAsB;IAC9D,UAAU,EAAE,EAAE;IACd,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;CACxB,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAaT,EAAE,EAAE;QAbK,EACrB,SAAS,EACT,QAAQ,EACR,WAAW,GAAG,IAAI,EAClB,oBAAoB,GAAG,KAAK,EAC5B,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,IAAI,EAChB,QAAQ,EACR,gBAAgB,EAChB,SAAS,EACT,UAAU,EACV,KAAK,OAEO,EADT,IAAI,cAZc,8JAaxB,CADU;IAEP,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,WAAW,CAAC;QAC5C,SAAS;QACT,gBAAgB;QAChB,SAAS;QACT,WAAW;QACX,QAAQ;KACX,CAAC,CAAA;IAEF,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QACzB,UAAU;QACV,WAAW;QACX,WAAW;QACX,oBAAoB;QACpB,SAAS;QACT,UAAU,EAAE,UAAU,IAAI,gBAAgB;KAC7C,CAAC,EAAE,CAAC,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,oBAAoB,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC,CAAA;IAExF,IAAI,CAAC,SAAS,EAAE;QAAE,OAAO,IAAI,CAAA;KAAE;IAE/B,OAAO,CACH,oBAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK;QAClC,2CAAK,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,IAAM,IAAI,GAC5E,QAAQ,CACP,CACiB,CAC9B,CAAA;AACL,CAAC,CAAA;AAED,QAAQ,CAAC,WAAW,GAAG,kCAAkC,CAAA;AAEzD,eAAe,QAAQ,CAAA"}

package/lib/display/Collapse/helpers.d.ts

@@ -0,0 +1,2 @@
+export declare const normalizeToArray: (key?: string | string[] | null) => string[];
+export declare const getNewActiveKeys: (activeKeys: string[], key: string, accordion?: boolean) => string[];

package/lib/display/Collapse/helpers.js

@@ -0,0 +1,16 @@
+export const normalizeToArray = (key) => {
+    if (key == null) {
+        return [];
+    }
+    return Array.isArray(key) ? key : [key];
+};
+export const getNewActiveKeys = (activeKeys, key, accordion) => {
+    if (accordion) {
+        return activeKeys.includes(key) ? [] : [key];
+    }
+    if (activeKeys.includes(key)) {
+        return activeKeys.filter(k => k !== key);
+    }
+    return [...activeKeys, key];
+};
+//# sourceMappingURL=helpers.js.map

package/lib/display/Collapse/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/display/Collapse/helpers.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,GAA8B,EAAY,EAAE;IACzE,IAAI,GAAG,IAAI,IAAI,EAAE;QAAE,OAAO,EAAE,CAAA;KAAE;IAE9B,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;AAC3C,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,UAAoB,EAAE,GAAW,EAAE,SAAmB,EAAY,EAAE;IACjG,IAAI,SAAS,EAAE;QACX,OAAO,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;KAC/C;IACD,IAAI,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;QAC1B,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC,CAAA;KAC3C;IAED,OAAO,CAAC,GAAG,UAAU,EAAE,GAAG,CAAC,CAAA;AAC/B,CAAC,CAAA"}

package/lib/display/Collapse/renderExpandIcon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const renderExpandIcon: (isActive: boolean, collapsible?: boolean) => JSX.Element | null;

package/lib/display/Collapse/renderExpandIcon.js

@@ -0,0 +1,11 @@
+import classNames from 'classnames';
+import React from 'react';
+import { Icon } from '../Icon';
+export const renderExpandIcon = (isActive, collapsible = true) => {
+    if (!collapsible) {
+        return null;
+    }
+    return (React.createElement("div", { className: "n2o-collapse-icon-wrapper collapse-icon-wrapper" },
+        React.createElement(Icon, { className: classNames('collapse-icon', { isActive }), name: "fa fa-angle-right" })));
+};
+//# sourceMappingURL=renderExpandIcon.js.map

package/lib/display/Collapse/renderExpandIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderExpandIcon.js","sourceRoot":"","sources":["../../../src/display/Collapse/renderExpandIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,QAAiB,EAAE,WAAW,GAAG,IAAI,EAAE,EAAE;IACtE,IAAI,CAAC,WAAW,EAAE;QAAE,OAAO,IAAI,CAAA;KAAE;IAEjC,OAAO,CACH,6BAAK,SAAS,EAAC,iDAAiD;QAC5D,oBAAC,IAAI,IAAC,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAC,mBAAmB,GAAG,CACrF,CACT,CAAA;AACL,CAAC,CAAA"}

package/lib/display/Collapse/types.d.ts

@@ -0,0 +1,24 @@
+import React, { ReactNode } from 'react';
+export interface useCollapseProps {
+    collapsible?: boolean;
+    defaultActiveKey?: string | string[] | null;
+    activeKey?: string | string[];
+    accordion?: boolean;
+    onChange?(activeKey: string | string[]): void;
+}
+export interface CollapseProps extends useCollapseProps {
+    className?: string;
+    children: ReactNode;
+    destroyInactivePanel?: boolean;
+    isVisible?: boolean;
+    expandIcon?(isActive: boolean, collapsible?: boolean): ReactNode;
+    style?: React.CSSProperties;
+}
+export interface CollapseContextType {
+    activeKeys: string[];
+    togglePanel(key: string): void;
+    collapsible?: boolean;
+    destroyInactivePanel?: boolean;
+    accordion?: boolean;
+    expandIcon?(isActive: boolean, collapsible?: boolean): ReactNode;
+}

package/lib/display/Collapse/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/display/Collapse/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/display/Collapse/types.ts"],"names":[],"mappings":""}

package/lib/display/Collapse/useCollapse.d.ts

@@ -0,0 +1,5 @@
+import { type useCollapseProps } from './types';
+export declare const useCollapse: ({ activeKey, defaultActiveKey, accordion, collapsible, onChange, }: useCollapseProps) => {
+    activeKeys: string[];
+    togglePanel: (key: string) => void;
+};

package/lib/display/Collapse/useCollapse.js

@@ -0,0 +1,20 @@
+import { useState, useCallback, useMemo } from 'react';
+import { NOOP_FUNCTION } from '../../utils/emptyTypes';
+import { normalizeToArray, getNewActiveKeys } from './helpers';
+export const useCollapse = ({ activeKey, defaultActiveKey, accordion, collapsible, onChange = NOOP_FUNCTION, }) => {
+    const [uncontrolledActiveKeys, setUncontrolledActiveKeys] = useState(() => normalizeToArray(defaultActiveKey));
+    const isControlled = activeKey !== undefined;
+    const activeKeys = useMemo(() => (isControlled ? normalizeToArray(activeKey) : uncontrolledActiveKeys), [isControlled, activeKey, uncontrolledActiveKeys]);
+    const togglePanel = useCallback((key) => {
+        if (!collapsible) {
+            return;
+        }
+        const newActiveKeys = getNewActiveKeys(activeKeys, key, accordion);
+        if (!isControlled) {
+            setUncontrolledActiveKeys(newActiveKeys);
+        }
+        onChange(accordion ? newActiveKeys[0] || '' : newActiveKeys);
+    }, [activeKeys, accordion, collapsible, isControlled, onChange]);
+    return { activeKeys, togglePanel };
+};
+//# sourceMappingURL=useCollapse.js.map

package/lib/display/Collapse/useCollapse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCollapse.js","sourceRoot":"","sources":["../../../src/display/Collapse/useCollapse.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAEtD,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAGtD,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAE9D,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EACxB,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,WAAW,EACX,QAAQ,GAAG,aAAa,GACT,EAAE,EAAE;IACnB,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAAW,GAAG,EAAE,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,CAAA;IAExH,MAAM,YAAY,GAAG,SAAS,KAAK,SAAS,CAAA;IAE5C,MAAM,UAAU,GAAG,OAAO,CACtB,GAAG,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC,EAC3E,CAAC,YAAY,EAAE,SAAS,EAAE,sBAAsB,CAAC,CACpD,CAAA;IAED,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,GAAW,EAAE,EAAE;QAC5C,IAAI,CAAC,WAAW,EAAE;YAAE,OAAM;SAAE;QAE5B,MAAM,aAAa,GAAG,gBAAgB,CAAC,UAAU,EAAE,GAAG,EAAE,SAAS,CAAC,CAAA;QAElE,IAAI,CAAC,YAAY,EAAE;YAAE,yBAAyB,CAAC,aAAa,CAAC,CAAA;SAAE;QAE/D,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA;IAChE,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEhE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,CAAA;AACtC,CAAC,CAAA"}

package/lib/display/HelpPopover.d.ts

@@ -1,16 +1,17 @@
 import React, { RefObject, MouseEvent } from 'react';
 import { PopoverProps } from 'reactstrap';
-declare type Props = {
-    help: string | null;
+export interface HelpPopoverProps {
+    help?: string | null | Node;
     icon?: string;
-    placement?: PopoverProps['placement'];
-};
-export declare class HelpPopover extends React.Component<Props> {
+    helpPlacement?: PopoverProps['placement'];
+    helpTrigger?: 'hover' | 'focus' | 'click';
+    className?: string;
+}
+export declare class HelpPopover extends React.Component<HelpPopoverProps> {
     fieldId: string;
     button: RefObject<HTMLButtonElement>;
-    constructor(props: Props);
+    constructor(props: HelpPopoverProps);
     focusOnClick: (e: MouseEvent<HTMLButtonElement>) => void;
     render(): JSX.Element | null;
     static displayName: string;
 }
-export {};

package/lib/display/HelpPopover.js

@@ -1,6 +1,7 @@
 import React, { createRef } from 'react';
 import { UncontrolledPopover, PopoverBody } from 'reactstrap';
 import DOMPurify from 'dompurify';
+import classNames from 'classnames';
 import { id } from '../utils/id';
 import { Text } from '../Typography/Text';
 export class HelpPopover extends React.Component {
@@ -16,17 +17,16 @@ export class HelpPopover extends React.Component {
         this.button = createRef();
     }
     render() {
-        const { help, placement = 'right', icon = 'fa fa-question-circle', } = this.props;
+        const { help, className, helpTrigger = 'focus', helpPlacement = 'right', icon = 'fa fa-question-circle', } = this.props;
         if (!help) {
             return null;
         }
-        return (React.createElement("div", { className: "n2o-popover" },
+        return (React.createElement("div", { className: classNames('n2o-popover', className) },
             React.createElement("button", { onClick: this.focusOnClick, className: "n2o-popover-btn", id: this.fieldId, ref: this.button, type: "button", "aria-label": "popover-btn" },
                 React.createElement("i", { className: icon })),
-            React.createElement(UncontrolledPopover, { className: "n2o-popover-body", placement: placement, target: this.fieldId, trigger: "focus" },
+            React.createElement(UncontrolledPopover, { className: "n2o-popover-body", placement: helpPlacement, trigger: helpTrigger, target: this.fieldId },
                 React.createElement(PopoverBody, null, typeof help === 'string'
                     ? React.createElement(Text, null, help)
-                    /* eslint-disable-next-line react/no-danger */
                     : React.createElement("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(help) } })))));
     }
 }

package/lib/display/HelpPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpPopover.js","sourceRoot":"","sources":["../../src/display/HelpPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,SAAS,EAAc,MAAM,OAAO,CAAA;AAC/D,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAgB,MAAM,YAAY,CAAA;AAC3E,OAAO,SAAS,MAAM,WAAW,CAAA;AAEjC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AAQzC,MAAM,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAgB;IAKnD,YAAY,KAAY;QACpB,KAAK,CAAC,KAAK,CAAC,CAAA;QAMhB,iBAAY,GAAG,CAAC,CAAgC,EAAE,EAAE;;YAChD,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA;QAChC,CAAC,CAAA;QARG,IAAI,CAAC,OAAO,GAAG,EAAE,EAAE,CAAA;QACnB,IAAI,CAAC,MAAM,GAAG,SAAS,EAAE,CAAA;IAC7B,CAAC;IAQD,MAAM;QACF,MAAM,EACF,IAAI,EACJ,SAAS,GAAG,OAAO,EACnB,IAAI,GAAG,uBAAuB,GACjC,GAAG,IAAI,CAAC,KAAK,CAAA;QAEd,IAAI,CAAC,IAAI,EAAE;YAAE,OAAO,IAAI,CAAA;SAAE;QAE1B,OAAO,CACH,6BAAK,SAAS,EAAC,aAAa;YACxB,gCACI,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,SAAS,EAAC,iBAAiB,EAC3B,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,IAAI,EAAC,QAAQ,gBACF,aAAa;gBAExB,2BAAG,SAAS,EAAE,IAAI,GAAI,CACjB;YACT,oBAAC,mBAAmB,IAChB,SAAS,EAAC,kBAAkB,EAC5B,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,IAAI,CAAC,OAAO,EACpB,OAAO,EAAC,OAAO;gBAEf,oBAAC,WAAW,QAEJ,OAAO,IAAI,KAAK,QAAQ;oBACpB,CAAC,CAAC,oBAAC,IAAI,QAAE,IAAI,CAAQ;oBACrB,8CAA8C;oBAC9C,CAAC,CAAC,6BAAK,uBAAuB,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,GAAI,CAEtE,CACI,CACpB,CACT,CAAA;IACL,CAAC;;AAEM,uBAAW,GAAG,qCAAqC,CAAA"}
+{"version":3,"file":"HelpPopover.js","sourceRoot":"","sources":["../../src/display/HelpPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,SAAS,EAAc,MAAM,OAAO,CAAA;AAC/D,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAgB,MAAM,YAAY,CAAA;AAC3E,OAAO,SAAS,MAAM,WAAW,CAAA;AACjC,OAAO,UAAU,MAAM,YAAY,CAAA;AAEnC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AAUzC,MAAM,OAAO,WAAY,SAAQ,KAAK,CAAC,SAA2B;IAK9D,YAAY,KAAuB;QAC/B,KAAK,CAAC,KAAK,CAAC,CAAA;QAMhB,iBAAY,GAAG,CAAC,CAAgC,EAAE,EAAE;;YAChD,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA;QAChC,CAAC,CAAA;QARG,IAAI,CAAC,OAAO,GAAG,EAAE,EAAE,CAAA;QACnB,IAAI,CAAC,MAAM,GAAG,SAAS,EAAE,CAAA;IAC7B,CAAC;IAQD,MAAM;QACF,MAAM,EACF,IAAI,EACJ,SAAS,EACT,WAAW,GAAG,OAAO,EACrB,aAAa,GAAG,OAAO,EACvB,IAAI,GAAG,uBAAuB,GACjC,GAAG,IAAI,CAAC,KAAK,CAAA;QAEd,IAAI,CAAC,IAAI,EAAE;YAAE,OAAO,IAAI,CAAA;SAAE;QAE1B,OAAO,CACH,6BAAK,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC;YAChD,gCACI,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,SAAS,EAAC,iBAAiB,EAC3B,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,IAAI,EAAC,QAAQ,gBACF,aAAa;gBAExB,2BAAG,SAAS,EAAE,IAAI,GAAI,CACjB;YACT,oBAAC,mBAAmB,IAChB,SAAS,EAAC,kBAAkB,EAC5B,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,IAAI,CAAC,OAAO;gBAEpB,oBAAC,WAAW,QACP,OAAO,IAAI,KAAK,QAAQ;oBACrB,CAAC,CAAC,oBAAC,IAAI,QAAE,IAAI,CAAQ;oBACrB,CAAC,CAAC,6BAAK,uBAAuB,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,GAAI,CAClE,CACI,CACpB,CACT,CAAA;IACL,CAAC;;AAEM,uBAAW,GAAG,qCAAqC,CAAA"}

package/lib/display/Icon.d.ts

@@ -1,6 +1,6 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 declare type Props = ComponentProps<'i'> & {
-    name?: string;
+    name?: ReactNode | string;
     disabled?: boolean;
 };
 export declare function Icon({ name, className, disabled, ...props }: Props): JSX.Element | null;

package/lib/display/Icon.js

@@ -1,14 +1,15 @@
 import { __rest } from "tslib";
-import React from 'react';
+import React, { isValidElement } from 'react';
 import classNames from 'classnames';
 export function Icon(_a) {
-    var { name = '', className, disabled = false } = _a, props = __rest(_a, ["name", "className", "disabled"]);
+    var { name, className, disabled = false } = _a, props = __rest(_a, ["name", "className", "disabled"]);
     if (!name) {
         return null;
     }
-    const iconClass = classNames('n2o-icon', {
-        [name]: name,
-        [className || '']: className,
+    if (isValidElement(name)) {
+        return name;
+    }
+    const iconClass = classNames('n2o-icon', name, className, {
         disabled,
     });
     return React.createElement("i", Object.assign({ className: iconClass }, props));

package/lib/display/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/display/Icon.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,UAAU,MAAM,YAAY,CAAA;AAOnC,MAAM,UAAU,IAAI,CAAC,EAKb;QALa,EACjB,IAAI,GAAG,EAAE,EACT,SAAS,EACT,QAAQ,GAAG,KAAK,OAEZ,EADD,KAAK,cAJS,iCAKpB,CADW;IAER,IAAI,CAAC,IAAI,EAAE;QAAE,OAAO,IAAI,CAAA;KAAE;IAE1B,MAAM,SAAS,GAAG,UAAU,CAAC,UAAU,EAAE;QACrC,CAAC,IAAI,CAAC,EAAE,IAAI;QACZ,CAAC,SAAS,IAAI,EAAE,CAAC,EAAE,SAAS;QAC5B,QAAQ;KACX,CAAC,CAAA;IAEF,OAAO,yCAAG,SAAS,EAAE,SAAS,IAAM,KAAK,EAAI,CAAA;AACjD,CAAC"}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/display/Icon.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAkB,cAAc,EAAa,MAAM,OAAO,CAAA;AACxE,OAAO,UAAU,MAAM,YAAY,CAAA;AAOnC,MAAM,UAAU,IAAI,CAAC,EAKb;QALa,EACjB,IAAI,EACJ,SAAS,EACT,QAAQ,GAAG,KAAK,OAEZ,EADD,KAAK,cAJS,iCAKpB,CADW;IAER,IAAI,CAAC,IAAI,EAAE;QAAE,OAAO,IAAI,CAAA;KAAE;IAE1B,IAAI,cAAc,CAAC,IAAI,CAAC,EAAE;QAAE,OAAO,IAAI,CAAA;KAAE;IAEzC,MAAM,SAAS,GAAG,UAAU,CAAC,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE;QACtD,QAAQ;KACX,CAAC,CAAA;IAEF,OAAO,yCAAG,SAAS,EAAE,SAAS,IAAM,KAAK,EAAI,CAAA;AACjD,CAAC"}

package/lib/display/Panel/Content.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ContentProps } from './types';
+export declare const Content: ({ children, isActive, openAnimation, forceRender, destroyInactivePanel, contentRef, }: ContentProps) => JSX.Element;

package/lib/display/Panel/Content.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import classNames from 'classnames';
+export const Content = ({ children, isActive, openAnimation, forceRender, destroyInactivePanel, contentRef, }) => {
+    const shouldRenderChildren = forceRender || isActive || !destroyInactivePanel;
+    return (React.createElement("div", { ref: contentRef, className: classNames('collapse-panel-content', {
+            'collapse-panel-content-active': isActive,
+            'collapse-panel-content-inactive': !isActive,
+        }), "aria-hidden": !isActive, style: {
+            transition: `height ${openAnimation.duration}ms ${openAnimation.easing}, opacity ${openAnimation.duration}ms ${openAnimation.easing}`,
+        } },
+        React.createElement("div", { className: "collapse-panel-content-box" }, shouldRenderChildren ? children : null)));
+};
+//# sourceMappingURL=Content.js.map

package/lib/display/Panel/Content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.js","sourceRoot":"","sources":["../../../src/display/Panel/Content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAAU,MAAM,YAAY,CAAA;AAInC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACpB,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,WAAW,EACX,oBAAoB,EACpB,UAAU,GACC,EAAE,EAAE;IACf,MAAM,oBAAoB,GAAG,WAAW,IAAI,QAAQ,IAAI,CAAC,oBAAoB,CAAA;IAE7E,OAAO,CACH,6BACI,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,UAAU,CAAC,wBAAwB,EAAE;YAC5C,+BAA+B,EAAE,QAAQ;YACzC,iCAAiC,EAAE,CAAC,QAAQ;SAC/C,CAAC,iBACW,CAAC,QAAQ,EACtB,KAAK,EAAE;YACH,UAAU,EAAE,UAAU,aAAa,CAAC,QAAQ,MAAM,aAAa,CAAC,MAAM,aAAa,aAAa,CAAC,QAAQ,MAAM,aAAa,CAAC,MAAM,EAAE;SACxI;QAED,6BAAK,SAAS,EAAC,4BAA4B,IACtC,oBAAoB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CACrC,CACJ,CACT,CAAA;AACL,CAAC,CAAA"}

package/lib/display/Panel/Header.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type HeaderProps } from './types';
+export declare const Header: ({ header, headerClass, showArrow, expandIcon, extra, hasSeparator, isActive, isDisabled, onClick, collapsible, }: HeaderProps) => JSX.Element;

package/lib/display/Panel/Header.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import classNames from 'classnames';
+export const Header = ({ header, headerClass, showArrow, expandIcon, extra, hasSeparator, isActive, isDisabled, onClick, collapsible, }) => (React.createElement("div", { className: classNames('collapse-panel-header', headerClass), onClick: onClick, role: "button", tabIndex: isDisabled ? -1 : 0, "aria-expanded": isActive, "aria-disabled": isDisabled },
+    showArrow && (expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon(isActive, collapsible)),
+    React.createElement("div", { className: "n2o-panel-header-text collapse-panel-header-text" }, header),
+    extra && React.createElement("div", { className: "collapse-panel-extra" }, extra),
+    hasSeparator && React.createElement("div", { className: "divider" })));
+//# sourceMappingURL=Header.js.map

package/lib/display/Panel/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/display/Panel/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAAU,MAAM,YAAY,CAAA;AAInC,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACnB,MAAM,EACN,WAAW,EACX,SAAS,EACT,UAAU,EACV,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,OAAO,EACP,WAAW,GACD,EAAE,EAAE,CAAC,CACf,6BACI,SAAS,EAAE,UAAU,CAAC,uBAAuB,EAAE,WAAW,CAAC,EAC3D,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mBACd,QAAQ,mBACR,UAAU;IAExB,SAAS,KAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,QAAQ,EAAE,WAAW,CAAC,CAAA;IACjD,6BAAK,SAAS,EAAC,kDAAkD,IAAE,MAAM,CAAO;IAC/E,KAAK,IAAI,6BAAK,SAAS,EAAC,sBAAsB,IAAE,KAAK,CAAO;IAC5D,YAAY,IAAI,6BAAK,SAAS,EAAC,SAAS,GAAG,CAC1C,CACT,CAAA"}

package/lib/display/Panel/Panel.d.ts

@@ -1,11 +1,7 @@
-import { ReactNode } from 'react';
-export declare type Props = {
-    className: string;
-    header: JSX.Element;
-    headerClass: string;
-    children: ReactNode;
+/// <reference types="react" />
+import { type PanelProps } from './types';
+export declare const Panel: {
+    ({ header, children, className, headerClass, hasSeparator, collapsible: panelCollapsible, forceRender, showArrow, disabled, style, extra, openAnimation, key, panelKey, destroyInactivePanel: panelDestroyInactivePanel, }: PanelProps): JSX.Element;
+    displayName: string;
 };
-export declare function Panel({ children, className, header, headerClass, ...rest }: Props): JSX.Element;
-export declare namespace Panel {
-    var displayName: string;
-}
+export default Panel;

package/lib/display/Panel/Panel.js

@@ -1,11 +1,30 @@
-import { __rest } from "tslib";
-import React from 'react';
-// @ts-ignore import from js file
-import { Panel as PanelBody } from 'rc-collapse';
-import { Text } from '../../Typography/Text';
-export function Panel(_a) {
-    var { children, className, header, headerClass } = _a, rest = __rest(_a, ["children", "className", "header", "headerClass"]);
-    return (React.createElement(PanelBody, Object.assign({ header: React.createElement(Text, null, header), className: className, headerClass: headerClass }, rest), children));
-}
+import React, { useContext, useRef } from 'react';
+import classNames from 'classnames';
+import { CollapseContext } from '../Collapse/Collapse';
+import { usePanelHeight } from './usePanelHeight';
+import { Header } from './Header';
+import { Content } from './Content';
+export const Panel = ({ header, children, className, headerClass, hasSeparator, collapsible: panelCollapsible, forceRender = false, showArrow = true, disabled = false, style, extra, openAnimation = { duration: 300, easing: 'ease' }, key, panelKey, destroyInactivePanel: panelDestroyInactivePanel, }) => {
+    const { activeKeys, togglePanel, collapsible: globalCollapsible, destroyInactivePanel: globalDestroyInactivePanel, expandIcon, } = useContext(CollapseContext);
+    const contentRef = useRef(null);
+    const keyValue = panelKey || key || '';
+    const collapsible = typeof panelCollapsible === 'boolean' ? panelCollapsible : globalCollapsible;
+    const isActive = activeKeys.includes(keyValue) || !collapsible;
+    const isDisabled = disabled || !collapsible;
+    usePanelHeight({ isActive, ref: contentRef });
+    const onClick = () => {
+        if (!isDisabled) {
+            togglePanel(keyValue);
+        }
+    };
+    const destroyInactivePanel = panelDestroyInactivePanel !== null && panelDestroyInactivePanel !== void 0 ? panelDestroyInactivePanel : globalDestroyInactivePanel;
+    return (React.createElement("div", { className: classNames('collapse-panel', className, {
+            'collapse-panel-active': isActive,
+            'collapse-panel-disabled': isDisabled,
+        }), style: style },
+        React.createElement(Header, { header: header, headerClass: headerClass, showArrow: showArrow, expandIcon: expandIcon, extra: extra, hasSeparator: hasSeparator, isActive: isActive, isDisabled: isDisabled, onClick: onClick, collapsible: collapsible }),
+        React.createElement(Content, { contentRef: contentRef, isActive: isActive, openAnimation: openAnimation, forceRender: forceRender, destroyInactivePanel: destroyInactivePanel }, children)));
+};
 Panel.displayName = '@n2o-components/display/Panel';
+export default Panel;
 //# sourceMappingURL=Panel.js.map

package/lib/display/Panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../../../src/display/Panel/Panel.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,iCAAiC;AACjC,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAS5C,MAAM,UAAU,KAAK,CAAC,EAA4D;QAA5D,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,OAAkB,EAAb,IAAI,cAAnD,kDAAqD,CAAF;IACrE,OAAO,CACH,oBAAC,SAAS,kBACN,MAAM,EAAE,oBAAC,IAAI,QAAE,MAAM,CAAQ,EAC7B,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,IACpB,IAAI,GAEP,QAAQ,CACD,CACf,CAAA;AACL,CAAC;AAED,KAAK,CAAC,WAAW,GAAG,+BAA+B,CAAA"}
+{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../../../src/display/Panel/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACjD,OAAO,UAAU,MAAM,YAAY,CAAA;AAEnC,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAGnC,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAClB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,WAAW,EACX,YAAY,EACZ,WAAW,EAAE,gBAAgB,EAC7B,WAAW,GAAG,KAAK,EACnB,SAAS,GAAG,IAAI,EAChB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,KAAK,EACL,aAAa,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,EACjD,GAAG,EACH,QAAQ,EACR,oBAAoB,EAAE,yBAAyB,GACtC,EAAE,EAAE;IACb,MAAM,EACF,UAAU,EACV,WAAW,EACX,WAAW,EAAE,iBAAiB,EAC9B,oBAAoB,EAAE,0BAA0B,EAChD,UAAU,GACb,GAAG,UAAU,CAAC,eAAe,CAAC,CAAA;IAE/B,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC/C,MAAM,QAAQ,GAAG,QAAQ,IAAI,GAAG,IAAI,EAAE,CAAA;IACtC,MAAM,WAAW,GAAG,OAAO,gBAAgB,KAAK,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,CAAA;IAChG,MAAM,QAAQ,GAAG,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAA;IAC9D,MAAM,UAAU,GAAG,QAAQ,IAAI,CAAC,WAAW,CAAA;IAE3C,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,CAAA;IAE7C,MAAM,OAAO,GAAG,GAAG,EAAE;QACjB,IAAI,CAAC,UAAU,EAAE;YAAE,WAAW,CAAC,QAAQ,CAAC,CAAA;SAAE;IAC9C,CAAC,CAAA;IAED,MAAM,oBAAoB,GAAG,yBAAyB,aAAzB,yBAAyB,cAAzB,yBAAyB,GAAI,0BAA0B,CAAA;IAEpF,OAAO,CACH,6BACI,SAAS,EAAE,UAAU,CAAC,gBAAgB,EAAE,SAAS,EAAE;YAC/C,uBAAuB,EAAE,QAAQ;YACjC,yBAAyB,EAAE,UAAU;SACxC,CAAC,EACF,KAAK,EAAE,KAAK;QAEZ,oBAAC,MAAM,IACH,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,GAC1B;QACF,oBAAC,OAAO,IACJ,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,oBAAoB,EAAE,oBAAoB,IAEzC,QAAQ,CACH,CACR,CACT,CAAA;AACL,CAAC,CAAA;AAED,KAAK,CAAC,WAAW,GAAG,+BAA+B,CAAA;AAEnD,eAAe,KAAK,CAAA"}

package/lib/display/Panel/types.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode, CSSProperties, RefObject } from 'react';
+export interface PanelHeaderProps {
+    header: ReactNode;
+    headerClass?: string;
+    showArrow?: boolean;
+    expandIcon?(isActive: boolean, collapsible?: boolean): ReactNode;
+    extra?: ReactNode;
+    hasSeparator?: boolean;
+    collapsible?: boolean;
+}
+export interface PanelContentProps {
+    children: ReactNode;
+    forceRender?: boolean;
+    destroyInactivePanel?: boolean;
+    openAnimation?: {
+        duration?: number;
+        easing?: string;
+    };
+}
+export interface HeaderProps extends PanelHeaderProps {
+    isActive: boolean;
+    isDisabled: boolean;
+    onClick(): void;
+}
+export interface ContentProps extends PanelContentProps {
+    isActive: boolean;
+    openAnimation: NonNullable<PanelContentProps['openAnimation']>;
+    contentRef: RefObject<HTMLDivElement>;
+}
+export interface PanelProps extends PanelHeaderProps, PanelContentProps {
+    key?: string;
+    panelKey?: string;
+    className?: string;
+    style?: CSSProperties;
+    disabled?: boolean;
+}

package/lib/display/Panel/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/display/Panel/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/display/Panel/types.ts"],"names":[],"mappings":""}

package/lib/display/Panel/usePanelHeight.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from 'react';
+export interface UsePanelHeightProps {
+    isActive: boolean;
+    ref: RefObject<HTMLDivElement>;
+}
+export declare const usePanelHeight: ({ isActive, ref }: UsePanelHeightProps) => void;

package/lib/display/Panel/usePanelHeight.js

@@ -0,0 +1,53 @@
+import { useEffect, useRef } from 'react';
+// Эффект для управления высотой при изменении isActive
+export const usePanelHeight = ({ isActive, ref }) => {
+    const isFirstRender = useRef(true);
+    useEffect(() => {
+        const contentElement = ref.current;
+        if (!contentElement) {
+            return;
+        }
+        // На первом рендере высота без анимации
+        if (isFirstRender.current) {
+            if (isActive) {
+                contentElement.style.height = 'auto';
+            }
+            else {
+                contentElement.style.height = '0px';
+                contentElement.style.overflow = 'hidden';
+            }
+            isFirstRender.current = false;
+            return;
+        }
+        if (isActive) {
+            contentElement.style.height = '0px';
+            contentElement.style.overflow = 'hidden';
+            requestAnimationFrame(() => {
+                const currentElement = ref.current;
+                if (!currentElement) {
+                    return;
+                }
+                const height = currentElement.scrollHeight;
+                currentElement.style.height = `${height}px`;
+                setTimeout(() => {
+                    if (currentElement) {
+                        currentElement.style.height = 'auto';
+                        currentElement.style.overflow = 'visible';
+                    }
+                }, 300);
+            });
+        }
+        else {
+            const height = contentElement.scrollHeight;
+            contentElement.style.height = `${height}px`;
+            contentElement.style.overflow = 'hidden';
+            requestAnimationFrame(() => {
+                const currentElement = ref.current;
+                if (currentElement) {
+                    currentElement.style.height = '0px';
+                }
+            });
+        }
+    }, [isActive]);
+};
+//# sourceMappingURL=usePanelHeight.js.map

package/lib/display/Panel/usePanelHeight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanelHeight.js","sourceRoot":"","sources":["../../../src/display/Panel/usePanelHeight.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAOpD,uDAAuD;AACvD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAuB,EAAE,EAAE;IACrE,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAElC,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,cAAc,GAAG,GAAG,CAAC,OAAO,CAAA;QAElC,IAAI,CAAC,cAAc,EAAE;YAAE,OAAM;SAAE;QAE/B,wCAAwC;QACxC,IAAI,aAAa,CAAC,OAAO,EAAE;YACvB,IAAI,QAAQ,EAAE;gBACV,cAAc,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;aACvC;iBAAM;gBACH,cAAc,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAA;gBACnC,cAAc,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;aAC3C;YACD,aAAa,CAAC,OAAO,GAAG,KAAK,CAAA;YAE7B,OAAM;SACT;QAED,IAAI,QAAQ,EAAE;YACV,cAAc,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAA;YACnC,cAAc,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;YAExC,qBAAqB,CAAC,GAAG,EAAE;gBACvB,MAAM,cAAc,GAAG,GAAG,CAAC,OAAO,CAAA;gBAElC,IAAI,CAAC,cAAc,EAAE;oBAAE,OAAM;iBAAE;gBAE/B,MAAM,MAAM,GAAG,cAAc,CAAC,YAAY,CAAA;gBAE1C,cAAc,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAA;gBAE3C,UAAU,CAAC,GAAG,EAAE;oBACZ,IAAI,cAAc,EAAE;wBAChB,cAAc,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;wBACpC,cAAc,CAAC,KAAK,CAAC,QAAQ,GAAG,SAAS,CAAA;qBAC5C;gBACL,CAAC,EAAE,GAAG,CAAC,CAAA;YACX,CAAC,CAAC,CAAA;SACL;aAAM;YACH,MAAM,MAAM,GAAG,cAAc,CAAC,YAAY,CAAA;YAE1C,cAAc,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAA;YAC3C,cAAc,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;YAExC,qBAAqB,CAAC,GAAG,EAAE;gBACvB,MAAM,cAAc,GAAG,GAAG,CAAC,OAAO,CAAA;gBAElC,IAAI,cAAc,EAAE;oBAChB,cAAc,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAA;iBACtC;YACL,CAAC,CAAC,CAAA;SACL;IACL,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;AAClB,CAAC,CAAA"}

package/lib/inputs/Checkbox/Checkbox.d.ts

@@ -1,5 +1,6 @@
 import { MouseEvent, RefObject, LegacyRef, Component } from 'react';
-import { TBaseInputProps, TBaseProps } from '../../types';
+import type { TBaseInputProps, TBaseProps } from '../../types';
+import { type HelpPopoverProps } from '../../display/HelpPopover';
 /**
  * Альтернативный чекбокс
  * @reactProps {string|number} value - уникально определяет элемент
@@ -12,9 +13,9 @@ import { TBaseInputProps, TBaseProps } from '../../types';
  * @reactProps {string} help - подсказка в popover
  * @reactProps {boolean} inline - в ряд
  */
-export declare type Props = TBaseProps & TBaseInputProps<any> & {
+declare type Enhancer = HelpPopoverProps & TBaseProps & TBaseInputProps<unknown>;
+export interface Props extends Enhancer {
     checked?: boolean;
-    help?: string;
     inline?: boolean;
     label?: string;
     onClick?(event: MouseEvent<HTMLDivElement>): void;
@@ -22,7 +23,7 @@ export declare type Props = TBaseProps & TBaseInputProps<any> & {
     forwardedRef?: RefObject<HTMLDivElement>;
     inputRef?: LegacyRef<HTMLInputElement>;
     preventDefault?: boolean;
-};
+}
 export declare class Checkbox extends Component<Props> {
     state: {
         id: string;
@@ -30,3 +31,4 @@ export declare class Checkbox extends Component<Props> {
     componentDidMount(): void;
     render(): JSX.Element;
 }
+export {};