@steroidsjs/core 3.0.0-beta.2 → 3.0.0-beta.21

package/ui/form/DateTimeField/demo/showRemove.d.ts

@@ -1,7 +1,8 @@
-declare const _default: () => JSX.Element;
+/// <reference types="react" />
 /**
  * После введения датты при наведении показывается кнопка, удалить содержание внутри инпута
  * @order 7
  * @col 6
  */
+declare const _default: () => JSX.Element;
 export default _default;

package/ui/form/DateTimeField/demo/showRemove.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/ui/form/DateTimeRangeField/DateTimeRangeField.d.ts

@@ -35,7 +35,7 @@ export interface IDateTimeRangeFieldProps extends Omit<IDateInputStateInput, 'in
      * Объект CSS стилей
      * @example {width: '45%'}
      */
-    style?: any;
+    style?: CustomStyle;
     /**
      * Свойства для поля 'from'
      */

package/ui/form/DateTimeRangeField/DateTimeRangeField.js

@@ -22,9 +22,9 @@ var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
 var hooks_1 = require("../../../hooks");
 var DATE_TIME_SEPARATOR = ' ';
 function DateTimeRangeField(props) {
-    var components = hooks_1.useComponents();
+    var components = (0, hooks_1.useComponents)();
     // Global onChange (from props)
-    var onChange = react_1.useCallback(function () {
+    var onChange = (0, react_1.useCallback)(function () {
         var _a;
         if (props.onChange) {
             props.onChange.call(null, (_a = {},
@@ -34,7 +34,7 @@ function DateTimeRangeField(props) {
         }
     }, [props.attributeFrom, props.attributeTo, props.inputFrom.value, props.inputTo.value, props.onChange]);
     // Input 'from'
-    var _a = useDateInputState_1["default"]({
+    var _a = (0, useDateInputState_1["default"])({
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat,
         input: props.inputFrom,
@@ -45,7 +45,7 @@ function DateTimeRangeField(props) {
         onChange: onChange
     }), isOpenedFrom = _a.isOpened, onCloseFrom = _a.onClose, inputPropsFrom = _a.inputProps, onClearFrom = _a.onClear, onNow = _a.onNow;
     // Input 'to'
-    var _b = useDateInputState_1["default"]({
+    var _b = (0, useDateInputState_1["default"])({
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat,
         input: props.inputTo,
@@ -55,19 +55,19 @@ function DateTimeRangeField(props) {
         inputProps: props.inputPropsTo,
         onChange: onChange
     }), isOpenedTo = _b.isOpened, onCloseTo = _b.onClose, inputPropsTo = _b.inputProps, onClearTo = _b.onClear;
-    var _c = useDateTime_1["default"]({
+    var _c = (0, useDateTime_1["default"])({
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat,
         dateTimeSeparator: DATE_TIME_SEPARATOR,
         input: props.inputFrom
     }), dateValueFormat = _c.dateValueFormat, dateValueFrom = _c.dateValue, timeValueFrom = _c.timeValue, onDateFromSelect = _c.onDateSelect, onTimeFromSelect = _c.onTimeSelect;
-    var _d = useDateTime_1["default"]({
+    var _d = (0, useDateTime_1["default"])({
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat,
         dateTimeSeparator: DATE_TIME_SEPARATOR,
         input: props.inputTo
     }), dateValueTo = _d.dateValue, timeValueTo = _d.timeValue, onDateToSelect = _d.onDateSelect, onTimeToSelect = _d.onTimeSelect;
-    var _e = useDateRange_1["default"]({
+    var _e = (0, useDateRange_1["default"])({
         onClearFrom: onClearFrom,
         onCloseTo: onCloseTo,
         onCloseFrom: onCloseFrom,
@@ -79,10 +79,9 @@ function DateTimeRangeField(props) {
         useSmartFocus: false
     }), focus = _e.focus, onClose = _e.onClose, onClear = _e.onClear, extendedInputPropsFrom = _e.extendedInputPropsFrom, extendedInputPropsTo = _e.extendedInputPropsTo;
     // Calendar props
-    var calendarProps = react_1.useMemo(function () { return (__assign({ value: [dateValueFrom, dateValueTo], onChange: focus === 'from' ? onDateFromSelect : onDateToSelect, valueFormat: dateValueFormat }, props.calendarProps)); }, [dateValueFormat, dateValueFrom, dateValueTo, focus, onDateFromSelect, onDateToSelect, props.calendarProps]);
+    var calendarProps = (0, react_1.useMemo)(function () { return (__assign({ value: [dateValueFrom, dateValueTo], onChange: focus === 'from' ? onDateFromSelect : onDateToSelect, valueFormat: dateValueFormat }, props.calendarProps)); }, [dateValueFormat, dateValueFrom, dateValueTo, focus, onDateFromSelect, onDateToSelect, props.calendarProps]);
     // TimePanel props
-    var timePanelViewProps = react_1.useMemo(function () { return (__assign({ value: focus === 'from' ? timeValueFrom : timeValueTo, onSelect: focus === 'from' ? onTimeFromSelect : onTimeToSelect, onNow: onNow,
-        onClose: onClose, showNow: false, showHeader: true }, props.timePanelViewProps)); }, [
+    var timePanelViewProps = (0, react_1.useMemo)(function () { return (__assign({ value: focus === 'from' ? timeValueFrom : timeValueTo, onSelect: focus === 'from' ? onTimeFromSelect : onTimeToSelect, onNow: onNow, onClose: onClose, showNow: false, showHeader: true }, props.timePanelViewProps)); }, [
         focus,
         onClose,
         onNow,
@@ -92,10 +91,7 @@ function DateTimeRangeField(props) {
         timeValueFrom,
         timeValueTo,
     ]);
-    return components.ui.renderView(props.view || 'form.DateTimeRangeFieldView', __assign(__assign({}, props.viewProps), { onClear: onClear,
-        onClose: onClose,
-        calendarProps: calendarProps,
-        timePanelViewProps: timePanelViewProps, icon: props.icon, size: props.size, errorsTo: props.errorsTo, className: props.className, showRemove: props.showRemove, errorsFrom: props.errorsFrom, inputPropsTo: extendedInputPropsTo, inputPropsFrom: extendedInputPropsFrom, isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo, disabled: props.disabled, noBorder: props.noBorder }));
+    return components.ui.renderView(props.view || 'form.DateTimeRangeFieldView', __assign(__assign({}, props.viewProps), { onClear: onClear, onClose: onClose, calendarProps: calendarProps, timePanelViewProps: timePanelViewProps, icon: props.icon, size: props.size, errorsTo: props.errorsTo, className: props.className, showRemove: props.showRemove, errorsFrom: props.errorsFrom, inputPropsTo: extendedInputPropsTo, inputPropsFrom: extendedInputPropsFrom, isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo, disabled: props.disabled, noBorder: props.noBorder }));
 }
 DateTimeRangeField.defaultProps = {
     disabled: false,
@@ -106,4 +102,4 @@ DateTimeRangeField.defaultProps = {
     showRemove: true,
     icon: true
 };
-exports["default"] = fieldWrapper_1["default"]('DateTimeRangeField', DateTimeRangeField, { attributeSuffixes: ['from', 'to'] });
+exports["default"] = (0, fieldWrapper_1["default"])('DateTimeRangeField', DateTimeRangeField, { attributeSuffixes: ['from', 'to'] });

package/ui/form/DateTimeRangeField/demo/basic.d.ts

@@ -1,7 +1,8 @@
-declare const _default: () => JSX.Element;
+/// <reference types="react" />
 /**
  * Можно выбрать точную дату с какого по какое время происходит какое-то событие с точностью до минуты
  * @order 1
  * @col 6
  */
+declare const _default: () => JSX.Element;
 export default _default;

package/ui/form/DateTimeRangeField/demo/basic.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/ui/form/DateTimeRangeField/demo/disabled.d.ts

@@ -1,7 +1,8 @@
-declare const _default: () => JSX.Element;
+/// <reference types="react" />
 /**
  * Оключён и без рамок
  * @order 2
  * @col 6
  */
+declare const _default: () => JSX.Element;
 export default _default;

package/ui/form/DateTimeRangeField/demo/disabled.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/ui/form/DateTimeRangeField/demo/errors.d.ts

@@ -1,7 +1,8 @@
-declare const _default: () => JSX.Element;
+/// <reference types="react" />
 /**
  * Обработка ошибок.
  * @order 4
  * @col 6
  */
+declare const _default: () => JSX.Element;
 export default _default;

package/ui/form/DateTimeRangeField/demo/errors.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -30,4 +34,4 @@ var DateTimeRangeField_1 = __importDefault(require("../DateTimeRangeField"));
  * @col 6
  */
 exports["default"] = (function () { return (React.createElement(React.Fragment, null,
-    React.createElement(DateTimeRangeField_1["default"], { label: 'Errors', errors: ['Error 1 text', 'Error 2 text'], layout: true }))); });
+    React.createElement(DateTimeRangeField_1["default"], { label: 'Errors', errors: ['Error 1 text', 'Error 2 text'] }))); });

package/ui/form/DateTimeRangeField/demo/icon.d.ts

@@ -1,7 +1,8 @@
-declare const _default: () => JSX.Element;
+/// <reference types="react" />
 /**
  * Кастомная иконка справа выбранная по контексту
  * @order 3
  * @col 6
  */
+declare const _default: () => JSX.Element;
 export default _default;

package/ui/form/DateTimeRangeField/demo/icon.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/ui/form/DateTimeRangeField/demo/placeholder.d.ts

@@ -1,7 +1,8 @@
-declare const _default: () => JSX.Element;
+/// <reference types="react" />
 /**
  * Сообщение внутри импута
  * @order 6
  * @col 6
  */
+declare const _default: () => JSX.Element;
 export default _default;

package/ui/form/DateTimeRangeField/demo/placeholder.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/ui/form/DateTimeRangeField/demo/required.d.ts

@@ -1,7 +1,8 @@
-declare const _default: () => JSX.Element;
+/// <reference types="react" />
 /**
  * Как обязательное поле для заполнения.
  * @order 3
  * @col 6
  */
+declare const _default: () => JSX.Element;
 export default _default;

package/ui/form/DateTimeRangeField/demo/required.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/ui/form/DateTimeRangeField/demo/showRemove.d.ts

@@ -1,7 +1,8 @@
-declare const _default: () => JSX.Element;
+/// <reference types="react" />
 /**
  * После введения датты при наведении показывается кнопка, удалить содержание внутри инпута
  * @order 7
  * @col 6
  */
+declare const _default: () => JSX.Element;
 export default _default;

package/ui/form/DateTimeRangeField/demo/showRemove.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/ui/form/DropDownField/DropDownField.d.ts

@@ -1,16 +1,53 @@
+import React from 'react';
+import { IAccordionCommonViewProps } from 'src/ui/content/Accordion/Accordion';
 import { IDataProviderConfig } from '../../../hooks/useDataProvider';
 import { IDataSelectConfig } from '../../../hooks/useDataSelect';
 import { IFieldWrapperInputProps } from '../../form/Field/fieldWrapper';
+export declare const GROUP_CONTENT_TYPE = "group";
+export declare const CHECKBOX_CONTENT_TYPE = "checkbox";
+export declare const RADIO_CONTENT_TYPE = "radio";
+export declare const ICON_CONTENT_TYPE = "icon";
+export declare const IMG_CONTENT_TYPE = "img";
+export type ContentType = 'checkbox' | 'radio' | 'icon' | 'img';
+export type ItemSwitchType = ContentType | 'group' | string;
+export interface IDropDownFieldItem {
+    id: number | string;
+    label: string;
+    contentType?: ContentType | string;
+    contentSrc?: string | React.ReactElement;
+}
+export interface IDropDownFieldItemViewProps extends IAccordionCommonViewProps, Pick<IDropDownFieldProps, 'itemsContent'> {
+    item: IDropDownFieldItem;
+    size: Size;
+    type: ItemSwitchType;
+    selectedIds: (PrimaryKey | any)[];
+    groupAttribute: 'string';
+    primaryKey: PrimaryKey;
+    hoveredId: string;
+    onItemSelect: (id: PrimaryKey | any) => void;
+    onItemHover: (id: PrimaryKey | any) => void;
+    [key: string]: any;
+}
 /**
  * DropDownField
  * Выпадающий список для выбора одного или нескольких значений
  */
-export interface IDropDownFieldProps extends IFieldWrapperInputProps, IDataProviderConfig, Omit<IDataSelectConfig, 'items'> {
+export interface IDropDownFieldProps extends IFieldWrapperInputProps, Omit<IDataProviderConfig, 'items'>, Omit<IDataSelectConfig, 'items'> {
     /**
      * Placeholder подсказка
      * @example Your text...
      */
     searchPlaceholder?: string;
+    /**
+     * Цвет состояния
+     * @example success
+     */
+    color?: ColorName;
+    /**
+    * Включает стиль `outline`, когда у DropDownField остается только `border`, а задний фон становится прозрачным
+    * @example true
+    */
+    outline?: boolean;
     inputProps?: any;
     /**
      * Дополнительный CSS-класс
@@ -20,17 +57,17 @@ export interface IDropDownFieldProps extends IFieldWrapperInputProps, IDataProvi
      * Объект CSS стилей
      * @example {width: '45%'}
      */
-    style?: any;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: any;
+    style?: CustomStyle;
     /**
-     * Показать кнопку для сброса выбранного значения
+     * Показать иконку сброса для выбранных значений
      * @example true
      */
     showReset?: boolean;
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: CustomView;
     /**
      * Атрибут, в котором должны лежать дочерние элементы списка (для группировки)
      * Если аттрибут не задан - группировка не производится
@@ -38,15 +75,27 @@ export interface IDropDownFieldProps extends IFieldWrapperInputProps, IDataProvi
      */
     groupAttribute?: string;
     /**
-     * Включает стиль без 'border'
-     * @example true
+     * Свойство, которое устанавливает один type и src контента для всех пунктов
+     * @example {type: 'icon', src: 'user'}
+     */
+    itemsContent?: {
+        type: ContentType | string;
+        src?: string | React.ReactElement;
+    };
+    /**
+     * Элементы вложенные внутрь DropDownField
+     * @example [{id: 1, label: 'Ivan Ivanov', type: 'icon', typeSrc: 'user'}]
+     */
+    items?: IDropDownFieldItem[];
+    /**
+     * Нужно ли использовать троеточие при переполнении DropDownField
+     * @example {'true'}
      */
-    noBorder?: boolean;
+    showEllipses?: boolean;
     [key: string]: any;
 }
-export interface IDropDownFieldViewProps extends Omit<IDropDownFieldProps, 'items'> {
+export interface IDropDownFieldViewProps extends IDropDownFieldProps {
     errors?: string[];
-    items: Record<string, unknown>[];
     selectedItems: Record<string, unknown>[];
     hoveredId: PrimaryKey | any;
     selectedIds: (PrimaryKey | any)[];
@@ -63,13 +112,12 @@ export interface IDropDownFieldViewProps extends Omit<IDropDownFieldProps, 'item
     isOpened?: boolean;
     isLoading?: boolean;
     onReset: () => void;
-    onItemSelect: (id: PrimaryKey | any) => void;
-    onItemHover: (id: PrimaryKey | any) => void;
+    onOpen: () => void;
+    renderItem: (item: IDropDownFieldItem) => JSX.Element;
     onItemRemove: (id: PrimaryKey | any) => void;
-    onClose: () => void;
-    placeholder: string;
     isAutoComplete?: boolean;
     isSearchAutoFocus?: boolean;
+    primaryKey: string;
 }
 declare const _default: import("../../form/Field/fieldWrapper").FieldWrapperComponent<IDropDownFieldProps>;
 export default _default;