@steroidsjs/bootstrap 3.0.0-beta.125 → 3.0.0-beta.126

package/form/CheckboxField/CheckboxFieldView.js

@@ -50,7 +50,7 @@ function CheckboxFieldView(props) {
         }), 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 }, props.inputProps, { disabled: props.disabled, required: props.required })),
+            }), 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/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/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/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/index.d.ts

@@ -83,6 +83,9 @@ declare const _default: {
     'form.CheckboxListFieldView': {
         lazy: () => any;
     };
+    'form.CheckboxTreeFieldView': {
+        lazy: () => any;
+    };
     'form.DateFieldView': {
         lazy: () => any;
     };

package/index.js

@@ -86,6 +86,9 @@ exports["default"] = {
     'form.CheckboxListFieldView': {
         lazy: function () { return require('./form/CheckboxListField/CheckboxListFieldView')["default"]; }
     },
+    'form.CheckboxTreeFieldView': {
+        lazy: function () { return require('./form/CheckboxTreeField/CheckboxTreeFieldView')["default"]; }
+    },
     'form.DateFieldView': {
         lazy: function () { return require('./form/DateField/DateFieldView')["default"]; }
     },

package/index.scss

@@ -37,6 +37,7 @@
 @include meta.load-css('form/Button/ButtonView');
 @include meta.load-css('form/CheckboxField/CheckboxFieldView');
 @include meta.load-css('form/CheckboxListField/CheckboxListFieldView');
+@include meta.load-css('form/CheckboxTreeField/CheckboxTreeFieldView');
 @include meta.load-css('form/DateField/DateFieldView');
 @include meta.load-css('form/DateRangeField/DateRangeFieldView');
 @include meta.load-css('form/DateTimeField/DateTimeFieldView');

package/list/Grid/views/TreeColumnView/TreeColumnView.js

@@ -22,6 +22,6 @@ function TreeColumnView(props) {
     var bem = (0, hooks_1.useBem)('TreeColumnView');
     var renderFormat = function () { return (react_1["default"].createElement(Format_1["default"], __assign({}, props, (props.formatter || {}), { attribute: props.attribute }))); };
     var renderValue = function () { return (react_1["default"].createElement("span", { className: bem.element('value') }, renderFormat())); };
-    return (react_1["default"].createElement(TreeItemView_1["default"], { item: props.item, levelPadding: props.levelPadding, className: bem.block() }, renderValue()));
+    return (react_1["default"].createElement(TreeItemView_1["default"], { item: props.item, levelPadding: props.levelPadding }, renderValue()));
 }
 exports["default"] = TreeColumnView;

package/list/Grid/views/TreeColumnView/TreeColumnView.scss

@@ -1,7 +1,4 @@
 .TreeColumnView {
-  &__value {
-    margin-left: 8px;
-  }
 }
 
 .TreeColumnHeader {

package/nav/TreeItem/TreeItemView.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);
@@ -29,22 +40,30 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
 var content_1 = require("@steroidsjs/core/ui/content");
+var react_1 = require("react");
 var PADDING_WITH_ICON = 0;
 var PADDING_WITHOUT_ICON = 24;
 function TreeItemView(props) {
     var bem = (0, useBem_1["default"])('TreeItemView');
     var paddingBasedOnIcon = props.item.hasItems ? PADDING_WITH_ICON : PADDING_WITHOUT_ICON;
-    return (React.createElement("div", { key: props.item.uniqueId, className: bem(bem.block({
+    var onExpandProps = (0, react_1.useMemo)(function () { return ({
+        onClick: props.item.onClick,
+        onKeyDown: function (e) { return e.key === 'Enter' && props.item.onClick(e); },
+        role: 'button',
+        tabIndex: 0
+    }); }, [props.item]);
+    return (React.createElement("div", __assign({ key: props.item.uniqueId, className: bem(bem.block({
             selected: props.item.isSelected,
             opened: props.item.isOpened,
             'has-items': props.item.hasItems,
-            level: props.item.level
+            level: props.item.level,
+            disabled: props.item.disabled
         }), props.className), style: {
             paddingLeft: "".concat(props.item.level * props.levelPadding + paddingBasedOnIcon, "px")
-        }, onClick: props.item.onClick, onKeyDown: function (e) { return e.key === 'Enter' && props.item.onClick(e); }, role: 'button', tabIndex: 0 },
-        props.item.hasItems && (React.createElement(content_1.Icon, { name: 'expand_right', className: bem.element('icon', {
+        } }, (!props.hasIconExpandOnly && onExpandProps)),
+        props.item.hasItems && (React.createElement(content_1.Icon, __assign({ name: 'expand_right', className: bem.element('icon', {
                 opened: props.item.isOpened
-            }), tabIndex: -1 })),
+            }) }, (props.hasIconExpandOnly && onExpandProps)))),
         React.createElement("div", { className: bem.element('item') }, props.children)));
 }
 exports["default"] = TreeItemView;

package/nav/TreeItem/TreeItemView.scss

@@ -11,6 +11,8 @@ html[data-theme="dark"] {
 $grid-icon-color: var(--grid-icon-color);
 
 .TreeItemView {
+  $root: &;
+
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
@@ -21,6 +23,23 @@ $grid-icon-color: var(--grid-icon-color);
     cursor: pointer;
   }
 
+  &_disabled {
+    cursor: not-allowed;
+
+    #{$root}__icon {
+      pointer-events: none;
+
+      svg > * {
+          stroke: var(--disabled-text-color);
+      }
+    }
+  }
+
+  &__item {
+    display: flex;
+    margin-left: 8px;
+  }
+
   &__icon {
     transform: rotate(0);
     transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
@@ -29,10 +48,8 @@ $grid-icon-color: var(--grid-icon-color);
       transform: rotate(90deg);
     }
 
-    svg {
-      > * {
+    svg > * {
         stroke: $grid-icon-color;
-      }
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.125",
+    "version": "3.0.0-beta.126",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -37,7 +37,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.108",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.111",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",