@steroidsjs/core 3.0.0-beta.7 → 3.0.0-beta.71

package/ui/content/Calendar/Calendar.d.ts

@@ -1,5 +1,18 @@
+/// <reference types="react" />
 import { DayPickerProps } from 'react-day-picker';
-export interface ICalendarProps {
+/**
+ * Calendar
+ *
+ * Компонент календаря, который позволяет выбирать даты или диапазоны дат.
+ * Он предоставляет пользователю удобный способ выбора даты и может использоваться для различных целей,
+ * таких как выбор даты доставки, даты резервирования и т.д.
+ *
+ * Компонент `Calendar` позволяет указать значение даты или диапазона дат, формат значения, callback функцию при изменении,
+ * свойства для компонента `DayPicker`, отображение панели выбора месяца/года, количество отображаемых месяцев и другие свойства.
+ *
+ * Если установлено значение `showFooter`, то будет отображаться футер с кнопкой "Today".
+ */
+export interface ICalendarProps extends IUiComponent {
     /**
      * Значение задает выбранные в календаре дату или диапазон дат.
      * Необходимо передать валидную дату в виде строки (массива строк)
@@ -19,11 +32,6 @@ export interface ICalendarProps {
      * @example {dayPickerProps: {showWeekNumbers: true}}
      */
     pickerProps?: DayPickerProps | any;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
     /**
      * Пропсы для компонента отображения
      */
@@ -37,10 +45,6 @@ export interface ICalendarProps {
      * @example 1
      */
     numberOfMonths?: number;
-    /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
 }
 export interface ICalendarViewProps extends ICalendarProps {
     /**
@@ -76,7 +80,7 @@ export interface ICalendarViewProps extends ICalendarProps {
      */
     toggleCaptionPanel: () => void;
 }
-declare function Calendar(props: ICalendarProps): any;
+declare function Calendar(props: ICalendarProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 declare namespace Calendar {
     var defaultProps: {
         numberOfMonths: number;

package/ui/content/Calendar/Calendar.js

@@ -31,7 +31,9 @@ function Calendar(props) {
             setMonth(selectedDates[0]);
         }
     }, [selectedDates]);
-    var onDaySelect = (0, react_1.useCallback)(function (date) { return props.onChange.call(null, (0, calendar_1.convertDate)(date, null, props.valueFormat, false, true)); }, [props.onChange, props.valueFormat]);
+    var onDaySelect = (0, react_1.useCallback)(function (date) {
+        props.onChange.call(null, (0, calendar_1.convertDate)(date, null, props.valueFormat, false, true));
+    }, [props.onChange, props.valueFormat]);
     var toggleCaptionPanel = (0, react_1.useCallback)(function () {
         setIsCaptionPanelVisible(!isCaptionPanelVisible);
     }, [isCaptionPanelVisible]);

package/ui/content/Card/Card.d.ts

@@ -1,22 +1,47 @@
-export interface ICardProps {
+/// <reference types="react" />
+import { IButtonProps } from 'src/ui/form/Button/Button';
+import { ILinkProps } from 'src/ui/nav/Link/Link';
+import { IAvatarProps } from '../Avatar/Avatar';
+import { IMenuProps } from '../Menu/Menu';
+export interface ICardHeader {
     /**
-     * Цвет границы (если передать false, то граница будет скрыта)
-     * @example success
-     */
-    borderColor?: ColorName | 'default' | boolean;
+    * Параметры для аватара
+    * @example
+    * {
+    *   src: 'Kate.png',
+    *   status: true,
+    * }
+    */
+    avatar?: IAvatarProps;
     /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
+    * Свойства для компонента <Menu/>
+    */
+    menu?: IMenuProps;
     /**
-     * Дочерние элементы
-     */
-    children?: CustomView;
+    * Текст шапки (заголовок)
+    * @example 'Steroids.js head'
+    */
+    head?: string;
     /**
-     * Цвет состояния
-     * @example success
+    * Текст шапки (заголовок)
+    * @example 'Steroids.js subhead'
+    */
+    subhead?: string;
+}
+/**
+ * Card
+ *
+ * Компонент карточки, который представляет контент в структурированном формате с заголовком, обложкой, описанием,
+ * кнопками, ссылками и другими элементами.
+ *
+ * Компонент `Card` позволяет передать дочерние элементы, обложку, описание, заголовок, параметры заголовка,
+ * футер, коллекцию ссылок и коллекцию кнопок.
+ */
+export interface ICardProps extends IUiComponent {
+    /**
+     * Дочерние элементы
      */
-    color?: ColorName;
+    children?: React.ReactNode;
     /**
      * Обложка для карточки, нужно передать ссылку на изображение
      * @example 'https://cat/cat.png'
@@ -24,50 +49,55 @@ export interface ICardProps {
     cover?: string;
     /**
      * Описание карточки
-     * @example {'Scroll to see more...'}
+     * @example 'Scroll to see more...'
      */
     description?: string;
     /**
-     * Текст для header
+     * Контент хедера
+     * @example
+     * avatar: {
+     * src: 'Kate.png',
+     * status: true,
+     * },
+     * head: 'Header',
+     * subhead: 'Subhead',
+     * menu: {
+     *  dropDownProps: {
+            position: 'bottom',
+            closeMode: 'click-any',
+        },
+        items: [
+            {label: 'Вырезать', icon: 'cut', onClick: voidFunction},
+            {label: 'Копировать', icon: 'copy', hasBorder: true, onClick: voidFunction},
+            {label: 'Показать историю изменений', hasBorder: true, onClick: voidFunction},
+            {label: 'Редактировать', icon: 'edit', onClick: voidFunction},
+            {label: 'Удалить', icon: 'trash', onClick: voidFunction},
+        ],
+        icon: 'menu_dots',
+     * },
      */
-    header?: string;
+    header?: ICardHeader;
     /**
-     * Текст для footer
+     * Контент футера
      */
-    footer?: string;
-    /**
-     * Ориентация карточки, горизонтальная и вертикальная
-     * @example {'vertical-reverse'}
-     */
-    orientation?: 'vertical' | 'vertical-reverse' | 'horizontal' | string;
+    footer?: {
+        head: string;
+        subhead: string;
+    };
     /**
-     * Ориентация карточки, горизонтальная и вертикальная
-     * @example {'vertical-reverse'}
-     */
-    shape?: 'square' | 'circle';
+    * Коллекция ссылок
+    */
+    links?: ILinkProps[];
     /**
-     * Объект CSS стилей
-     * @example {width: '30px'}
+     * Коллекция кнопок
      */
-    style?: CustomStyle;
+    buttons?: IButtonProps[];
     /**
      * Заголовок карточки
-     * @example {'Main card'}
+     * @example 'Main card'
      */
     title?: string;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
 }
 export type ICardViewProps = ICardProps;
-declare function Card(props: ICardProps): any;
-declare namespace Card {
-    var defaultProps: {
-        borderColor: string;
-        orientation: string;
-        shape: string;
-    };
-}
+declare function Card(props: ICardProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export default Card;

package/ui/content/Card/Card.js

@@ -16,9 +16,4 @@ function Card(props) {
     var components = (0, hooks_1.useComponents)();
     return components.ui.renderView(props.view || 'content.CardView', __assign({}, props));
 }
-Card.defaultProps = {
-    borderColor: 'default',
-    orientation: 'vertical',
-    shape: 'circle'
-};
 exports["default"] = Card;

package/ui/content/CopyToClipboard/CopyToClipboard.d.ts

@@ -1,15 +1,75 @@
-import { IBemHocOutput } from '../../../hoc/bem';
-import { IConnectHocOutput } from '../../../hoc/connect';
-interface ICopyToClipboardProps extends IBemHocOutput, IConnectHocOutput {
+import React from 'react';
+import { IShowNotificationParameters } from '../../../actions/notifications';
+/**
+ * CopyToClipboard
+ *
+ * Компонент, позволяющий копировать заданное значение в буфер обмена при клике.
+ *
+ * Компонент `CopyToClipboard` принимает значение `value` для копирования, а также
+ * может отображать иконку, дополнительный текст или другие дочерние элементы.
+ *
+ * При успешном копировании значения, можно также отобразить уведомление с помощью
+ * параметра `notification`. Можно задать текст уведомления, его уровень и параметры.
+ *
+ * Компонент также поддерживает обработчик `onCopy`, который вызывается при копировании.
+ */
+export interface ICopyToClipboardProps extends IUiComponent {
+    /**
+    * Значение, которое будет использоваться при копировании
+    * @example 'Steroids.js'
+    */
     value: string;
+    /**
+    * Переводит состояние компонента в выключенное
+    * @example true
+    */
     disabled?: boolean;
+    /**
+    * Параметры для уведомления, которое появляется после копирования
+    * @example
+    * 'Some value has been copied to buffer'
+    * @example
+    * {
+    *   message: 'Some value has been copied to buffer',
+    *   level: 'info',
+    *   params: {
+    *   position: 'top-left',
+    *   timeOut: 100,
+    *  }
+    * }
+    */
     notification?: string | {
         message?: string;
         level?: string;
-        timeOut?: string;
+        params?: IShowNotificationParameters;
     };
-    className?: string;
-    children?: any;
+    /**
+    * Позволяет включить или выключить отображение иконки
+    * @example false
+    */
+    showCopyIcon?: boolean;
+    /**
+    * Иконка
+    * @example calendar-day
+    */
+    icon?: string | React.ReactElement;
+    /**
+    * Дочерний элемент
+    * @example <h1>This message will be copied!</h1>
+    */
+    children?: React.ReactNode;
+    /**
+    * Callback который вызывается при копировании
+    */
+    onCopy?: VoidFunction;
 }
-export default function CopyToClipboard(props: ICopyToClipboardProps): any;
-export {};
+export interface ICopyToClipboardViewProps extends ICopyToClipboardProps {
+    onClick: () => void;
+}
+declare function CopyToClipboard(props: ICopyToClipboardProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare namespace CopyToClipboard {
+    var defaultProps: {
+        showCopyIcon: boolean;
+    };
+}
+export default CopyToClipboard;

package/ui/content/CopyToClipboard/CopyToClipboard.js

@@ -10,29 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -69,60 +46,50 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 exports.__esModule = true;
-var react_1 = __importStar(require("react"));
-var useDispatch_1 = __importDefault(require("../../../hooks/useDispatch"));
+/* eslint-disable no-unused-expressions */
+var react_1 = require("react");
+var hooks_1 = require("../../../hooks");
 var notifications_1 = require("../../../actions/notifications");
+var DEFAULT_NOTIFICATION_LEVEL = 'info';
 function CopyToClipboard(props) {
     var _this = this;
-    var inputRef = (0, react_1.useRef)();
+    var components = (0, hooks_1.useComponents)();
     var _a = (0, react_1.useState)(false), isCopied = _a[0], setIsCopied = _a[1];
-    var dispatch = (0, useDispatch_1["default"])();
+    var dispatch = (0, hooks_1.useDispatch)();
+    var notification = props.notification;
     var onClick = (0, react_1.useCallback)(function () { return __awaiter(_this, void 0, void 0, function () {
-        var el, notification;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (!!isCopied) return [3 /*break*/, 4];
+                    if (props.disabled) {
+                        return [2 /*return*/];
+                    }
+                    if (!!isCopied) return [3 /*break*/, 3];
                     if (!navigator.clipboard) return [3 /*break*/, 2];
                     return [4 /*yield*/, navigator.clipboard.writeText(props.value)];
                 case 1:
                     _a.sent();
-                    return [3 /*break*/, 3];
-                case 2:
-                    el = inputRef.current;
-                    if (el) {
-                        el.focus();
-                        el.select();
+                    if (props.onCopy) {
+                        props.onCopy();
                     }
-                    document.execCommand('copy');
-                    _a.label = 3;
-                case 3:
-                    if (props.notification) {
-                        notification = __assign({ level: 'info', params: undefined }, (typeof props.notification === 'string' ? { message: props.notification } : props.notification));
-                        dispatch((0, notifications_1.showNotification)(notification.message, notification.level, notification.params));
+                    _a.label = 2;
+                case 2:
+                    if (notification) {
+                        typeof notification === 'string'
+                            ? dispatch((0, notifications_1.showNotification)(notification, DEFAULT_NOTIFICATION_LEVEL))
+                            : dispatch((0, notifications_1.showNotification)(notification.message, notification.level || DEFAULT_NOTIFICATION_LEVEL, notification.params));
                     }
                     setIsCopied(true);
                     setTimeout(function () { return setIsCopied(false); }, 1000);
-                    _a.label = 4;
-                case 4: return [2 /*return*/];
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
             }
         });
-    }); }, [dispatch, isCopied, props.notification, props.value]);
-    if (props.disabled) {
-        return props.children;
-    }
-    return (react_1["default"].createElement("span", { className: props.className, onClick: onClick, "aria-hidden": 'true' },
-        props.children,
-        react_1["default"].createElement("input", { ref: inputRef, defaultValue: props.value, style: {
-                position: 'absolute',
-                height: 1,
-                width: 1,
-                top: 0,
-                opacity: 0
-            } })));
+    }); }, [dispatch, isCopied, notification, props]);
+    return components.ui.renderView(props.view || 'content.CopyToClipboardView', __assign(__assign({}, props), { onClick: onClick }));
 }
+CopyToClipboard.defaultProps = {
+    showCopyIcon: true
+};
 exports["default"] = CopyToClipboard;

package/ui/content/Detail/Detail.d.ts

@@ -31,7 +31,21 @@ export interface IDetailResponsive {
      */
     media: IDetailMedia[];
 }
-export interface IDetailProps {
+/**
+ * Detail
+ *
+ * Представление данных в виде таблицы, в которой поля группируются по принципу "ключ-значение".
+ *
+ * Компонент `Detail` принимает данные в виде дочерних компонентов `DetailItem`, которые отображаются
+ * в виде таблицы с ячейками "ключ-значение".
+ *
+ * Компонент поддерживает различные настройки, такие как размер ячеек, вариант расположения
+ * ячеек ("horizontal" или "vertical"), а также респонсивный режим, позволяющий перестраивать
+ * таблицу при изменении размеров окна.
+ *
+ * Компонент также может отображать заголовок таблицы и контролы, расположенные рядом с таблицей.
+ */
+export interface IDetailProps extends IUiComponent {
     /**
      * Размер ячеек в таблице
      * @example 'sm'
@@ -62,15 +76,6 @@ export interface IDetailProps {
      * @example [{label: __(('Edit')), onClick: () => props.onClick()}]
      */
     controls?: IControlItem[];
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
-    /**
-     * Дополнительный CSS-класс для таблицы
-     */
-    className?: string;
     /**
      * Дочерние компоненты
      */
@@ -83,7 +88,7 @@ export interface IDetailItemOutputProps extends IDetailItemProps {
 }
 export interface IDetailViewProps extends IDetailProps {
     rows: IDetailItemOutputProps[][];
-    resizedNodeRef?: (node: HTMLElement) => void;
+    resizedNodeRef?: (node: HTMLDivElement) => void;
 }
 export declare const constants: Readonly<{
     MAX_COLUMN: 3;

package/ui/content/Detail/DetailItem.d.ts

@@ -22,7 +22,7 @@ export interface IDetailItemProps {
     /**
      * Переопределение view React компонента для кастомизации отображения
      * @example MyCustomView
-     */
+    */
     view?: CustomView;
     /**
      * Дополнительный CSS-класс для ячейки с наименованием

package/ui/content/DropDown/DropDown.d.ts

@@ -1,25 +1,36 @@
 import * as React from 'react';
 import { IAbsolutePositioningInputProps, IAbsolutePositioningOutputProps } from '../../../hooks/useAbsolutePositioning';
+/**
+ * Menu
+ *
+ * Компонент, представляющий меню с элементами, которые могут быть выбраны или нажаты.
+ * Компонент позволяет отображать и скрывать содержимое меню, а также управлять его позиционированием.
+ */
 export interface IDropDownProps extends IAbsolutePositioningInputProps {
-    /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
     /**
      * Содержимое DropDown (компонент или jsx-код)
      * @example () => Component
      */
     content?: () => React.ReactNode;
-    /**
-     * Переопределение view React компонента для кастомизациии отображения
-     * @example MyCustomView
-     */
-    view?: any;
     /**
      * В каком случае закрывать DropDown. По-умолчанию - `click-away`
      * @example click-any
      */
     closeMode?: 'click-away' | 'click-any';
+    /**
+    * Позволяет управлять отображением указателя
+    * @example true
+    */
+    hasArrow?: boolean;
+    /**
+    * Переопределение view React компонента для кастомизациии отображения
+    * @example MyCustomView
+    */
+    view?: CustomView;
+    /**
+    * Дополнительный CSS-класс
+    */
+    className?: CssClassName;
 }
 export interface IDropDownViewProps extends IDropDownProps, IAbsolutePositioningOutputProps {
     /**
@@ -40,6 +51,7 @@ declare namespace DropDown {
         gap: number;
         position: string;
         closeMode: string;
+        hasArrow: boolean;
     };
 }
 export default DropDown;

package/ui/content/DropDown/DropDown.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -82,7 +93,7 @@ function DropDown(props) {
         isComponentExist && (
         // TODO Change Portal to global
         React.createElement(TooltipPortalInner_1["default"], null,
-            React.createElement(DropDownView, { className: props.className, forwardedRef: forwardedRef, content: props.content, position: position, style: style, calculatePosition: calculatePosition, isComponentVisible: isComponentVisible, onClose: onHide })))));
+            React.createElement(DropDownView, __assign({}, props, { className: props.className, forwardedRef: forwardedRef, content: props.content, position: position, style: style, calculatePosition: calculatePosition, isComponentVisible: isComponentVisible, onClose: onHide }))))));
 }
 DropDown.defaultProps = {
     autoPositioning: false,
@@ -90,6 +101,7 @@ DropDown.defaultProps = {
     defaultVisible: false,
     gap: 15,
     position: 'bottom',
-    closeMode: 'click-away'
+    closeMode: 'click-away',
+    hasArrow: true
 };
 exports["default"] = DropDown;

package/ui/content/Icon/Icon.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 /**
  * Install the latest free version of Font Awesome via yarn:
  * ```
@@ -17,7 +17,12 @@ import * as React from 'react';
  *
  * That get the icon used <Icon name={'icon-name'} />
  */
-export interface IIconProps {
+/**
+ * Icon
+ *
+ * Компонент, представляющий иконку. Иконки могут быть импортированы при старте приложения.
+ */
+export interface IIconProps extends IUiComponent {
     /**
      * Имя иконки (латиницей). Импорт иконок происходит на старте приложения.
      * @example create
@@ -28,12 +33,13 @@ export interface IIconProps {
      * @example Добавить запись
      */
     title?: string;
-    className?: CssClassName;
     /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: React.ComponentType;
+    *  Должен ли данный элемент участвовать в последовательной навигации
+    */
+    tabIndex?: number;
+    /**
+    * Функция которая вызывается при клике по иконке
+    */
     onClick?: any;
     [key: string]: any;
 }

package/ui/content/Icon/Icon.js

@@ -17,6 +17,7 @@ exports.__esModule = true;
 var isObject_1 = __importDefault(require("lodash-es/isObject"));
 var isString_1 = __importDefault(require("lodash-es/isString"));
 var hooks_1 = require("../../../hooks");
+var DEFAULT_ICON_NAME = 'default_24x24';
 function Icon(props) {
     var components = (0, hooks_1.useComponents)();
     var name = props.name;
@@ -42,7 +43,9 @@ function Icon(props) {
             }
         }
         if (!icon) {
-            throw new Error('Not found icon with name "' + name + '"');
+            // eslint-disable-next-line no-console
+            console.warn('Not found icon with name "' + name + '"');
+            icon = components.ui.getIcon(DEFAULT_ICON_NAME);
         }
     }
     return components.ui.renderView(props.view || 'content.IconView', __assign(__assign({}, props), { icon: icon }));