@steroidsjs/bootstrap 3.0.4 → 3.0.5

package/form/CheckboxField/CheckboxFieldView.js

@@ -51,6 +51,8 @@ function CheckboxFieldView(props) {
         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)))));
+        React.createElement("label", { className: bem.element('label', {
+                'has-label-only': !props.id
+            }), 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

@@ -146,7 +146,6 @@ $disabled-text-color: var(--disabled-text-color);
             background-color: var(--checkbox-custom-color);
         }
 
-        
         //FOCUS
         &:focus + #{$root}__label::after {
             opacity: 0;
@@ -232,3 +231,35 @@ $disabled-text-color: var(--disabled-text-color);
         color: variables.$danger;
     }
 }
+
+.CheckboxFieldView:has(.CheckboxFieldView__label_has-label-only) .CheckboxFieldView {
+    $root: &;
+
+    &__label {
+        &::before,
+        &::after {
+            display: none;
+        }
+
+        &-text {
+            margin-left: 0 !important;
+        }
+    }
+
+    &_size {
+        &_sm, &_md, &_lg {
+            #{$root}__label {
+                &::before {
+                    display: none;
+                }
+                &::after {
+                    display: none;
+                }
+
+                #{$root}__label-text {
+                    margin-left: 0;
+                }
+            }
+        }
+    }
+}

package/form/CheckboxTreeField/CheckboxTreeFieldView.js

@@ -10,8 +10,8 @@ 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),
+    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, onNestedItemClick: function () { return props.onItemSelect(checkbox); }, hasIconExpandOnly: !props.hasOnlyLeafCheckboxes && checkbox.hasItems, withoutPointerOnLabel: props.hasOnlyLeafCheckboxes && checkbox.hasItems }, props.renderCheckbox({
+        id: props.hasOnlyLeafCheckboxes && checkbox.hasItems ? null : "".concat(prefix, "_").concat(checkbox.id),
         label: checkbox.label,
         inputProps: {
             name: "".concat(prefix, "_").concat(checkbox.id),

package/form/CheckboxTreeField/CheckboxTreeFieldView.scss

@@ -3,3 +3,9 @@
   flex-flow: column nowrap;
   gap: 8px;
 }
+
+.CheckboxTreeFieldView:has(.TreeItemView_without-pointer-on-label) .TreeItemView_without-pointer-on-label {
+  .CheckboxFieldView__label {
+    cursor: default;
+  }
+}

package/nav/TreeItem/TreeItemView.js

@@ -47,18 +47,24 @@ function TreeItemView(props) {
     var bem = (0, useBem_1["default"])('TreeItemView');
     var paddingBasedOnIcon = props.item.hasItems ? PADDING_WITH_ICON : PADDING_WITHOUT_ICON;
     var onExpandProps = (0, react_1.useMemo)(function () { return ({
-        onClick: props.item.onClick,
+        onClick: function (e) {
+            props.item.onClick(e);
+            if (!props.hasIconExpandOnly && props.onNestedItemClick) {
+                props.onNestedItemClick();
+            }
+        },
         onKeyDown: function (e) { return e.key === 'Enter' && props.item.onClick(e); },
         role: 'button',
         tabIndex: 0
-    }); }, [props.item]);
+    }); }, [props]);
     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 || props.hideIcon,
+            'has-items': !props.hasIconExpandOnly && (props.item.hasItems || props.hideIcon),
             level: props.item.level,
             disabled: props.item.disabled,
-            'hide-icon': props.hideIcon
+            'hide-icon': props.hideIcon,
+            'without-pointer-on-label': props.hasIconExpandOnly && props.withoutPointerOnLabel
         }), props.className), style: {
             paddingLeft: !props.hideIcon && "".concat(props.item.level * props.levelPadding + paddingBasedOnIcon, "px")
         } }, (!props.hasIconExpandOnly && onExpandProps)),

package/nav/TreeItem/TreeItemView.scss

@@ -52,7 +52,7 @@ $grid-icon-color: var(--grid-icon-color);
   &__icon {
     min-width: 24px;
     min-height: 24px;
-
+    cursor: pointer;
     transform: rotate(0);
     transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.4",
+    "version": "3.0.5",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -35,7 +35,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0.4",
+        "@steroidsjs/core": "^3.0.5",
         "@steroidsjs/eslint-config": "^2.1.6",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",