@steroidsjs/bootstrap 3.0.0-beta.99 → 3.0.0

package/content/Kanban/views/KanbanModal/views/TaskDetailsModalContent/TaskDetailsModalContentView.js

@@ -0,0 +1,53 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var content_1 = require("@steroidsjs/core/ui/content");
+var typography_1 = require("@steroidsjs/core/ui/typography");
+var KanbanPrioritiesEnum_1 = __importDefault(require("@steroidsjs/core/ui/content/Kanban/enums/KanbanPrioritiesEnum"));
+function TaskDetailsModalContentView(props) {
+    var _a;
+    var _b = props.task, tags = _b.tags, priority = _b.priority, description = _b.description, assigner = _b.assigner;
+    var toTags = (0, react_1.useCallback)(function (tag) { return (react_1["default"].createElement(content_1.Badge, { key: tag.id, size: "md", roundingStyle: "squarer", message: tag.message, type: tag.type })); }, []);
+    var priorityLabel = (0, react_1.useMemo)(function () { return KanbanPrioritiesEnum_1["default"].getLabel(priority === null || priority === void 0 ? void 0 : priority.type); }, [priority === null || priority === void 0 ? void 0 : priority.type]);
+    var priorityColor = (0, react_1.useMemo)(function () { return KanbanPrioritiesEnum_1["default"].getColorByType(priority === null || priority === void 0 ? void 0 : priority.type); }, [priority === null || priority === void 0 ? void 0 : priority.type]);
+    return (react_1["default"].createElement("div", { className: props.bem.element('content') },
+        description && (react_1["default"].createElement(typography_1.Text, { type: "body", content: description, tag: "p" })),
+        !!(tags === null || tags === void 0 ? void 0 : tags.length) && (react_1["default"].createElement("div", { className: props.bem.element('row', 'tags') }, tags.map(toTags))),
+        react_1["default"].createElement("div", { className: props.bem.element('row') },
+            react_1["default"].createElement(typography_1.Text, { className: props.bem.element('label'), type: 'body3', content: __('Приоритет'), color: "light-dark" }),
+            react_1["default"].createElement("div", { className: props.bem.element('data') },
+                react_1["default"].createElement(content_1.Badge, { size: "md", roundingStyle: "squarer", message: priorityLabel, type: priorityColor }))),
+        assigner && (react_1["default"].createElement("div", { className: props.bem.element('row') },
+            react_1["default"].createElement(typography_1.Text, { className: props.bem.element('label'), type: 'body3', content: __('Исполнитель'), color: "light-dark" }),
+            react_1["default"].createElement("div", { className: props.bem.element('data') },
+                react_1["default"].createElement("div", { className: props.bem.element('assigner') },
+                    react_1["default"].createElement(content_1.Avatar, { src: (_a = assigner.avatar) === null || _a === void 0 ? void 0 : _a.src, title: assigner.firstName, size: 'sm' }),
+                    react_1["default"].createElement(typography_1.Text, { type: "body", content: "".concat(assigner.firstName || '', " ").concat(assigner.lastName || '') })))))));
+}
+exports["default"] = TaskDetailsModalContentView;

package/content/Kanban/views/KanbanModal/views/TaskDetailsModalContent/index.d.ts

@@ -0,0 +1,2 @@
+import TaskDetailsModalContentView from './TaskDetailsModalContentView';
+export default TaskDetailsModalContentView;

package/content/Kanban/views/KanbanModal/views/TaskDetailsModalContent/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var TaskDetailsModalContentView_1 = __importDefault(require("./TaskDetailsModalContentView"));
+exports["default"] = TaskDetailsModalContentView_1["default"];

package/content/Kanban/views/KanbanTask/KanbanTaskView.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { IKanbanTaskViewProps } from '@steroidsjs/core/ui/content/Kanban/Kanban';
+declare function KanbanTaskView(props: IKanbanTaskViewProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof KanbanTaskView>;
+export default _default;

package/content/Kanban/views/KanbanTask/KanbanTaskView.js

@@ -0,0 +1,66 @@
+"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);
+    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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+var Avatar_1 = __importDefault(require("@steroidsjs/core/ui/content/Avatar/Avatar"));
+var typography_1 = require("@steroidsjs/core/ui/typography");
+var TaskTags_1 = __importDefault(require("../TaskTags"));
+function KanbanTaskView(props) {
+    var bem = (0, hooks_1.useBem)('KanbanTaskView');
+    var _a = props.task, id = _a.id, title = _a.title, description = _a.description, tags = _a.tags, assigner = _a.assigner, priority = _a.priority;
+    var Draggable = props.draggableComponent;
+    return (react_1["default"].createElement(Draggable, { draggableId: id.toString(), index: props.index }, function (provided) {
+        var _a;
+        return (react_1["default"].createElement("div", __assign({ className: bem.block() }, provided.draggableProps, provided.dragHandleProps, { ref: provided.innerRef }),
+            react_1["default"].createElement("div", { className: bem.element('wrapper') },
+                react_1["default"].createElement("div", { className: bem.element('content') },
+                    react_1["default"].createElement("div", { className: bem.element('header') },
+                        react_1["default"].createElement("h4", { className: bem.element('title'), "aria-hidden": "true", onClick: function () { return props.onOpenTaskDetailsModal(props.task, props.columnId); } },
+                            react_1["default"].createElement("span", { className: bem.element('task-id') }, __("#".concat(id, " "))),
+                            title)),
+                    description && (react_1["default"].createElement(typography_1.Text, { type: 'body2', content: description, className: bem.element('description') }))),
+                react_1["default"].createElement("div", { className: bem.element('footer') },
+                    tags && (react_1["default"].createElement(TaskTags_1["default"], { tags: tags })),
+                    assigner && (react_1["default"].createElement("div", { className: bem.element('assigner') },
+                        react_1["default"].createElement(Avatar_1["default"], { src: (_a = assigner.avatar) === null || _a === void 0 ? void 0 : _a.src, title: "".concat(assigner.firstName, " ").concat(assigner.lastName), size: 'sm' }))))),
+            priority && (react_1["default"].createElement("span", { className: bem.element('priority', !!priority && "".concat(priority.type)) }))));
+    }));
+}
+exports["default"] = (0, react_1.memo)(KanbanTaskView);

package/content/Kanban/views/KanbanTask/KanbanTaskView.scss

@@ -0,0 +1,110 @@
+@use "../../../../scss/variables";
+
+:root {
+  --kanban-background-color: #fff;
+}
+
+html[data-theme="dark"] {
+  --kanban-background-color: #333646;
+}
+
+$kanban-background-color: var(--kanban-background-color);
+
+.KanbanTaskView {
+  $root: &;
+
+  position: relative;
+  display: flex;
+  flex-flow: column;
+  flex: 1 0 auto;
+  overflow: hidden;
+  height: fit-content;
+  width: 100%;
+  margin-bottom: 8px;
+  border-radius: variables.$radius-small;
+
+  &__wrapper {
+    border: 1px solid variables.$element-border-color;
+    border-radius: variables.$radius-small;
+    color: variables.$text-color;
+    background-color: $kanban-background-color;
+
+    position: relative;
+    display: flex;
+    flex-flow: column;
+    padding: 16px;
+  }
+
+  $card-priorities: (
+          "high": variables.$danger,
+          "middle": variables.$warning,
+  );
+
+  @each $priority, $color in $card-priorities {
+    &__priority_#{$priority} {
+      background-color: $color;
+    }
+  }
+
+  &__priority {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 4px;
+  }
+
+  &__content {
+    display: flex;
+    flex-flow: column nowrap;
+    row-gap: 8px;
+    font-size: 14px;
+  }
+
+  &__header {
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  &__title {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+
+    &:hover {
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  }
+
+  &__description {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  &__task-id {
+    color: variables.$element-placeholder-color;
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    margin-top: 16px;
+  }
+
+  &__assigner {
+    display: flex;
+    justify-content: flex-end;
+    flex-grow: 1;
+    min-width: 32px;
+    min-height: 32px;
+  }
+
+  .TextView {
+    margin: 0;
+  }
+}

package/content/Kanban/views/KanbanTask/index.d.ts

@@ -0,0 +1,2 @@
+import KanbanTaskView from './KanbanTaskView';
+export default KanbanTaskView;

package/content/Kanban/views/KanbanTask/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var KanbanTaskView_1 = __importDefault(require("./KanbanTaskView"));
+exports["default"] = KanbanTaskView_1["default"];

package/content/Kanban/views/TaskTags/TaskTags.d.ts

@@ -0,0 +1,9 @@
+import { ITaskTag } from '@steroidsjs/core/ui/content/Kanban/Kanban';
+import './TaskTags.scss';
+interface ITaskTagsProps {
+    tags: ITaskTag[];
+    showClose?: boolean;
+    onClose?: (id: number) => void;
+}
+export default function TaskTags(props: ITaskTagsProps): JSX.Element;
+export {};

package/content/Kanban/views/TaskTags/TaskTags.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var content_1 = require("@steroidsjs/core/ui/content");
+var hooks_1 = require("@steroidsjs/core/hooks");
+require("./TaskTags.scss");
+function TaskTags(props) {
+    var bem = (0, hooks_1.useBem)('TaskTags');
+    return (react_1["default"].createElement("div", { className: bem.block() }, props.tags.map(function (tag) { return (react_1["default"].createElement(content_1.Badge, { key: tag.id, size: "md", roundingStyle: "squarer", message: tag.message, type: tag.type, showClose: props.showClose, onClose: function () { return props.onClose(tag.id); } })); })));
+}
+exports["default"] = TaskTags;

package/content/Kanban/views/TaskTags/TaskTags.scss

@@ -0,0 +1,7 @@
+.TaskTags {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: flex-start;
+  flex-grow: 0;
+  gap: 4px;
+}

package/content/Kanban/views/TaskTags/index.d.ts

@@ -0,0 +1,2 @@
+import TaskTags from './TaskTags';
+export default TaskTags;

package/content/Kanban/views/TaskTags/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var TaskTags_1 = __importDefault(require("./TaskTags"));
+exports["default"] = TaskTags_1["default"];

package/content/Menu/MenuItemView.js

@@ -8,7 +8,10 @@ var react_1 = __importDefault(require("react"));
 var renderIcon_1 = __importDefault(require("../../utils/renderIcon"));
 function MenuItemView(props) {
     var bem = (0, hooks_1.useBem)('MenuItemView');
-    return (react_1["default"].createElement("div", { onClick: props.onClick, className: bem.block({ hasBorder: props.hasBorder, noneIcon: !props.icon }) },
+    return (react_1["default"].createElement("div", { onClick: props.onClick, className: bem.block({
+            hasBorder: props.hasBorder,
+            noneIcon: !props.icon
+        }) },
         props.icon && (0, renderIcon_1["default"])(props.icon, { className: bem.element('icon') }),
         react_1["default"].createElement("span", { className: bem.element('label') }, props.label)));
 }

package/form/CheckboxField/CheckboxFieldView.js

@@ -43,11 +43,14 @@ var useUniqueId_1 = __importDefault(require("@steroidsjs/core/hooks/useUniqueId"
 function CheckboxFieldView(props) {
     var bem = (0, hooks_1.useBem)('CheckboxFieldView');
     var id = (0, useUniqueId_1["default"])('checkbox');
+    var customVariableColorStyle = { '--checkbox-custom-color': props.color };
     return (React.createElement("div", { className: bem(bem.block({
             size: props.size,
             hasErrors: !!props.errors
-        }), props.className), style: props.style, onClick: props.onChange },
-        React.createElement("input", __assign({ className: bem.element('input'), id: props.id || id }, props.inputProps, { disabled: props.disabled, required: props.required })),
+        }), props.className), style: __assign(__assign({}, props.style), customVariableColorStyle), onClick: props.onChange },
+        React.createElement("input", __assign({ className: bem.element('input', {
+                hasCustomColor: !!props.color
+            }), id: props.id || id, disabled: props.disabled, required: props.required }, props.inputProps)),
         React.createElement("label", { className: bem.element('label'), htmlFor: props.id || id }, props.label && (React.createElement("span", { className: bem.element('label-text', { required: props.required }) }, props.label)))));
 }
 exports["default"] = CheckboxFieldView;

package/form/CheckboxField/CheckboxFieldView.scss

@@ -1,4 +1,5 @@
 @use "../../scss/variables";
+@use "sass:meta";
 
 :root {
     --disabled-text-color: rgba(0, 0, 0, 0.3);
@@ -92,6 +93,7 @@ $disabled-text-color: var(--disabled-text-color);
 
         &:checked:active + #{$root}__label::before {
             background-color: variables.$primary-light;
+
             border-color: transparent;
         }
 
@@ -104,6 +106,7 @@ $disabled-text-color: var(--disabled-text-color);
         &:checked + #{$root}__label::before {
             border-color: variables.$primary;
             background-color: variables.$primary;
+
             background-image: url("data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.20898 1L3.70898 7L1.20898 4.27273' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
         }
 
@@ -127,6 +130,29 @@ $disabled-text-color: var(--disabled-text-color);
         }
     }
 
+    &__input#{$root}__input_hasCustomColor {
+        //ACTIVE
+        &:not(:disabled):not(:checked):active + #{$root}__label::before {
+            border-color: var(--checkbox-custom-color);
+        }
+
+        &:checked:active + #{$root}__label::before {
+            background-color: var(--checkbox-custom-color);
+        }
+
+        //CHECKED
+        &:checked + #{$root}__label::before {
+            border-color: var(--checkbox-custom-color);
+            background-color: var(--checkbox-custom-color);
+        }
+
+        
+        //FOCUS
+        &:focus + #{$root}__label::after {
+            opacity: 0;
+        }
+    }
+
     &_size {
         &_lg {
             #{$root}__label {
@@ -196,6 +222,7 @@ $disabled-text-color: var(--disabled-text-color);
         }
     }
 }
+
 .has-errors label {
     &::before {
         border-color: variables.$danger;

package/form/CheckboxListField/CheckboxListFieldView.js

@@ -48,7 +48,8 @@ function CheckboxListFieldView(props) {
             },
             disabled: props.disabled
         },
-        size: props.size
+        size: props.size,
+        color: checkbox.color
     }); })));
 }
 exports["default"] = CheckboxListFieldView;

package/form/CheckboxTreeField/CheckboxTreeFieldView.d.ts

@@ -0,0 +1,2 @@
+import { ICheckboxTreeFieldViewProps } from '@steroidsjs/core/ui/form/CheckboxTreeField/CheckboxTreeField';
+export default function CheckboxTreeFieldView(props: ICheckboxTreeFieldViewProps): JSX.Element;

package/form/CheckboxTreeField/CheckboxTreeFieldView.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+var TreeItemView_1 = __importDefault(require("../../nav/TreeItem/TreeItemView"));
+function CheckboxTreeFieldView(props) {
+    var bem = (0, useBem_1["default"])('CheckboxTreeFieldView');
+    var prefix = (0, hooks_1.useUniqueId)('checkbox');
+    return (react_1["default"].createElement("div", { className: bem.block() }, props.items.map(function (checkbox) { return (react_1["default"].createElement(TreeItemView_1["default"], { key: checkbox.uniqueId, item: checkbox, levelPadding: props.levelPadding, hasIconExpandOnly: true }, props.renderCheckbox({
+        id: "".concat(prefix, "_").concat(checkbox.id),
+        label: checkbox.label,
+        inputProps: {
+            name: "".concat(prefix, "_").concat(checkbox.id),
+            type: 'checkbox',
+            checked: props.selectedIds.includes(checkbox.id),
+            onChange: function () {
+                props.onItemSelect(checkbox);
+            },
+            disabled: checkbox.disabled,
+            required: checkbox.required
+        },
+        size: props.size,
+        color: checkbox.color
+    }))); })));
+}
+exports["default"] = CheckboxTreeFieldView;

package/form/CheckboxTreeField/CheckboxTreeFieldView.scss

@@ -0,0 +1,5 @@
+.CheckboxTreeFieldView {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+}

package/form/CheckboxTreeField/index.d.ts

@@ -0,0 +1,2 @@
+import CheckboxTreeFieldView from './CheckboxTreeFieldView';
+export default CheckboxTreeFieldView;

package/form/CheckboxTreeField/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var CheckboxTreeFieldView_1 = __importDefault(require("./CheckboxTreeFieldView"));
+exports["default"] = CheckboxTreeFieldView_1["default"];

package/form/DateRangeField/DateRangeFieldView.js

@@ -54,8 +54,8 @@ function DateRangeFieldView(props) {
                 'is-invalid': !!props.errors
             }), props.className), style: props.style },
             React.createElement("div", { className: bem.element('body') },
-                React.createElement("input", __assign({}, props.inputPropsFrom, { className: bem(bem.element('input', {})), onChange: function (e) { return props.inputPropsFrom.onChange(e.target.value); } })),
-                React.createElement("input", __assign({}, props.inputPropsTo, { className: bem.element('input'), onChange: function (e) { return props.inputPropsTo.onChange(e.target.value); } })),
+                React.createElement("input", __assign({}, props.inputPropsFrom, { className: bem(bem.element('input', {})), onInput: function (e) { return props.inputPropsFrom.onChange(e.currentTarget.value); } })),
+                React.createElement("input", __assign({}, props.inputPropsTo, { className: bem.element('input'), onInput: function (e) { return props.inputPropsTo.onChange(e.currentTarget.value); } })),
                 React.createElement("div", { className: bem.element('icon-container') },
                     props.icon && !hasValue && (React.createElement(Icon_1["default"], { className: bem.element('date-icon'), name: typeof props.icon === 'string' ? props.icon : 'calendar_range', tabIndex: -1 })),
                     props.showRemove && hasValue && (React.createElement(Icon_1["default"], { className: bem.element('close-icon'), onClick: function (e) {

package/form/DateTimeField/DateTimeFieldView.js

@@ -61,7 +61,7 @@ function DateTimeFieldView(props) {
                         ? props.placeholder
                         : props.inputProps.placeholder, className: bem(bem.element('input', {
                         size: props.size
-                    }), props.isInvalid && 'is-invalid'), onChange: function (e) { return props.inputProps.onChange(e.target.value); } })),
+                    }), props.isInvalid && 'is-invalid'), onInput: function (e) { return props.inputProps.onChange(e.currentTarget.value); }, ref: props.maskInputRef })),
                 React.createElement("div", { className: bem.element('icon-container') },
                     !props.inputProps.value && props.icon && (React.createElement(Icon_1["default"], { className: bem.element('date-icon'), name: typeof props.icon === 'string' ? props.icon : 'calendar_range', tabIndex: -1 })),
                     props.showRemove && props.inputProps.value && (React.createElement(Icon_1["default"], { className: bem.element('close-icon'), onClick: function (e) {

package/form/DateTimeRangeField/DateTimeRangeFieldView.js

@@ -60,10 +60,10 @@ function DateTimeRangeFieldView(props) {
             React.createElement("div", { className: bem.element('body') },
                 React.createElement("input", __assign({}, props.inputPropsFrom, { className: bem(bem.element('input', {
                         size: props.size
-                    })), onChange: function (e) { return props.inputPropsFrom.onChange(e.target.value); } })),
+                    })), onInput: function (e) { return props.inputPropsFrom.onChange(e.currentTarget.value); } })),
                 React.createElement("input", __assign({}, props.inputPropsTo, { className: bem(bem.element('input', {
                         size: props.size
-                    }), !!props.errorsTo && 'is-invalid'), onChange: function (e) { return props.inputPropsTo.onChange(e.target.value); } })),
+                    }), !!props.errorsTo && 'is-invalid'), onInput: function (e) { return props.inputPropsTo.onChange(e.currentTarget.value); } })),
                 React.createElement("div", { className: bem.element('icon-container') },
                     props.icon && !hasValue && (React.createElement(Icon_1["default"], { className: bem.element('date-icon'), name: typeof props.icon === 'string' ? props.icon : 'calendar_range', tabIndex: -1 })),
                     props.showRemove && hasValue && (React.createElement(Icon_1["default"], { className: bem.element('close-icon'), onClick: function (e) {

package/form/DropDownField/DropDownFieldView.js

@@ -64,10 +64,11 @@ function DropDownFieldView(props) {
             _a["".concat(props.color)] = !!props.color && !props.outline,
             _a["outline_".concat(props.color)] = props.outline,
             _a.opened = props.isOpened,
-            _a)), props.className), onKeyPress: function (e) { return e.key === 'Enter' && props.onOpen(); }, style: props.style, role: "button", tabIndex: 0 },
+            _a['is-invalid'] = !!props.errors,
+            _a.disabled = props.disabled,
+            _a)), props.className), onKeyPress: function (e) { return e.key === 'Enter' && !props.disabled && props.onOpen(); }, style: props.style, role: "button", tabIndex: 0 },
         React.createElement("div", { className: bem.element('selected-items', {
-                reset: props.showReset,
-                disabled: props.disabled
+                reset: props.showReset
             }), onClick: props.onOpen, tabIndex: -1, role: 'button' },
             renderPlaceholder(),
             React.createElement("span", { className: bem.element('selected-items') }, props.showEllipses

package/form/DropDownField/DropDownFieldView.scss

@@ -419,8 +419,18 @@ $drop-down-color-themes: map.merge(
         right: 36px;
         transform: translateY(-50%);
 
-        path {
-            stroke-width: 1.5px;
+        svg > * {
+            stroke: variables.$text-color
         }
     }
+
+    &_is-invalid {
+        border: 1px solid variables.$danger !important;
+    }
+
+    &_disabled {
+        background-color: variables.$element-background-color-disabled;
+        border-color: transparent;
+        pointer-events: none;
+    }
 }

package/form/DropDownFieldItem/DropDownFieldItemView.js

@@ -65,7 +65,7 @@ function DropDownItemView(props) {
                     }), size: props.size, inputProps: {
                         disabled: false,
                         name: props.item.label,
-                        checked: null,
+                        checked: props.selectedIds.includes(uniqItemId),
                         onChange: function () { },
                         type: 'radio'
                     }, checked: props.selectedIds.includes(uniqItemId) })));

package/form/Form/FormView.js

@@ -61,6 +61,7 @@ function FormView(props) {
     return (React.createElement("form", { ref: formRef, className: bem(bem.block(), props.className), onSubmit: props.onSubmit, style: props.style },
         props.children,
         (props.fields || []).map(function (field, index) { return (React.createElement(Field_1["default"], __assign({ key: index }, ((0, isString_1["default"])(field) ? { attribute: field } : field)))); }),
+        props.buttons,
         props.submitLabel && (React.createElement(Button_1["default"], { type: 'submit', label: props.submitLabel }))));
 }
 exports["default"] = React.memo(FormView);

package/form/InputField/InputFieldView.js

@@ -69,10 +69,10 @@ function InputFieldView(props) {
             props.maskOptions
                 ? (React.createElement("input", __assign({ onBlur: props.onBlur, onFocus: props.onFocus, onMouseDown: props.onMouseDown, className: bem(bem.element('input', {
                         size: props.size
-                    })) }, props.inputProps, { type: props.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required, id: props.id, ref: props.inputRef })))
+                    })) }, props.inputProps, { type: props.inputProps.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required, id: props.id, ref: props.inputRef })))
                 : (React.createElement("input", __assign({ className: bem(bem.element('input', {
                         size: props.size
-                    })) }, props.inputProps, { type: props.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required, id: props.id, ref: props.inputRef }))),
+                    })) }, props.inputProps, { type: props.inputProps.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required, id: props.id, ref: props.inputRef }))),
             !props.disabled && props.showClear && !props.maskProps && (React.createElement(Icon_1["default"], { name: "cross_8x8", className: bem.element('icon-clear'), tabIndex: -1, onClick: props.onClear }))),
         props.textAfter && (React.createElement("span", { className: bem.element('text-after') }, props.textAfter)),
         props.addonAfter && (React.createElement("span", { className: bem.element('addon-after') }, props.addonAfter))));

package/form/PasswordField/PasswordFieldView.js

@@ -51,7 +51,7 @@ function PasswordFieldView(props) {
         React.createElement("div", { className: bem.element('container', {
                 disabled: props.inputProps.disabled
             }) },
-            React.createElement("input", __assign({ className: bem.element('input') }, props.inputProps, { id: props.id })),
+            React.createElement("input", __assign({ className: bem.element('input') }, props.inputProps, { id: props.id, required: props.required })),
             props.showSecurityIcon && (React.createElement("span", { className: bem(bem.element('icon-eye', {
                     viewHide: props.inputProps.type === PasswordField_1.InputType.PASSWORD
                 })), onClick: props.onShowButtonClick },

package/form/WizardForm/WizardFormView.d.ts

@@ -0,0 +1,2 @@
+import { IWizardFormViewProps } from '@steroidsjs/core/ui/form/WizardForm/WizardForm';
+export default function WizardFormView(props: IWizardFormViewProps): JSX.Element;

package/form/WizardForm/WizardFormView.js

@@ -0,0 +1,33 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var Steps_1 = __importDefault(require("@steroidsjs/core/ui/list/Steps/Steps"));
+var form_1 = require("@steroidsjs/core/ui/form");
+var TitleView_1 = __importDefault(require("../../typography/Title/TitleView"));
+function WizardFormView(props) {
+    var _a;
+    var bem = (0, useBem_1["default"])('WizardFormView');
+    return (props.renderStep(react_1["default"].createElement("div", { className: bem.element('header') },
+        props.showSteps && (react_1["default"].createElement(Steps_1["default"], __assign({}, props.stepsProps, { className: bem.element('steps'), stepItems: (_a = props.stepItems) !== null && _a !== void 0 ? _a : props.totalSteps, currentStep: props.currentStep }))),
+        props.stepTitle && (react_1["default"].createElement(TitleView_1["default"], { type: 'h3', content: props.stepTitle, className: bem.element('title') }))), react_1["default"].createElement("div", { className: bem.element('buttons') },
+        props.currentStep > 0 && (react_1["default"].createElement(form_1.Button, __assign({}, props.prevStepButtonProps, { onClick: props.onPrevStep }))),
+        react_1["default"].createElement(form_1.Button, __assign({ type: 'submit' }, props.nextStepButtonProps))), {
+        className: bem.block()
+    }));
+}
+exports["default"] = WizardFormView;